/* PALMEA V21 — persistent navigation stack
   Minimal override over V20: keep the premium header visible on every page,
   and keep menu categories pinned directly below it without changing the V20 layout. */

:root{
  --palmea-head-h:78px;
  --palmea-cat-h:66px;
  --palmea-stack-gap:6px;
  --palmea-stack-h:calc(var(--palmea-head-h) + var(--palmea-cat-h) + var(--palmea-stack-gap));
}

/* Header remains present while scrolling. It keeps the existing V20 visual design. */
.site-head{
  position:sticky!important;
  top:0!important;
  z-index:120!important;
  isolation:isolate;
}

/* Menu categories form one stable navigation stack with the header. */
body[data-page="menu"] .category-wrap{
  position:sticky!important;
  top:calc(var(--palmea-head-h) + var(--palmea-stack-gap))!important;
  z-index:92!important;
  margin-bottom:14px!important;
  isolation:isolate;
}
body[data-page="menu"] .category-nav{
  backdrop-filter:blur(22px) saturate(1.06)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.06)!important;
}

/* Anchored category jumps stop beneath both persistent bars. */
body[data-page="menu"]{
  scroll-padding-top:calc(var(--palmea-stack-h) + 18px)!important;
}
body[data-page="menu"] .section{
  scroll-margin-top:calc(var(--palmea-stack-h) + 18px)!important;
}

/* Prevent the sticky stack from feeling too tall on smaller devices. */
@media(max-width:760px){
  :root{--palmea-stack-gap:4px}
  .site-head{
    padding-top:max(6px,env(safe-area-inset-top))!important;
  }
  body[data-page="menu"] .category-wrap{
    margin-inline:0!important;
    margin-bottom:10px!important;
  }
}

@media(max-width:390px){
  :root{--palmea-stack-gap:3px}
}

/* Reduced-motion users still get the same persistent layout without animated scroll side effects. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}