/* =========================================================
   ACCESSIBILITY OVERRIDES
   Loaded AFTER bootstrap.min.css and style.css so these rules
   win. This file exists so accessibility fixes are visible,
   auditable, and reversible in one place instead of scattered
   through the original template files.
   ========================================================= */

/* -------------------------------------------------
   1. Skip link — lets keyboard/screen-reader users
   jump straight past the repeated nav on every page.
   ------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #000;
    color: #fff;
    padding: 12px 20px;
    z-index: 10000;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    left: 0;
    outline: 3px solid #ffeb8c;
    outline-offset: 2px;
}

/* -------------------------------------------------
   2. Screen-reader-only utility text
   (Bootstrap 3 already ships .sr-only; this is a
   redundant safety net in case it's ever overridden)
   ------------------------------------------------- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* -------------------------------------------------
   3. Visible focus indicators.
   The original template relies on Bootstrap's default
   outline (fine) but several custom links/buttons set
   outline:none via .btn / a states — restore visible
   focus for every interactive element.
   ------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #1a5fb4 !important;
    outline-offset: 2px !important;
}
/* Fallback for browsers without :focus-visible support */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.btn:focus {
    outline: 3px solid #1a5fb4;
    outline-offset: 2px;
}

/* -------------------------------------------------
   4. Color-contrast fixes.
   Every pair below was measured directly against its
   real rendered background using the WCAG 2.1 contrast
   formula (not guessed). Only rules that (a) actually
   fail 4.5:1 and (b) match a class/element that is
   really used somewhere in the site's HTML are touched.

   IMPORTANT: earlier fixes to `body, p, li, a` used bare
   element selectors. Those directly-match every <li> and
   <a> on the page — including inside the dark footer,
   where the ORIGINAL colors already passed contrast
   (#929293 on #29292c = 4.67:1, #4c94dc on #29292c =
   4.54:1). A directly-matching rule always overrides
   inherited color regardless of specificity, so that
   blanket rule accidentally broke the footer. Fixed here
   by scoping every rule to where the problem actually is,
   instead of touching shared HTML elements.

   Verified fixes:
   body text        #77787e / #fcfcf9 = 4.28  -> #595a5f = 6.10
   default link     #4c94dc / #fcfcf9 = 3.11  -> #1a5fa8 = 5.19  (light areas only)
   .welcome-msg     #77787e / near-black top bar = 4.00 -> #b7b7bb = 8.79
   .mobile-button   #fff / #4c94dc = 3.19      -> bg #1a5fa8 = 6.47
   .tiny-footer     #58575a / #232326 = 2.18   -> #a9a9ae = 6.70
   .ft-social-widget a:hover  #fff / #4c94dc = 3.19 -> bg #1a5fa8 = 6.47
   mobile nav "open" state    #555 / #1d1d1d = 2.26 -> #e6e6e6 = 13.51

   Confirmed already-passing and left untouched:
   .footer-widget li a  #929293 / #29292c = 4.67 (has its
     own selector, more specific than a bare `a`, so it was
     never actually affected by the old rule — but the new
     scoped rule below makes that explicit and safe anyway)
   ------------------------------------------------- */

/* Body copy on the site's light background */
body {
    color: #595a5f;
}

/* Default link color. A bare `a` selector is intentional
   here — it correctly covers every link in the light-
   background body content (paragraphs, "read more" links,
   etc.) without needing to guess every content class name.
   The three real dark-background exceptions on this site
   (.top-bar-links, .footer-widget li a, .ft-social-widget a)
   already have their OWN more-specific selectors in the
   original style.css, so a bare `a` rule cannot override
   them — CSS always prefers the more specific selector
   regardless of source order. The one dark spot that did
   NOT have its own more-specific rule (.tiny-footer's two
   plain links) gets an explicit fix below. */
a,
a:visited {
    color: #1a5fa8;
}
a:hover,
a:focus {
    color: #10406f;
}

/* "WELCOME TO ARCADE ODYSSEY" banner directly under the
   hero video: white text on the default blue was 3.19:1
   (the H1 scrapes by as large text at 3:1, but the 18px
   paragraph beneath it needs 4.5:1 and was failing).
   Darkened to the same blue used elsewhere in this file. */
.call-to-action {
    background-color: #1a5fa8;
}
/* Top bar "Welcome to Arcade Odyssey" text sits on a
   near-black bar (rgba(0,0,0,0.9)) — needs a much lighter
   gray than the body-copy gray above. */
.welcome-msg {
    color: #b7b7bb;
}

/* Header "Hours / Directions / Pricing" mobile button */
.mobile-button {
    background-color: #1a5fa8;
}

/* Dark footer strip: "© year Arcade Odyssey ... Privacy Policy ... Designed & Developed by" */
.tiny-footer {
    color: #a9a9ae;
}
.tiny-footer a {
    color: #6fb1ef; /* light blue that reads clearly on the dark bar */
}

/* Explicit safety net for the footer link/list colors —
   restates the template's own already-passing values so
   nothing here can accidentally shadow them. */
.footer-widget li a,
.footer-widget li a:visited {
    color: #929293;
}
.footer-section {
    color: #929293;
}

/* Social icon buttons in the footer: hover state was
   white text on the same blue used elsewhere, which fails
   at that size — darken it to match the rest of the fixes. */
.ft-social-widget a:hover {
    background-color: #1a5fa8;
}

/* Mobile nav "open" submenu state (dark background) */
.navigation .navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    color: #e6e6e6;
}

/* -------------------------------------------------
   4b. Nav white-on-white bug.
   The nav links are white, and the nav bar itself
   (.navbar-default) is explicitly transparent by design,
   meant to let the dark .navigation background (or the
   hero video behind it) show through. This same pattern
   was confirmed live (via WAVE's computed styles) to
   silently fail on a sister site built from the same
   template: the transparent nav bar's effective
   background resolves to the page's own light body color
   rather than the dark background behind it, leaving
   white nav text on a near-white background. Giving the
   nav bar itself an explicit, guaranteed dark background
   — rather than relying on transparency plus whatever's
   behind it — fixes this regardless of scroll position or
   however the runtime resolves it. Affects every link in
   the main nav (Home, Games, Media, Eat and Drink, Party
   Information, Reviews & News, Hours/Directions/Pricing). */
.navigation .navbar-default {
    background-color: rgba(0,0,0,0.9) !important;
}

/* Third-party BeerMenus "Follow" widget button (menu.html) — its
   default styling failed contrast. This is a best-effort override:
   since the widget's CSS loads from beermenus.com itself, this only
   works if their styles don't use inline !important (if they do,
   this can't win — inline !important always beats an external
   stylesheet, even one loaded after). */
.follow-button-container .follow-button,
a.follow-button {
    background-color: #1a5fa8 !important;
    color: #fff !important;
    border-color: #1a5fa8 !important;
}

/* -------------------------------------------------
   4c. Focus-only safety: since we removed the bare `a`
   color rule, restore a clearly visible focus/hover cue
   sitewide without touching resting-state colors.
   ------------------------------------------------- */
a:focus-visible {
    text-decoration: underline;
}

/* -------------------------------------------------
   4b. Heading-level fixes.
   Every inner page's title was a plain <div>, not a
   heading — meaning the page had no <h1> at all. Also,
   several pages jumped from <h1> straight to <h3> (or,
   on media.php, <h2> straight to <h4>) with nothing in
   between. Promoted the page-title div to <h1>, and
   promoted the footer's "Arcade Odyssey" / "Contact us" /
   "Hours" / "We are social" headings from h3 to h2
   site-wide (plus the matching "Address"/"Hours" widget
   headings on the Hours/Directions/Pricing page). This
   restates the footer heading's original h3 styling,
   since style.css's selector was tag-specific
   (.footer-widget h3) and won't match the new tag.
   ------------------------------------------------- */
.footer-widget h2 {
    color: #DCDCDE;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 30px;
    font-size: 16px;
}

/* -------------------------------------------------
   5. Respect users who have asked their OS/browser to
   reduce motion — pauses carousels/animations that
   otherwise auto-play indefinitely (WCAG 2.2.2).
   ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------------------------------------
   6. Background/hero video pause control
   ------------------------------------------------- */
.video-pause-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 14px;
    cursor: pointer;
}
.video-pause-btn:hover,
.video-pause-btn:focus {
    background: #000;
}
.page-header.noPadding,
.video-wrapper {
    position: relative;
}

/* Breadcrumb "current page" text (Bootstrap default #777) and the "/"
   separator (Bootstrap default #ccc) sit on the page's cream breadcrumb
   bar (#f0ebe6) on every inner page and were both failing contrast. */
.breadcrumb > .active {
    color: #595a5f;
}
.breadcrumb > li + li:before {
    color: #595a5f;
}

/* -------------------------------------------------
   7. Make sure disabled/aria-disabled elements are
   visually distinguishable, and that link underlines
   don't rely on color alone within paragraphs.
   ------------------------------------------------- */
p a, li a, .paragraph a {
    text-decoration: underline;
}

/* -------------------------------------------------
   8. Static map image (replaces the embedded Google Maps
   iframe on the Hours/Directions/Pricing page). Fills the
   same 400px-tall .map container the iframe used to,
   cropping to fit rather than distorting.
   ------------------------------------------------- */
.map-static-img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.map a {
    display: block;
}
.map a:focus-visible {
    outline: 3px solid #1a5fb4;
    outline-offset: -3px;
}