/* ==========================================================================
   The public landing page, SCR-001. Loaded only by `base_public.html`.

   Every colour here is a `--gc-*` token from the compiled OneUI bundle. The
   design handoff this page comes from proposed its own warm terracotta and
   sage palette; it was re-mapped onto the application's tokens for two
   reasons. Four of its pairs were below WCAG AA -- the Sign in button at
   3.03:1, the header links at 3.61:1 -- and a visitor who clicks Sign in
   should not arrive in a different colour world. Nothing below introduces a
   colour, so nothing below needs measuring again.

   Class prefix is `gcp-` (gc-public) rather than `gc-`. These are page
   furniture for one anonymous page, not application components, and the
   distinction keeps them out of the component inventory that
   `test_component_adoption.py` polices.

   No inline styles anywhere: `style-src` inherits `default-src 'self'` in
   production, and there is no CSP header at all under `runserver`.
   ========================================================================== */

/* The lead and pull-quote weight. The 600 face is already declared in
   `bootstrap-bridge.css` and shipped on every page; this 400 is only ever used
   here, so it is declared here and downloaded only by this page. Relative URL,
   like its sibling, so `collectstatic` rewrites it to the fingerprinted name. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/source-serif-4-400-latin-ext.0d141968cf19.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.gc-public {
  --gcp-band: 5.25rem;          /* 84px */
  --gcp-gutter: 1.75rem;        /* 28px */
  --gcp-gap: 3.5rem;            /* 56px */
  --gcp-nav-h: 5.25rem;

  background: var(--gc-surface);
  color: var(--gc-text);
}

/* --------------------------------------------------------------------------
   Type. The one place this page departs from the application: the app sets a
   serif on `h1` only, and a landing page wants the whole display range in it.
   -------------------------------------------------------------------------- */

.gc-public h1,
.gc-public h2,
.gc-public h3 {
  font-family: var(--gc-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

.gcp-display {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1.05;
}

.gcp-h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.1;
}

.gcp-h3 {
  font-size: 1.3rem;
  line-height: 1.25;
}

/* The lead: the serif at 400, one step up from body, held to a reading
   measure. This and the pull quotes are the only places the 400 face is used. */
.gcp-lead {
  font-family: var(--gc-font-display);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--gc-text);
  max-width: 52ch;
  text-wrap: pretty;
  margin: 0;
}

.gcp-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gc-text-muted);
  max-width: 66ch;
  margin: 0;
}

/* Uppercase eyebrow. Tracked out, because uppercase at a small size without
   added letter-spacing reads as a solid block rather than as words. */
.gcp-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gc-primary);
  margin-bottom: 1rem;
}

.gcp-eyebrow--on-dark { color: var(--gc-primary-subtle); }

.gcp-meta {
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gc-text-muted);
}

/* --------------------------------------------------------------------------
   Bands and the content column
   -------------------------------------------------------------------------- */

.gcp-band { padding: var(--gcp-band) 0; }

.gcp-band--tint { background: var(--gc-surface-sunken); }
.gcp-band--subtle { background: var(--gc-primary-subtle); }

.gcp-band--dark {
  background: var(--gc-surface-inverse);
  color: #fff;
}

.gcp-wrap {
  max-width: var(--gc-content-max);
  margin: 0 auto;
  padding: 0 var(--gcp-gutter);
}

/* The sticky header would otherwise sit on top of whichever heading an
   in-page link jumped to. */
.gc-public [id] { scroll-margin-top: var(--gcp-nav-h); }

.gcp-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--gcp-gap);
  align-items: center;
}

.gcp-split--top { align-items: start; }
.gcp-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.gcp-header-block {
  max-width: 60ch;
  margin-bottom: 2.75rem;
}

.gcp-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* --------------------------------------------------------------------------
   Sticky header
   -------------------------------------------------------------------------- */

.gcp-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--gc-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gc-border);
  transition: box-shadow 0.3s ease;
}

.gcp-nav--scrolled { box-shadow: var(--bs-box-shadow-sm); }

.gcp-nav__bar {
  max-width: var(--gc-content-max);
  margin: 0 auto;
  padding: 0.75rem var(--gcp-gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: padding 0.3s ease;
}

.gcp-nav--scrolled .gcp-nav__bar { padding-block: 0.5rem; }

.gcp-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.gcp-brand__seal {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  flex: none;
}

.gcp-brand__name {
  font-family: var(--gc-font-display);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.15;
  white-space: nowrap;
}

.gcp-brand__org {
  font-size: 0.69rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gc-text-muted);
  white-space: nowrap;
}

/* `justify-content: flex-end` matters: without it the Sign in pill floats into
   the middle of the row once the links wrap on a narrow viewport. */
.gcp-nav__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.gcp-nav__link {
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--gc-text-muted);
  transition: background 0.2s ease, color 0.2s ease;
}

.gcp-nav__link:hover,
.gcp-nav__link:focus-visible {
  background: var(--gc-primary-subtle);
  color: var(--gc-primary);
}

/* --------------------------------------------------------------------------
   Buttons. Built on the app's own `.btn` so the focus ring, the 44px tap
   minimum and the hover states come from one place.
   -------------------------------------------------------------------------- */

.gcp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.gcp-btn-lg {
  padding: 0.875rem 1.625rem;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.gcp-hero {
  position: relative;
  padding: 4.5rem 0 var(--gcp-band);
  overflow: hidden;
}

/* Two soft discs behind the hero, parallaxed. Purely decorative and
   `aria-hidden` in the markup. */
.gcp-blob {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.gcp-blob--1 {
  width: 420px;
  height: 420px;
  top: -90px;
  right: -120px;
  background: var(--gc-primary-subtle);
  opacity: 0.75;
  filter: blur(2px);
}

.gcp-blob--2 {
  width: 140px;
  height: 140px;
  top: 190px;
  right: 190px;
  background: var(--gc-surface-sunken);
  opacity: 0.85;
}

/* Both discs are `position: absolute`, and an unpositioned block is painted
   before a positioned one -- so without this they paint *over* the hero's own
   content rather than behind it. Measured on the stat captions: 6.29:1 falls
   to 1.25:1 wherever a disc overlaps, which is decoration erasing text.
   Lifting the content is the fix. Giving the discs a negative z-index is not:
   `.gcp-hero` sets no z-index, so it opens no stacking context, and they would
   go behind the band's own background instead of behind its text. This is the
   same rule `.gcp-patch__copy` already carries for the same reason. */
.gcp-hero > .gcp-wrap {
  position: relative;
  z-index: 1;
}

.gcp-hero__note {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--gc-text-muted);
  margin: 1.125rem 0 0;
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Stat strip. Tabular figures so the four numerals align down the row.
   -------------------------------------------------------------------------- */

.gcp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.125rem;
}

/* In the hero the four figures sit two-up beside the copy, which is where the
   design handoff put a photograph. There is no SWDS photography yet, and an
   empty half-hero reads as a page that failed to load. */
.gcp-stats--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gcp-stat {
  background: var(--gc-surface-raised);
  border-radius: var(--bs-border-radius-xl);
  padding: 1.75rem 1.625rem;
}

.gcp-stat__figure {
  font-family: var(--gc-font-display);
  font-weight: 600;
  font-size: 2.125rem;
  line-height: 1;
  color: var(--gc-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}

.gcp-stat__caption {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gc-text-muted);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.gcp-grid {
  display: grid;
  gap: 1.25rem;
}

/* The minimums are tuned to the 1124px grid, not chosen round. Ten services at
   270px gave three columns and left card ten alone on a row of its own; 260px
   gives four and a closing row of two. Five roles at 210px missed a fifth
   column by six pixels, so "Five roles" wrapped as four and one; 200px puts all
   five on one line, which is what the heading promises. Nine modules and four
   steps already divided evenly and are untouched. */
.gcp-grid--services { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gcp-grid--modules { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gcp-grid--roles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gcp-grid--steps { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.75rem; }

.gcp-card {
  background: var(--gc-surface-raised);
  border-radius: var(--bs-border-radius-xl);
  padding: 1.625rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-shadow: var(--bs-box-shadow-sm);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}

.gcp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bs-box-shadow);
}

.gcp-badge {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--gc-primary-subtle);
  color: var(--gc-primary);
  font-family: var(--gc-font-display);
  font-weight: 600;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.gcp-badge--lg { width: 44px; height: 44px; font-size: 1rem; }

.gcp-card__title {
  font-size: 1.15rem;
  line-height: 1.22;
}

.gcp-card__body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gc-text-muted);
  margin: 0;
}

/* Pinned to the bottom so a row of cards of different heights still lines its
   flags up with one another. */
.gcp-card__flag {
  margin-top: auto;
  padding-top: 0.625rem;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gc-primary);
}

.gcp-card__meta {
  margin-top: auto;
  padding-top: 0.625rem;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gc-text-muted);
}

/* --------------------------------------------------------------------------
   Panels: the assistant disclaimer, the PWD note, the sign-in patch
   -------------------------------------------------------------------------- */

.gcp-panel {
  background: var(--gc-primary-subtle);
  border-radius: var(--bs-border-radius-xl);
  padding: 1.25rem 1.375rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--gc-text);
}

.gcp-panel--raised {
  background: var(--gc-surface-raised);
  box-shadow: var(--bs-box-shadow-sm);
  padding: 1.75rem 1.875rem;
}

.gcp-panel p { margin: 0; }

/* Q&A rows */
.gcp-asks {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gcp-ask {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  background: var(--gc-surface-raised);
  border-radius: var(--bs-border-radius-xl);
  padding: 1.125rem 1.375rem;
  transition: background 0.3s ease;
}

.gcp-ask:hover { background: var(--gc-primary-subtle); }

.gcp-ask__mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gc-primary);
  color: var(--gc-on-primary);
  font-size: 0.875rem;
  font-weight: 600;
}

.gcp-ask__q {
  font-size: 0.97rem;
  line-height: 1.45;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.gcp-ask__a {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--gc-text-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Referral steps
   -------------------------------------------------------------------------- */

.gcp-step {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.gcp-step__num {
  width: 62px;
  height: 62px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gc-primary);
  color: var(--gc-on-primary);
  font-family: var(--gc-font-display);
  font-weight: 600;
  font-size: 1.4rem;
  box-shadow: var(--bs-box-shadow);
}

/* --------------------------------------------------------------------------
   Confidentiality band
   -------------------------------------------------------------------------- */

.gcp-band--dark h2,
.gcp-band--dark h3 { color: #fff; }

/* Every text class that can appear on the inverse ground, not just the two the
   band was first written with. The safeguard descriptions reuse `.gcp-ask__a`,
   whose muted grey measures 2.0:1 here -- legible on the light bands it was
   written for and almost invisible on this one. */
.gcp-band--dark .gcp-body,
.gcp-band--dark .gcp-lead,
.gcp-band--dark .gcp-ask__a,
.gcp-band--dark .gcp-card__body,
.gcp-band--dark .gcp-meta { color: var(--gc-primary-subtle); }

.gcp-pill {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--gc-primary);
  color: var(--gc-on-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.gcp-safeguard {
  display: flex;
  gap: 1.125rem;
  padding: 1.25rem 0;
  border-top: 1px solid color-mix(in srgb, #fff 18%, transparent);
}

.gcp-safeguard__dot {
  width: 9px;
  height: 9px;
  flex: none;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: var(--gc-primary-subtle);
}

.gcp-safeguard h3 {
  font-size: 1.05rem;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   Crisis routing. Deliberately NOT the reserved `--gc-crisis*` family, which
   `10` reserves for the in-application crisis banner and queue. A public page
   that borrowed the crisis red would spend the one colour the product keeps
   for an actual emergency.
   -------------------------------------------------------------------------- */

.gcp-urgent {
  border-radius: var(--bs-border-radius-xl);
  background: var(--gc-surface-raised);
  box-shadow: var(--bs-box-shadow-sm);
  padding: 1.75rem 1.875rem;
}

.gcp-urgent__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.5rem 1.75rem;
}

/* Wrapping, not nowrap. One seeded entry -- the NCMH mobile line -- carries
   three comma-separated numbers, and held on one line it overflowed its column
   and printed on top of the row beside it. Short entries still sit name-left,
   number-right; a long one drops its number onto its own line. */
.gcp-urgent__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gc-border);
  font-size: 0.9rem;
  min-width: 0;
}

.gcp-urgent__row > span { min-width: 0; }

.gcp-urgent__num {
  font-weight: 600;
  color: var(--gc-primary);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Contacts
   -------------------------------------------------------------------------- */

.gcp-contacts {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  max-width: 44ch;
}

.gcp-contact__label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gc-text-muted);
  margin-bottom: 0.125rem;
}

.gcp-contact__value {
  font-size: 1.03rem;
  line-height: 1.55;
  color: var(--gc-text);
}

/* --------------------------------------------------------------------------
   Sign-in patch and footer
   -------------------------------------------------------------------------- */

.gcp-patch {
  position: relative;
  overflow: hidden;
  background: var(--gc-primary-subtle);
  border-radius: var(--bs-border-radius-xxl);
  padding: 4rem 3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 3rem;
  align-items: center;
}

.gcp-patch__blob {
  position: absolute;
  width: 340px;
  height: 340px;
  bottom: -140px;
  right: -60px;
  border-radius: 999px;
  background: var(--gc-surface-sunken);
  opacity: 0.7;
  pointer-events: none;
}

.gcp-patch__copy,
.gcp-patch__actions { position: relative; }

.gcp-patch__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gcp-foot {
  border-top: 1px solid var(--gc-border);
  padding: 2.75rem 0 3.25rem;
}

.gcp-foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  align-items: center;
  justify-content: space-between;
}

.gcp-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.85rem;
}

/* `10` section 3.2: this line appears on every page of the product, the public
   ones included, because it is also the notice a referrer sees. */
.gcp-foot__notice {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--gc-text-muted);
}

/* --------------------------------------------------------------------------
   Motion. The from-states are applied by `public-home.js` only once it has
   confirmed the animation clock is running -- never as the resting state, or a
   background tab and a print render show a blank hero.
   -------------------------------------------------------------------------- */

/* Printing before scrolling would otherwise put the un-revealed sections on
   paper at `opacity: 0`. GSAP writes inline styles, so only `!important` beats
   them. The JavaScript guards cover a dead ticker; this covers a live one whose
   triggers simply have not fired yet. */
@media print {
  .gc-public [data-anim],
  .gc-public [data-anim-group] > *,
  .gc-public [data-hero] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gcp-card,
  .gcp-ask,
  .gcp-nav,
  .gcp-nav__bar,
  .gcp-nav__link { transition: none; }
  .gcp-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Responsive. Every two-column band collapses in reading order.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .gcp-split,
  .gcp-split--even,
  .gcp-patch { grid-template-columns: minmax(0, 1fr); }
  .gcp-patch { padding: 2.75rem 1.75rem; }
  .gcp-blob--1,
  .gcp-blob--2 { display: none; }
}

/* The section links are dropped from the sticky header on a narrow screen
   rather than wrapped. Measured at 390px they took six rows and made the header
   282px tall -- a third of the viewport, permanently, on a page that is already
   a single long scroll. The footer carries the same five links, and the page
   reads top to bottom anyway. Brand and Sign in stay. */
/* Between the desktop row and the mobile collapse the five links still fit,
   but only just: at 900px they took three rows and a 112px sticky header.
   Tightening the padding and size puts them back on one. */
@media (max-width: 1050px) and (min-width: 821px) {
  .gcp-nav__link { padding: 0.5rem 0.55rem; font-size: 0.82rem; }
  .gcp-nav__bar { gap: 0.75rem; }
  .gcp-brand__name { font-size: 0.9rem; }
}

@media (max-width: 820px) {
  .gcp-nav__link { display: none; }
  .gcp-nav__bar { gap: 0.75rem; }
  .gcp-brand__name { white-space: normal; font-size: 0.9rem; }
  .gcp-brand__org { white-space: normal; }
}

@media (max-width: 768px) {
  .gc-public { --gcp-band: 3.5rem; --gcp-gap: 2.25rem; }
  .gcp-hero { padding-top: 2.75rem; }
  .gcp-urgent__list { grid-template-columns: minmax(0, 1fr); }
  .gcp-urgent,
  .gcp-panel--raised { padding: 1.25rem 1.25rem; }

}

/* Below this the seal plus the full office name plus the button cannot share a
   row without the page scrolling sideways. */
@media (max-width: 430px) {
  .gcp-brand__org { display: none; }
  .gcp-brand__seal { width: 32px; height: 32px; }
  .gcp-stats--hero { grid-template-columns: minmax(0, 1fr); }
}