/*
 * Touristar Panama Map - contrast accessibility layer
 *
 * Loaded after app.css and premium.css. It keeps the printed-map artwork untouched and raises
 * UI text, focus, control boundaries and state indicators to WCAG AA-friendly
 * contrast in both themes. The two-tone focus ring is deliberate: one edge
 * stays visible on light surfaces and the other on dark/map surfaces.
 */

:root {
    --a11y-focus-outer: #09658e;
    --a11y-control-border-light: #81939f;
    --a11y-control-border-dark: #4a7892;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--a11y-focus-outer) !important;
}

/* The search field presents focus on its enclosing control, avoiding a noisy
   nested ring while preserving an obvious keyboard focus indicator. */
.search-box input:focus-visible {
    outline: 0;
    box-shadow: none !important;
}
.search-box:focus-within {
    border-color: var(--a11y-focus-outer);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--a11y-focus-outer);
}

/* The top bar is dark in both themes. Keep secondary copy intentionally muted,
   but not faint, and make control edges discoverable without looking heavy. */
.topbar { border-bottom-color: rgba(255,255,255,.24); }
.brand-copy { border-left-color: rgba(255,255,255,.34); }
.brand-copy small { color: rgba(255,255,255,.82); }
.face-switcher { border-color: rgba(255,255,255,.28); }
.face-tab:not(.active) { color: rgba(255,255,255,.82); }
.icon-btn,
.text-btn { border-color: rgba(255,255,255,.30); }
.icon-btn:hover,
.text-btn:hover { border-color: rgba(255,255,255,.46); }

/* Light surfaces: text and component boundaries. */
.search-box {
    border-color: var(--a11y-control-border-light);
    background: #f6f6f3;
}
.search-box svg { stroke: #596b78; }
.search-box input::placeholder { color: #5d6f7a; }
.search-box button {
    border: 1px solid var(--a11y-control-border-light);
    color: #4d606d;
}
.category-chip {
    border-color: var(--a11y-control-border-light);
    color: #4d606d;
}
.category-chip:hover { border-color: #5d7888; }
.result-meta { color: #405766; }
#mobileExploreContent .result-meta { color: #405766; }
.result-review { color: #536572; }
.result-main small { color: #526674; }
.result-arrow { color: #5d6f7a; }
.result-card.selected { box-shadow: inset 0 0 0 2px #698697; }
.empty-state { color: #5d6f7a; }
.panel-foot { color: #586a75; }
.live-dot { background: #19764a; }
.panel-close,
.detail-close,
.detail-share,
.mobile-sheet-head button { border: 1px solid var(--a11y-control-border-light); }
.detail-card > p#detailText { color: #4d606d; }
.detail-occurrence { color: #5b6e79; }
.detail-fact small { color: #586b77; }
.detail-card .detail-live-note { color: #5d6f7a; }
.secondary-cta { border-color: var(--a11y-control-border-light); }
.sheet-handle { background: #718794; }

/* Guide cards now keep authored media in its own grid cell instead of placing
   copy over photography. A legacy photographic scrim here darkened those flat
   copy panels in the light theme, making dark text nearly disappear. Keep the
   copy surface flat and let the theme-specific tokens below own contrast. */
.guide-card-content { background: transparent; }
.guide-card-kicker { color: #d2f5ff; }
.guide-card-review { color: #e4edf1; }
.guide-card-fact small { color: #c4d7e0; }
html[data-theme="light"] .guide-hero-copy > p,
html[data-theme="light"] .guide-print-panel p,
html[data-theme="light"] .guide-count,
html[data-theme="light"] .guide-footer { color: #526774; }
html[data-theme="light"] .guide-card-kicker { color: #1f627e; }
html[data-theme="light"] .guide-card-review { color: #445d6b; }
html[data-theme="light"] .guide-card-fact small { color: #536b78; }

/* Standalone 12-place guide. Keep the photo-led art direction, but place tiny
   identity copy on a compact opaque scrim and use readable secondary tokens on
   flat surfaces. This page loads contrast.css last, so these rules are its
   accessibility contract rather than a competing visual skin. */
.attraction-card-number,
.attraction-card-media-caption {
    color: #f5fbff;
    background: rgba(2, 18, 31, .90);
    border: 1px solid rgba(255,255,255,.30);
    box-shadow: 0 4px 14px rgba(0,8,16,.22);
    backdrop-filter: blur(8px);
}
.attraction-card-media-caption {
    right: auto;
    max-width: calc(100% - 38px);
    padding: 6px 8px;
    border-radius: 7px;
}
.attraction-fact span { color: #a9c3d0; }
.attractions-footer { color: #9bb6c3; }

html[data-theme="light"] .attractions-hero-body,
html[data-theme="light"] .attractions-section-head p,
html[data-theme="light"] .attractions-hero-count,
html[data-theme="light"] .attraction-card-body > p,
html[data-theme="light"] .attraction-fact span,
html[data-theme="light"] .attractions-footer,
html[data-theme="light"] .attraction-spotlight-note { color: #526774; }
html[data-theme="light"] .attraction-spotlight-review { color: #4d6472; }
html[data-theme="light"] .attraction-spotlight-nav button { color: #315a70; }

/* Chrome that stays dark even while the application theme is light. */
.map-toolbar { border-color: rgba(255,255,255,.34); }
.map-toolbar button { color: rgba(255,255,255,.94); }
.map-toolbar button.active {
    background: rgba(125,200,235,.24);
    box-shadow: inset 0 0 0 2px rgba(125,200,235,.78);
}
.toolbar-separator { background: rgba(255,255,255,.36); }
.zoom-indicator { color: rgba(255,255,255,.90); }
.gesture-hint { border-color: rgba(255,255,255,.30); }
.gesture-hint small { color: rgba(255,255,255,.82); }
.gesture-hint button { color: rgba(255,255,255,.88); }
.loading-line { background: rgba(255,255,255,.30); }
.loading-brand small { color: rgba(255,255,255,.84); }
.mobile-explore { border-color: rgba(255,255,255,.34); }

/* Dark surfaces. These selectors intentionally match/exceed the specificity of
   app.css's dark-theme rules so a later light-base declaration cannot leak in. */
html[data-theme="dark"] .search-box {
    border-color: var(--a11y-control-border-dark);
    background: #072339;
}
html[data-theme="dark"] .search-box:focus-within {
    border-color: #8fdcff;
    box-shadow: 0 0 0 2px #041a2f, 0 0 0 4px #8fdcff;
}
html[data-theme="dark"] .search-box input::placeholder { color: #91a9b7; }
html[data-theme="dark"] .search-box button { border-color: var(--a11y-control-border-dark); }
html[data-theme="dark"] .category-chip {
    border-color: var(--a11y-control-border-dark);
    color: #bed0da;
}
html[data-theme="dark"] .category-chip:hover { border-color: #74b7d8; }
html[data-theme="dark"] .category-chip.active {
    border-color: #75c9ee;
    background: #0e71a5;
    color: #fff;
}
html[data-theme="dark"] .result-meta { color: #93adbb; }
html[data-theme="dark"] #mobileExploreContent .result-meta { color: #93adbb; }
html[data-theme="dark"] .result-main small { color: #91adbc; }
html[data-theme="dark"] .result-arrow { color: #8eabba; }
html[data-theme="dark"] .result-card.selected { box-shadow: inset 0 0 0 2px #69a3c0; }
html[data-theme="dark"] .empty-state { color: #9bb3c0; }
html[data-theme="dark"] .panel-foot { color: #9bb3c0; }
html[data-theme="dark"] .live-dot { background: #54d693; }
html[data-theme="dark"] .panel-close,
html[data-theme="dark"] .detail-close,
html[data-theme="dark"] .detail-share,
html[data-theme="dark"] .mobile-sheet-head button { border-color: var(--a11y-control-border-dark); }
html[data-theme="dark"] .detail-card > p#detailText { color: #9bb7c6; }
html[data-theme="dark"] .detail-occurrence { color: #8fa9b8; }
html[data-theme="dark"] .detail-fact small { color: #8ba8b8; }
html[data-theme="dark"] .secondary-cta { border-color: var(--a11y-control-border-dark); }
html[data-theme="dark"] .sheet-handle { background: #8baaba; }

/* The shared folding module is emitted later in the document, so these public
   contrast overrides use !important only where needed to beat that later CSS. */
.tour3d-title span {
    color: #c4d0da !important;
    opacity: 1 !important;
}
.tour3d-btn { border-color: rgba(255,255,255,.38) !important; }
.tour3d-btn:hover { border-color: rgba(255,255,255,.56) !important; }
.tour3d-btn.primary { border-color: rgba(125,200,235,.70) !important; }
.tour3d-hud { border-color: rgba(255,255,255,.32) !important; }
.tour3d-hud-main span { color: #c3ccd6 !important; }
.tour3d-hint { color: #bec8d3 !important; }

@media (forced-colors: active) {
    button:focus-visible,
    a:focus-visible,
    input:focus-visible {
        outline: 2px solid Highlight;
        box-shadow: none !important;
    }
}