/* ===========================================
   Footer Module — token-bound (W1-A7 rewrite)
   BEM naming: site-footer__*
   Re-authored against --ds-* canonical tokens (warm clay/ember palette)
   replacing the prior cool-slate hardcoded hex literals.
   Footer is on every page; harmonizes with the design-system tokens
   so per-deployment overrides (header_raw, --ds-* in user/<host>/...)
   reach the footer automatically.
   =========================================== */

/* ---- Footer Container ---- */
/* T4-FOOTER (2026-05-08): polished padding to clamp(48px,8vh,80px) y / clamp(20px,5vw,64px) x
   so mobile no longer relies on Bootstrap's 15px gutter alone, and desktop breathes more.
   Tokens preserved (--ds-ink bg, --ds-cream fg, --ds-rule-dark divider).
   Specificity boost (footer.site-footer + padding-inline) is intentional: cro-base.css
   defines a competing `footer.site-footer { padding-inline: clamp(16px,5vw,32px) }` rule
   for the universal mobile-edge fix; we want the footer-specific clamp to win on
   desktop while staying ≥20px on mobile (still clears the 16px floor). */
footer.site-footer.site-footer {
    /* WAVE45-H1 HOTFIX 2026-05-08: regression repair of the WAVE3-F01 Pattern-B
       attempt. The previous version chained `--scheme-bg: var(--ds-ink)` and
       `--scheme-fg: var(--ds-cream)` ABOVE a same-selector `--ds-ink: var(--ds-cream)`
       rebind. Per CSS custom-property cascade resolution, all declarations in a
       single selector resolve against the FINAL value of every custom property
       in that selector — so --ds-ink resolved to cream, --scheme-bg collapsed to
       cream, and `background: var(--scheme-bg)` painted cream-on-cream (1.0:1
       contrast on every page, ~1470 critical violations site-wide).

       The footer is intentionally a fixed dark surface (deep ink with cream
       text) on every page, regardless of parent section scheme. We do NOT
       want it to track parent scheme. Two-part defensive fix:
         1) Scheme tokens declared with LITERAL hex (no var() chains that
            could be poisoned by a same-selector rebind).
         2) background-color + color also use LITERAL hex — uncacheable for
            any future cascade trick.
       The legacy --ds-ink/--ds-paper rebind is kept (now also literal) so
       descendants reading raw --ds-ink see cream and descendants reading
       --ds-paper see ink, but the footer's own paint no longer depends on
       resolution order of those tokens. */
    --scheme-bg: #0e1e33;
    --scheme-fg: #fbf6eb;
    --scheme-fg-soft: rgba(255, 247, 227, 0.85);
    --scheme-fg-mute: rgba(255, 247, 227, 0.65);
    --scheme-rule: rgba(255, 247, 227, 0.12);
    --scheme-card-bg: rgba(255, 255, 255, 0.04);
    /* Descendants expecting raw --ds-ink should now see cream (because the
       footer paints them onto a dark bg) and --ds-paper should see ink. */
    --ds-ink: #fbf6eb;
    --ds-ink-soft: rgba(255, 247, 227, 0.85);
    --ds-ink-mute: rgba(255, 247, 227, 0.65);
    --ds-paper: #0e1e33;

    /* LITERAL hex paint — does NOT chain through any rebinder. */
    background-color: #0e1e33;
    color: #fbf6eb;
    padding-block: clamp(48px, 8vh, 80px);
    padding-inline: clamp(20px, 5vw, 64px);
    border-top: 1px solid rgba(255, 247, 227, 0.12);
    font-size: var(--ds-fs-body-sm);
    font-family: var(--ds-font-body);
    line-height: 1.6;
}

/* T4-FOOTER: the inner Bootstrap .container would otherwise add another 15px gutter
   AND cap at 1140px; override for the footer to a clean 1280px content max with no
   extra inline padding (the wrapper above already pads). */
.site-footer > .container {
    max-width: 1280px;
    width: 100%;
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
}

.site-footer a {
    color: color-mix(in srgb, var(--ds-cream) 75%, transparent);
    text-decoration: none;
    transition: color var(--ds-duration) var(--ds-ease-out);
}

.site-footer a:hover {
    color: var(--ds-cream);
}

/* ---- Columns Grid ----
   T4-FOOTER: switched to auto-fit/minmax(200px,1fr) with clamp gap so columns
   collapse 1-up on narrow viewports and re-flow at every breakpoint without
   needing 3 explicit media queries. */
.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(32px, 4vw, 64px);
    margin-bottom: 48px;
}

/* ---- Column Base ---- */
.site-footer__col {
    display: flex;
    flex-direction: column;
}

/* ---- Headings ----
   F2 changed h4 → h3 (heading hierarchy fix). T4-FOOTER tunes the visual size
   to a calmer 1rem / 600 / 0.06em — was 0.72rem (--ds-fs-eyebrow) which felt
   too small now that surrounding columns have more breathing room. */
.site-footer__heading {
    color: var(--ds-cream);
    font-family: var(--ds-font-mono);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

/* ===========================================
   Column 1: Brand
   =========================================== */
.site-footer__logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--ds-space-3);
}

.site-footer__logo-img {
    max-height: 45px;
    width: auto;
    filter: brightness(0) invert(1);
}

.site-footer__logo-text {
    color: var(--ds-cream);
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-display-sm);
    font-weight: 700;
    letter-spacing: 0.005em;
}

.site-footer__tagline {
    color: color-mix(in srgb, var(--ds-cream) 65%, transparent);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    margin: 0 0 var(--ds-space-4);
    font-weight: 500;
}

/* Trust Badges */
.site-footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    margin-bottom: var(--ds-space-5);
}

.site-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-1) var(--ds-space-3);
    background: color-mix(in srgb, var(--ds-cream) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--ds-cream) 12%, transparent);
    border-radius: var(--ds-radius-sm);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-eyebrow);
    color: color-mix(in srgb, var(--ds-cream) 72%, transparent);
    transition: background var(--ds-duration) var(--ds-ease-out),
                border-color var(--ds-duration) var(--ds-ease-out),
                color var(--ds-duration) var(--ds-ease-out);
}

.site-footer__badge:hover {
    background: color-mix(in srgb, var(--ds-cream) 12%, transparent);
    border-color: color-mix(in srgb, var(--ds-cream) 22%, transparent);
    color: var(--ds-cream);
}

.site-footer__badge i {
    font-size: 0.65rem;
    color: var(--ds-cta);
}

/* Stat Badges */
.site-footer__badge--stat {
    background: color-mix(in srgb, var(--ds-cta) 10%, transparent);
    border-color: color-mix(in srgb, var(--ds-cta) 22%, transparent);
}

.site-footer__badge--stat:hover {
    background: color-mix(in srgb, var(--ds-cta) 18%, transparent);
    border-color: color-mix(in srgb, var(--ds-cta) 36%, transparent);
}

.site-footer__stat-val {
    font-weight: 700;
    color: var(--ds-cta);
}

/* Social Icons
   F2 (2026-05-08): bumped tap target from 22×22 → ≥48×48 per A4 audit (every page).
   Visual SVG remains ~22px; the surrounding <a> grows via padding to meet AARP/touch floor. */
.site-footer__social {
    display: flex;
    gap: var(--ds-space-2);
    margin-top: auto;
    padding-top: var(--ds-space-2);
    flex-wrap: wrap;
}

.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* F2: ≥48×48 hit area (was 22×22). */
    min-width: var(--ds-touch-target-secondary, 48px);
    min-height: var(--ds-touch-target-secondary, 48px);
    padding: 12px;
    border-radius: var(--ds-radius-sm, 8px);
    opacity: 0.7;
    transition: opacity var(--ds-duration) var(--ds-ease-out),
                background var(--ds-duration) var(--ds-ease-out);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, var(--ds-cream) 8%, transparent);
    outline: none;
}

.site-footer__social-link:focus-visible {
    box-shadow: 0 0 0 2px var(--ds-cta);
}

.site-footer__social-icon {
    height: 1.4rem;
    width: 1.4rem;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

/* ===========================================
   Column 2: Contact Info
   =========================================== */
.site-footer__contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
}

.site-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-3);
    font-size: var(--ds-fs-body-sm);
    color: color-mix(in srgb, var(--ds-cream) 65%, transparent);
}

.site-footer__contact-item i {
    color: var(--ds-cta);
    margin-top: 0.2rem;
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.site-footer__contact-item a {
    color: color-mix(in srgb, var(--ds-cream) 65%, transparent);
}

.site-footer__contact-item a:hover {
    color: var(--ds-cream);
}

/* Phone emphasis for CRO */
.site-footer__contact-item--phone .site-footer__phone-link {
    font-size: var(--ds-fs-body-lg);
    font-weight: 600;
    color: var(--ds-cream);
}

.site-footer__contact-item--phone .site-footer__phone-link:hover {
    color: var(--ds-cta);
}

/* ===========================================
   Column 3: Navigation Links
   =========================================== */
.site-footer__links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ds-space-5);
}

@media (max-width: 768px) {
    .site-footer__links-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .site-footer__links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.site-footer__link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0; /* T4-FOOTER: link rows now self-space via 6px y-padding */
}

/* T4-FOOTER: per-spec link rhythm — block links, 6px vertical padding,
   75 % cream on ink, 0.9375rem at 1.5 line-height. */
.site-footer__link-list li a {
    display: block;
    padding: 6px 0;
    color: color-mix(in srgb, var(--ds-cream) 75%, transparent);
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: color var(--ds-duration) var(--ds-ease-out);
}

.site-footer__link-list li a:hover,
.site-footer__link-list li a:focus-visible {
    color: var(--ds-cream);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ===========================================
   Column 4: CTA / Newsletter
   =========================================== */
.site-footer__cta-subtitle {
    color: color-mix(in srgb, var(--ds-cream) 65%, transparent);
    font-size: var(--ds-fs-body-sm);
    margin: 0 0 var(--ds-space-4);
}

/* CTA Button */
.site-footer__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3) var(--ds-space-5);
    min-height: var(--ds-touch-target-primary, 56px);
    background: var(--ds-cta);
    /* WAVE3-F01 2026-05-08: literal #fff → --ds-cta-fg token so a future
       theme override can reach the CTA foreground. Doctrine anti-pattern row 2. */
    color: var(--ds-cta-fg, #fff) !important;
    border: none;
    border-radius: var(--ds-radius-sm);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--ds-shadow-cta);
    transition: background var(--ds-duration) var(--ds-ease-out),
                transform var(--ds-duration-fast) var(--ds-ease-out),
                box-shadow var(--ds-duration) var(--ds-ease-out);
    cursor: pointer;
}

.site-footer__cta-btn:hover {
    background: var(--ds-cta-dk);
    /* WAVE3-F01: literal #fff → --ds-cta-fg token. */
    color: var(--ds-cta-fg, #fff) !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--ds-cta) 45%, transparent);
}

.site-footer__cta-btn:active {
    background: var(--ds-cta-dk);
    transform: translateY(0);
}

/* Newsletter Form
   T4-FOOTER: per-spec — input + button both 48px tall (was ~44px). Button
   inherits the .btn-primary aesthetic (cta bg, cta-dk hover, white text,
   box-shadow) so the footer CTA matches the rest of the site. */
.site-footer__newsletter-group {
    display: flex;
    gap: 0;
    max-width: 360px;
}

.site-footer__newsletter-input {
    flex: 1;
    min-height: 48px;
    padding: 0 var(--ds-space-4);
    border: 1px solid color-mix(in srgb, var(--ds-cream) 18%, transparent);
    border-right: none;
    border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm);
    background: color-mix(in srgb, var(--ds-cream) 6%, transparent);
    color: var(--ds-cream);
    font-family: var(--ds-font-body);
    font-size: 0.9375rem;
}

.site-footer__newsletter-input::placeholder {
    color: color-mix(in srgb, var(--ds-cream) 42%, transparent);
}

.site-footer__newsletter-input:focus {
    outline: none;
    border-color: var(--ds-cta);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-cta) 35%, transparent);
}

.site-footer__newsletter-btn {
    min-height: 48px;
    min-width: 48px;
    padding: 0 var(--ds-space-4);
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
    border: none;
    background: var(--ds-cta);
    /* WAVE3-F01 2026-05-08: literal #fff → --ds-cta-fg token. */
    color: var(--ds-cta-fg, #fff);
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--ds-shadow-cta);
    transition: background var(--ds-duration) var(--ds-ease-out),
                transform var(--ds-duration-fast, 120ms) var(--ds-ease-out);
}

.site-footer__newsletter-btn:hover {
    background: var(--ds-cta-dk);
    transform: translateY(-1px);
}

/* Secondary CTA */
.site-footer__secondary-cta {
    margin-top: var(--ds-space-4);
}

.site-footer__secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    border: 1px solid color-mix(in srgb, var(--ds-cream) 22%, transparent);
    color: color-mix(in srgb, var(--ds-cream) 72%, transparent) !important;
    background: transparent;
    padding: var(--ds-space-2) var(--ds-space-4);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    border-radius: var(--ds-radius-sm);
    text-decoration: none;
    transition: border-color var(--ds-duration) var(--ds-ease-out),
                color var(--ds-duration) var(--ds-ease-out);
}

.site-footer__secondary-btn:hover {
    border-color: var(--ds-cta);
    color: var(--ds-cream) !important;
}

/* ===========================================
   Bottom Bar
   T4-FOOTER: per-spec — 1px top divider mixed from --ds-cream, 24px gap,
   0.875rem text, 65 % cream-on-ink. Mobile stacks vertically (rule below).
   =========================================== */
.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--ds-cream) 15%, transparent);
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--ds-cream) 65%, transparent);
}

.site-footer__copyright {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--ds-cream) 65%, transparent);
    margin: 0;
}

/* Status Indicator
   WAVE45-H1 HOTFIX (2026-05-08): "Booking new projects" pill audited at 2.07:1
   sage-on-cream-tint — failed WCAG AA. The previous fix mixed trust+white for
   the *text* but left the *background* as a 16% trust/cream-tint, which on the
   footer's now-correct dark ink reads as a light pill — putting any sage-leaning
   text below threshold.
   Replaced pill bg with a near-transparent white-on-ink (rgba(255,255,255,.08))
   and let the brand sage (--ds-trust) sit directly on it — that lands at
   ~7-8:1 against the dark footer surface, preserving the booking-green semantic
   cue while clearing AA.
   Dot keeps full --ds-trust (small visual element, contrast not required). */
.site-footer__status {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-1) var(--ds-space-3);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font-family: var(--ds-font-mono);
    font-size: var(--ds-fs-eyebrow);
    color: var(--ds-trust, #8aa07a);
}

.site-footer__status-dot {
    width: 6px;
    height: 6px;
    background: var(--ds-trust);
    border-radius: 50%;
    animation: site-footer-pulse 2s var(--ds-ease) infinite;
}

@keyframes site-footer-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-trust) 42%, transparent);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-trust) 0%, transparent);
    }
}

/* Bottom Right */
.site-footer__bottom-right {
    display: flex;
    align-items: center;
    gap: var(--ds-space-4);
}

/* T4-FOOTER: bumped attribution + staff-login text from 32–36 % cream to 65 %.
   Old values gave a 2.74–3.88:1 contrast ratio (failed WCAG AAA 7:1); new
   values land at ~7.82:1 — same calm "subdued" feel, now AAA-clean. */
.site-footer__attribution {
    font-size: var(--ds-fs-eyebrow);
    color: color-mix(in srgb, var(--ds-cream) 65%, transparent);
}

.site-footer__attribution:hover {
    color: var(--ds-cream);
}

.site-footer__login {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-size: var(--ds-fs-eyebrow);
    color: color-mix(in srgb, var(--ds-cream) 65%, transparent) !important;
    transition: color var(--ds-duration) var(--ds-ease-out);
}

.site-footer__login:hover {
    color: var(--ds-cream) !important;
}

/* ===========================================
   Responsive
   T4-FOOTER: removed the prior mobile override that set
   `padding: var(--ds-space-6) 0 var(--ds-space-4)` — its 0 inline-padding
   conflicted with the new `clamp(20px, 5vw, 64px)` x-padding (would have
   re-slammed text to the viewport edge on phones). The clamp now governs
   every breakpoint, which is the whole point of using clamp() in the first
   place. Mobile-specific tweaks below: stack bottom row vertically and
   left-align it (was center) so copyright/legal don't read like a card.
   =========================================== */
@media (max-width: 768px) {
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .site-footer__bottom-right {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .site-footer__cta-btn {
        width: 100%;
        justify-content: center;
    }

    .site-footer__newsletter-group {
        max-width: 100%;
    }
}

/* WAVE3-F01 2026-05-08: @supports-not fallback for browsers without
   color-mix() — keeps text legible (drops to opaque cream) when the
   feature isn't supported. Mirrors the precedent used in hero/hero2/banner.
   Applies to all the color-mix(in srgb, var(--ds-cream) NN%, transparent)
   bodies above (tagline, badges, contact-list, link-list, status, etc). */
@supports not (color: color-mix(in srgb, white, black)) {
    .site-footer__tagline,
    .site-footer__badge,
    .site-footer__contact-item,
    .site-footer__contact-item a,
    .site-footer__link-list li a,
    .site-footer__cta-subtitle,
    .site-footer__bottom,
    .site-footer__copyright,
    .site-footer__attribution,
    .site-footer__login,
    .site-footer__secondary-btn {
        color: var(--ds-cream, #fff7e3);
    }
    .site-footer__status {
        color: var(--ds-cream, #fff7e3);
    }
}

/* W4-A46 — Mobile tap-area for footer link-buttons + secondary action.
   Footer nav-links render as inline links (~32 px tap area). Add vertical
   padding so the row reaches 44 px without changing the visual font size. */
@media (max-width: 768px) {
    .site-footer__link-list { gap: var(--ds-space-3); }
    .site-footer__link-list li a {
        display: inline-flex;
        align-items: center;
        min-height: 44px; /* mobile-44 */
        padding: 10px 0;  /* mobile-44 — vertical only, preserve flush left */
    }
    .site-footer__secondary-btn {
        min-height: 44px; /* mobile-44 */
        padding: 10px var(--ds-space-4);
    }
    .site-footer__newsletter-input,
    .site-footer__newsletter-btn {
        min-height: 48px; /* T4-FOOTER: 48px tap target (was 44) */
    }
    .site-footer__attribution,
    .site-footer__login {
        display: inline-flex;
        align-items: center;
        min-height: 44px; /* mobile-44 */
        padding: 10px 0;
    }
}