/*
  Site endcap — global CTA + footer, built from Figma node 18659:18264.
  Reusable at the bottom of every page: no page-specific selectors here.
  See index.html for the required markup shape (.site-endcap wrapping the
  wave, .global-cta, and .site-footer as three separate elements).
*/

/* ---- Wave ---- */
/* Belongs to the endcap, not to whatever section precedes it — see the
   markup comment in index.html. One shape, recoloured entirely via
   --endcap-wave-color: the SVG (inlined in the markup, path data copied
   verbatim from assets/images/wave-footer.svg) supplies the shape via
   fill="currentColor", this file supplies the colour by setting `color`.

   This started as a CSS mask-image (SVG file referenced as
   -webkit-mask/mask, background-color for the colour) — functionally the
   same idea, but it rendered a spurious stepped notch near the right edge
   in testing that traced back to how mask-size: 100% 100% interacts with
   the SVG's own intrinsic sizing across browsers, not the source shape
   itself (the raw path renders perfectly clean on its own). Inlining the
   SVG directly sidesteps that whole class of masking inconsistency, and
   is the explicitly-sanctioned fallback for exactly this situation.

   Sits absolutely over the top of .global-cta — zero layout height, no
   gap, gradient visible behind/through it. */

.site-endcap {
  position: relative;
}

.site-endcap__wave {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 37; /* matches the SVG's own viewBox exactly */
  pointer-events: none;
  color: var(--endcap-wave-color);
}

/* Explicit variants rather than detecting the previous section's colour —
   add more of these (e.g. --from-white below) as new page surfaces need
   them; nothing else in this file changes. */
.site-endcap--from-grey {
  --endcap-wave-color: #F7F8F9;
}

.site-endcap--from-white {
  --endcap-wave-color: #FFFFFF;
}

/* Why choose us ends on the MIA section's --colour-grey-200 (#ECEDEF)
   surface, a distinct grey from --from-grey's #F7F8F9. */
.site-endcap--from-grey-200 {
  --endcap-wave-color: #ECEDEF;
}

/* ---- Global CTA ---- */

.global-cta {
  position: relative;
  padding: 124px 0 var(--space-section-xxs); /* 124px top, 64px bottom */
  box-sizing: border-box;
  /* Reaching #072E37 at 76.442% and holding it (a gradient's colour after
     its last stop is solid, not interpolated further) is what makes the
     bottom of the CTA match the footer's own flat #072E37 with no seam. */
  background: linear-gradient(to bottom, var(--colour-brand-teal) 0%, var(--colour-deep-teal) 76.442%);
}

/* Background-only fade cover — homepage entrance only, see
   js/motion-home.js. GSAP can't target a pseudo-element directly, so the
   animation drives the --endcap-cover-opacity custom property on
   .global-cta itself instead; this pseudo-element just reads it. The
   gradient above is completely untouched and always renders immediately —
   this is a separate layer sitting on top of it, coloured to match
   whatever precedes the endcap (--endcap-wave-color, same variable the
   wave itself uses) so that hiding the CTA simply reads as "the light
   section continuing a little further" rather than a blank/mismatched
   patch. Defaults to fully transparent (opacity: 0) so pages/contexts
   that never set the variable — i.e. no JS, or reduced motion — never
   show it at all. */
.global-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--endcap-wave-color);
  opacity: var(--endcap-cover-opacity, 0);
  pointer-events: none;
}

.global-cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

.global-cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-l); /* 16px */
  width: 100%;
  max-width: 846px;
}

.global-cta__subheading {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  /* Fluid 18px (mobile) → 24px (desktop) — same clamp() technique as the
     other section headings (css/home.css). Shared component, so this
     benefits every page that includes the endcap. */
  font-size: clamp(18px, 15.37px + 0.674vw, 24px);
  line-height: 1.2;
  color: var(--colour-white-70);
}

.global-cta__heading {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  /* Fluid 28px (mobile) → 48px (desktop). */
  font-size: clamp(28px, 19.24px + 2.247vw, 48px);
  line-height: clamp(36.4px, 27.11px + 2.382vw, 57.6px);
  letter-spacing: -0.96px;
}

.global-cta__heading-strong {
  color: var(--colour-white);
}

.global-cta__heading-muted {
  color: var(--colour-white-70);
}

.global-cta__action {
  flex-shrink: 0;
}

/* ---- Footer ---- */

.site-footer {
  /* position: relative — establishes the positioning context the fade
     cover below is absolutely positioned against; no visual effect on its
     own (no offset is set). */
  position: relative;
  background: var(--colour-deep-teal);
  padding: var(--space-section-xs) 0 48px; /* 80px top, 48px bottom */
  box-sizing: border-box;
}

/* Same background-only fade cover as .global-cta::before above — see the
   comment there. Reads the same --endcap-cover-opacity value (both are
   animated together, see js/motion-home.js) so the CTA and footer
   backgrounds appear as one moment, not two. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--endcap-wave-color);
  opacity: var(--endcap-cover-opacity, 0);
  pointer-events: none;
}

.site-footer__container {
  /* position: relative + z-index: 2 — lifts the actual footer content
     above the fade cover (z-index: 1 above); no other effect. */
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-6xl); /* 64px — the whole footer's major vertical rhythm */
  width: 100%;
  /* Figma's footer (node 18659:18265) isn't the site's usual 1280px
     container — it's full-bleed with px-[319px] at the 1920px reference,
     i.e. an inner content width of 1282px (1920 - 638). max-width here is
     that 1282px content width PLUS both sides of the padding below
     (1282 + 24 + 24 = 1330), so on desktop the padding acts purely as a
     responsive safety gutter rather than eating into the 1282px the nav
     grid's own columns/gaps are sized against. */
  max-width: 1330px;
  margin: 0 auto;
  padding: 0 var(--space-2xl);
  box-sizing: border-box;
}

/* ---- Brand row ---- */

.site-footer__brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2xl);
}

.site-footer__logo {
  display: block;
  height: 44px;
  width: auto;
}

.site-footer__partners {
  display: block;
  height: 41px;
  width: auto;
}

/* ---- Navigation grid ---- */
/* 326px first (contact) column + four 175px link columns, 64px gaps —
   reproduces Figma's column x-positions (0, 390, 629, 868, 1107) exactly:
   326 + 64 = 390, then +175 +64 = 239 for each remaining step. */

.site-footer__nav-grid {
  display: grid;
  grid-template-columns: 326px repeat(4, 175px);
  gap: var(--space-6xl); /* 64px */
  width: 100%;
}

.site-footer__heading {
  margin: 0 0 var(--space-xl); /* 20px to the links beneath */
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: var(--colour-sky-teal);
}

.site-footer__nav-column ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-m); /* 12px between links */
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__nav-column a {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 14px;
  line-height: 19.6px;
  color: var(--colour-white-70);
  text-decoration: none;
}

.site-footer__nav-column a:hover,
.site-footer__nav-column a:focus-visible {
  color: var(--colour-white);
}

/* ---- Contact column ---- */

.site-footer__contact {
  display: flex;
  flex-direction: column;
}

.site-footer__abn {
  margin: 0 0 var(--space-xl); /* 20px, same rhythm as .site-footer__heading's own gap to links */
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.4px; /* 1.6 — bumped for readability, was 19.6px (1.4) */
  color: var(--colour-white-70);
}

.site-footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-l); /* 16px — verified against Figma node 18659:18780 (was incorrectly 12px) */
  list-style: none;
  margin: 0 0 var(--space-l); /* 16px down to the social row — same uniform gap as between rows, not a separate 20px (was incorrectly 20px) */
  padding: 0;
}

.site-footer__contact-list a {
  display: flex;
  align-items: center;
  gap: var(--space-m); /* 12px between icon and text */
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.4px; /* 1.6 — bumped for readability, was 19.6px (1.4) */
  color: var(--colour-white-70);
  text-decoration: none;
}

.site-footer__contact-list a:hover,
.site-footer__contact-list a:focus-visible {
  color: var(--colour-white);
}

/* The email/URL rows are single unbroken strings; min-width: 0 is what
   lets them shrink inside their own flex row so the shared
   overflow-wrap: break-word (css/base.css) can then break them, rather
   than the row holding its min-content width. */
.site-footer__contact-list a {
  min-width: 0;
}

.site-footer__contact-list img {
  flex-shrink: 0;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-l); /* 16px */
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--colour-primary-teal);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  background: var(--colour-sky-teal);
}

/* ---- Policy / compliance pills ---- */

.site-footer__policies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xl); /* 24px */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Divider ---- */

.site-footer__divider {
  width: 100%;
  height: 1px;
  background: var(--colour-brand-teal); /* verified against Figma node 18659:18876 — a solid #14849D line, not translucent white */
}

/* ---- Legal disclosures ---- */
/* Copy is verbatim from Figma — see index.html. Do not edit the text
   content here. */

.site-footer__legal {
  display: flex;
  flex-direction: column;
}

.site-footer__legal-heading {
  margin: 0 0 var(--space-2xl); /* 24px */
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 11px;
  color: var(--colour-sky-teal);
}

.site-footer__legal p {
  margin: 0 0 var(--space-s); /* 8px between paragraphs */
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6;
  color: var(--colour-mid-grey);
}

.site-footer__legal p:last-child {
  margin-bottom: 0;
}

.site-footer__legal a {
  color: var(--colour-sky-teal);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--colour-white);
}

/* ---- Copyright row ---- */

.site-footer__copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2xl);
  padding-top: var(--space-2xl); /* 24px, below the teal divider */
  border-top: 1px solid var(--colour-brand-teal);
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.4px; /* 1.6 — bumped for readability, was 19.6px (1.4) */
  color: var(--colour-light-grey);
}

.site-footer__copyright p {
  margin: 0;
}

.site-footer__credit {
  color: var(--colour-sky-teal);
}

/* Native focus outlines are enough for keyboard visibility across this
   file — .btn's own variants (used for the CTA/policy buttons) already
   render on solid backgrounds where the default ring is clearly visible,
   so no extra focus styling was added here, consistent with not
   globally touching .btn. */

/* ==========================================================================
   Mobile (≤767px) — reusable at the bottom of every page, so this benefits
   every page that includes the endcap, not just Home.
   ========================================================================== */

@media (max-width: 767px) {
  /* ---- Global CTA ---- */

  .global-cta {
    padding: var(--space-6xl) var(--space-l) var(--space-3xl);
  }

  .global-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xl);
    padding: 0 var(--space-l);
  }

  .global-cta__heading {
    letter-spacing: normal;
  }

  .global-cta__action {
    width: auto;
  }

  /* ---- Footer ---- */

  .site-footer {
    padding: var(--space-3xl) 0 var(--space-3xl);
  }

  .site-footer__container {
    gap: var(--space-3xl);
    padding: 0 var(--space-l);
  }

  .site-footer__brand-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-l);
  }

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

  .site-footer__partners {
    width: 220px;
    height: auto;
  }

  /* Single stacked column instead of the desktop's fixed 5-column grid —
     the contact block first, then the four link columns in the same
     order as the desktop grid reads left to right. */
  .site-footer__nav-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .site-footer__policies {
    justify-content: flex-start;
    gap: var(--space-m);
  }

  .site-footer__copyright {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
  }
}

/* ==========================================================================
   Tablet (768–1329px) — reduced-column footer grid, not a forced single
   column. 1329px (not 1280) is the deliberate boundary: .site-footer__
   container's own max-width is 1330px, the exact width its fixed
   326px + 4×175px + 4×64px-gap columns need to fit without overflowing —
   below that, the 5-column grid genuinely doesn't fit (this is true even
   at the common 1280px "desktop" viewport), so it steps down to fewer,
   fluid (1fr) columns instead of overflowing horizontally. At ≥1330px
   nothing here applies and the original fixed-width grid is unchanged.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1329px) {
  .site-footer__nav-grid {
    gap: var(--space-3xl); /* 32px, down from the desktop 64px — more columns fit before wrapping */
  }
}

/* .global-cta__inner has no horizontal padding of its own at desktop
   (nothing sits past its own 1280px max-width there) — below that it
   would otherwise span edge-to-edge. The row itself already survives
   narrower widths without help (.global-cta__text has no flex-shrink
   override, so it yields to .global-cta__action's flex-shrink: 0 CTA by
   default); this only adds the missing gutter. */
@media (min-width: 768px) and (max-width: 1279px) {
  .global-cta__inner {
    padding: 0 var(--space-2xl);
  }
}

@media (min-width: 1024px) and (max-width: 1329px) {
  .site-footer__nav-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer__nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}