/* ═══════════════════════════════════════════════════════════════════════════
   SITE FOOTER
   Shared across every page — markup in partials/footer.html, injected by
   js/site-footer.js. Visual reference: the Galytix site footer
   (gx-website wwwroot/css/header-footer.css, .footer-main).

   Self-contained on purpose: everything is scoped under .site-footer and
   nothing here depends on styles.css, so dropping the footer onto a new page
   needs only this stylesheet. Uses the same 991.98px mobile breakpoint as the
   rest of the site (see MOBILE-VIEW-HANDOFF.md — CSS/JS breakpoints are kept
   in sync deliberately).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Light footer, matching the page's other white sections (#comparison,
   #all-in-one etc. use Bootstrap's .bg-white + .text-dark). Asset variants are
   the dark ones — brokerx-logo.svg, social-*-dark.svg — and the ISO badge
   is inverted in CSS below, since its only source artwork is white. */
.site-footer {
  --footer-bg: #ffffff;
  --footer-bottom-bg: #ffffff;
  --footer-text: #1c1c1c;
  --footer-muted: #666666;
  --footer-rule: #e0e0e0;

  background: var(--footer-bg);
  color: var(--footer-text);
  font-family: inherit;
  padding-top: 30px;
  width: 100%;
  /* max-width: 1920px; */
  margin: 0 auto;
  
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 52px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 48px 0px;
}

/* ---------- Brand (logo + cities) ---------- */

.site-footer__brand {
  flex: 0 0 auto;
  max-width: 300px;
}

.site-footer__logo-link {
  display: inline-flex;
}

.site-footer__logo {
  width: 200px;
  max-width: 100%;
  height: auto;
}

/* Cities sit in a single row under the logo on desktop. */
.site-footer__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 8px 0 0;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--footer-text);
}

/* ---------- Link columns ---------- */

/* flex-basis 0 + min-width 0 lets the link block shrink below its natural
   content width, so the social/ISO block stays on the same row instead of
   wrapping underneath at narrower desktop widths. */
.site-footer__nav {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}

.site-footer__col {
  flex: 1 1 130px;
  min-width: 130px;
}

.site-footer__heading {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--footer-text);
}

.site-footer__links {
  margin: 0;
  padding: 0;
}

.site-footer__links li + li {
  margin-top: 10px;
}

.site-footer__links a {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--footer-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--footer-text);
  text-decoration: none;
}

/* ---------- Social + ISO badge ---------- */

.site-footer__social {
  flex: 0 0 auto;
}

.site-footer__social-icons {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}

.site-footer__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--footer-text);
  transition: opacity 0.15s ease;
}

.site-footer__social-btn:hover,
.site-footer__social-btn:focus-visible {
  opacity: 0.7;
}

.site-footer__social-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* X's glyph is optically heavier than LinkedIn's at the same box size —
   matches the Galytix footer, where the two icons are sized separately. */
.site-footer__social-btn:last-child img {
  width: 78%;
  height: 78%;
}

/* The BSI badge only exists as white artwork (gx-website's iso-logo.svg and
   footer-bsi.png are both white-on-transparent), which is invisible on a white
   footer. It is flat monochrome, so inverting it renders it black cleanly —
   cheaper and more faithful than redrawing the mark. Replace the asset with a
   real dark version and drop the filter if one ever turns up. */
.site-footer__iso {
  display: block;
  width: 118px;
  height: auto;
  filter: invert(1);
}

/* ---------- Bottom bar ---------- */

.site-footer__bottom {
  background: var(--footer-bottom-bg);
}

.site-footer__copyright {
  max-width: 1920px;
  margin: 0 auto;
  padding: 20px 48px 28px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--footer-text);
}

.site-footer__copyright em {
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER
   Markup ships in partials/footer.html, behaviour in js/cookie-consent.js.
   Stays dark (like the Galytix original) even though the footer is now light —
   it is an overlay on the page, not part of the footer. Fixed rather than
   gx's `sticky`, since it is injected mid-document rather than sitting last in
   <body>, and fixed pins it to the viewport regardless of where it lands.
   ═══════════════════════════════════════════════════════════════════════════ */

.cookie-banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1070; /* under the early-access modal (1080), over page content */
  display: flex;
  flex-wrap: nowrap; /* message + both buttons stay on one line */
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 11px 24px;
  background-color: #181c1f;
  border-top: 1px solid #0e1112;
  color: #c9ced3;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.cookie-banner[hidden] {
  display: none;
}

/* Sentence, policy link and both buttons sit on a single line on desktop —
   nowrap keeps the sentence itself from breaking mid-way. It only stacks
   under the mobile breakpoint below, where one line isn't possible. */
.cookie-banner__text {
  margin: 0;
  white-space: nowrap;
}

.cookie-banner__link {
  color: #c9ced3;
  text-decoration: underline;
}

.cookie-banner__link:hover,
.cookie-banner__link:focus-visible {
  color: #ffffff;
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
}

/* Buttons follow the site's "Get Early Access" pill (.btn-brokerx in
   styles.css): brand blue, 600 weight, tight letter-spacing, pill radius —
   sized down to suit the banner. The --bx-blue fallback keeps this stylesheet
   self-contained if it is ever used without styles.css.

   Note: filled Accept + outlined Reject follows the Galytix banner, as asked.
   It does give Accept more visual weight than Reject, which is the pattern
   consent guidance advises against; making them the same variant is the fix
   if that's ever raised. */
.cookie-banner__btn {
  padding: 7px 22px;
  border: 2px solid var(--bx-blue, #0064ff);
  border-radius: 50rem;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cookie-banner__btn--accept {
  background-color: var(--bx-blue, #0064ff);
}

.cookie-banner__btn--reject:hover,
.cookie-banner__btn--reject:focus-visible {
  background-color: rgba(0, 100, 255, 0.25);
}

.cookie-banner__btn--accept:hover,
.cookie-banner__btn--accept:focus-visible {
  background-color: #0057e0;
  border-color: #0057e0;
}

/* Marks the currently stored choice when the banner is reopened from Cookie
   Settings, so the user can see what is set before changing it. A subtle
   inset, not extra prominence — both buttons stay equally weighted. */
.cookie-banner__btn[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* Sits inline at the end of the row rather than pinned to the corner — on a
   one-line banner an absolutely-positioned × would overlap the buttons. */
.cookie-banner__close {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: #c9ced3;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.cookie-banner__close[hidden] {
  display: none;
}

.cookie-banner__close:hover,
.cookie-banner__close:focus-visible {
  color: #ffffff;
}

/* One line is impossible on a phone, so the message wraps and the actions
   drop beneath it — the only place the banner is allowed to stack. */
@media (max-width: 991.98px) {
  .cookie-banner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    font-size: 12px;
  }

  .cookie-banner__text {
    flex: 1 1 100%;
    white-space: normal;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Mobile / tablet-portrait — single stacked column (matches the mockup):
   logo, then cities one per line, then each link group in order.

   Breakpoint is 1024px, not the site's usual 991.98px: every iPad's portrait
   width falls at or below 1024px (Mini/Air/11" up to 834px, Pro 12.9" at
   exactly 1024px), so this keeps the footer on the mobile stacked layout for
   iPad portrait too. Same width-band convention already used for the
   highlights slider (see styles.css, "iPad Pro portrait (992–1024px)") and
   flagged as an open item in docs/MOBILE-VIEW-HANDOFF.md. The one known
   trade-off is iPad Mini landscape, which is also 1024px wide and so also
   gets the mobile footer — accepted there for the same reason.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .site-footer {
    padding-top: 32px;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 0 24px 24px;
  }

  .site-footer__brand {
    max-width: none;
  }

  .site-footer__logo {
    width: 184px;
  }

  /* One city per line on mobile. */
  .site-footer__cities {
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    font-size: 14px;
  }

  .site-footer__nav {
    flex-direction: column;
    gap: 28px;
  }

  .site-footer__col {
    min-width: 0;
  }

  .site-footer__heading {
    font-size: 16px;
  }

  .site-footer__links a {
    font-size: 16px;
  }

  .site-footer__copyright {
    padding: 6px 24px 24px;
  }

  /* Dropped from the new design on desktop (see the ≥1025px block below) —
     match that here so mobile doesn't show the BSI badge or the "Legal &
     Privacy" heading either. */
  .site-footer__nav .site-footer__heading {
    display: none;
  }

  .site-footer__iso {
    display: none;
  }

  /* Icon stays stacked below "Follow us on:" as before — only pulled up
     toward the links column above, closing the gap after Cookie Settings. */
  .site-footer__social {
    margin-top: -20px;
  }

  .site-footer__social-icons {
    margin-bottom: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Desktop + iPad landscape (≥1025px) — compact single band, per the new design.
   Starts above 1024px rather than the site's usual 992px so iPad Pro 12.9"
   portrait (1024px wide) stays on the mobile stacked layout above — see the
   breakpoint note on that block.

   Two lines only:
     line 1   logo            ·  policy links (one row)  ·  "Follow us on:" + in
     line 2   AI by Galytix…  ·                          ·  © Copyright …

   The grid sits on .site-footer rather than .site-footer__inner because the
   copyright lives in .site-footer__bottom, a *sibling* of __inner. Putting
   __inner into `display: contents` promotes brand/nav/social to grid items, so
   all four blocks share one two-row grid and can be placed independently.

   Row 1 is pinned to the logo's height (--footer-logo-h) so the links and the
   social row centre on the logo, and row 2 picks up the strapline/copyright —
   which is exactly how the two right-hand lines land level with the two
   left-hand ones. Change the logo height via the custom property, not by
   setting a width, or the rows stop matching.

   Mobile (≤1024px) keeps the stacked layout, but — like desktop — drops the
   "Legal & Privacy" heading and the ISO/BSI badge (see the mobile block
   above).
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
  .site-footer {
    --footer-logo-h: 34px; /* ≈ the strapline's width, see below */
    --footer-line-gap: 8px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: var(--footer-logo-h) auto;
    align-items: center;
    column-gap: 56px;
    row-gap: var(--footer-line-gap);
    padding: 34px 32px 34px;
  }

  /* Promotes brand / nav / social into the grid above. Its own max-width,
     margin and padding stop applying — they are on .site-footer now. */
  .site-footer__inner {
    display: contents;
  }

  /* ---------- Line 1 + 2, left: logo over strapline ---------- */

  .site-footer__brand {
    grid-area: 1 / 1 / 3 / 2;
    max-width: none;
  }

  /* Block-level, so the anchor's inline line box stops adding a few px of
     descender space between the logo and the strapline below it. */
  .site-footer__logo-link {
    display: flex;
  }

  /* Sized by height, not width: the row track is keyed to it. The height is
     picked so the rendered logo comes out the same width as the strapline
     underneath (as it did before this footer was reworked) — the two are set
     together, so re-tune --footer-logo-h whenever .site-footer__cities'
     font-size changes. */
  .site-footer__logo {
    width: auto;
    height: var(--footer-logo-h);
  }

  .site-footer__cities {
    margin-top: var(--footer-line-gap);
    font-size: 13px;
  }

  /* ---------- Line 1, centre: policy links in a single row ---------- */

  .site-footer__nav {
    grid-area: 1 / 2 / 2 / 3;
    gap: 0;
    justify-content: flex-start;
    /* Sits a touch below the logo's centre line rather than dead on it, per
       design review. A transform rather than margin/padding so the nudge
       cannot feed back into the row height the whole footer is keyed to. */
    transform: translateY(6px);
  }

  .site-footer__col {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* The design has no column label here. The social heading stays, because
     there it reads as part of the line itself ("Follow us on: in"). */
  .site-footer__nav .site-footer__heading {
    display: none;
  }

  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 56px;
  }

  .site-footer__links li + li {
    margin-top: 0;
  }

  .site-footer__links a {
    font-size: 14px;
    white-space: nowrap;
  }

  /* ---------- Line 1, right: "Follow us on:" + icon, on one line ---------- */

  .site-footer__social {
    grid-area: 1 / 3 / 2 / 4;
    display: flex;
    align-items: center;
    /* The column is as wide as the copyright underneath, so push this row to
       its end — icon and copyright then share the same right edge. */
    justify-content: flex-end;
    gap: 10px;
  }

  .site-footer__social .site-footer__heading {
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
  }

  .site-footer__social-icons {
    margin-bottom: 0;
    gap: 8px;
  }

  .site-footer__social-btn {
    width: 22px;
    height: 22px;
  }

  /* Dropped from the new design — still shown on mobile. */
  .site-footer__iso {
    display: none;
  }

  /* ---------- Line 2, right: copyright ---------- */

  .site-footer__bottom {
    grid-area: 2 / 3 / 3 / 4;
    justify-self: end;
    background: none;
  }

  .site-footer__copyright {
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
  }
}

/* iPad landscape (1025–1199.98px) — same band and the same 34/32/34 padding as
   desktop; only the type and the gaps are dialled down, so the three links, the
   strapline and the social line still fit on one row. Starts at 1025px, not
   992px, so it doesn't fight the mobile stacked layout at iPad Pro 12.9"
   portrait (1024px) above. */
@media (min-width: 1025px) and (max-width: 1199.98px) {
  .site-footer {
    --footer-logo-h: 32px;
    --footer-line-gap: 6px;

    column-gap: 32px;
  }

  .site-footer__cities {
    font-size: 12px;
  }

  .site-footer__links {
    gap: 8px 32px;
  }

  .site-footer__links a,
  .site-footer__social .site-footer__heading {
    font-size: 13px;
  }

  .site-footer__social-btn {
    width: 20px;
    height: 20px;
  }

  .site-footer__copyright {
    font-size: 11px;
  }
}