/* ==========================================================================
   Amami Italia — the site's one header, and the navigation overlay it opens.
   Same reasoning as amami-footer.css: kept separate and self-contained, with
   its own tokens declared on the elements rather than read from :root, so the
   restored static pages (/events/, /reservation/) can carry the real header
   without loading amami.css and having their bodies restyled.
   ========================================================================== */
.hdr,.nav-overlay{
  --h-ink:#0b0908;
  --h-ink-soft:#141110;
  --h-cream:#fdf8f4;
  --h-warm:#433e37;
  --h-wine:#812b28;
  --h-bronze-lit:#ca9d75;
  --h-line:rgba(253,248,244,.16);
  --h-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --h-sans:'Poppins','Helvetica Neue',system-ui,sans-serif;
  --h-hdr:76px;
  --h-pad:clamp(20px,5vw,64px);
  font-family:var(--h-sans);
  color:var(--h-cream);
}
.hdr *,.nav-overlay *{box-sizing:border-box}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;height:var(--h-hdr);z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding-inline:var(--h-pad);background:rgba(11,9,8,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--h-line)}
.hdr__logo img{height:34px;width:auto}
.hdr__nav{display:none;gap:1.9rem;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase}
.hdr__nav a{text-decoration:none;opacity:.86}
.hdr__nav a:hover{opacity:1;color:var(--h-bronze-lit)}
.hdr__right{display:flex;align-items:center;gap:1rem}
.hours-status{display:none;font-size:.75rem;letter-spacing:.08em;color:var(--h-bronze-lit)}
.burger{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;cursor:pointer;padding:0}
.burger span{display:block;width:24px;height:1px;background:var(--h-cream);margin:4px 0}
@media(min-width:1024px){.hdr__nav{display:flex}.hours-status{display:block}.burger{display:none}}

/* ---------- full-screen nav overlay ---------- */
.nav-overlay{position:fixed;inset:0;z-index:80;background:var(--h-ink);display:grid;
  grid-template-columns:1fr;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.nav-overlay[data-open="true"]{opacity:1;visibility:visible}
.nav-overlay__menu{padding:clamp(80px,12vh,140px) var(--h-pad) 2rem;overflow-y:auto}
.nav-overlay__menu a{display:block;font-family:var(--h-serif);font-size:clamp(2rem,5.5vw,3.4rem);
  text-decoration:none;padding:.22em 0;transition:color .2s}
.nav-overlay__menu a:hover,.nav-overlay__menu a[aria-current]{color:var(--h-bronze-lit)}
.nav-overlay__aside{padding:0 var(--h-pad) clamp(40px,8vh,80px);border-top:1px solid var(--h-line)}
.nav-overlay__aside dt{font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--h-bronze-lit);margin-top:1.6rem}
.nav-overlay__aside dd{margin:.35rem 0 0;font-size:1.0625rem}
.nav-close{position:absolute;top:18px;right:var(--h-pad);width:56px;height:56px;border-radius:50%;
  border:1px solid var(--h-line);background:none;color:var(--h-cream);font-size:1.4rem;cursor:pointer}
@media(min-width:900px){
  .nav-overlay{grid-template-columns:1.15fr .85fr}
  .nav-overlay__aside{border-top:0;border-left:1px solid var(--h-line);padding-top:clamp(80px,12vh,140px)}
}


/* The Reserve button and the overlay's links are styled here too, so a page
   that does not load amami.css still gets them right. */
.hdr .btn,.nav-overlay .btn{display:inline-block;padding:.85em 1.9em;
  border:1px solid var(--h-wine);background:var(--h-wine);
  color:var(--h-cream);text-decoration:none;font-size:.8125rem;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.2;cursor:pointer;border-radius:0;
  transition:background .25s,color .25s,border-color .25s}
.hdr .btn:hover,.nav-overlay .btn:hover{background:var(--h-bronze-lit);
  border-color:var(--h-bronze-lit);color:var(--h-ink)}
.hdr a,.nav-overlay a{color:inherit}
.nav-overlay__aside dl{margin:0}

/* Pages that were captured with their own in-flow header need the space back
   once ours takes over, because ours is fixed. Only the patched static pages
   carry this class; the generated pages run their heroes under the header on
   purpose. */
body.has-amami-hdr{padding-top:var(--h-hdr,76px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- sticky mobile bar (spec 5.2) ---------- */
.mobile-bar{color:#fdf8f4;font-family:'Poppins','Helvetica Neue',system-ui,sans-serif;position:fixed;inset:auto 0 0;z-index:70;display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--h-ink-soft, #141110);border-top:1px solid var(--h-line, rgba(253,248,244,.16));
  padding-bottom:env(safe-area-inset-bottom)}
.mobile-bar a{padding:.85rem .3rem;text-align:center;text-decoration:none;font-size:.6875rem;
  letter-spacing:.12em;text-transform:uppercase}
.mobile-bar a+a{border-left:1px solid var(--h-line, rgba(253,248,244,.16))}
@media(min-width:1024px){.mobile-bar{color:#fdf8f4;font-family:'Poppins','Helvetica Neue',system-ui,sans-serif;display:none}}
@media(max-width:1023px){body{padding-bottom:64px}}


/* The captured theme styles bare <a>, so the quick-action bar needs a little
   more specificity on a static page to keep its own type and centring. */
nav.mobile-bar a{display:block;text-align:center;text-decoration:none;
  font-family:'Poppins','Helvetica Neue',system-ui,sans-serif;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fdf8f4;padding:.85rem .3rem;line-height:1.3}
nav.mobile-bar a:hover{color:#ca9d75}

/* The two restored pages keep their own type scale, which was set for a
   desktop and drops to 9–11px on a phone. Only their small labels are lifted,
   and only on small screens — the rest of the page is left alone. */
@media(max-width:760px){
  body.has-amami-hdr .rs-k,
  body.has-amami-hdr .rs-k--sm,
  body.has-amami-hdr .rs-still-s,
  body.has-amami-hdr .rs-alt-note,
  body.has-amami-hdr .ca-kicker,
  body.has-amami-hdr .eg-cat,
  body.has-amami-hdr label,
  body.has-amami-hdr .ca-field span,
  body.has-amami-hdr .ca-field > span{font-size:.8rem;letter-spacing:.14em}
  body.has-amami-hdr .rs-form input,
  body.has-amami-hdr .ca-field input,
  body.has-amami-hdr .ca-field select,
  body.has-amami-hdr .ca-field textarea{font-size:16px}
}

@media(max-width:760px){
  .hdr .btn{font-size:.8125rem;padding:.8em 1.15em}
}

/* Three faces across the whole site, the restored pages included. They set
   their own --sans/--serif in an inline <style>, and the theme underneath them
   loads its own families, so the variables are redefined on the body and the
   base face is set with them. Cormorant Garamond titles, Poppins body,
   Forward Serif for accents once that file exists. */
/* The captured pages redefine --sans on their own wrappers (.rs, and the
   catering page's blocks), which sits below <body> and would win, so the
   variables are set on every element inside the patched page rather than only
   on the body. */
body.has-amami-hdr{font-family:'Poppins','Helvetica Neue',system-ui,sans-serif}
body.has-amami-hdr,
body.has-amami-hdr *{
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Poppins','Helvetica Neue',system-ui,sans-serif;
  --am-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --am-sans:'Poppins','Helvetica Neue',system-ui,sans-serif;
  --accent:'Forward Serif','Poppins','Helvetica Neue',system-ui,sans-serif;
}

/* --- the menu panel on a phone ---------------------------------------------
   It was a two-row grid inside a fixed-height box: the list of links was taller
   than its row, so the last item disappeared under the block beneath it and the
   panel could not be scrolled. The whole panel scrolls now, the type is sized so
   the six links and the details fit a normal handset without scrolling at all,
   and there is room at the bottom for the quick-action bar. */
@media(max-width:899px){
  .nav-overlay{grid-template-columns:1fr;grid-template-rows:auto auto;
    align-content:start;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch}
  .nav-overlay__menu{padding:calc(var(--h-hdr) + 26px) var(--h-pad) .5rem;overflow:visible}
  .nav-overlay__menu a{font-size:clamp(1.6rem,7.4vw,2.15rem);padding:.3em 0}
  .nav-overlay__aside{padding:1.4rem var(--h-pad) calc(84px + env(safe-area-inset-bottom));
    border-top:1px solid var(--h-line)}
  .nav-overlay__aside dt{margin-top:1.1rem}
  .nav-close{top:12px;width:48px;height:48px}
}