/* ==========================================================================
   FOOTER — Cornerstone dark: brand + 5 nav columns + offices + credits
   ==========================================================================
   Active per-site footer. Markup: module 9 (html) → #footer .inside.
   ========================================================================== */

#footer {
    position: relative;
    overflow: clip;
    background-color: var(--ink);
    color: rgba(255, 255, 255, 0.72);
    .inside { padding-block: var(--space-60) var(--space-40); }
    a { border-bottom: 0; }

    /* ---- Top: brand + nav columns ------------------------------------------ */
    .footer_top { align-items: start; }
}
/* `nowrap` is scoped to DESKTOP, in a min-width query, rather than being
   switched off later by a max-width one — and at the FRAMEWORK's own
   breakpoint, not a number of its own.

   The bug that caused: these two were unconditionally `nowrap` and were only
   restored to `wrap` at max-width 900. But framework_v3's column ramp steps at
   992 — `.col-2-3` drops to 50% and `.col-20` to 33.3% there. So between 901
   and 992 the five nav columns had already been re-sized for a 3-up layout
   while wrapping was still disabled, which put all five on one line inside a
   half-width parent: columns 4 and 5 ran off the right of the page (at 960 the
   container ends at 930 and the last column's right edge was 1232).

   Matching 992 means the wrap turns on in the same step that makes the columns
   narrow, so there is no window where the two disagree. */
@media only screen and (min-width: 993px) {
    #footer .footer_top,
    #footer .footer-cols { flex-wrap: nowrap; }
}
#footer {
    .footer_top img { display: block; height: auto; margin-bottom: 1.1em; }

    /* Brand column */
    /* The tagline runs the column's width (it wrapped at 24em with room to
       spare); weights as the board: both lines 400 (Bob, 10 Oct 2026). */
    .footer-brand p { color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; margin: 0 0 0.8em; text-wrap: balance; }
    .footer-brand .foundation { font-weight: 400; color: rgba(255, 255, 255, 0.92); }
    .footer-social { display: inline-flex; gap: 15px; }
    .social {
        display: inline-flex;
        align-items: center;
        /*justify-content: center;*/
        width: 2.3rem; height: 2rem;
        border-radius: 6px;
        background: transparent;                      /* Penpot blue 700, like the header */
        color: #fff;
        font-size: 1.1rem;
    }
    .social svg { height:20px;   }
    .social:hover { background: transparent; color: var(--second); }

    /* Column headings — caps, white, linked; the board's 14px / 600, 0.8px
       tracking (Bob, 10 Oct 2026: font weights). */
    .footer-col-head {
        font-family: var(--type-body);
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: 0.057em;
        text-transform: uppercase;
        margin: 0 0 0.9em;
        line-height: 1.3;
    }
    .footer-col-head a { color: var(--white); }
    .footer-col-head a:hover { color: var(--second); }

    /* Nav lists */
    .mod_customnav ul { margin: 0; padding: 0; list-style: none; }
    .mod_customnav li { display: block; margin-bottom: 0.55em; }
    /* the current page is a <strong class="active">: same size, a touch brighter */
    .mod_customnav :is(a, strong) { display: inline-block; padding: 0; color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; font-weight: 400; text-wrap: balance; }
    .mod_customnav a:hover { color: var(--second); }
    .mod_customnav strong.active { color: var(--white); }

    /* ---- Offices (with dividers between) ----------------------------------- */
    .footer_offices {
        margin-top: var(--space-40);
        padding-top: var(--space-40);
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        align-items: stretch;
    }
    /* Divider sits centred in the column gap (gap-40 → 20px each side), not hard
       against the next column's text. */
    .footer_offices > * + * { position: relative; }
    .footer_offices > * + *::before {
        content: "";
        position: absolute;
        top: 0; bottom: 0;
        left: -20px;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }
    .footer_offices h4 {
        color: var(--white);
        font-family: var(--type-body);
        font-size: 0.875rem; font-weight: 600;          /* the board's 14px / 600, 1.2px tracking */
        letter-spacing: 0.086em; text-transform: uppercase;
        margin: 0 0 0.7em;
    }
    .footer_offices p { color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; line-height: 1.6; margin: 0 0 0.9em; text-wrap: balance; }
    .footer_offices a { color: rgba(255, 255, 255, 0.72); }
    .footer_offices a:hover { color: var(--second); }
    /* Get in touch CTA: white, red on hover. */
    .footer_offices a.btn, .footer_offices a.btn:link { background-color: #fff; color: var(--prime); margin: 0.3em 0 0; }
    .footer_offices a.btn:hover { background-color: var(--second); color: #fff; }

    /* ---- Bottom: panda + credits + associations (one row) ------------------ */
    .footer_bottom {
        position: relative;
        margin-top: var(--space-40);
        padding-top: var(--space-24);
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }
    /* Panda sits on the top border of the credits bar. */
    .footer-panda {
        position: absolute;
        right: clamp(16px, 4vw, 90px);
        bottom: 100%;
        margin-bottom: 0;
        width: clamp(56px, 7vw, 104px);
        height: auto;
        pointer-events: none;
    }
    .footer_bottom .bottom_line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.6em 1.5em;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.8125rem;
    }
    .footer_bottom .credits, .footer_bottom .credits a { color: rgba(255, 255, 255, 1); }
    /* the credits line up with the legal links: no paragraph margin (it made the
       row centre a taller box and lifted the text 9px), the links' line height (John, 8 Oct) */
    .footer_bottom .credits { margin: 0; line-height: 1.4; }
    .footer_bottom .bottom-footer-nav ul { display: flex; flex-wrap: wrap; gap: 0.6em 1.5em; margin: 0; padding: 0; list-style: none; }
    /* The legal links and "Cookie settings" read as ONE row (John, 8 Oct): same
       size, weight and line height, the same 1.5em apart (the row's own gap),
       centred on one line. The current page is white, not bold. */
    .footer_bottom .bottom-footer-nav { display: flex; align-items: center; margin-left: auto; }
    /* the row spreads its items (space-between): auto margins keep "Cookie
       settings" next to the legal links, the gap between them the row's 1.5em */
    .footer_bottom .cookie-settings { margin-right: auto; display: flex; align-items: center; }
    .footer_bottom .bottom-footer-nav ul { align-items: center; }
    .footer_bottom .bottom-footer-nav li { display: flex; margin: 0; padding: 0; }
    .footer_bottom .bottom-footer-nav .mod_customnav { margin: 0; padding: 0; }
    .footer_bottom :is(.bottom-footer-nav, .cookie-settings) :is(a, strong) {
        font-size: 0.8125rem; font-weight: 400; line-height: 1.4;
        display: block;   /* one 18px box each, so the row centres them all alike */
    }
    .footer_bottom .bottom-footer-nav strong.active { color: rgba(255, 255, 255, 0.9); }
    .footer_bottom a { color: rgba(255, 255, 255, 0.5); }
    .footer_bottom a:hover { color: var(--second); }
    /* Association logos: a small white tile, inline in the credits row. */
    .footer-associations {
        display: inline-flex;
        align-items: center;
        gap: clamp(14px, 1.6vw, 26px);
        background: #fff;
        border-radius: 8px;
        padding: 14px 22px;      /* even room above and below the logos (Bob, 10 Oct 2026) */
    }
    .footer-associations img { height: clamp(22px, 2.4vw, 30px); width: auto; display: block; }
}

@media only screen and (max-width: 900px) {
    #footer .footer-panda { display: none; }
    #footer .footer_bottom .credits { justify-content: flex-start; }
}

/* ---- Tablet and phone (Bob, 13 Oct) ----------------------------------------
   992: the brand gets its own centred line, the nav columns the full width
   (3-up), with dividers between them like the offices'.
   700: offices and nav columns go 2-up (the framework's step is 600).
   480: one column, everything centred.
   A divider sits in the middle of the gap and goes wherever a cell starts a line. */
#footer .footer-cols > * + * { position: relative; }
@media only screen and (max-width: 992px) {
    #footer {
        .footer_top > .footer-brand {
            flex: 0 0 100%;
            text-align: center;
            img { margin-inline: auto; }
        }
        /* full width, the offices' 40px column gap and a rule on top, so the nav
           columns and the offices read as one system (Bob, 13 Oct) */
        .footer_top > .footer-cols {
            flex: 0 0 100%;
            --gap-x: var(--gutter-40);
            border-top: 1px solid rgba(255, 255, 255, 0.14);
            padding-top: var(--space-40);
        }
        .footer-cols > * + *::before {
            content: "";
            position: absolute;
            top: 0; bottom: 0;
            left: calc(var(--gap-x, 0px) / -2);
            border-left: 1px solid rgba(255, 255, 255, 0.14);
        }
        .footer-cols > :nth-child(3n + 1)::before { content: none; }
        .footer_offices > .col-1-3 { flex: 0 0 calc(100% / 3 - var(--gap-x, 0px) * 2 / 3); }
    }
}
@media only screen and (max-width: 700px) {
    #footer {
        .footer-cols > .col-20,
        .footer_offices > .col-1-3 { flex: 0 0 calc(50% - var(--gap-x, 0px) * 0.5); }
        .footer-cols > :nth-child(3n + 1)::before { content: ""; }
        :is(.footer-cols, .footer_offices) > :nth-child(odd)::before { content: none; }
    }
}
@media only screen and (max-width: 480px) {
    #footer {
        .footer-cols > .col-20,
        .footer_offices > .col-1-3 { flex: 0 0 100%; }
        :is(.footer-cols, .footer_offices) > :nth-child(n)::before { content: none; }
        :is(.footer-cols, .footer_offices) { text-align: center; }
    }
}

/* WCAG 2.2 target size (2.5.8): the footer's phone links are at least 24px tall (8 Oct). */
#footer a[href^="tel:"] { display: inline-block; min-height: 24px; line-height: 24px; }   /* own 24px line each, so phone and fax don't overlap */