/* ==========================================================================
   Accessibility remediation — WCAG 2.1 AA
   Added 2026-11-05. Scope: skip link (2.4.1), keyboard-operable primary nav
   sub-menus (2.1.1 / 4.1.2). Isolated here so the whole fix is reversible.
   Loaded via a hardcoded <link> in header.php (survives WP Rocket RUCSS).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Skip to main content link  (WCAG 2.4.1 Bypass Blocks)
   Hidden until it receives keyboard focus, then pinned top-left.
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100em;
    left: 0;
    z-index: 100000;
    display: block;
    padding: 14px 24px;
    /* !important: the theme stack applies a light #f1f1f1 focus background to
       links, which would leave white text on near-white and fail 1.4.3. */
    background-color: #1b5e34 !important;
    color: #ffffff !important;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-decoration: underline;
    border-radius: 0 0 4px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    overflow: visible;
    white-space: nowrap;
}

.skip-link:focus {
    top: 0;
    background-color: #1b5e34 !important;
    color: #ffffff !important;
    outline: 3px solid #efa036;
    outline-offset: -3px;
}

/* #main-content gets tabindex="-1" so focus lands there; never show a ring on it. */
#main-content:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   2. Desktop primary navigation sub-menus  (WCAG 2.1.1 / 4.1.2)

   Previously style.css hid button.sub-menu-toggle with display:none !important
   on desktop, which (a) removed the only aria-expanded host from the a11y tree
   and (b) left the sub-menus hover-only, so keyboard users could never reach
   the location child links.

   The toggle is restored as a transparent hit area sitting over the existing
   fontello caret, so the visual design is unchanged. It is focusable, carries
   aria-expanded, and drives the sub-menu open/closed.
   -------------------------------------------------------------------------- */
nav#site-navigation-right.hide-small-desktop li.menu-item-has-children,
nav#site-navigation.hide-small-desktop li.menu-item-has-children {
    position: relative;
}

nav#site-navigation-right.hide-small-desktop > div > ul > li.menu-item-has-children > button.sub-menu-toggle,
nav#site-navigation.hide-small-desktop > div > ul > li.menu-item-has-children > button.sub-menu-toggle {
    display: block !important;
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
    color: inherit;
    cursor: pointer;
    line-height: 0;
    z-index: 2;
}

/* The caret on the parent link is the visual affordance; hide the TT1 +/- icons. */
nav#site-navigation-right.hide-small-desktop > div > ul > li > button.sub-menu-toggle > span,
nav#site-navigation.hide-small-desktop > div > ul > li > button.sub-menu-toggle > span {
    display: none;
}

/* ...except the screen-reader label, which must stay in the a11y tree. */
nav#site-navigation-right.hide-small-desktop > div > ul > li > button.sub-menu-toggle > span.screen-reader-text,
nav#site-navigation.hide-small-desktop > div > ul > li > button.sub-menu-toggle > span.screen-reader-text {
    display: block;
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* WCAG 2.4.7 — the toggle must show a visible focus indicator. */
nav#site-navigation-right.hide-small-desktop button.sub-menu-toggle:focus,
nav#site-navigation.hide-small-desktop button.sub-menu-toggle:focus,
nav#site-navigation-right.hide-small-desktop button.sub-menu-toggle:focus-visible,
nav#site-navigation.hide-small-desktop button.sub-menu-toggle:focus-visible {
    outline: 2px solid #efa036;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Open the sub-menu when the toggle reports expanded (keyboard + AT path). */
nav#site-navigation-right.hide-small-desktop li.menu-item-has-children > button.sub-menu-toggle[aria-expanded="true"] + ul.sub-menu,
nav#site-navigation.hide-small-desktop li.menu-item-has-children > button.sub-menu-toggle[aria-expanded="true"] + ul.sub-menu {
    display: block !important;
}

/* No-JS fallback: if accessibility.js never runs, focus alone still opens the
   sub-menu so the child links stay reachable. Scoped to navs WITHOUT the
   `js-a11y-nav` class, which accessibility.js adds on init — otherwise this
   rule would hold the menu open after Escape, since focus returns to the
   parent link (which is inside the same <li>). */
nav#site-navigation-right.hide-small-desktop:not(.js-a11y-nav) li.menu-item-has-children:focus-within > ul.sub-menu,
nav#site-navigation.hide-small-desktop:not(.js-a11y-nav) li.menu-item-has-children:focus-within > ul.sub-menu {
    display: block !important;
}

/* Visible focus for every link in the primary + mobile navigation. */
nav#site-navigation a:focus,
nav#site-navigation-right a:focus,
nav#mobile-site-navigation a:focus,
nav#site-navigation a:focus-visible,
nav#site-navigation-right a:focus-visible,
nav#mobile-site-navigation a:focus-visible {
    outline: 2px solid #efa036;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Mobile menu toggle — visible focus indicator.
   -------------------------------------------------------------------------- */
button#primary-mobile-menu:focus,
button#primary-mobile-menu:focus-visible,
nav#mobile-site-navigation button.sub-menu-toggle:focus,
nav#mobile-site-navigation button.sub-menu-toggle:focus-visible {
    outline: 2px solid #efa036;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Online ordering list  (/online-ordering/)
   The 12 single-destination locations are now plain links (no <details>).
   The 3 "on the Go" locations keep a real <details> disclosure; give its
   <summary> a visible focus ring.
   -------------------------------------------------------------------------- */
ul.btn-list li.location summary:focus,
ul.btn-list li.location summary:focus-visible,
ul.btn-list li.location a:focus,
ul.btn-list li.location a:focus-visible {
    outline: 3px solid #efa036;
    outline-offset: 2px;
}

/* The 12 single-destination ordering buttons are no longer wrapped in
   <details>/<summary>, so re-create the button styling that previously came
   from the `ul.btn-list details ...` selectors in the WPBakery custom CSS. */
ul.btn-list li.location > a.btn-bt.single {
    font-family: lato, sans-serif;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 50px;
    margin: 0;
    padding: 3px;
    border-radius: 4px;
    background: #0d733c;
    color: #ffffff;
    text-align: center;
    font-weight: 900;
    font-size: 18px;
    line-height: 20px;
    text-decoration: none;
}

ul.btn-list li.location > a.btn-bt.single:hover,
ul.btn-list li.location > a.btn-bt.single:focus {
    background: #12a456;
    color: #ffffff;
}

ul.btn-list li.location.onthego > a.btn-bt.single {
    background: #f0b50f;
}

ul.btn-list li.location.onthego > a.btn-bt.single:hover,
ul.btn-list li.location.onthego > a.btn-bt.single:focus {
    background: #fac01c;
}