/**
 * R10.38.8 — storefront header alignment + mobile navigation contrast authority.
 * Loaded last so older Fazfood/FoodKing layers cannot pull navigation off-centre
 * or recolour mobile links against the drawer background.
 */

/* Desktop: centre the primary menu against the viewport, not merely the space
   left over after the logo/actions. Equal outer tracks keep the nav optically centred. */
@media (min-width:1181px){
  body.fazfood-public .theme-site-header .site-header-inner{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    column-gap:24px!important;
  }
  body.fazfood-public .theme-site-header .brand{
    grid-column:1!important;
    justify-self:start!important;
  }
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav{
    grid-column:2!important;
    justify-self:center!important;
    justify-content:center!important;
    margin-inline:auto!important;
  }
  body.fazfood-public .theme-site-header .faz-header-actions{
    grid-column:3!important;
    justify-self:end!important;
  }

  /* Centre both the standard category rail and the dynamic menu-page rail.
     safe center falls back to the start edge if the rail is wider than its viewport. */
  body.fazfood-public .faz-category-bar .faz-category-scroll,
  body.sf-menu-reference-page.fazfood-public .menu-category-bar .faz-category-scroll{
    justify-content:center!important;
    justify-content:safe center!important;
    margin-inline:auto!important;
  }
}

/* Tablet/mobile: a single, high-contrast drawer system from the off-canvas breakpoint down. */
@media (max-width:1180px){
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav{
    position:fixed!important;
    left:0!important;
    right:auto!important;
    top:0!important;
    bottom:0!important;
    z-index:12000!important;
    width:min(390px,88vw)!important;
    height:100dvh!important;
    max-height:none!important;
    padding:82px 20px 112px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    background:#111315!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:24px 0 60px rgba(0,0,0,.45)!important;
    color:#fff!important;
    color-scheme:dark!important;
    transform:translateX(-104%)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:none!important;
    transition:transform .24s cubic-bezier(.22,.8,.22,1)!important;
  }
  body.fazfood-public.nav-open .theme-site-header #main-navigation.faz-main-nav{
    transform:translateX(0)!important;
    pointer-events:auto!important;
  }

  /* Force readable text even when an older theme/visited-link rule uses !important.
     -webkit-text-fill-color specifically protects iOS Safari from inherited text colour. */
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav > a,
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav > a:link,
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav > a:visited,
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav > a:hover,
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav > a:focus,
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav > a:active,
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop > summary{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:58px!important;
    height:auto!important;
    margin:0!important;
    padding:15px 18px!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.14)!important;
    border-radius:0!important;
    background:transparent!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    font-family:'Rubik',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
    font-size:17px!important;
    font-weight:750!important;
    line-height:1.25!important;
    letter-spacing:.02em!important;
    text-transform:uppercase!important;
    text-decoration:none!important;
    text-shadow:none!important;
    opacity:1!important;
    filter:none!important;
    mix-blend-mode:normal!important;
  }
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav > a::after{
    display:none!important;
    content:none!important;
  }
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav > a:hover,
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav > a:focus-visible,
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop > summary:hover,
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop > summary:focus-visible{
    background:#20242a!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav > a.active{
    background:#c9342f!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    border-left:4px solid #ffca28!important;
    padding-left:14px!important;
  }

  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop{
    display:block!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.14)!important;
    background:transparent!important;
  }
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop > summary{
    border-bottom:0!important;
  }
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop > summary::after{
    margin-left:auto!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    opacity:1!important;
  }
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop > div{
    position:static!important;
    display:none!important;
    width:100%!important;
    margin:0!important;
    padding:5px 0 10px!important;
    background:#1b1f24!important;
    border:0!important;
    box-shadow:none!important;
  }
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop[open] > div{
    display:block!important;
  }
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop > div a,
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop > div a:link,
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop > div a:visited{
    display:flex!important;
    align-items:center!important;
    min-height:46px!important;
    padding:11px 18px 11px 30px!important;
    background:transparent!important;
    color:#f2f4f6!important;
    -webkit-text-fill-color:#f2f4f6!important;
    border-radius:0!important;
    font-family:'Rubik',system-ui,sans-serif!important;
    font-size:15px!important;
    font-weight:650!important;
    line-height:1.3!important;
    text-decoration:none!important;
    opacity:1!important;
    filter:none!important;
  }
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop > div a:hover,
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop > div a:focus-visible{
    background:#282d33!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }

  body.fazfood-public .faz-mobile-nav-close{
    position:absolute!important;
    top:18px!important;
    right:18px!important;
    z-index:3!important;
    display:grid!important;
    place-items:center!important;
    width:46px!important;
    height:46px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.22)!important;
    border-radius:50%!important;
    background:#252a30!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    font-size:28px!important;
    font-weight:500!important;
    line-height:1!important;
    box-shadow:none!important;
    cursor:pointer!important;
  }
  body.fazfood-public .mobile-nav-backdrop{
    background:rgba(0,0,0,.64)!important;
  }

  /* Make the menu trigger itself unmistakable on phones/tablets. */
  body.fazfood-public .theme-site-header .mobile-menu-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:5px!important;
    background:#17191c!important;
    border:1px solid #17191c!important;
    box-shadow:0 6px 16px rgba(0,0,0,.12)!important;
  }
  body.fazfood-public .theme-site-header .mobile-menu-toggle span{
    display:block!important;
    width:21px!important;
    height:2px!important;
    margin:0!important;
    border-radius:2px!important;
    background:#fff!important;
    opacity:1!important;
  }

  /* Overflowing category rails should begin at a predictable edge on touch devices. */
  body.fazfood-public .faz-category-bar .faz-category-scroll,
  body.sf-menu-reference-page.fazfood-public .menu-category-bar .faz-category-scroll{
    justify-content:flex-start!important;
  }
}

@media (max-width:780px){
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav{
    width:min(380px,90vw)!important;
    padding:78px 18px 112px!important;
  }
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav > a,
  body.fazfood-public .theme-site-header #main-navigation.faz-main-nav .faz-nav-drop > summary{
    min-height:56px!important;
    padding-block:14px!important;
    font-size:16px!important;
  }
}