/**
 * ADA Compliance & Mobile Compatibility
 * L&L Hawaiian BBQ - lnlroseville.com
 */

/* Screen-reader-only text (visually hidden, read by assistive tech) */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link.screen-reader-text:focus {
  clip: auto !important;
  clip-path: none !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 100000 !important;
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #D02A43 !important;
  border-radius: 0 0 4px 0 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

/* Focus visible: clear focus ring for keyboard navigation (ADA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #D02A43 !important;
  outline-offset: 2px !important;
}

/* Touch targets: minimum 44x44px on touch devices (mobile) */
@media (pointer: coarse) {
  .elementor-button-link,
  .elementor-nav-menu a,
  .elementor-menu-toggle,
  .elementor-icon-list-items a,
  #scroll-top,
  .toggle-sidr-close,
  .searchform-submit,
  .sidr-class-searchform-submit,
  input[type="submit"],
  button[type="submit"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .elementor-nav-menu .elementor-item {
    padding: 12px 16px !important;
  }
}

/* Respect reduced motion preference (ADA / vestibular) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Footer accessibility link: ensure visible and tappable */
#footer .elementor-icon-list-items a[href*="accessibility"] {
  text-decoration: underline;
}
#footer .elementor-icon-list-items a[href*="accessibility"]:hover,
#footer .elementor-icon-list-items a[href*="accessibility"]:focus {
  text-decoration: underline;
}

/* Mobile: prevent horizontal overflow and improve readability */
html {
  overflow-x: hidden;
}
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Ensure iframe is responsive on small screens */
.elementor-custom-embed iframe {
  max-width: 100%;
}

/* ========== CONTRAST FIXES (WCAG AA 4.5:1 minimum) ========== */

/* Gray body text: #7A7A7A on white fails. Use darker gray. */
#content .elementor-text-editor,
.elementor-element.elementor-element-1861134,
.elementor-element.elementor-element-57a285f,
.elementor-element[class*="1861134"] .elementor-text-editor,
.elementor-element[class*="57a285f"] .elementor-text-editor {
  color: #505050 !important;
}

/* Footer: white text on background image - add text-shadow for readability */
#footer .elementor-element-49a1308 .elementor-heading-title,
#footer .elementor-element-49a1308 .elementor-icon-list-text,
#footer .elementor-element-49a1308 a,
#footer .elementor-element-49a1308 .elementor-icon {
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.5) !important;
}
#footer .elementor-element-49a1308 a:hover,
#footer .elementor-element-49a1308 a:focus {
  text-decoration: underline;
}

/* Logo: ensure contrast on header background (fix contrast error on L&L logo) - solid dark so WAVE passes */
#site-header .elementor-image a {
  display: inline-block;
  background: #1a1a1a !important;
  padding: 10px 14px !important;
  border-radius: 4px !important;
}
#site-header .elementor-image img {
  filter: contrast(1.05) brightness(1.05) !important;
}

/* TASTEFUL / Recipe section (0035284): text on BG image has no solid background - WAVE reports 1:1 contrast.
   Give the content column a solid dark background so contrast can be measured and pass. */
.elementor-element-0035284 .elementor-element-a4730f2 .elementor-column-wrap {
  background-color: #1a1a1a !important;
  padding: 24px 32px !important;
  border-radius: 4px;
}
.elementor-element-0035284 .elementor-heading-title {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* Hero headings "You're Gonna Aloha" / "PEOPLE WHO LOVES...": give solid dark background so WAVE can measure contrast */
.elementor-element-e197dcf .elementor-element-627bb4f .elementor-column-wrap,
.elementor-element-ab3c795 .elementor-element-cf046de .elementor-column-wrap {
  background-color: #1a1a1a !important;
  padding: 24px 32px !important;
  border-radius: 6px;
}
.elementor-element-e197dcf .elementor-heading-title,
.elementor-element-ab3c795 .elementor-heading-title {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* White text on other section background images */
#site-header .elementor-heading-title,
#site-header .elementor-nav-menu--main .elementor-item {
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 6px rgba(0,0,0,0.4) !important;
}

/* Header nav bar: solid dark strip behind logo + nav so WAVE sees 4.5:1+ contrast (white on #1a1a1a) */
/* f770a52 = index.html; 79f679d = menu.html, about-us.html, contact-us.html */
#site-header .elementor-element-f770a52,
#site-header .elementor-element-79f679d {
  background: #1a1a1a !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Nav menu & dropdown / sidr: ensure high contrast (fix "Very low contrast" on HOME, ABOUT US, etc.) */
#site-header .elementor-nav-menu--main .elementor-item,
.elementor-nav-menu--main .elementor-item,
.elementor-nav-menu--dropdown .elementor-item,
#sidr .elementor-item,
#sidr .elementor-nav-menu a,
.sidr .elementor-nav-menu a {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu--main .elementor-item:focus,
.elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
#sidr .elementor-item:hover,
#sidr .elementor-item.elementor-item-active {
  color: #FFDE16 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}
/* Ensure dropdown menu panel has dark background for white text contrast */
.elementor-nav-menu--dropdown {
  background-color: #1a1a1a !important;
}

/* Order By bar: ensure all links and text meet contrast on yellow */
.elementor-element-b814b17 .elementor-button-content-wrapper a,
.elementor-element-77e9e91 .elementor-button-content-wrapper a,
.elementor-element-efd3f4f .elementor-button-content-wrapper a {
  color: #1a1a1a !important;
  fill: #1a1a1a !important;
  background-color: transparent !important;
  font-weight: 700 !important;
}
.elementor-element-b814b17 .elementor-button-text,
.elementor-element-77e9e91 .elementor-button-text,
.elementor-element-efd3f4f .elementor-button-text {
  color: #1a1a1a !important;
}

/* Footer bottom bar: ensure links have sufficient contrast and visible focus */
#footer .elementor-element-0a07a3d .elementor-icon-list-text,
#footer .elementor-element-0a07a3d a {
  color: #ffffff !important;
}
#footer .elementor-element-0a07a3d a:hover,
#footer .elementor-element-0a07a3d a:focus {
  color: #fff5cc !important;
  text-decoration: underline;
}

/* Order bar (mobile): red text on yellow #FFDE16 - use darker red for WCAG AA */
.elementor-element-b814b17 span[style*="color:#D02A43"],
.elementor-element-77e9e91 span[style*="color:#D02A43"],
.elementor-element-efd3f4f span[style*="color:#D02A43"] {
  color: #9a1c2e !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

/* CONTACT US and all yellow-background buttons: ensure 4.5:1+ contrast (override theme .elementor-button) */
/* 2fec577 is VIEW MENU (white on dark), not yellow - see VIEW MENU block below */
body .elementor-element-1f4a83b .elementor-button-link,
body .elementor-element-1f4a83b .elementor-button-text,
body .elementor-element-1f4a83b .elementor-button,
body .elementor-element-6ca9fb5 .elementor-button-link,
body .elementor-element-6ca9fb5 .elementor-button,
body .elementor-element-890b088 .elementor-button-link,
body .elementor-element-890b088 .elementor-button,
body .elementor-element-bb7090c .elementor-button-link,
body .elementor-element-bb7090c .elementor-button,
body .elementor-element-476a1e9 .elementor-button-link,
body .elementor-element-476a1e9 .elementor-button,
body .elementor-element-efd3f4f .elementor-button-link,
body .elementor-element-efd3f4f .elementor-button,
.elementor-element-1f4a83b .elementor-button-link,
.elementor-element-1f4a83b .elementor-button-text,
.elementor-element-1f4a83b .elementor-button,
.elementor-element-6ca9fb5 .elementor-button-link,
.elementor-element-6ca9fb5 .elementor-button,
.elementor-element-890b088 .elementor-button-link,
.elementor-element-890b088 .elementor-button,
.elementor-element-bb7090c .elementor-button-link,
.elementor-element-bb7090c .elementor-button,
.elementor-element-476a1e9 .elementor-button-link,
.elementor-element-476a1e9 .elementor-button,
.elementor-element-efd3f4f .elementor-button-link,
.elementor-element-efd3f4f .elementor-button,
[class*="elementor-element-1f4a83b"] .elementor-button-link,
[class*="elementor-element-1f4a83b"] .elementor-button-text,
[class*="elementor-element-1f4a83b"] .elementor-button,
[class*="elementor-element-6ca9fb5"] .elementor-button-link,
[class*="elementor-element-bb7090c"] .elementor-button-link,
[class*="elementor-element-476a1e9"] .elementor-button-link,
[class*="elementor-element-efd3f4f"] .elementor-button-link {
  color: #0d0d0d !important;
  fill: #0d0d0d !important;
  background-color: #FFDE16 !important;
}
body .elementor-element-1f4a83b .elementor-button-link:hover,
body .elementor-element-1f4a83b .elementor-button-link:focus,
.elementor-element-1f4a83b .elementor-button-link:hover,
.elementor-element-1f4a83b .elementor-button-link:focus,
.elementor-element-6ca9fb5 .elementor-button-link:hover,
.elementor-element-6ca9fb5 .elementor-button-link:focus,
.elementor-element-890b088 .elementor-button-link:hover,
.elementor-element-890b088 .elementor-button-link:focus,
.elementor-element-bb7090c .elementor-button-link:hover,
.elementor-element-bb7090c .elementor-button-link:focus,
.elementor-element-476a1e9 .elementor-button-link:hover,
.elementor-element-476a1e9 .elementor-button-link:focus,
.elementor-element-efd3f4f .elementor-button-link:hover,
.elementor-element-efd3f4f .elementor-button-link:focus {
  background-color: #e6c814 !important;
  color: #0d0d0d !important;
  fill: #0d0d0d !important;
}

/* VIEW MENU buttons (640f580 hero, 2fec577 cards): override theme rgba(0,0,0,0.8); use solid dark for WAVE 4.5:1 */
body .elementor-element-640f580 .elementor-button-link,
body .elementor-element-640f580 .elementor-button-text,
body .elementor-element-640f580 .elementor-button,
body .elementor-element-2fec577 .elementor-button-link,
body .elementor-element-2fec577 .elementor-button-text,
body .elementor-element-2fec577 .elementor-button,
.elementor-element-640f580 .elementor-button-link,
.elementor-element-640f580 .elementor-button-text,
.elementor-element-640f580 .elementor-button,
.elementor-element-2fec577 .elementor-button-link,
.elementor-element-2fec577 .elementor-button-text,
.elementor-element-2fec577 .elementor-button,
[class*="elementor-element-640f580"] .elementor-button-link,
[class*="elementor-element-640f580"] .elementor-button-text,
[class*="elementor-element-640f580"] .elementor-button,
[class*="elementor-element-2fec577"] .elementor-button-link,
[class*="elementor-element-2fec577"] .elementor-button-text,
[class*="elementor-element-2fec577"] .elementor-button {
  color: #ffffff !important;
  fill: #ffffff !important;
  background-color: #1a1a1a !important;
}
body .elementor-element-640f580 .elementor-button-link:hover,
body .elementor-element-640f580 .elementor-button-link:focus,
body .elementor-element-2fec577 .elementor-button-link:hover,
body .elementor-element-2fec577 .elementor-button-link:focus,
.elementor-element-640f580 .elementor-button-link:hover,
.elementor-element-640f580 .elementor-button-link:focus,
.elementor-element-640f580 .elementor-button:hover,
.elementor-element-640f580 .elementor-button:focus,
.elementor-element-2fec577 .elementor-button-link:hover,
.elementor-element-2fec577 .elementor-button-link:focus,
.elementor-element-2fec577 .elementor-button:hover,
.elementor-element-2fec577 .elementor-button:focus,
[class*="elementor-element-640f580"] .elementor-button-link:hover,
[class*="elementor-element-640f580"] .elementor-button-link:focus,
[class*="elementor-element-2fec577"] .elementor-button-link:hover,
[class*="elementor-element-2fec577"] .elementor-button-link:focus {
  background-color: #333333 !important;
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Force contrast on homepage (elementor-32): override any late-loaded theme CSS */
.elementor-32 .elementor-element-1f4a83b .elementor-button-link,
.elementor-32 .elementor-element-1f4a83b .elementor-button-text,
.elementor-32 .elementor-element-1f4a83b .elementor-button,
.elementor-32 .elementor-element-bb7090c .elementor-button-link,
.elementor-32 .elementor-element-bb7090c .elementor-button {
  color: #0d0d0d !important;
  fill: #0d0d0d !important;
  background-color: #FFDE16 !important;
}
.elementor-32 .elementor-element-640f580 .elementor-button-link,
.elementor-32 .elementor-element-640f580 .elementor-button-text,
.elementor-32 .elementor-element-640f580 .elementor-button,
.elementor-32 .elementor-element-2fec577 .elementor-button-link,
.elementor-32 .elementor-element-2fec577 .elementor-button-text,
.elementor-32 .elementor-element-2fec577 .elementor-button {
  color: #ffffff !important;
  fill: #ffffff !important;
  background-color: #1a1a1a !important;
}

/* Screen-reader-only text inside form labels (fix Empty form label) */
label .screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Flip-box (Our Story, Delicious Menu, Today's Special): solid dark overlay so WAVE passes contrast */
.elementor-flip-box__front .elementor-flip-box__layer__overlay,
.elementor-flip-box__back .elementor-flip-box__layer__overlay {
  background-color: #1a1a1a !important;
}
.elementor-flip-box__front .elementor-flip-box__layer__title,
.elementor-flip-box__back .elementor-flip-box__layer__title {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
/* Flip-box "View More" button: solid dark bg + white text for contrast */
.elementor-flip-box__button.elementor-button {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  fill: #ffffff !important;
}
.elementor-flip-box__button.elementor-button:hover,
.elementor-flip-box__button.elementor-button:focus {
  background-color: #333333 !important;
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Buttons: ensure text/icon contrast; focus ring visible on yellow */
.elementor-button-link.elementor-button {
  font-weight: 700 !important;
}
.elementor-button-link.elementor-button:focus-visible {
  outline: 2px solid #1a1a1a !important;
  outline-offset: 2px !important;
}

/* Form inputs: ensure placeholder and text meet contrast (4.5:1 on white) */
input::placeholder,
textarea::placeholder {
  color: #595959 !important;
  opacity: 1;
}
input, textarea, select {
  color: #1a1a1a !important;
}