/* FishingLicensee Canada — colour-only override for the legacy application funnel.
   Remaps the original green brand tokens to the navy / CTA-blue system.
   No layout, spacing, typography or behaviour changes. */
:root {
  --primary: 221 83% 53%; /* #2563EB */
  --primary-foreground: 0 0% 100%;
  --secondary: 213 100% 96%;
  --secondary-foreground: 209 74% 15%;
  --accent: 221 83% 53%;
  --accent-foreground: 0 0% 100%;
  --ring: 221 83% 53%;
  --background: 210 43% 98%; /* #F6F9FC */
  --foreground: 209 74% 15%; /* #0A2540 */
  --muted: 210 30% 95%;
  --muted-foreground: 213 21% 39%; /* #425466 */
  --border: 210 30% 92%; /* #E6EBF1 */
  --input: 210 30% 92%;
  --header-bg: 209 74% 15%;
  --header-fg: 0 0% 100%;
  --banner-bg: 209 74% 15%;
  --banner-fg: 0 0% 100%;
  --gov-green: 221 83% 53%;
  --gov-green-light: 213 100% 96%;
  --gov-green-hover: 224 76% 48%;
  --gov-dark: 209 74% 15%;
  --gov-link: 221 83% 53%;
  --sidebar-primary: 221 83% 53%;
  --sidebar-accent: 213 100% 96%;
  --sidebar-accent-foreground: 209 74% 15%;
  --sidebar-ring: 221 83% 53%;
}

/* ── Canonical FishingLicensee logo (injected into the funnel header by
   /assets/js/brand-patch.js) — light variant, funnel-compact sizing:
   icon 36px, word 19px. Class contract from the shared logo reference. ── */
.ap-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ap-logo__icon { flex: 0 0 auto; width: 36px; height: 36px; }
.ap-logo__text { display: flex; flex-direction: column; line-height: 1; }
.ap-logo__word { font-weight: 700; font-size: 19px; letter-spacing: -0.4px; display: flex; align-items: baseline; }
.ap-logo__word .w1 { color: #0A2540; }
.ap-logo__word .w2 { color: #14A08F; }
.ap-logo__word .tld { font-size: 10px; font-weight: 600; color: #64748B; margin-left: 1px; }
.ap-logo__canada { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.ap-logo__canada svg { width: 10px; height: 10px; }
.ap-logo__canada span { font-size: 8px; font-weight: 700; letter-spacing: 0.3em; color: #0A2540; }
@media (max-width: 420px) {
  .ap-logo__icon { width: 32px; height: 32px; }
  .ap-logo__word { font-size: 17px; }
}

/* ── R4 funnel polish (audited findings R4-01..R4-11) — wizard only.
   Everything below is scoped under main + wizard-specific hooks
   (.gov-card, the bg-destructive/5 summary box, data-ap-* attributes set
   by funnel-polish.js). This stylesheet is loaded only by the legacy
   funnel page (src/legacy/index.html) — never by the checkout React page
   or the marketing pages. ── */

/* R4-02: field flagged from the bundle's error summary (funnel-polish.js
   adds/removes .ap-field-error + aria-invalid as the summary appears). */
main .ap-field-error { border-color: #C62828 !important; }

/* R4-03: the summary's destructive text (#EF4343) is ~2.8:1 on its tinted
   box — darken to #C62828 (≈5.0:1 on the blended background). */
main div[class*="bg-destructive/5"] .text-destructive { color: #C62828; }

/* R4-09: lift field labels 12px → 13px (weight 500 and line-height kept). */
main .gov-card label.text-xs { font-size: 13px; }

/* R4-08: one field-row vertical gap — the wizard mixes 12px (space-y-3,
   gap-3 grid rows) with 16px (space-y-4); normalise the rhythm to 16px.
   Column gaps in field grids are left at the bundle's 12px. */
main .gov-card .space-y-3 > :not([hidden]) ~ :not([hidden]),
main .gov-card .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
main .gov-card .grid.gap-3 { row-gap: 1rem; }

/* R4-11: checkbox brand accent + visible keyboard focus (all viewports;
   the 20×20 mobile sizing lives in funnel-polish.js's ≤768px block). */
main .gov-card input[type="checkbox"] { accent-color: #2563EB; }
main .gov-card input[type="checkbox"]:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

/* R4-10: mobile stepper — below the sm breakpoint the bundle hides every
   step label (hidden sm:block); reveal only the active step's label
   (funnel-polish.js tags its group data-ap-step-active), 11px, centred
   under the 32px circle. From 640px up the bundle's own inline labels
   show, so this rule stops there. */
@media (max-width: 639.98px) {
  main [data-ap-step-active="1"] { position: relative; }
  main [data-ap-step-active="1"] > span {
    display: block !important;
    position: absolute;
    top: calc(100% + 3px);
    left: 16px; /* centre of the w-8 circle */
    transform: translateX(-50%);
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM ELEVATION — application funnel (Steps 1–4)
   ---------------------------------------------------------------------------
   The funnel is a prebuilt, minified bundle (public/assets/js/app.js) with no
   source, so it cannot be restructured. What it DOES expose is a full set of
   HSL custom properties and stable class hooks, which is enough to bring its
   typography, spacing, controls and states onto the same design language as
   the rebuilt marketing site.

   HARD CONSTRAINT — do not violate: footer-patch.js decides whether to show
   the full landing footer by counting `div.rounded-full` elements whose text
   is a single digit and looking for `gov-btn-primary` on the active one, plus
   a `w-10 h-px` connector sibling. Everything below is presentational CSS
   only — no DOM, no classes, no attributes are touched — so that detection is
   structurally unaffected. Never move this work into a patch script.

   Values resolve to /assets/css/tokens.css, linked ahead of this file.
   ═════════════════════════════════════════════════════════════════════════ */

/* ---- Type scale ---------------------------------------------------------- */
#root { font-family: var(--font-sans); }
main h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  color: var(--neutral-900);
  text-wrap: balance;
}
main h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  color: var(--neutral-900);
}
main .gov-card h2, main .gov-card h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
main p { color: var(--neutral-600); }

/* ---- Cards --------------------------------------------------------------- */
main .gov-card {
  border-radius: var(--radius-lg);
  border-color: var(--hairline);
  box-shadow: var(--shadow-xs);
}

/* ---- Controls: 48px, 16px type, real focus ring (Part 4.2) --------------- */
main input[type="text"],
main input[type="email"],
main input[type="tel"],
main input[type="number"],
main input[type="date"],
main select,
main textarea {
  min-height: var(--control-h);
  padding-inline: 14px;               /* Part 4.2 field inset — no token step */
  font-family: var(--font-sans);
  font-size: var(--fs-body);          /* 16px — prevents iOS zoom */
  color: var(--neutral-900);
  border-radius: var(--radius-md);
  border-color: var(--neutral-300);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
main textarea { padding-block: var(--space-3); }
main :is(input, select, textarea):hover { border-color: var(--neutral-400); }
main :is(input, select, textarea):focus,
main :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: var(--focus-ring);
}
main input::placeholder, main textarea::placeholder { color: var(--neutral-400); }
main label { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--neutral-700); }

/* ---- Primary button ------------------------------------------------------ */
main button.gov-btn-primary {
  min-height: var(--btn-h-md);
  padding-inline: var(--space-5);
  border-radius: var(--radius-md);
  border-color: transparent;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-xs);
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
main button.gov-btn-primary:hover { box-shadow: var(--shadow-sm); }

/* Every funnel control clears the 44px target. */
main button, main a[role="button"], main [role="radio"], main [role="checkbox"] {
  min-height: var(--tap-min);
}
main :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Selection cards (province / residency / licence) -------------------
   The bundle renders these as bordered buttons. funnel-polish.js maintains
   aria-pressed on them, which gives a reliable selected hook that does not
   depend on the bundle's utility classes. Selection is carried by BOTH the
   border/tint and a check glyph, never by colour alone (Part 4.2). */
main button[aria-pressed] {
  position: relative;
  min-height: 72px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border-color: var(--hairline);
  background: var(--neutral-0);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--neutral-700);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
@media (min-width: 768px) { main button[aria-pressed] { min-height: 88px; } }
main button[aria-pressed]:hover { border-color: var(--neutral-300); box-shadow: var(--shadow-xs); }
main button[aria-pressed="true"] {
  border-color: var(--brand-600);
  background: var(--brand-50);
  color: var(--neutral-900);
  padding-right: var(--space-10);
}
main button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: var(--icon-md);
  height: var(--icon-md);
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: none) {
  main button[aria-pressed]:hover { border-color: var(--hairline); box-shadow: none; }
  main button[aria-pressed="true"]:hover { border-color: var(--brand-600); }
}

/* ---- Stepper circles — restyled visually ONLY. The digit text, the empty
   child list, the gov-btn-primary class and the w-10/h-px connector all stay
   exactly as the bundle renders them, so footer-patch's detection is intact. */
main div.rounded-full { transition: background-color var(--dur-base) var(--ease-out); }

/* ---- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  main *, main *::before, main *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---- Specificity correction --------------------------------------------
   The bundle's Tailwind utilities are single-class selectors (0,1,0), which
   outrank element selectors like `main h1` (0,0,2). Re-assert the type scale
   and the primary button through #root so the design language actually wins.
   Still presentational only — no DOM or class changes. */
#root main h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
}
#root main h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
#root main .gov-card h2, #root main .gov-card h3 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}
#root main button.gov-btn-primary {
  min-height: var(--btn-h-md);
  padding-inline: var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}
/* The wizard's NEXT/BACK row buttons are the step's primary action — give them
   the large control height so the most-tapped control is the easiest to hit.
   `button.` matters: div.rounded-full stepper circles share this class and
   must keep their own geometry (footer-patch.js keys off them). */
#root main button.gov-btn-primary { min-height: var(--btn-h-lg); }

/* Selection cards must not be squeezed into a narrow 3-up row on a phone.
   The bundle lays them out with flex + min-w-[140px]; below 640px they take
   the full width and stack, which is also the correct one-decision-per-screen
   reading order. */
@media (max-width: 639.98px) {
  /* The row must be allowed to wrap before its children claim a full row,
     otherwise the second control is pushed outside the viewport. */
  #root main div:has(> button[aria-pressed]) { flex-wrap: wrap; }
  #root main button[aria-pressed] {
    flex: 1 1 100%;
    min-width: 0;       /* never wider than the container — DEF-101 */
    min-height: 72px;   /* Part 4.2 selection-card minimum on mobile */
  }
}


/* DEF-103/104 — footer-patch.js injects its own footer markup, which repeats
   the short-link tap-target defect fixed on the marketing side: min-height
   padded the height, nothing padded the width ("FAQ" was 23.66×44). */
.ap-ff__list a,
.ap-ff a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding-inline: var(--space-2);
  margin-inline: calc(-1 * var(--space-2));
}

/* DEF-107 — the reduced-motion block was scoped to `main`, leaving the header
   and footer nav links transitioning at 150ms. Motion preferences are not
   scoped to a region. */
@media (prefers-reduced-motion: reduce) {
  #root *, #root *::before, #root *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 5e — BACK and NEXT are a control pair and should be typographically equal;
   BACK was rendering a step smaller than NEXT. */
#root main button.gov-btn-primary,
#root main button:has(> svg) + button,
#root main button[class*="border"]:not([aria-pressed]) { font-size: var(--fs-body); }

/* ---- Owner request: drop the "Get Assistance with Your Canadian Fishing
   Licence" banner from the application pages -----------------------------
   The navy band is `div.gov-banner.py-6` and appears on /apply and every
   /services/apply/<province> page. `:has(h1)` targets it precisely and spares
   the DIFFERENT .gov-banner on /services/fishinglicence (a "Ready to Get
   Started?" CTA band with no h1), which stays.

   The band also carries the page's ONLY <h1>, so it is not simply deleted:
   the visual band goes, and the heading is kept in the accessibility tree so
   the page still has a proper document outline for screen readers and search
   engines. Presentational only — footer-patch's stepper detection counts
   div.rounded-full elements and is untouched. */
#root .gov-banner:has(h1) {
  background: none;
  padding: 0;
  border: 0;
}
#root .gov-banner:has(h1) > * { padding: 0; }
#root .gov-banner h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}