/**
* accessibility.css — WCAG 2.1 AA remediation for crookedpint.com
*
* Loaded from header.php via a hardcoded (next to crooked.css) so that
* WP Rocket's "Remove Unused CSS" cannot strip it the way it can strip an
* enqueued stylesheet. BUMP THE ?ver= IN header.php ON EVERY EDIT.
*
* Scope: the three cited items only.
* 1. 2.4.1 Bypass Blocks -> skip link +
* 2. 2.1.1 / 4.1.2 Nav submenus -> keyboard-operable desktop dropdowns
* 3. 2.1.1 / 4.1.2 Order CTAs -> /online-ordering/ Green Mill On The Go link
*
* v1.0.8
*/
/* ------------------------------------------------------------------ *
* 1. Skip to main content (WCAG 2.4.1)
* ------------------------------------------------------------------ */
.skip-link {
position: absolute;
top: -100em;
left: 5px;
z-index: 100000;
display: block;
padding: 12px 24px;
font-family: futura-pt, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
border-radius: 4px;
/* The theme stack forces background:#f1f1f1 on focused links, which would
leave this near-white on white. !important is deliberate. */
color: #ffffff !important;
background-color: #8f1818 !important;
box-shadow: 0 0 0 2px #ffffff;
}
.skip-link:focus {
top: 5px;
color: #ffffff !important;
background-color: #8f1818 !important;
outline: 3px solid #eaaa00;
outline-offset: 2px;
}
/* The skip target is focused programmatically; it is a landmark, not a control,
so it does not need its own visible ring. */
main#main-content:focus {
outline: none;
}
/* ------------------------------------------------------------------ *
* 2. Desktop navigation sub-menus (WCAG 2.1.1 / 4.1.2)
*
* Base theme state is style.css:1282
* .menu-wrapper > .menu-item-has-children .sub-menu { visibility: hidden; }
* and primary-navigation.js reveals it by writing an INLINE
* style="visibility:visible" on mouseenter only — so keyboard users never see
* it, and visibility:hidden also removes the child links from the tab order.
*
* accessibility.js now drives aria-expanded on the parent . These rules make
* that attribute the single source of truth for visibility. !important is
* required because an author !important declaration is the only thing that
* outranks the theme's inline style.
* ------------------------------------------------------------------ */
/* Open state. !important is required so that the theme's mouseleave handler,
which writes an inline visibility:hidden, cannot close a menu the keyboard
is still inside. */
nav.primary-navigation.js-a11y-nav li.menu-item-has-children > a[aria-expanded="true"] + ul.sub-menu {
visibility: visible !important;
}
/* There is deliberately NO matching `[aria-expanded="false"] { visibility:
hidden !important }` rule. Closing is done by the inline style that
setOpen() writes, which already beats the theme's non-important base rule.
An !important rule here would also outrank the inline visibility:visible
written when the menu OPENS, and Chrome invalidates attribute-selector
matches lazily — so for the rest of that task the sub-menu stayed hidden,
the child link was unfocusable, and opening with Space or an Arrow key left
focus stranded on the parent. Verified on the live site; do not add it back. */
/* No-JS / pre-init fallback. Scoped to navs that accessibility.js has NOT
claimed, otherwise :focus-within keeps the menu open after Escape (focus
returns to the parent link, which is inside the same ). */
nav.primary-navigation:not(.js-a11y-nav) li.menu-item-has-children:focus-within > ul.sub-menu {
visibility: visible !important;
}
/* Visible keyboard focus for navigation links (2.4.7). :focus-visible keeps
mouse clicks from showing a ring, so there is no visual change for
mouse users. */
nav.primary-navigation a:focus-visible,
nav#mobile-site-navigation a:focus-visible,
button#primary-mobile-menu:focus-visible,
button.sub-menu-toggle:focus-visible {
outline: 3px solid #eaaa00;
outline-offset: 2px;
}
/* ------------------------------------------------------------------ *
* 3. /online-ordering/ — "Green Mill On The Go" direct order link
*
* The Maplewood CTA was authored as …: a
* outside a is inert, is not focusable, and is mapped by assistive
* tech as a disclosure rather than a link. The markup is now a plain
* . These rules reproduce, pixel for pixel, what
* summary.btn-bt.gmotg rendered before, so the page looks unchanged.
* Reference measured on the live site 2026-11-09: 294x68, rgb(13,115,60).
* ------------------------------------------------------------------ */
ul.btn-list details a.btn-bt.gmotg,
ul.btn-list details a.btn-bt.cp {
display: block;
width: 100%;
max-width: 264px;
min-width: unset;
margin: 0 auto 12px;
padding: 14px 15px;
border: 0 solid #eaaa00;
border-radius: 7px !important;
font-family: futura-pt, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 3px;
line-height: 1.25em;
text-align: center;
text-transform: uppercase;
text-shadow: 0 1px 0 #000;
text-decoration: none;
color: #ffffff;
cursor: pointer;
transition: 0.3s ease-in-out;
}
ul.btn-list details a.btn-bt.gmotg {
background: #0d733c !important;
}
ul.btn-list details a.btn-bt.gmotg:hover,
ul.btn-list details a.btn-bt.gmotg:focus {
background: #12a456 !important;
color: #ffffff;
}
ul.btn-list details a.btn-bt.cp {
background: #eaaa00 !important;
}
ul.btn-list details a.btn-bt.cp:hover,
ul.btn-list details a.btn-bt.cp:focus {
background: #8f1818 !important;
color: #ffffff;
}
/* Matches the extra breathing room the nested-disclosure siblings get. */
ul.btn-list details[open] > a.btn-bt.gmotg,
ul.btn-list details[open] > a.btn-bt.cp {
margin-bottom: 20px;
}
ul.btn-list details a.btn-bt.gmotg:focus-visible,
ul.btn-list details a.btn-bt.cp:focus-visible,
ul.btn-list details summary:focus-visible,
ul.btn-list details a.btn-bt:focus-visible {
outline: 3px solid #eaaa00;
outline-offset: 3px;
}