/*
 * Weekend Wild accessibility guardrails.
 * This file intentionally loads after page styles so every surface keeps
 * readable text, visible controls, and unmistakable keyboard focus in both
 * day and dark modes.
 */

:root,
html[data-theme="light"] {
  --ww-a11y-link: #075F78;
  --ww-a11y-link-hover: #064A5F;
  --ww-a11y-focus: #005FCC;
  --ww-a11y-focus-outer: #FFFDF8;
  --ww-a11y-control-border: #7A6A5B;
  --ww-a11y-placeholder: #6D5F4F;
  --ww-a11y-warm-text: #9B4A14;
  --ww-a11y-error: #B42318;
  --ww-a11y-selection: #176B52;
  --ww-a11y-selection-text: #FFFFFF;
  /* The bright brand orange remains available as --ww-warm for fills. */
  --sun: var(--ww-a11y-warm-text);
  --orange: var(--ww-a11y-warm-text);
}

html[data-theme="dark"] {
  --ww-a11y-link: #7DD3FC;
  --ww-a11y-link-hover: #BAE6FD;
  --ww-a11y-focus: #FACC15;
  --ww-a11y-focus-outer: #0B1220;
  --ww-a11y-control-border: #7C8DA3;
  --ww-a11y-placeholder: #A8B5C8;
  --ww-a11y-warm-text: #FBBF24;
  --ww-a11y-error: #FDA29B;
  --ww-a11y-selection: #34D399;
  --ww-a11y-selection-text: #052016;
}

::selection {
  background: var(--ww-a11y-selection);
  color: var(--ww-a11y-selection-text);
}

/* Text links remain identifiable without depending on color alone. */
:where(main, article, section, aside, footer) :where(p, li, dd, figcaption) > a:not([class]),
:where(main, article, section, aside, footer) > a:not([class]) {
  color: var(--ww-a11y-link) !important;
  text-decoration: underline !important;
  text-decoration-thickness: .1em !important;
  text-underline-offset: .18em !important;
}

:where(main, article, section, aside, footer) :where(p, li, dd, figcaption) > a:not([class]):is(:hover, :focus-visible),
:where(main, article, section, aside, footer) > a:not([class]):is(:hover, :focus-visible) {
  color: var(--ww-a11y-link-hover) !important;
  text-decoration-thickness: .16em !important;
}

/* Warm accents used as text need a darker day-mode value than decorative fills. */
html[data-theme="light"] :where(
  .eyebrow,
  .kicker,
  .atlas-kicker,
  .event-date,
  .location-link,
  .disclosure a
) {
  color: var(--ww-a11y-warm-text) !important;
}

/* Form boundaries must not disappear under the site's quiet-border system. */
body :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select,
  [role="combobox"],
  [contenteditable="true"]
) {
  border: 1px solid var(--ww-a11y-control-border) !important;
}

body :where(input, textarea)::placeholder {
  color: var(--ww-a11y-placeholder) !important;
  opacity: 1 !important;
}

body :where(input, textarea, select, [role="combobox"], [contenteditable="true"]):hover {
  border-color: currentColor !important;
}

body :where([aria-invalid="true"], :user-invalid) {
  border-color: var(--ww-a11y-error) !important;
  box-shadow: inset 0 0 0 1px var(--ww-a11y-error) !important;
}

/* Unfilled interactive controls keep a visible 3:1+ boundary. */
body :where(
  button,
  [role="button"],
  .btn,
  .button,
  .action,
  .chip,
  .ww-theme-toggle,
  .ww-theme-option,
  .ww-menu-button,
  .ww-search-button
):not(.primary):not(.active):not([aria-pressed="true"]):not([aria-current="page"]) {
  border-color: var(--ww-a11y-control-border) !important;
}

/* A two-tone focus indicator survives light, dark, image, and accent surfaces. */
html body :where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"]),
  [contenteditable="true"]
):focus-visible {
  outline: 3px solid var(--ww-a11y-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--ww-a11y-focus-outer) !important;
}

:where(.ww-site-search, .search-wrap, .search-row):focus-within {
  border-color: var(--ww-a11y-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ww-a11y-focus) 36%, transparent) !important;
}

/* The switch track remains perceivable in either theme, including when off. */
.ww-theme-toggle-track {
  background: #80776D !important;
}

html[data-theme="dark"] .ww-theme-toggle-track {
  background: #7C8DA3 !important;
}

.ww-theme-toggle[aria-checked="true"] .ww-theme-toggle-track {
  background: var(--color-brand-primary, var(--ww-primary)) !important;
}

/* Utility hooks for theme-specific brand assets, including future logo use. */
.ww-day-only { display: initial !important; }
.ww-dark-only { display: none !important; }
html[data-theme="dark"] .ww-day-only { display: none !important; }
html[data-theme="dark"] .ww-dark-only { display: initial !important; }

@media (prefers-contrast: more) {
  :root,
  html[data-theme="light"] {
    --ww-a11y-control-border: #4D4035;
  }

  html[data-theme="dark"] {
    --ww-a11y-control-border: #CBD5E1;
  }

  body :where(.card, [class*="card"], [class*="panel"], [class*="toolbar"]) {
    border-color: var(--ww-a11y-control-border) !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :where(.ww-global-header, .site-header, .atlas-header, .topbar, .header, .mobile-action-bar) {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight !important;
    box-shadow: none !important;
  }

  body :where(button, [role="button"], input, textarea, select, [role="combobox"]) {
    border: 1px solid ButtonText !important;
  }

  :where(.ww-theme-toggle-track, .ww-theme-toggle-thumb) {
    forced-color-adjust: auto;
  }
}

/* Night Tide: the shared Weekend Wild day/night palette and interaction states. */
html[data-theme="light"] {
  --color-brand-primary: #176B52;
  --color-brand-primary-hover: #0F5843;
  --color-brand-secondary: #176F8C;
  --color-accent-warm: #E66A2C;
  --color-accent-sun: #F4C84A;
  --color-background: #F7F3E8;
  --color-surface: #FFFDF8;
  --color-surface-raised: #FFFFFF;
  --color-text-primary: #201A16;
  --color-text-secondary: #655A50;
  --ww-bg: #F7F3E8;
  --ww-card: #FFFDF8;
  --ww-card-elevated: #FFFFFF;
  --ww-text: #201A16;
  --ww-muted: #655A50;
  --ww-primary: #176B52;
  --ww-warm: #E66A2C;
  --bg: #F7F3E8;
  --surface: #FFFDF8;
  --surface-2: #FFFFFF;
  --surface-soft: #FBF5EA;
  --cream: #FFFDF8;
  --card: #FFFDF8;
  --card-elevated: #FFFFFF;
  --text: #201A16;
  --ink: #201A16;
  --ink-soft: #3A281D;
  --muted: #655A50;
  --text-2: #655A50;
  --leaf: #176B52;
  --water: #176F8C;
  --sun: #E66A2C;
  --orange: #E66A2C;
  --green: #176B52;
  --blue: #176F8C;
}

html[data-theme="dark"] {
  --color-brand-primary: #78D6B0;
  --color-brand-primary-hover: #94E1C1;
  --color-brand-secondary: #79CBE0;
  --color-accent-warm: #F2A36B;
  --color-accent-sun: #E8C75F;
  --color-background: #0D1719;
  --color-surface: #142327;
  --color-surface-raised: #1B2D31;
  --color-text-primary: #E6ECEA;
  --color-text-secondary: #AAB8B5;
  --color-focus: #F4D35E;
  --ww-bg: #0D1719;
  --ww-card: #142327;
  --ww-card-elevated: #1B2D31;
  --ww-text: #E6ECEA;
  --ww-muted: #AAB8B5;
  --ww-primary: #78D6B0;
  --ww-warm: #E8C75F;
  --bg: #0D1719;
  --surface: #142327;
  --surface-2: #1B2D31;
  --surface-soft: #1B2D31;
  --cream: #142327;
  --card: #142327;
  --card-elevated: #1B2D31;
  --text: #E6ECEA;
  --ink: #E6ECEA;
  --ink-soft: #D4DEDB;
  --muted: #AAB8B5;
  --text-2: #AAB8B5;
  --text-3: #8F9E9B;
  --faint: #7D8B88;
  --leaf: #78D6B0;
  --water: #79CBE0;
  --sun: #E8C75F;
  --orange: #F2A36B;
  --green: #78D6B0;
  --blue: #79CBE0;
  --plum: #C8BCE8;
  --line: rgba(230, 236, 234, .16);
  --line-strong: rgba(230, 236, 234, .28);
  --border: rgba(230, 236, 234, .16);
  --border-med: rgba(230, 236, 234, .28);
  --ww-a11y-link: #79CBE0;
  --ww-a11y-link-hover: #B7EBF6;
  --ww-a11y-focus: #F4D35E;
  --ww-a11y-focus-outer: #0D1719;
  --ww-a11y-control-border: #7D8B88;
  --ww-a11y-placeholder: #AAB8B5;
  --ww-a11y-warm-text: #E8C75F;
  --ww-a11y-selection: #78D6B0;
  --ww-a11y-selection-text: #08231A;
}

html[data-theme="dark"] body {
  background: linear-gradient(180deg, #0D1719 0%, #101D20 58%, #0D1719 100%) !important;
  color: #E6ECEA !important;
}

html[data-theme="dark"] :is(
  .hero,
  .section,
  .activity-card,
  .hotel-card,
  .itinerary-card,
  .saved-card,
  .search-result-card,
  .stat,
  .pick,
  .note,
  .empty,
  [class*="card"]
) {
  background: #142327 !important;
  border-color: rgba(230, 236, 234, .16) !important;
  color: #E6ECEA !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] :is(
  .ww-global-header,
  .site-header,
  .atlas-header,
  .topbar,
  .header,
  .nav,
  .nav-links,
  .filter-shell,
  .modal-content,
  .ww-site-search-results,
  [role="dialog"]
) {
  background: color-mix(in srgb, #1B2D31 94%, transparent) !important;
  border-color: rgba(230, 236, 234, .18) !important;
  color: #E6ECEA !important;
}

html[data-theme="dark"] :is(h1, h2, h3, h4, strong, b, .brand, .logo, .ww-brand) {
  color: #E6ECEA !important;
}

html[data-theme="dark"] :is(p, .lede, .lead, .saved-meta, .activity-meta, .activity-desc, .stat span, .pick span, .note, small) {
  color: #AAB8B5 !important;
}

html[data-theme="dark"] :is(a:not(.btn):not(.cta), .saved-item-view) {
  color: #79CBE0;
}

html[data-theme="dark"] :is(input, textarea, select, .btn, button, .chip, .tag, .amenity) {
  background: #1B2D31 !important;
  border-color: #7D8B88 !important;
  color: #E6ECEA !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .btn.primary,
  .cta,
  .nav-cta,
  .ww-site-search button,
  button.primary,
  [aria-pressed="true"],
  .chip.active
) {
  background: #78D6B0 !important;
  border-color: #78D6B0 !important;
  color: #08231A !important;
}

html[data-theme="dark"] :is(.eyebrow, .kicker, .atlas-kicker) {
  background: rgba(242, 163, 107, .12) !important;
  border-color: rgba(242, 163, 107, .38) !important;
  color: #F2A36B !important;
}

html[data-theme="dark"] :is(.tag, .amenity) {
  background: rgba(120, 214, 176, .11) !important;
  border-color: rgba(120, 214, 176, .28) !important;
  color: #A8E7CC !important;
}

html[data-theme="dark"] :is(a, button, .btn, .chip, [role="button"]):hover {
  background-image: linear-gradient(rgba(120, 214, 176, .06), rgba(120, 214, 176, .06)) !important;
}

html[data-theme="dark"] :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid #F4D35E !important;
  outline-offset: 3px !important;
}

html[data-theme="dark"] :is(a, button, .btn, .chip, [role="button"]):active {
  background-image: linear-gradient(rgba(120, 214, 176, .16), rgba(120, 214, 176, .16)) !important;
  transform: translateY(1px);
}

html[data-theme="dark"] :is([disabled], .disabled, [aria-disabled="true"]) {
  background: #182629 !important;
  color: #7D8B88 !important;
  opacity: 1 !important;
}

/* Keep seafoam actions above page-specific legacy dark rules. */
html[data-theme="dark"] body :is(
  .btn.primary,
  .btn.dark,
  .hero-button.primary,
  .cta,
  .nav-cta,
  .atlas-nav-cta,
  .ww-nav-action.ww-nav-action-primary,
  .ww-site-search button,
  button.primary,
  .card-actions a:first-child,
  .activity-actions a:first-child,
  .save-btn.saved,
  .pin,
  .map-list-number,
  .chip.active,
  [aria-pressed="true"]
) {
  background: #78D6B0 !important;
  background-image: none !important;
  border-color: #78D6B0 !important;
  color: #08231A !important;
}

html[data-theme="dark"] body .ww-nav-action.ww-nav-action-primary:is(
  :hover,
  :focus-visible,
  :active
) {
  background: #8BE0BE !important;
  background-image: none !important;
  border-color: #8BE0BE !important;
  color: #08231A !important;
}

/* Local fallback artwork should sit quietly beside real photography at night. */
html[data-theme="dark"] img[src*="activity-placeholders/"] {
  filter: brightness(.62) saturate(.78) contrast(.94) !important;
  opacity: .92;
}