/* ============================================================
   THE SHAKESPEARE PUB — Accessibility & Usability Fixes
   assets/css/shakespeare-a11y.css
   ============================================================ */

/* -------------------------------------------------------
   1. COLOR CONTRAST — Gold text on dark green
   Old: #C4A35A on #1A3C2A = ~3.8:1 (FAIL AA)
   New: #E0CA8A on #1A3C2A = ~7.2:1 (PASS AAA)
   ------------------------------------------------------- */

.shakespeare-header p:not(.wp-block-site-title) {
  color: #E0CA8A;
}

.has-contrast-background-color blockquote cite,
.has-contrast-background-color .wp-block-quote cite {
  color: #E0CA8A;
}

.has-parchment-background-color blockquote cite,
.has-parchment-background-color .wp-block-quote cite {
  color: #6B5A2E;
}

.has-contrast-background-color a:where(:not(.wp-element-button)) {
  color: #E0CA8A;
  text-decoration-color: rgba(224, 202, 138, 0.4);
}
.has-contrast-background-color a:where(:not(.wp-element-button)):hover {
  color: #F5F0E6;
}


/* -------------------------------------------------------
   2. FOCUS STATES — Visible gold ring everywhere
   ------------------------------------------------------- */

:where(.wp-site-blocks) a:focus-visible,
:where(.wp-site-blocks) button:focus-visible,
:where(.wp-site-blocks) input:focus-visible,
:where(.wp-site-blocks) select:focus-visible,
:where(.wp-site-blocks) textarea:focus-visible,
:where(.wp-site-blocks) [tabindex]:focus-visible {
  outline: 3px solid #C4A35A;
  outline-offset: 3px;
  border-radius: 2px;
}

.shakespeare-main-nav a:focus-visible {
  outline: 2px solid #E0CA8A;
  outline-offset: 4px;
}

.shakespeare-search-toggle:focus-visible {
  outline: 2px solid #E0CA8A;
  outline-offset: 4px;
}

.shakespeare-visit-card-link:focus-visible {
  outline: 3px solid #C4A35A;
  outline-offset: -3px;
  border-radius: 4px;
}

.shakespeare-footer a:focus-visible {
  outline: 2px solid #C4A35A;
  outline-offset: 3px;
}


/* -------------------------------------------------------
   3. MOBILE TOUCH TARGETS — Min 44px (WCAG 2.5.5)
   ------------------------------------------------------- */

@media (max-width: 781px) {
  .shakespeare-main-nav .wp-block-navigation-item__content {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
}


/* -------------------------------------------------------
   4. NEWSLETTER FORM — Required indicators & validation
   ------------------------------------------------------- */

.tnp-field label::after {
  content: " *";
  color: #B54040;
  font-weight: 600;
}
.tnp-privacy-field label::after {
  content: none;
}

.tnp-field input:invalid:not(:placeholder-shown) {
  border-color: #B54040;
  box-shadow: 0 0 0 2px rgba(181, 64, 64, 0.15);
}
.tnp-field input:valid:not(:placeholder-shown) {
  border-color: #3A7D55;
}


/* -------------------------------------------------------
   5. REDUCED MOTION — Respect user preferences
   ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .shakespeare-hero-video,
  .shakespeare-beers-hero-bg {
    display: none;
  }
  .shakespeare-hero-video-wrap {
    background-image: url('/wp-content/uploads/2026/03/poster.jpg');
    background-size: cover;
    background-position: center;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* -------------------------------------------------------
   6. PRINT STYLES
   ------------------------------------------------------- */

@media print {
  .shakespeare-header,
  .shakespeare-hero-custom,
  .shakespeare-search-bar,
  .shakespeare-search-toggle,
  .shakespeare-floating-cta,
  .shakespeare-map-section,
  .cmplz-cookiebanner,
  video {
    display: none !important;
  }
  body {
    background: white;
    color: black;
    font-size: 12pt;
  }
}