/*
 * Shared NAT accent contrast
 * Light surfaces use a deep blue-green. Dark and photographic surfaces keep
 * the pale blue accent. Loaded globally after page-specific styles.
 */
:root {
  --nat-accent-light-surface: #2d6077;
  --nat-accent-dark-surface: #b9dff0;
}

:where(
  .eyebrow,
  .al-kicker,
  .portal-kicker,
  .chapter,
  .section-no,
  .need-label,
  [class$="-eyebrow"],
  [class$="-kicker"]
) {
  color: var(--nat-accent-light-surface) !important;
}

/* Numbered steps are accents too, but not ordinary list numbers. */
.al-steps li::before,
.steps .step-number {
  color: var(--nat-accent-light-surface) !important;
}

/* Dark blocks and image heroes need the lighter accent. */
:where(
  [class*="hero"],
  [class*="--dark"],
  [class*="dark-section"],
  .section--dark,
  .al-safety,
  .passport-panel,
  .community-panel,
  .next-card,
  .membership-status-card,
  .member-event-info,
  .digital-card,
  .phone-passport,
  .event-badge-preview,
  .nat-pulse,
  .content-footer,
  .portal-footer
) :where(
  .eyebrow,
  .al-kicker,
  .portal-kicker,
  .chapter,
  .section-no,
  .need-label,
  [class$="-eyebrow"],
  [class$="-kicker"]
) {
  color: var(--nat-accent-dark-surface) !important;
}

:where(.al-safety, [class*="hero"], [class*="dark-section"], .section--dark)
  .al-steps li::before {
  color: var(--nat-accent-dark-surface) !important;
}

/* White cards and light panels must always return to the dark accent. */
:where(
  .card,
  .portal-card,
  .route-card,
  .event-content-grid article,
  .al-guide-grid article,
  .guide-article,
  .settings-grid > div,
  .portal-split > div,
  .premium-profile-form,
  .search-card,
  .product-grid article
) :where(
  .eyebrow,
  .al-kicker,
  .portal-kicker,
  .chapter,
  .section-no,
  .need-label,
  [class$="-eyebrow"],
  [class$="-kicker"]
) {
  color: var(--nat-accent-light-surface) !important;
}

@media (forced-colors: active) {
  :where(.eyebrow,.al-kicker,.portal-kicker,.chapter,.section-no,.need-label) {
    color: CanvasText !important;
  }
}

/* External-event pages previously displayed the eyebrow as a green badge. */
.external-notice .eyebrow {
  display: block;
  width: auto;
  margin: 0 0 12px;
  padding: 0;
  color: var(--nat-accent-light-surface) !important;
  background: transparent;
  border: 0;
  font-size: .68rem;
  line-height: 1.4;
}

/* Keep For dig aligned with the current NAT typography system. */
.for-you-page {
  font-family: Inter, Arial, sans-serif;
}

.for-you-page :where(h1,h2,h3) {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
  text-transform: uppercase;
}

.for-you-page .for-you-hero h1 {
  line-height: .88 !important;
}

.for-you-page :where(.welcome-intro,.portal-purpose,.interest-heading) h2 {
  line-height: .9 !important;
}

.for-you-page .quick-start-grid h3 {
  line-height: .94 !important;
  letter-spacing: -.015em;
}