/* AnglerPermit 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 AnglerPermit 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; }
}