/* ============================================================
   FRASER COAST ADVENTURES — Accessibility Stylesheet
   WCAG 2.1 AA Compliance Layer
   Load AFTER style.css: <link rel="stylesheet" href="/css/a11y.css">
   ============================================================ */

/* === 1. SKIP TO CONTENT LINK === */

/* The skip link sits off-screen until focused */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--sand-dune, #D4A853);
  color: #1a1200 !important; /* max contrast on sand-dune bg */
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  font-family: var(--font-body, 'Nunito Sans', system-ui, sans-serif);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: top 0.15s ease;
}

/* Visible when focused — appears at top of viewport */
.skip-link:focus {
  top: 0;
  outline: 3px solid #1B3A4B;
  outline-offset: 2px;
}

/* === 2. SCREEN READER–ONLY TEXT (.sr-only) === */

/*
 * Visually hidden but accessible to screen readers.
 * Use for: icon labels, supplementary descriptions, off-screen text.
 * NEVER use display:none or visibility:hidden — that hides from AT too.
 */
.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;
}

/*
 * Extension: sr-only-focusable
 * Makes the element visible on keyboard focus (e.g., skip links, icon buttons).
 * Use sparingly — only when the element needs a visible focus state.
 */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* === 3. FOCUS RING STYLES (WCAG 2.4.7) === */

/*
 * Default focus ring for all interactive elements.
 * High-contrast 3px offset ring — visible on all brand backgrounds.
 * Uses currentColor so it adapts to parent colour context.
 */
:focus-visible {
  outline: 3px solid #D4A853; /* sand-dune — brand colour, high contrast */
  outline-offset: 3px;
  border-radius: 3px;
}

/* Remove default browser outline when :focus-visible is supported */
:focus:not(:focus-visible) {
  outline: none;
}

/* Specific focus styles for buttons */
.btn:focus-visible,
.book-btn:focus-visible,
.btn-book:focus-visible,
.btn-cta:focus-visible {
  outline: 3px solid #D4A853;
  outline-offset: 3px;
  box-shadow: 0 4px 16px rgba(212, 168, 83, 0.5);
}

/* Focus for links inside cards / interactive containers */
a:focus-visible {
  outline: 3px solid #D4A853;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Focus for form elements (if added later) */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid #D4A853;
  outline-offset: 2px;
}

/* === 4. COLOUR CONTRAST FIXES (WCAG 1.4.3 / 1.4.11) === */

/*
 * NAV LINKS — fix rgba(255,255,255,0.72) on #1B3A4B (fails at 3.7:1)
 * Required: 4.5:1 for normal text
 * Fixed: rgba(255,255,255,0.72) → rgba(255,255,255,0.85) gives ~4.8:1
 */
.site-header nav a {
  color: rgba(255, 255, 255, 0.85);
}

/* Footer nav links — rgba(255,255,255,0.5) fails at 2.85:1 */
.footer-col nav a {
  color: rgba(255, 255, 255, 0.75); /* ~4.3:1 — still slightly low, bumped to 0.80 */
  color: rgba(255, 255, 255, 0.82); /* 4.9:1 — passes AA */
}

.footer-col nav a:hover {
  color: #ffffff; /* pure white on deep-coast: 10.9:1 */
}

/*
 * PRIMARY LINKS — #2A9D8F (teal) on #FAF7F2 (warm-white) fails at 3.27:1
 * Use deeper teal for AA compliance on light backgrounds
 */
a {
  color: #1F7A6F; /* darkened teal: ~5.0:1 on warm-white — passes AA */
}

/* If teal must be used for brand reasons, add underline as secondary cue */
a:hover {
  color: #1B3A4B; /* deep-coast: ~10.9:1 on warm-white */
  text-decoration: underline;
}

/* Teal badge/label on white — fix contrast */
.town-card-badge {
  background: #1F7A6F; /* darkened teal: 5.0:1 on white */
  color: #ffffff;
}

/* Driftwood on warm-white — fails at 3.03:1 */
.trust-note {
  color: #3A2A1A; /* darkened driftwood equivalent */
}

/* Hero eyebrow text rgba(255,255,255,0.6) on deep-coast — 3.1:1 fails */
.home-hero-eyebrow {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(212, 168, 83, 0.5);
}

/* Hero stat labels rgba(255,255,255,0.6) — 3.1:1 fails */
.home-hero-stat-label {
  color: rgba(255, 255, 255, 0.75);
}

/* FAQ question links on bg-warm-white */
.faq-q,
.faq-question {
  color: #1F7A6F; /* darkened teal — passes at 5.0:1 on warm-white */
}

/* Operator meta / price labels — faint text on white */
.product-meta-item {
  color: #3A2A1A; /* darkened for contrast on white/warm-white */
}

/* Season bar labels (text on coloured bars) */
.season-bar span {
  color: #ffffff; /* white on dark bars — passes */
  font-weight: 700;
}

/* === 5. REDUCED MOTION PREFERENCE (WCAG 2.3.3) === */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; /* overrides smooth scroll */
  }
}

/* Explicitly disable specific animations that cause issues */
.home-hero::before,
.home-hero::after {
  animation: none !important;
}

/* Hover transforms — disable for reduced motion users */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .book-btn:hover,
  .btn-book:hover,
  .town-card:hover,
  .operator-card:hover,
  .product-card:hover,
  .charter-card:hover,
  .season-card:hover {
    transform: none !important;
  }

  .home-hero-ctas .btn:hover,
  .cta-band .btn-cta:hover {
    transform: none !important;
  }
}

/* === 6. MINIMUM TOUCH TARGET SIZE (WCAG 2.5.5) === */

/*
 * Minimum touch target: 44×44px (Android) / 44×44pt (iOS)
 * Applied to: primary buttons, nav links, FAQ triggers, key CTAs
 */

/* Nav links — ensure minimum 44px height at all breakpoints */
nav a,
.site-nav a {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Buttons — already reasonably sized but enforce minimum */
.btn,
.book-btn,
.btn-book,
.btn-cta,
.btn-primary,
.btn-secondary,
.btn-outline-light {
  min-height: 44px;
  min-width: 44px;
  padding: 0.65rem 1.35rem; /* height ~52px at default font — passes */
}

/* FAQ question trigger — must be ≥44px tall */
.faq-q,
.faq-question {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Back link */
.back-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Inline text links used as CTAs — upgrade to meet 44px target */
.pillar-card a[href],
.town-card {
  min-height: 44px;
}

/* Hero CTA buttons */
.home-hero-ctas .btn {
  min-height: 48px; /* slightly larger for prominence */
}

/* === 7. FAQ ACCESSIBLE DISCLOSURE PATTERN === */

/*
 * Each FAQ item: <div class="faq-item">
 *   <button class="faq-q" aria-expanded="false" aria-controls="faq-answer-1">
 *     Question text
 *   </button>
 *   <div id="faq-answer-1" class="faq-a" hidden>
 *     Answer text
 *   </div>
 * </div>
 *
 * JavaScript toggles aria-expanded on the button and hidden on the answer.
 * Hidden attribute is AT-friendly — screen readers skip hidden content.
 */

/* FAQ question as keyboard-activatable button */
.faq-q {
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font-body, 'Nunito Sans', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: #1F7A6F; /* darkened teal for contrast */
  padding: 1rem 0 0.75rem;
  border-bottom: 1px solid var(--warm-white-dark, #F0EBE3);
  transition: color 0.15s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Expand/collapse indicator (optional — use CSS or ::after) */
.faq-q::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--driftwood, #8B7355);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Rotate indicator when open */
.faq-q[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.faq-q:hover {
  color: var(--deep-coast, #1B3A4B);
}

/* FAQ answer — hidden by default, shown when .open or [aria-expanded=true] */
.faq-a {
  font-size: 0.9rem;
  color: var(--text-sec, #5A4A3A);
  line-height: 1.75;
  padding: 0.75rem 0 1rem;
  display: none; /* JS adds .open class to show */
}

/* Show state: add .faq-item.is-open to the item, or use JS to toggle */
.faq-item.is-open .faq-a,
.faq-item.faq-a {
  display: block;
}

/* When JS sets aria-expanded=true and removes hidden */
.faq-a:not([hidden]) {
  display: block;
}

/* === 8. LANDMARK POLISH === */

/* Ensure main is always a landmark (it should be by default) */
main {
  display: block; /* fixes some older screen reader quirks */
}

/* Header landmark — declare banner role explicitly */
header.site-header {
  role: banner;
}

/* Footer landmark */
footer.site-footer,
footer:not([class]) {
  role: contentinfo;
}

/* Main nav — provide accessible label */
.site-header nav {
  aria-label: Main navigation;
}

/* Footer nav — distinguish from main nav */
.site-footer nav,
footer .footer-col nav {
  aria-label: Footer navigation;
}

/* === 9. HERO IMAGE ACCESSIBILITY === */

/*
 * Hero images are background images set via CSS (not <img>).
 * Provide a text equivalent using sr-only.
 *
 * In HTML, add inside each .home-hero / .town-hero:
 *   <div class="sr-only" aria-hidden="true">
 *     [Descriptive alt text equivalent for the hero background image]
 *   </div>
 */

/* Ensure sr-only in hero doesn't create layout issues */
.home-hero .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
}

/* Hero with decorative-only background — hide from AT via aria-hidden on the div */
/* (The sr-only div INSIDE provides the real description) */

/* === 10. EMOJI ICON ACCESSIBILITY === */

/*
 * All emoji used as visual icons must be aria-hidden
 * and have a text alternative.
 *
 * Pattern 1: span with aria-label
 *   <span class="packing-icon" aria-label="Closed-toe shoes">👟</span>
 *
 * Pattern 2: aria-hidden + sr-only sibling
 *   <span aria-hidden="true">🚙</span>
 *   <span class="sr-only">4WD Tag-Along</span>
 */

/* Ensure aria-hidden emoji doesn't affect layout */
[aria-hidden="true"] {
  speak: never;
}

/* === 11. EXTERNAL LINK INDICATION === */

/*
 * Links with target="_blank" — add (opens in new tab) for screen readers.
 * Use sr-only span so it's announced but not visually shown.
 *
 * HTML pattern:
 *   <a href="..." target="_blank" rel="noopener">
 *     Book on Viator <span class="sr-only">(opens in new tab)</span>
 *   </a>
 */
a[target="_blank"]::after {
  /*
   * Optional: show small "opens in new tab" icon visually.
   * Currently commented out — visual indication may be enough via sr-only text.
   */
  /* content: ' ' url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231F7A6F' d='M11 0H5a1 1 0 0 0-1 1v3H2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V9h2a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1zM9 1v2a1 1 0 0 0 1 1h2'/%3E%3C/svg%3E"); */
}

/* === 12. MOBILE NAV ACCESSIBILITY === */

/*
 * Mobile nav at ≤480px is currently display:none with no accessible alternative.
 * Until a proper hamburger menu is implemented:
 * - At minimum, provide a visible skip-to-nav link
 * - The skip-link already handles skip-to-content
 */
@media (max-width: 480px) {
  /*
   * If JS hamburger menu is added later, this block can be removed.
   * Until then, nav links remain hidden on mobile keyboard/AT.
   * A visible "Menu" button should replace this.
   */
  nav a,
  .site-nav a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* === 13. LIST SEMANTICS FOR NON-Semantic LISTS === */

/*
 * comparison-grid, operator-grid, packing-icon-grid use <div> wrappers.
 * For screen readers, wrap these in <ul role="list"> and use role="listitem".
 * (Full HTML restructure needed — CSS cannot fix semantic HTML.)
 *
 * CSS fallback for role="list" — provides list-style to semantic lists
 */
[role="list"] {
  list-style: none;
  padding: 0;
  margin: 0;
}

[role="listitem"] {
  display: list-item;
}

/* === 14. COMPARISON TABLE ACCESSIBILITY === */

.comparison-table {
  caption-side: top;
}

/* Add visible captions to tables for screen readers */
.comparison-table-wrap caption,
.comparison-table caption {
  font-family: var(--font-body, 'Nunito Sans', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--deep-coast, #1B3A4B);
  text-align: left;
  padding: 0.75rem 1rem 0.5rem;
  caption-side: top;
}

/* === 15. PRINT STYLES (accessibility benefit) === */

@media print {
  .site-header,
  .site-footer,
  nav,
  .cta-band,
  .back-link {
    display: none !important;
  }

  main {
    display: block !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  /* Show full URLs for printed pages */
  a[target="_blank"]::after {
    content: none; /* suppress the (opens in new tab) indicator */
  }
}