/* public/css/footer.css
   ---------------------------------------------------------------------------
   GLOBAL FOOTER — four layers.

   All selectors are namespaced .ft-*. The previous footer's rules live in tl.css
   under .footer-*, .site-footer and .free-guide; none of those names appear here,
   so the two cannot fight while the old CSS is still present.

   Layer tones step deliberately: the CTA band is the darkest, the navigation
   sits one step lighter, the office band a shade lighter again, and the legal
   band returns to the darkest. That gives four readable bands without a single
   heavy divider line.
   --------------------------------------------------------------------------- */

.ft-cta,
.ft {
    --f-navy:    #050F1B;   /* CTA + legal bands */
    --f-nav:     #0B1626;   /* primary navigation */
    --f-band:    #0F2135;   /* office band */
    --f-line:    rgba(255,255,255,.08);
    --f-ink: var(--cx-on-dark);
    --f-muted: var(--cx-on-dark-mute);   /* 6.4:1 on --f-nav — navigation text must stay readable */
    --f-dim: var(--cx-on-dark-dim);   /* 4.6:1 — smallest labels only, still AA */
    --f-gold:    #D9B65A;   /* brand gold lifted for dark grounds — 8.9:1 */
    --f-font: var(--cx-sans);

    font-family: var(--f-font);
}

.ft-wrap { max-width: var(--cx-container); margin: 0 auto; padding: 0 var(--cx-gutter); }

/* ── LAYER 1 — CTA ────────────────────────────────────────────────────────── */

.ft-cta { background: var(--f-navy); color: var(--f-ink);
    padding: clamp(2rem, 3.6vw, 3rem) 0; border-top: 1px solid var(--f-line); }
.ft-cta-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) auto;
    gap: clamp(1.2rem, 3vw, 3rem); align-items: center; }
.ft-cta-eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--f-gold); margin: 0 0 .5rem; }
/* 600, not heavier: no system UI face ships an 800, so a larger value is synthesised
   and reads as a smeared display font rather than as the site's typography. */
.ft-cta-h { font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 600; line-height: 1.25;
    letter-spacing: -.012em; color: var(--f-ink); margin: 0 0 .5rem; max-width: 30ch;
    text-wrap: balance; }
.ft-cta-sub { font-size: .88rem; line-height: 1.6; color: var(--f-muted);
    margin: 0; max-width: 56ch; text-wrap: pretty; }

.ft-cta-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.ft-btn {
    display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
    background: var(--f-gold); color: #1A1204; border-radius: var(--cx-btn-radius);
    font-size: var(--cx-btn-fs); font-weight: var(--cx-btn-weight); padding: 0 var(--cx-btn-pad-x); text-decoration: none;
    transition: transform var(--cx-duration-sm) ease, box-shadow var(--cx-duration-sm) ease, background-color var(--cx-duration-sm) ease; min-height: var(--cx-btn-h);}
.ft-btn:hover { transform: translateY(var(--cx-hover-lift)); box-shadow: 0 8px 22px rgba(217,182,90,.26); color: #1A1204; }
.ft-btn--ghost { background: transparent; color: var(--f-ink); border: 1px solid rgba(255,255,255,.24); }
.ft-btn--ghost:hover { background: rgba(255,255,255,.07); color: var(--f-ink); box-shadow: none; }
.ft-btn:focus-visible { outline: 2px solid var(--f-gold); outline-offset: 3px; }

/* ── LAYER 2 — navigation ─────────────────────────────────────────────────── */

.ft { background: var(--f-nav); color: var(--f-ink); }

/* Five columns, brand wider than the four link columns. minmax(0,…) throughout so a long
   service name cannot push its column past its share and unbalance the row. */
/* Six columns: brand, then Services, Jurisdictions, Knowledge Centre, Quick Links, Legal.
   The brand column is wider because it carries the mark, positioning copy and contact
   blocks; the five link columns share the remainder equally. */
.ft-nav {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr));
    gap: clamp(1.2rem, 2.4vw, 2.4rem);
    padding: clamp(2rem, 3.6vw, 3rem) clamp(1rem, 4vw, 2.4rem);
}
.ft-col { min-width: 0; }

/* Proportionate, not decorative. The old footer's logo dominated its column. */
/* Matched to the navbar mark (.cc-logo img in nav.css): height-driven at 90px, dropping to
   62px on narrow screens, with width:auto.

   width:auto matters. The previous rule forced a 56x56 square, and the Coutts crest is not
   square — a fixed square either distorts it or crops its ring depending on the file. Sizing
   by height and letting width follow keeps the mark's own proportions whatever is uploaded,
   which is the point of resolving it through siteLogo() rather than a fixed asset. */
.ft-logo { display: inline-block; margin-bottom: .9rem; }
.ft-logo img { height: 90px; width: auto; display: block; }
.ft-positioning { font-size: .82rem; line-height: 1.6; color: var(--f-muted);
    margin: 0 0 1.1rem; max-width: 34ch; text-wrap: pretty; }

.ft-contact-block { margin-bottom: .7rem; }
.ft-micro { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--f-dim); margin-bottom: .15rem; }
.ft-strong-link { font-size: .86rem; font-weight: 600; color: var(--f-ink); text-decoration: none; }
.ft-strong-link:hover { color: var(--f-gold); }

.ft-h { font-size: .74rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
    color: var(--f-ink); margin: 0 0 .8rem; }

.ft-list { list-style: none; margin: 0; padding: 0; }
.ft-list li { margin-bottom: .48rem; }
.ft-list a { font-size: .84rem; line-height: 1.4; color: var(--f-muted); text-decoration: none;
    transition: color var(--cx-duration-sm) ease; }
.ft-list a:hover { color: var(--f-gold); }
.ft-list a:focus-visible,
.ft-bar-links a:focus-visible,
.ft-strong-link:focus-visible,
.ft-office-tel:focus-visible,
.ft-office-mail:focus-visible,
.ft-more:focus-visible { outline: 2px solid var(--f-gold); outline-offset: 2px; border-radius: var(--cx-radius-xs); }

/* The publication title under Latest Guide / Latest Insight. One line: a long Guide name
   must not be allowed to set the column's width. */
.ft-meta { display: block; font-size: .7rem; color: var(--f-dim); line-height: 1.35;
    margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ft-more { display: inline-block; font-size: .78rem; font-weight: 600; color: var(--f-gold);
    text-decoration: none; margin-top: .2rem; }
.ft-more:hover { text-decoration: underline; }

.ft-social { display: flex; gap: .45rem; list-style: none; margin: .3rem 0 0; padding: 0; }
.ft-social a {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--f-line); color: var(--f-muted); font-size: .82rem;
    text-decoration: none; transition: color var(--cx-duration-sm) ease, border-color var(--cx-duration-sm) ease;
}
.ft-social a:hover { color: var(--f-gold); border-color: rgba(217,182,90,.4); }
.ft-social a:focus-visible { outline: 2px solid var(--f-gold); outline-offset: 2px; }

/* ── LAYER 3 — offices ────────────────────────────────────────────────────── */

.ft-band { background: var(--f-band); border-top: 1px solid var(--f-line); }
/* Four across, equal weight — three offices plus global enquiries. */
.ft-offices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2rem); padding: clamp(1.6rem, 2.8vw, 2.2rem) clamp(1rem, 4vw, 2.4rem); }
.ft-office { min-width: 0; }
.ft-h--office { display: flex; align-items: center; gap: .4rem; margin-bottom: .55rem; }
/* Small and refined: the flag labels the office, it does not headline it. */
.ft-h--office .fi { width: 18px; height: 13px; border-radius: var(--cx-radius-xs); flex: none; }
.ft-office address { font-style: normal; font-size: .8rem; line-height: 1.55;
    color: var(--f-muted); margin: 0 0 .5rem; }
.ft-office-tel, .ft-office-mail { display: block; font-size: .82rem; color: var(--f-ink);
    text-decoration: none; margin-bottom: .2rem; word-break: break-word; }
.ft-office-tel:hover, .ft-office-mail:hover { color: var(--f-gold); }
.ft-office--global .ft-more { margin-top: .5rem; }

.ft-network { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem;
    padding: 0 var(--cx-gutter) clamp(1.2rem, 2vw, 1.6rem); }
.ft-network .ft-micro { display: inline; margin: 0; }
.ft-network-list { font-size: .8rem; color: var(--f-muted); }

/* ── LAYER 4 — legal + corporate ──────────────────────────────────────────── */

.ft-legal-band { background: var(--f-navy); border-top: 1px solid var(--f-line);
    padding: clamp(1.4rem, 2.4vw, 1.9rem) 0; }

/* Statutory bar. Restrained by design: the sentence and the link strip sit on one line at
   desktop width, and the type is a step down from the navigation above so it reads as a
   footnote rather than as another section. */
.ft-bar { display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: .5rem 1.5rem; }
.ft-corp-line { font-size: .76rem; line-height: 1.6; color: var(--f-muted);
    margin: 0; max-width: 78ch; }
.ft-bar-links ul { display: flex; flex-wrap: wrap; gap: .3rem .9rem;
    list-style: none; margin: 0; padding: 0; }
.ft-bar-links a { font-size: .76rem; color: var(--f-dim); text-decoration: none; }
.ft-bar-links a:hover { color: var(--f-gold); text-decoration: underline; }
.ft-bar-links a:focus-visible { outline: 2px solid var(--f-gold); outline-offset: 2px; border-radius: var(--cx-radius-xs); }
.ft-disclaimer { font-size: .74rem; line-height: 1.55; color: var(--f-dim);
    margin: .9rem 0 0; padding-top: .9rem; border-top: 1px solid var(--f-line); max-width: 90ch; }
.ft-disclaimer a { color: var(--f-muted); text-decoration: underline; }
.ft-disclaimer a:hover { color: var(--f-gold); }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1240px) {
    /* Brand across the top, link columns three-up. Six columns below this width start
       splitting "Website Terms of Use" and "Immigration & Residency" across three lines. */
    .ft-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ft-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
    .ft-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ft-col--brand { grid-column: 1 / -1; }
    .ft-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ft-cta-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .ft-nav, .ft-offices { grid-template-columns: minmax(0, 1fr); }
    /* Same step the navbar takes at its own breakpoint. */
    .ft-logo img { height: 62px; }
    .ft-col--brand { grid-column: auto; }
    /* Full-width stacked buttons: no overflow, no cropped labels, comfortable targets. */
    .ft-cta-actions { flex-direction: column; align-items: stretch; }
    .ft-btn { justify-content: center; padding: 0 var(--cx-btn-pad-x); min-height: var(--cx-btn-h);}
    /* The bar's link strip stays horizontal — four short words wrap cleanly. The full
       legal column above already gives each item its own generous row. */
    .ft-bar { gap: .7rem; }
    .ft-bar-links ul { gap: .4rem 1rem; }
    .ft-positioning { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    /* Motion only. Stage 4B's min-height was wrong here — this selector covers the footer
           link lists and social icons, and a 42px floor on every list item stretched the
           whole footer for anyone with reduced motion enabled. */
    .ft-btn, .ft-list a, .ft-social a, .ft-bar-links a { transition: none; }
    .ft-btn:hover { transform: none; }
}