/* Production database bootstrap state. Only shown when the homepage cannot
   connect to the registry database; normal owner-approved rendering is unchanged. */
.registry-provisioning-banner {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f1c46b;
  background: #fff7e6;
  color: #543300;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
/* ============================================================
   wp30d.css — WP-30B Fidelity Correction Pass
   Final visual override layer. Loaded last.
   Targets authority homepage composition to match approved mockup.
   ============================================================ */

/* ── 1. WHITE DESTINATION NAV ROW ───────────────────────────────────────────
   APPROVED MOCKUP: second navigation row is WHITE with dark navy text
   and a thin Canadian red rule running the full width at the bottom.
   Current implementation: navy — INCORRECT.
   ──────────────────────────────────────────────────────────────────────── */

.masthead-nav {
  background: #FFFFFF !important;
  border-top: none !important;
  border-bottom: none !important;
  position: relative !important;
  box-shadow: 0 1px 0 #E2E6EC !important; /* very subtle grey rule above red */
}

/* Full-width Canadian red rule at the bottom of the white nav bar */
.masthead-nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--clr-red, #C8102E);
  z-index: 1;
}

/* Dark navy text for all nav items on white background */
.masthead-nav .nav-dest,
.masthead-nav .nav-item,
.masthead-nav .nav-dropdown-btn {
  color: var(--clr-navy, #071A32) !important;
  font-size: .71rem !important;
  letter-spacing: .09em !important;
  font-weight: 600 !important;
}
.masthead-nav .nav-dest:not(.active) {
  color: #3A4A60 !important;         /* slightly softened navy for unselected */
  border-bottom: 3px solid transparent !important;
  margin-bottom: -3px !important;
}
.masthead-nav .nav-dest.active {
  color: var(--clr-navy, #071A32) !important;
  font-weight: 700 !important;
  border-bottom: 3px solid var(--clr-red, #C8102E) !important;
  margin-bottom: -2px !important; /* active indicator floats above red bottom rule */
  z-index: 2 !important;
}
.masthead-nav .nav-dest:hover:not(.active),
.masthead-nav .nav-dest:focus-visible:not(.active) {
  color: var(--clr-red, #C8102E) !important;
  border-bottom-color: rgba(200,16,46,0.3) !important;
}
/* Dropdown button chevron colour */
.masthead-nav .nav-chevron { color: inherit; }

/* Dropdown popup: keep dark for readability */
.nav-dropdown {
  background: var(--clr-navy, #071A32) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  top: 100% !important;
  z-index: 200 !important;
}
.nav-dropdown a, .nav-dropdown [role="menuitem"] {
  color: rgba(255,255,255,0.80) !important;
}
.nav-dropdown a:hover { color: #fff !important; }

/* ── 2. HERO — COMPACT + LIGHTER GRADIENT ───────────────────────────────────
   WP-30C.3: Reduce overlay on right side. Text needs breathing room above.
   Left 0–25% heavy navy for readability; right 60%+ nearly transparent.
   ──────────────────────────────────────────────────────────────────────── */

.authority-hero {
  min-height: 390px !important;
  /* Let the desktop hero grow with wrapped audience-panel copy.
     A fixed max-height clipped the panel links at narrower desktop widths. */
  max-height: none !important;
}
.authority-hero > .container {
  /* +36px breathing room above headline vs previous 1.5rem */
  padding-top: 3.75rem !important;
  padding-bottom: 1.75rem !important;
}

/* Gradient — owner spec: navy mainly behind left text, right largely unobstructed */
.authority-hero-gradient {
  background: linear-gradient(
    90deg,
    rgba(7,26,50,0.98)  0%,
    rgba(7,26,50,0.92) 22%,
    rgba(7,26,50,0.68) 36%,
    rgba(7,26,50,0.28) 50%,
    rgba(7,26,50,0.07) 60%,
    transparent        68%
  ) !important;
}

/* Moraine Lake hero: position so flag + peaks appear on right, lake on left */
.authority-hero-bg-img img {
  object-position: 55% 38% !important;
  /* Brightness/contrast/saturation — owner spec: +8–10% brighter, +8–10% contrast, +8–15% sat */
  filter: brightness(1.09) contrast(1.09) saturate(1.15) !important;
}

/* Hero content width — matches mockup 38–43% left content zone */
.hero-content-inner {
  max-width: 540px !important;
}

/* ── 3. HEADLINE — 44–52px, NO ITALIC ───────────────────────────────────────
   APPROVED MOCKUP: headline fits ~2 lines at ~44–52px.
   Current is 3.2rem (~51px) but breaks into 6 lines — WAY too wide.
   "Mapped. Verified." must be RED but NOT italic.
   ──────────────────────────────────────────────────────────────────────── */

.authority-h1 {
  font-size: 2.875rem !important;   /* 46px — fits in ~2 lines at 540px width */
  line-height: 1.01 !important;
  letter-spacing: -.025em !important;
  margin: 0 0 .65rem !important;
  max-width: 540px;
}
.authority-h1-line1 {
  display: block;
  color: #fff !important;
}
.authority-h1-accent {
  color: var(--clr-red, #C8102E) !important;
  font-style: normal !important;      /* NOT italic — spec is explicit */
  font-weight: 800 !important;
  display: block;
}
.authority-h1-white {
  color: #fff !important;
  font-style: normal !important;
}

/* Supporting paragraph — compact, ~500px max */
.authority-sub {
  font-size: .875rem !important;
  line-height: 1.58 !important;
  max-width: 490px !important;
  margin: 0 0 1rem !important;
  color: rgba(255,255,255,0.80) !important;
}

/* ── 4. SEARCH — COMPACT, INSTITUTIONAL ─────────────────────────────────────
   APPROVED MOCKUP: slim single-line search, compact height.
   Current 48px is too large/marketing.
   ──────────────────────────────────────────────────────────────────────── */

.authority-search {
  max-width: 500px !important;
}
.authority-search input {
  height: 38px !important;
  font-size: .82rem !important;
  padding-left: 2.5rem !important;
}
.authority-search button {
  height: 38px !important;
  font-size: .74rem !important;
  padding: 0 1.1rem !important;
  letter-spacing: .06em !important;
}

/* ── 5. MINI AUDIENCE PATHWAYS — transparent, integrated ────────────────────
   Should feel part of the hero composition, not heavy dashboard cards.
   ──────────────────────────────────────────────────────────────────────── */

.hero-mini-panels {
  max-width: 500px !important;
  margin-top: .75rem !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 3px !important;
}
.hero-mini-panel {
  background: rgba(7,26,50,0.35) !important;
  padding: .5rem .85rem !important;
}
.hero-mini-panel + .hero-mini-panel {
  border-left: 1px solid rgba(255,255,255,0.14) !important;
}
/* mini-panel typography more compact */
.hero-mini-panel .hero-panel-label {
  font-size: .6rem !important;
  letter-spacing: .1em !important;
  margin-bottom: .15rem !important;
}
.hero-mini-panel .hero-panel-heading {
  font-size: .7rem !important;
  margin-bottom: .2rem !important;
}
.hero-mini-panel .hero-panel-desc {
  font-size: .68rem !important;
  line-height: 1.4 !important;
  margin-bottom: .3rem !important;
}
.hero-mini-panel .hero-panel-link {
  font-size: .68rem !important;
}

/* Also hide any tall divider icons in the mini panels */
.hero-panel-icon { display: none !important; }

/* ── 6. OWNER-APPROVED MAPLE LEAF ──────────────────────────────────────────
   maple-leaf-approved.png: owner-supplied broad Canadian maple leaf (256×218px).
   Applied as <img> in masthead, drawer, footer, stat icon.
   ──────────────────────────────────────────────────────────────────────── */

/* Masthead leaf — sized to balance two-line wordmark */
.logo-leaf .maple-leaf-icon {
  width:  40px !important;
  height: 34px !important;
  display: block !important;
}

/* Footer maple leaf */
.footer-maple-icon {
  width: 24px !important;
  height: 20px !important;
}

/* Logo lockup: leaf centered beside wordmark */
.site-logo {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
}
.logo-leaf {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* ── Wordmark proportions — WP-30C.3 ───────────────────────────────────────
   "CANADIAN" must be LARGER and approximately the same visual width as
   "INSURANCE REGISTRY" beneath it.
   Strategy: increase CANADIAN font-size + letter-spacing;
              reduce INSURANCE REGISTRY font-size slightly.
   ──────────────────────────────────────────────────────────────────────── */
.logo-line-1 {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: .88rem !important;           /* larger — was .68rem */
  font-weight: 700 !important;
  letter-spacing: .25em !important;       /* wide tracking to span full width */
  color: #FFFFFF !important;
  text-transform: uppercase !important;
  display: block !important;
  line-height: 1.1 !important;
}
.logo-line-2 {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: .68rem !important;           /* reduced — was .92rem */
  font-weight: 600 !important;
  letter-spacing: .055em !important;
  color: rgba(255,255,255,0.82) !important;
  text-transform: uppercase !important;
  display: block !important;
  line-height: 1.1 !important;
}

/* ── 7. HEADER HEIGHT UPDATE ────────────────────────────────────────────────
   Top: 54px navy  +  Nav: 38px white  =  92px total
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --masthead-nav-h: 38px !important;
  --header-h:       92px !important;
}
.masthead-nav {
  height: 38px !important;
}
.masthead-nav .nav-dest,
.masthead-nav .nav-item {
  height: 38px !important;
  line-height: 38px !important;
}

/* ── 8. COLOR RHYTHM — reduce consecutive navy ──────────────────────────────
   Follow approved rhythm: Navy → White → Navy+photo → DarkNavy → White
   ──────────────────────────────────────────────────────────────────────── */

/* Metrics strip connects to hero as "bottom of hero" feel */
.registry-strip {
  padding: .875rem 0 !important;
}
.registry-stat strong {
  font-size: 1.75rem !important;
}
.registry-stat-link {
  border-radius: 4px;
  text-decoration: none !important;
  transition: background-color .16s ease, transform .16s ease;
}
.registry-stat-link:hover {
  background: rgba(255,255,255,.07);
  transform: translateY(-2px);
}
.registry-stat-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.registry-stat-link:hover strong,
.registry-stat-link:focus-visible strong,
.registry-stat-link:hover span,
.registry-stat-link:focus-visible span {
  color: #fff !important;
}

/* Gateway section background: white not light grey */
.gateway-section {
  background: #fff !important;
  padding: 1.75rem 0 2rem !important;
}

/* ── 9. SEARCH HINT — remove on compact hero ────────────────────────────── */
.authority-search-hint { display: none !important; }

/* ── 9b. TRUST STRIP — readability fix ─────────────────────────────────────
   Root cause: wp30a.css forces background: var(--clr-ink) !important (dark navy).
   wp30c.css then set icons/headings to navy-on-navy → invisible.
   Fix: restore white/light colours for dark-background context.
   ──────────────────────────────────────────────────────────────────────── */

.trust-pillar-icon {
  color: #FFFFFF !important;        /* white filled icon on dark navy */
  opacity: 1 !important;            /* was 0.7 → invisible */
  width: 56px !important;           /* larger badge (was 44px) */
  height: 56px !important;
  background: rgba(200,16,46,0.28) !important;   /* more opaque red tint (was 0.15) */
  border: 1px solid rgba(200,16,46,0.45) !important;  /* subtle red ring for definition */
  border-radius: 10px !important;
  margin-bottom: 1.1rem !important;
}
.trust-pillar h3 {
  color: #FFFFFF !important;        /* white headings */
  font-size: .82rem !important;
}
.trust-pillar p {
  color: rgba(255,255,255,0.72) !important;   /* soft white body copy */
}
.trust-pillar a {
  color: var(--clr-red, #C8102E) !important;  /* Canadian red CTAs */
}
.trust-pillar a:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

/* ── 10. MOBILE: white nav collapses gracefully ─────────────────────────── */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .site-header,
  .masthead-top,
  .masthead-nav,
  .page-main,
  .authority-hero,
  .registry-strip,
  .gateway-section,
  .site-footer {
    width: 100%;
    max-width: 100%;
  }
  .masthead-top,
  .masthead-nav {
    align-self: stretch;
  }
  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .masthead-utility,
  .masthead-actions .nav-cta {
    display: none;
  }
  .masthead-actions {
    margin-left: auto;
  }
  /* Mobile nav: revert to navy for usability in the drawer */
  .masthead-nav {
    background: var(--clr-navy, #071A32) !important;
    box-shadow: none !important;
  }
  .masthead-nav::after { display: none !important; }
  .masthead-nav .nav-dest,
  .masthead-nav .nav-item,
  .masthead-nav .nav-dropdown-btn {
    color: rgba(255,255,255,0.80) !important;
  }
  .masthead-nav .nav-dest.active {
    color: #fff !important;
    border-bottom-color: var(--clr-red) !important;
  }
  .authority-hero {
    min-height: 0 !important;
    max-height: none !important;
  }
  /* Mobile copy spans most of the image, so keep a dark veil behind it.
     The desktop gradient can fade earlier because its copy stays on the left. */
  .authority-hero-gradient {
    background:
      linear-gradient(
        90deg,
        rgba(7,26,50,0.96) 0%,
        rgba(7,26,50,0.88) 58%,
        rgba(7,26,50,0.68) 100%
      ),
      linear-gradient(
        180deg,
        rgba(7,26,50,0.14) 0%,
        rgba(7,26,50,0.34) 100%
      ) !important;
  }
  .authority-h1 { font-size: 1.9rem !important; }
  .authority-sub {
    color: rgba(255,255,255,0.96) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.72);
  }
}

@media (max-width: 480px) {
  .authority-search input {
    flex: 0 0 58px !important;
    width: 100%;
    height: 58px !important;
    min-height: 58px;
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
    font-size: .95rem !important;
  }
  .authority-search button {
    width: 100%;
    height: 48px !important;
    min-height: 48px;
  }
}