/* 03-accessibility.css */
/* ============================================================
   3. ACCESSIBILITY UTILITIES
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100%;
  left: var(--sp-4);
  z-index: var(--z-toast);
  background: var(--primary);
  color: var(--text-on-primary);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--sp-4);
  outline: 3px solid var(--secondary);
}

/* ============================================================================
   HIGH-CONTRAST DARK — targeted fixes
   ============================================================================ */

/* Share button: force white text in HC-dark for both the place detail
   share action and the itinerary toolbar primary (Share) button */
html.dark.high-contrast .place-action--share,
html.dark.high-contrast .place-action--share:visited {
  color: #fff;
  border-color: var(--border);
}
html.dark.high-contrast .itinerary-toolbar__btn--primary {
  color: #fff !important;
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Prevent images from becoming dark/invisible in HC-dark.
   Root cause: --bg:#000 + --surface-3:#262626 bleed through photo-overlay scrims.
   Fix: remove any scrim/overlay darkening on image containers, force full opacity,
   and give background-image divs a neutral mid-tone fallback. */
html.dark.high-contrast img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Background-image containers: boost to full visibility, override dark surface bg */
html.dark.high-contrast .ds-card-itinerary__bg,
html.dark.high-contrast .hero-slide__bg,
html.dark.high-contrast .zones-slide-hero__bg,
html.dark.high-contrast .ds-tab-panel__bg,
html.dark.high-contrast .ds-map-preview__bg,
html.dark.high-contrast .page-hero__bg,
html.dark.high-contrast .postcard,
html.dark.high-contrast .postcard__image {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background-color: #444 !important; /* fallback if image fails to load */
}

/* Lighten the photo scrims so images are visible in HC-dark */
html.dark.high-contrast .ds-card-itinerary__scrim,
html.dark.high-contrast .hero-slide__scrim,
html.dark.high-contrast .zones-slide-hero__scrim,
html.dark.high-contrast .ds-tab-panel__scrim,
html.dark.high-contrast .ds-map-preview__scrim,
html.dark.high-contrast .page-hero__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.40) 100%) !important;
}

/* Card backgrounds: don't let --surface-3 = #262626 dominate */
html.dark.high-contrast .ds-card-itinerary,
html.dark.high-contrast .ds-card-place,
html.dark.high-contrast .ds-card-event {
  background: #333 !important;
}

/* ── CTA band — high-contrast overrides ─────────────────────────────────
   The cta-band gradient uses --primary which can be any admin-defined colour.
   In both HC modes we abandon the gradient entirely and switch to a flat
   surface-colour band so ALL text and buttons use the HC design-system
   tokens (black/white/primary) regardless of what primary is set to.
   ────────────────────────────────────────────────────────────────────────── */

/* HC-light: white band, black text, primary-coloured bordered buttons */




html.high-contrast:not(.dark) .cta-band .btn--white {
  background: var(--primary) !important;
  color: var(--text-on-primary) !important;
  border: 2px solid var(--primary) !important;
}
html.high-contrast:not(.dark) .cta-band .btn--white:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}
html.high-contrast:not(.dark) .cta-band .btn--outline-white {
  background: transparent !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
}
html.high-contrast:not(.dark) .cta-band .btn--outline-white:hover {
  background: var(--primary) !important;
  color: var(--text-on-primary) !important;
}

/* HC-dark: black band, primary-coloured title, white text, legible buttons */




html.dark.high-contrast .cta-band .btn--white {
  background: var(--primary) !important;
  color: var(--text-on-primary) !important;
  border: 2px solid var(--primary) !important;
}
html.dark.high-contrast .cta-band .btn--white:hover {
  filter: brightness(1.2);
}
html.dark.high-contrast .cta-band .btn--outline-white {
  background: transparent !important;
  color: var(--text) !important;
  border: 2px solid var(--text) !important;
}
html.dark.high-contrast .cta-band .btn--outline-white:hover {
  background: var(--primary) !important;
  color: var(--text-on-primary) !important;
  border-color: var(--primary) !important;
}


/* -----------------------------------------------------------------------------
   15. DARK MODE OVERRIDES
   --------------------------------------------------------------------------- */
html.dark .ds-card-place,
html.dark .ds-card-event {
  background: var(--surface);
  border-color: var(--border);
}
html.dark .ds-chip { background: var(--surface-2); }
html.dark .ds-btn--ghost { color: var(--text); border-color: var(--border); }
html.dark .ds-btn--ghost:hover { background: var(--surface-2); }
html.dark .ds-card-event__date { background: var(--surface-2); }

/* -----------------------------------------------------------------------------
   16. HIGH CONTRAST OVERRIDES — flatten gradients & overlays, force readable text
   --------------------------------------------------------------------------- */
html.high-contrast .ds-hero__scrim,
html.high-contrast .ds-card-itinerary__scrim,
html.high-contrast .ds-map-preview__scrim,
html.high-contrast .ds-tab-panel__scrim {
  background: rgba(0, 0, 0, .80);
}
html.high-contrast .ds-hero,
html.high-contrast .ds-card-itinerary,
html.high-contrast .ds-map-preview,
html.high-contrast .ds-tab-panel {
  color: #fff;
}
html.high-contrast .ds-card-place,
html.high-contrast .ds-card-event {
  border-width: 2px;
  border-color: var(--text);
}
html.high-contrast .ds-btn--primary {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
html.high-contrast .ds-tab[aria-selected="true"]::before { width: 4px; }
html.high-contrast .ds-chip { border-width: 2px; border-color: var(--text); }

/* -----------------------------------------------------------------------------
   17. SHELL — restyle navbar, footer, mobile drawer, config panel
   ----------------------------------------------------------------------------
   These selectors target the EXISTING v1 markup in base.html under the
   `html.site` scope, so admins / users only see the design-system chrome when the flag
   is on. We keep the v1 markup intact so JS, ARIA, and accessibility
   wiring (config panel, mobile drawer, theme toggle, language switcher,
   font-size, contrast) all continue to work without modification.
   --------------------------------------------------------------------------- */

/* --- NAVBAR --- */
html.site .site-header {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--border-light);
  box-shadow: none;
}
html.site.dark .site-header { background: rgba(10, 22, 16, .85); border-color: var(--border); }
html.site .navbar__inner { padding-block: var(--sp-3); }
html.site .navbar__site-name { font-family: var(--display-font); font-weight: var(--fw-semibold); letter-spacing: -.005em; }
html.site .navbar__link {
  font-weight: var(--fw-medium);
  position: relative;
  padding-inline: 0;
  margin-inline: var(--sp-3);
}
html.site .navbar__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--primary);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
}
html.site .navbar__link:hover::after,
html.site .navbar__link--active::after { transform: scaleX(1); }
html.site .navbar__link--active { color: var(--primary); }
html.site .navbar__settings-btn {
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background var(--transition-base), border-color var(--transition-base);
}
html.site .navbar__settings-btn:hover { background: var(--surface-2); border-color: var(--text-muted); }
html.site.high-contrast .site-header { background: var(--surface); backdrop-filter: none; border-bottom-width: 2px; }

/* --- FOOTER — v1 layout preserved; two-logo swap based on contrast mode ---
   morona-03 (white, --default) shows by default on the dark footer band.
   morona-02 (colored, --hc) swaps in when LIGHT high-contrast flattens the
   footer to a light background. Dark high-contrast keeps the white logo. */
html.site .footer__logo {
  width: clamp(120px, 18vw, 200px);
  height: auto;
}
html.site .footer__logo--hc { display: none; }
html.site.high-contrast:not(.dark) .footer__logo--default { display: none; }
html.site.high-contrast:not(.dark) .footer__logo--hc { display: inline-block; }

/* --- CONFIG PANEL (settings popover) — softer + rounder --- */
html.site .config-panel__popover {
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
}
html.site .config-panel__heading {
  font-family: var(--display-font);
  font-weight: var(--fw-semibold);
}
html.site .config-toggle-btn,
html.site .config-auth-link,
html.site .config-font-btn,
html.site .config-lang-toggle {
  border-radius: var(--radius-lg);
}

/* --- MOBILE DRAWER --- */
html.site .mobile-drawer__panel { border-top-left-radius: var(--radius-2xl); border-bottom-left-radius: var(--radius-2xl); }
html.site .mobile-drawer__link { font-family: var(--display-font); font-weight: var(--fw-semibold); letter-spacing: -.005em; }