/* ============================================================
   BuildX Footer Styles
   ============================================================ */

.footer {
    background: #000000;
    color: #FFFFFF;
    padding: 50px 0 0;
    position: relative;
    z-index: 2;
}

.footer a {
    color: #ccc;
    transition: color 0.2s;
}

.footer a:hover {
    color: #F5A623;
}

/* ── Top: Logo + CTA buttons ────────────────────────────────── */
.footer__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__logo img {
    height: 56px;
    width: auto;
}

.footer__cta-area {
    display: flex;
    gap: 12px;
}

/* ── Columns: Offices + Hours ───────────────────────────────── */
.footer__columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding: 40px 0;
}

@media (max-width: 1024px) {
    .footer__columns {
        grid-template-columns: 1fr 1fr;
    }
}

.footer__heading {
    font-size: 1.125rem;
    font-weight: 700;
    color: #F5A623;
    margin-bottom: 16px;
}

.footer__address {
    font-size: 0.9375rem;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 8px;
}

.footer__phone {
    font-size: 0.9375rem;
}

.footer__phone a {
    color: #FFFFFF;
    font-weight: 500;
}

/* Get Directions link (2026-09-04, GBP audit A2).
   Sits directly under the phone number in each office column so the three ways to
   reach an office -- read it, call it, drive to it -- are one visual group.
   Gold rather than white so it reads as an action, matching the heading color
   already used in this footer. */
.footer__directions {
    font-size: 0.9375rem;
    margin-top: 6px;
}

.footer__directions a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #F5A623;
    font-weight: 600;
    text-decoration: none;
}

.footer__directions a:hover,
.footer__directions a:focus-visible {
    text-decoration: underline;
}

.footer__directions-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* Screen-reader-only text. Defined HERE because footer.css is sitewide while the
   existing .sr-only lived only in city.css, which is page-scoped -- so without
   this the words "to the Carver office" would have rendered VISIBLY on every page
   of the site. Caught before deploy by checking which stylesheet actually loads. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.footer__hours {
    font-size: 0.9375rem;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 2px;
}

.footer__hours--emergency {
    margin-top: 12px;
    font-weight: 500;
    color: #FFFFFF;
}

.footer__email {
    font-size: 0.9375rem;
    margin-bottom: 8px;
}

.footer__email a {
    color: #FFFFFF;
    font-weight: 500;
    word-break: break-word;
}

.footer__response-time {
    font-size: 0.9375rem;
    color: #ccc;
    line-height: 1.6;
}

/* -- Licensing line (added 2026-08-07, checklist 0.7) ---------------
   Credential numbers were machine-readable in JSON-LD but invisible to human
   visitors sitewide. Sits above the copyright row: quiet, but not dimmer than
   the copyright it sits above -- a license number is a trust signal, not fine
   print. */
.footer__licensing {
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__licensing p {
    font-size: 0.8125rem;
    line-height: 1.7;
    color: #8a8a8a;
    margin: 0;
}

.footer__licensing strong {
    color: #ccc;
    font-weight: 600;
}

/* The copyright row draws its own top border; with the licensing block above
   it that would double up, so the border lives on the licensing block. */
.footer__licensing + .footer__bottom {
    border-top: none;
    padding-top: 12px;
}

@media (max-width: 600px) {
    .footer__licensing p {
        font-size: 0.75rem;
        line-height: 1.6;
    }
}

/* ── Bottom: Copyright + Social ─────────────────────────────── */
.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8125rem;
    color: #595959;
    flex-wrap: wrap;
    gap: 16px;
}

.footer__bottom a {
    color: #595959;
}

.footer__bottom a:hover {
    color: #F5A623;
}

.footer__bottom-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer__bottom-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer__sep {
    color: #555;
}

.footer__social {
    display: flex;
    gap: 12px;
}

.footer__social-link {
    color: #595959;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}

.footer__social-link:hover {
    color: #F5A623;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .footer__top {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer__cta-area {
        flex-direction: column;
        width: 100%;
    }

    .footer__cta-area .btn {
        width: 100%;
    }

    .footer__columns {
        /* Carver + Hanover sit side-by-side on mobile; Hours + Email stay full width */
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    /* Business Hours (3rd) and Email Us (4th) span the full width, stacked below the two offices */
    .footer__columns .footer__col:nth-child(3),
    .footer__columns .footer__col:nth-child(4) {
        grid-column: 1 / -1;
    }

    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer__bottom-right {
        flex-direction: column;
    }

    .footer__bottom-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}