/* Maple House Foods 2.5.2 — mobile navigation reliability + off-canvas UX */

/*
 * Fixes two real mobile defects:
 * 1) .mobile-toggle used CSS Grid, placing all three bars in the same grid cell,
 *    so the hamburger looked like one horizontal line.
 * 2) the phone drawer used 90vw and a generic × icon button. On narrow phones
 *    that left a distracting strip of the page visible and the close glyph could
 *    inherit conflicting icon styles. The phone drawer is now a true full-screen
 *    navigation canvas with its own explicit close SVG.
 */

.site-header .mobile-toggle{
  position:relative!important;
  display:none;
  width:44px!important;
  height:44px!important;
  padding:0!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  background:transparent!important;
  color:var(--green)!important;
  align-items:center!important;
  justify-content:center!important;
  flex-direction:column!important;
  gap:5px!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent;
}
.site-header .mobile-toggle span{
  display:block!important;
  width:22px!important;
  height:2px!important;
  min-height:2px!important;
  margin:0!important;
  border-radius:999px!important;
  background:currentColor!important;
  transform:none!important;
  opacity:1!important;
  transition:transform .2s ease,opacity .2s ease,width .2s ease!important;
  pointer-events:none!important;
}
.site-header .mobile-toggle:hover,
.site-header .mobile-toggle:focus-visible{
  background:rgba(9,36,27,.06)!important;
  border-color:rgba(9,36,27,.10)!important;
}
.site-header .mobile-toggle:focus-visible{
  outline:3px solid rgba(216,158,24,.34)!important;
  outline-offset:2px!important;
}

/* Overlay always belongs above the site header/content. */
.mobile-nav{
  position:fixed!important;
  inset:0!important;
  z-index:200000!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100vh!important;
  background:rgba(4,21,15,.56)!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
  transition:opacity .22s ease,visibility .22s ease!important;
  overscroll-behavior:contain!important;
}
.mobile-nav.open{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.mobile-nav-panel{
  position:absolute!important;
  inset:0 0 0 auto!important;
  width:min(430px,92vw)!important;
  max-width:100%!important;
  height:100dvh!important;
  min-height:100%!important;
  padding:0 24px calc(30px + env(safe-area-inset-bottom))!important;
  background:var(--paper)!important;
  color:var(--green)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  transform:translate3d(100%,0,0)!important;
  transition:transform .28s var(--ease)!important;
  box-shadow:-24px 0 70px rgba(4,21,15,.18)!important;
}
.mobile-nav.open .mobile-nav-panel{transform:translate3d(0,0,0)!important}

.mobile-nav-top{
  position:sticky!important;
  top:0!important;
  z-index:20!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  min-height:92px!important;
  padding:calc(14px + env(safe-area-inset-top)) 0 14px!important;
  border-bottom:1px solid var(--line)!important;
  background:rgba(255,253,249,.98)!important;
  backdrop-filter:blur(12px)!important;
}
.mobile-nav-top img{
  display:block!important;
  width:138px!important;
  height:58px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.mobile-nav-close{
  position:relative!important;
  flex:0 0 44px!important;
  width:44px!important;
  height:44px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(9,36,27,.14)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:var(--green)!important;
  box-shadow:0 8px 22px rgba(9,36,27,.08)!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent;
}
.mobile-nav-close svg{
  width:22px!important;
  height:22px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  pointer-events:none!important;
}
.mobile-nav-close:hover{background:var(--cream)!important}
.mobile-nav-close:focus-visible{
  outline:3px solid rgba(216,158,24,.34)!important;
  outline-offset:2px!important;
}

.mobile-nav-links{margin-top:8px!important}
.mobile-nav-links .mhf-primary-menu>li>a{
  min-height:64px!important;
  display:flex!important;
  align-items:center!important;
  padding:12px 6px!important;
  font-size:16px!important;
}
.mobile-nav .mhf-language-control.mobile{margin:20px 0 8px!important}
.mobile-nav-actions{margin-top:20px!important;padding-bottom:8px!important}

/* Lock the actual viewport while a dialog/drawer is open. */
html:has(.mobile-nav.open),
body.mhf-dialog-open,
body.no-scroll{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

@media(max-width:980px){
  .site-header .mobile-toggle{display:flex!important}
}

/* Phones use a full-screen canvas: no page-content strip and no accidental overlap. */
@media(max-width:640px){
  .mobile-nav{background:var(--paper)!important}
  .mobile-nav-panel{
    left:0!important;
    right:0!important;
    width:100vw!important;
    max-width:none!important;
    box-shadow:none!important;
    padding-left:max(20px,env(safe-area-inset-left))!important;
    padding-right:max(20px,env(safe-area-inset-right))!important;
  }
  .mobile-nav-top{min-height:88px!important}
  .mobile-nav-top img{width:132px!important;height:54px!important}
  .mobile-nav-links .mhf-primary-menu>li>a{min-height:62px!important;font-size:16px!important}
  .mobile-nav .mhf-language-menu>summary{width:100%!important;min-height:58px!important}
  .mobile-nav-actions .btn{min-height:56px!important}
}

@media(max-width:380px){
  .mobile-nav-panel{padding-left:16px!important;padding-right:16px!important}
  .mobile-nav-top img{width:120px!important}
}

html[dir="rtl"] .mobile-nav-panel{
  inset:0 auto 0 0!important;
  transform:translate3d(-100%,0,0)!important;
}
html[dir="rtl"] .mobile-nav.open .mobile-nav-panel{transform:translate3d(0,0,0)!important}
html[dir="rtl"] .mobile-nav-top img{object-position:right center!important}

@media(prefers-reduced-motion:reduce){
  .mobile-nav,.mobile-nav-panel,.site-header .mobile-toggle span{transition:none!important}
}