/*-----------------------------------------------------------------------------------

    Accessibility overrides (WCAG 2.1 AA)

    Loaded after style.css. Keeps the original look but adjusts colors that
    fell below the contrast minimums, adds visible keyboard focus, and styles
    the floating accessibility toolbar (js/accessibility.js).

    Contrast reference (WCAG relative luminance):
      #c02703 on #fff ........ 5.94:1  (was #eb3007 = 4.24:1)
      #c02703 on light bg img  4.85:1  (bg-section.jpg, darkest area)
      #fff on #c02703 ........ 5.94:1  (buttons)
      #ff8466 on #000 ........ 8.74:1
      #ff8466 on 80% overlay . 5.26:1  (worst case: pure white image under 0.8 black)
      #595959 on light bg img  5.72:1  (was #6b6b6b = 4.35:1)

-----------------------------------------------------------------------------------*/

:root {
  --a11y-accent: #c02703;          /* theme red, for light backgrounds */
  --a11y-accent-strong: #9e2002;   /* hover/pressed state */
  --a11y-accent-on-dark: #ff8466;  /* theme red, for dark/photo backgrounds */
  --a11y-text: #595959;
  --a11y-focus: #0b4fb5;
}

/* ===================================
    Basic text & links
====================================== */
body {
  color: var(--a11y-text); }

a, a:active, a:focus {
  color: var(--a11y-text); }

a:hover {
  color: var(--a11y-accent); }

/* links placed inside white-text blocks (e.g. services "Online Order") inherit the white */
.text-white a, .text-white a:focus, .text-white a:active {
  color: inherit; }
  .text-white a:hover {
    color: var(--a11y-accent-on-dark);
    text-decoration: underline; }

/* ===================================
    Theme color on light backgrounds
====================================== */
.text-theme-color,
.title-font,
.section-heading span {
  color: var(--a11y-accent); }

.btn {
  border-color: var(--a11y-accent);
  color: var(--a11y-accent); }
  .btn:hover, .btn:active, .btn:focus {
    background: var(--a11y-accent);
    border-color: var(--a11y-accent);
    color: #fff; }
  .btn.theme {
    background: var(--a11y-accent);
    border-color: var(--a11y-accent);
    color: #fff; }
    .btn.theme:hover, .btn.theme:active, .btn.theme:focus {
      background: transparent;
      border-color: var(--a11y-accent);
      color: var(--a11y-accent); }

.portfolio .filtering span:hover,
.portfolio .filtering .active,
.portfolio .item-img .fa {
  background: var(--a11y-accent);
  border-color: var(--a11y-accent); }
  .portfolio .item-img .fa:hover {
    color: var(--a11y-accent); }

.back-to-top:hover, .back-to-top:focus {
  background: var(--a11y-accent) !important; }

/* ===================================
    Theme color on dark / photo backgrounds
====================================== */
.header .caption .text-theme-color,
.lunch-section .title-font,
.services .title-font,
footer .text-theme-color {
  color: var(--a11y-accent-on-dark); }

/* hero title can exceed narrow screens at 200% text size: allow wrapping instead of clipping */
.header .caption h1 {
  overflow-wrap: anywhere;
  word-break: break-word; }

/* hero text: subtle shadow as extra insurance over the brightest photo areas */
.header .caption h1,
.header .caption h3,
.header .caption p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }

/* navbar over the hero photo (not scrolled) */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link.active {
  color: var(--a11y-accent-on-dark); }

/* navbar on white after scrolling (desktop) */
@media screen and (min-width: 992px) {
  .nav-scroll .navbar-nav .nav-link:hover,
  .nav-scroll .navbar-nav .nav-link:focus,
  .nav-scroll .navbar-nav .nav-link.active {
    color: var(--a11y-accent); } }

/* mobile collapsed menu sits on #232323 */
@media screen and (max-width: 991px) {
  .navbar .navbar-collapse .nav-link.active,
  .nav-scroll .navbar-collapse .active {
    color: var(--a11y-accent-on-dark) !important; }
  .nav-scroll .navbar-collapse .btn.active {
    color: #fff !important; } }

/* "Order Online" button in the navbar: stay filled on hover so it works on any background */
.navbar .navbar-nav .nav-link.btn.small,
.navbar .navbar-nav .nav-link.btn.small.active,
.nav-scroll .navbar-nav .btn.small {
  background: var(--a11y-accent);
  border-color: var(--a11y-accent);
  color: #fff !important; }
  .navbar .navbar-nav .nav-link.btn.small:hover,
  .navbar .navbar-nav .nav-link.btn.small:focus,
  .navbar .navbar-nav .nav-link.btn.small.active:hover {
    background: var(--a11y-accent-strong);
    border-color: var(--a11y-accent-strong);
    color: #fff !important; }

/* ===================================
    Footer
====================================== */
footer a,
footer a:focus,
.footer-privacy a {
  color: #d6d5d5;
  text-decoration: underline; }
  footer a:hover,
  .footer-bottom a:hover {
    color: #fff; }

footer .ordering-notice {
  color: #d6d5d5; }

footer .footer-separator {
  margin: 0 8px;
  color: #b7b7b7; }

/* accessibility statement page */
.accessibility-statement h3 {
  margin: 25px 0 10px;
  font-size: 20px;
  text-transform: none; }
.accessibility-statement ul {
  padding-left: 22px; }
.accessibility-statement a {
  color: var(--a11y-accent);
  text-decoration: underline; }

/* visible marker for links that leave the site (online ordering) */
.external-link-icon {
  display: inline-block;
  margin-left: 4px;
  font-weight: 700; }

footer .footer-phone {
  color: inherit;
  text-decoration: none; }
  footer .footer-phone:hover {
    text-decoration: underline; }

/* ===================================
    Side menu: hide from keyboard / screen readers while off-screen
====================================== */
.side-menu {
  visibility: hidden;
  transition: transform .5s ease, visibility 0s linear .5s; }
  .side-menu.side-menu-active, .side-menu.before-side {
    visibility: visible;
    transition: transform .5s ease, visibility 0s linear 0s; }

/* ===================================
    Lunch menu text alternative
====================================== */
.menu-text-alt {
  max-width: 900px;
  margin: 30px auto 0;
  color: #eee; }
  .menu-text-alt summary {
    display: inline-block;
    cursor: pointer;
    padding: 8px 18px;
    border: 2px solid #fff;
    border-radius: 25px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: uppercase; }
    .menu-text-alt summary::-webkit-details-marker {
      display: none; }
    .menu-text-alt summary:hover {
      background: #fff;
      color: #232323; }
  .menu-text-alt[open] summary {
    margin-bottom: 20px; }
  .menu-text-alt .menu-text-alt-body {
    text-align: left;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px 25px;
    border-radius: 6px; }
    .menu-text-alt .menu-text-alt-body h3 {
      color: #fff;
      font-size: 18px;
      margin: 20px 0 8px; }
    .menu-text-alt .menu-text-alt-body p,
    .menu-text-alt .menu-text-alt-body li {
      color: #eee; }
.lunch-section .delicious-menu + .menu-text-alt {
  text-align: center; }

/* ===================================
    Skip link & keyboard focus
====================================== */
.skip-link {
  position: absolute;
  left: 10px;
  top: -100px;
  z-index: 100000;
  padding: 10px 18px;
  background: #000;
  color: #fff !important;
  font-weight: 700;
  border-radius: 0 0 4px 4px;
  transition: top .2s; }
  .skip-link:focus {
    top: 0; }

#main-content:focus {
  outline: none; }

/* default.css removes the outline on focus; restore a clearly visible ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #fff !important; }

/* used by js/accessibility.js while it measures/sets text sizes */
html.a11y-no-transition *,
html.a11y-no-transition *:before,
html.a11y-no-transition *:after {
  transition: none !important; }

/* ===================================
    Reduced motion (OS setting or toolbar toggle)
====================================== */
@media (prefers-reduced-motion: reduce) {
  html:not(.a11y-motion-on) *,
  html:not(.a11y-motion-on) *:before,
  html:not(.a11y-motion-on) *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; }
  html:not(.a11y-motion-on) .wow {
    visibility: visible !important; } }

html.a11y-reduce-motion *,
html.a11y-reduce-motion *:before,
html.a11y-reduce-motion *:after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important; }
html.a11y-reduce-motion .wow {
  visibility: visible !important; }

/* ===================================
    High contrast: dark (white text on black, yellow links)
    :where() keeps the catch-all rule at low specificity so the
    link / button rules below can override it.
====================================== */
html.a11y-hc-dark body,
html.a11y-hc-dark body :where(*:not(img, svg, svg *, iframe, video, .a11y-widget, .a11y-widget *)) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important; }
html.a11y-hc-dark body a:not(.a11y-widget *),
html.a11y-hc-dark body a:not(.a11y-widget *) * {
  color: #ffff00 !important;
  text-decoration: underline !important; }
html.a11y-hc-dark .btn,
html.a11y-hc-dark .navbar .navbar-nav .nav-link.btn.small {
  border: 2px solid #ffff00 !important; }
html.a11y-hc-dark [data-overlay-dark]:before,
html.a11y-hc-dark [data-overlay-light]:before {
  display: none !important; }
html.a11y-hc-dark .portfolio .item-img-overlay {
  background: rgba(0, 0, 0, 0.85) !important; }

/* ===================================
    High contrast: light (black text on white, blue links)
====================================== */
html.a11y-hc-light body,
html.a11y-hc-light body :where(*:not(img, svg, svg *, iframe, video, .a11y-widget, .a11y-widget *)) {
  background-color: #fff !important;
  background-image: none !important;
  color: #000 !important;
  border-color: #000 !important;
  text-shadow: none !important;
  box-shadow: none !important; }
html.a11y-hc-light body a:not(.a11y-widget *),
html.a11y-hc-light body a:not(.a11y-widget *) * {
  color: #0000c8 !important;
  text-decoration: underline !important; }
html.a11y-hc-light .btn,
html.a11y-hc-light .navbar .navbar-nav .nav-link.btn.small {
  border: 2px solid #0000c8 !important; }
html.a11y-hc-light .navbar .navbar-nav .nav-link.btn.small,
html.a11y-hc-light .navbar .navbar-nav .nav-link.btn.small.active,
html.a11y-hc-light .nav-scroll .navbar-nav .btn.small,
html.a11y-hc-light .nav-scroll .navbar-collapse .nav-link {
  color: #0000c8 !important; }
html.a11y-hc-dark .navbar .navbar-nav .nav-link.btn.small,
html.a11y-hc-dark .navbar .navbar-nav .nav-link.btn.small.active,
html.a11y-hc-dark .nav-scroll .navbar-collapse .nav-link {
  color: #ffff00 !important; }
html.a11y-hc-light [data-overlay-dark]:before,
html.a11y-hc-light [data-overlay-light]:before {
  display: none !important; }
/* logo-light.png is white on transparent; logo-dark.png has its own black backdrop */
html.a11y-hc-light img[src*="logo-light"] {
  filter: brightness(0); }
html.a11y-hc-light .portfolio .item-img-overlay {
  background: rgba(255, 255, 255, 0.9) !important; }
/* the hamburger icon lines are drawn in white with pseudo-elements */
html.a11y-hc-light .navbar-toggler .icon-bar:before,
html.a11y-hc-light .navbar-toggler .icon-bar:after,
html.a11y-hc-light .sidemenu_btn span {
  background: #000 !important;
  border-color: #000 !important; }

/* ===================================
    Floating accessibility toolbar
====================================== */
.a11y-widget {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 100001;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #232323; }
  .a11y-widget *,
  .a11y-widget *:before,
  .a11y-widget *:after {
    box-sizing: border-box; }

.a11y-widget .a11y-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--a11y-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); }
  .a11y-widget .a11y-toggle:hover {
    background: var(--a11y-accent-strong); }
  .a11y-widget .a11y-toggle svg {
    width: 30px;
    height: 30px;
    fill: currentColor; }

.a11y-widget .a11y-panel {
  position: absolute;
  left: 0;
  bottom: 68px;
  width: 290px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 18px;
  background: #fff;
  color: #232323;
  border: 2px solid #232323;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  text-align: left; }
  .a11y-widget .a11y-panel[hidden] {
    display: none; }

.a11y-widget .a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px; }

.a11y-widget .a11y-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #232323;
  text-transform: none;
  letter-spacing: 0; }

.a11y-widget .a11y-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #767676;
  border-radius: 50%;
  background: #fff;
  color: #232323;
  font-size: 22px;
  line-height: 1;
  cursor: pointer; }
  .a11y-widget .a11y-close:hover {
    background: #f0f0f0; }

.a11y-widget fieldset {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  min-width: 0; }

.a11y-widget legend {
  margin-bottom: 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #232323; }

.a11y-widget .a11y-font-row {
  display: flex;
  align-items: center;
  gap: 8px; }

.a11y-widget .a11y-btn {
  min-height: 40px;
  padding: 6px 12px;
  border: 2px solid #232323;
  border-radius: 6px;
  background: #fff;
  color: #232323;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer; }
  .a11y-widget .a11y-btn:hover {
    background: #f0f0f0; }
  .a11y-widget .a11y-btn[disabled] {
    border-color: #767676;
    color: #767676;
    cursor: not-allowed; }

.a11y-widget .a11y-font-value {
  flex: 1;
  text-align: center;
  font-weight: 700;
  color: #232323; }

.a11y-widget .a11y-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding: 6px 8px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 400;
  color: #232323;
  cursor: pointer; }
  .a11y-widget .a11y-option:hover {
    background: #f0f0f0; }
  .a11y-widget .a11y-option input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--a11y-accent); }
  .a11y-widget .a11y-option:focus-within {
    border-color: var(--a11y-focus); }
  .a11y-widget .a11y-swatch {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid #232323;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center; }

.a11y-widget .a11y-reset {
  width: 100%; }

.a11y-widget .a11y-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; }

@media screen and (max-width: 575px) {
  .a11y-widget {
    left: 12px;
    bottom: 12px; }
  .a11y-widget .a11y-toggle {
    width: 50px;
    height: 50px; } }

@media print {
  .a11y-widget, .skip-link {
    display: none !important; } }