/* ============================================================================
   Footer — markup: app/views/partials/footer.php
   ========================================================================== */

.footer {
    background: var(--ink-900);
    color: var(--ink-300);
}

.footer__inner {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: var(--s-8) var(--s-6);
    padding-block: var(--s-10) var(--s-8);
}

.footer__logo { display: inline-block; color: var(--c-white); }
.footer__logo__img { display: block; }
.footer__logo__fallback {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 800;
    letter-spacing: var(--ls-tight);
    color: var(--c-white);
}

.footer__tagline {
    margin-top: var(--s-5);
    max-width: 30ch;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--c-white);
}

.footer__social {
    display: flex;
    gap: var(--s-3);
    margin-top: var(--s-6);
}
.footer__social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--ink-300);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    transition: color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                background var(--dur) var(--ease);
}
.footer__social a:hover {
    color: var(--c-white);
    background: var(--c-gold);
    border-color: var(--c-gold);
}

.footer__heading {
    margin-bottom: var(--s-5);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--c-gold);
}

.footer__col li + li { margin-top: var(--s-3); }

.footer__col a {
    font-size: var(--fs-sm);
    color: var(--ink-300);
    transition: color var(--dur) var(--ease);
}
.footer__col a:hover { color: var(--c-white); }

/* ---------------------------------------------------------------- contact */
.footer__contact address {
    display: grid;
    gap: var(--s-4);
    font-size: var(--fs-sm);
}
.footer__contact a,
.footer__address,
.footer__hours {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a long email address is one unbreakable word,
       and a bare 1fr track refuses to shrink below it, blowing the column out
       in the narrow mobile layout. */
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--s-3);
    line-height: var(--lh-snug);
}
.footer__contact .icon {
    color: var(--c-gold);
    margin-top: 2px;
}

/* ---------------------------------------------------------------- bottom bar */
.footer__bottom { border-top: 1px solid var(--border-dark); }

.footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-5);
    font-size: var(--fs-xs);
}

.footer__legal { display: flex; gap: var(--s-5); }
.footer__legal a { transition: color var(--dur) var(--ease); }
.footer__legal a:hover { color: var(--c-white); }

@media (max-width: 1099px) {
    .footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 639px) {
    /*
     * Two columns on a phone rather than one long stack, which made the footer
     * enormous to scroll past.
     *
     *   Company      |  Services
     *   Get in Touch |  Explore
     *
     * DOM order is Company, Services, Explore, Get in Touch, so the last two
     * are swapped with `order`. They are targeted by their id modifier class,
     * not by child position, so adding a column in config/nav.php cannot
     * silently rearrange this.
     */
    .footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-7) var(--s-5);
    }

    .footer__brand { grid-column: 1 / -1; }

    .footer__contact       { order: 1; }
    .footer__col--explore  { order: 2; }

    /* Long email addresses have to be allowed to break in a ~140px column,
       otherwise they push the whole page sideways. */
    .footer__contact address { word-break: break-word; }

    .footer__bar {
        justify-content: center;
        text-align: center;
        /* The floating WhatsApp button sits in the bottom-right corner and was
           covering the copyright line. This keeps the last row clear of it. */
        padding-bottom: calc(var(--s-5) + 62px);
    }

    /*
     * Touch targets. These links are 18-23px tall on a phone, well under the
     * ~44px a fingertip needs. Padding widens the tappable area without
     * changing how the footer looks, and the negative margin on the last item
     * keeps the column spacing visually the same as before.
     */
    .footer__col li + li { margin-top: 0; }

    /*
     * :not(.footer__contact) matters — the contact column's links are grids of
     * icon + text, and setting display:block on them drops the icon onto its
     * own line.
     *
     * line-height is pulled in from the body's 1.65, which is right for reading
     * paragraphs and far too airy for a list of short links: it alone put 23px
     * on a 14px label, and a wrapped item like "Residential Development" came
     * out 70px tall. Snug line-height plus a smaller pad keeps a comfortable
     * tap area without the list drifting apart.
     */
    .footer__col:not(.footer__contact) a {
        display: block;
        padding-block: var(--s-2);
        line-height: var(--lh-snug);
    }

    .footer__contact address { gap: var(--s-3); }

    .footer__contact a,
    .footer__address,
    .footer__hours { padding-block: var(--s-1); }

    .footer__legal { gap: var(--s-2); }
    .footer__legal a {
        display: inline-block;
        padding: var(--s-3) var(--s-4);
    }
}