/*
 * Red Cow / Red Rabbit — Accessibility Fixes (styles)
 * Audit ref: ADA-Accessibility-Findings-RedCow-RedRabbit.md (Oct 8, 2026)
 */

/* --- Skip link: hidden until focused (WCAG 2.4.1) --- */
.rcrr-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: #ffffff;
  color: #111111;
  padding: 12px 18px;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: underline;
  border: 2px solid #111111;
  border-radius: 0 0 4px 0;
}
.rcrr-skip-link:focus {
  left: 0;
  outline: 3px solid #D30000;
  outline-offset: 2px;
}

/* --- Screen-reader-only utility (used by new-tab cues) --- */
.rcrr-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Reflow (WCAG 1.4.10 AA): some Cornerstone rows have a fixed pixel
   width (e.g. the 700px menu legend row), which runs off small screens.
   Cap rows at the width of their container; no effect on desktop. --- */
.x-row {
  max-width: 100% !important;
}

/* --- Overlay layer added behind text on photos that had none (JS 6a) --- */
.rcrr-scrim {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
}

/* --- Slider Previous / Next buttons added by JS 8c (WCAG 2.2.2) --- */
.rcrr-slide-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 24px;
}
.rcrr-slide-btn {
  display: inline-block;
  padding: 10px 18px;
  min-width: 44px;
  background: #272727;
  color: #ffffff !important;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none !important;
  border-radius: 4px;
}
.rcrr-slide-btn:hover { background: #000000; }

/* --- Background video Pause / Play button added by JS 8d (WCAG 2.2.2) --- */
.rcrr-video-toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  padding: 8px 14px;
  min-height: 44px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}
.rcrr-video-toggle:hover { background: #000000; }

/* --- Visible keyboard focus (helps 2.4.7; safe, additive) --- */
iframe:focus,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.x-anchor:focus-visible {
  outline: 3px solid #FFBF00 !important;
  outline-offset: 2px !important;
}

/* =====================================================================
 * CONTRAST FIXES  (WCAG 1.4.3 AA)  —  REVIEW WITH BRAND/DESIGN OWNER
 * ---------------------------------------------------------------------
 * The audit flagged low-contrast text in the header nav, the dimmed
 * "Join Our Eclub" item, and the accordion toggles. The values below
 * raise those to >=4.5:1 on the dark header, but should be confirmed
 * against the final design and a contrast checker before go-live.
 * Adjust the selectors/colors to match each site's actual markup.
 * ===================================================================== */

/* --- RED COW (body.rcrr-site-redcow) ---
   Measured: header/accordion background is #272727.
   Brand red #D30000 on #272727 = 2.68:1 (fails). #FF6459 = 5.14:1 (passes).
   White on #272727 = 14.94:1. #D30000 on white (body copy) already passes. */

/* Red header-nav text in its active / highlighted states (current page,
   "Join Our Eclub" which Themeco marks .x-always-active).
   Excludes the "Order Online" item: it is a filled red button (#A90018)
   that keeps its own white text. */
.rcrr-site-redcow header .x-anchor-menu-item.x-active:not([href*="order-online"]) .x-anchor-text-primary,
.rcrr-site-redcow header .x-anchor-menu-item.x-always-active:not([href*="order-online"]) .x-anchor-text-primary,
.rcrr-site-redcow header .x-anchor-menu-item:not([href*="order-online"]):hover .x-anchor-text-primary,
.rcrr-site-redcow header .x-anchor-menu-item:not([href*="order-online"]):focus .x-anchor-text-primary {
  color: #FF6459 !important;
}

/* Accordion toggle labels (Locations & Hours accordion on dark panels). */
.rcrr-site-redcow .x-accordion-toggle,
.rcrr-site-redcow .x-accordion-toggle > span {
  color: #ffffff !important;
}

/* --- RED RABBIT (body.rcrr-site-redrabbit) ---
   Measured: brand red #D63927 on cream #EEEBD6 = 3.91:1 (fails), used for
   button text, button fills and nav. a11y-fixes.js swaps it to #BD301E
   (4.85:1 on cream, 5.82:1 on white) inside the site's own stylesheets so
   hover/active states keep working. */

/* Brand-red text that sits on a black/charcoal section (flagged by the JS).
   #EF6A5C = 6.89:1 on black, 4.90:1 on #272727. */
.rcrr-site-redrabbit .rcrr-on-dark {
  color: #EF6A5C !important;
}

/* Bottom bar ("Site by Hafi Design") sits on the dark footer photo; the red
   link measured 1.35:1 there. Use the cream text colour, underlined. */
.rcrr-site-redrabbit .x-colophon a {
  color: #EEEBD6 !important;
  text-decoration: underline !important;
}

/* Hero headline sits on a background video; a shadow keeps it legible on
   every frame (1.4.3 / 1.4.11). */
.rcrr-site-redrabbit .x-text-headline .x-text-content-text-primary {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 0 18px rgba(0, 0, 0, 0.6);
}