/* ==========================================================================
   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:#161616;
  --h-ink-soft:#1f1f1f;
  --h-cream:#eee9da;
  --h-warm:#462e24;
  --h-cocoa:#462e24;
  --h-bronze-lit:#cbd6e3;
  --h-line:rgba(238,233,218,.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(22,22,22,.9);
  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}
/* the hours readout stays out of the bar: logo, nav, language, one action */
@media(min-width:1024px){.hdr__nav{display:flex}.hdr .hours-status{display:none}.burger{display:none}}
/* After Dark, before it opens: a pulsing mark on the link and, on hover or focus,
   a one-line preview that drops beneath it. The text comes from data-soon. */
.hdr__nav a[data-soon]{position:relative}
.hdr__nav a[data-soon]::before{content:"";position:absolute;top:-.3em;right:-.75em;width:5px;height:5px;border-radius:50%;
  background:var(--h-bronze-lit);animation:hdr-soon 2.4s ease-in-out infinite}
.hdr__nav a[data-soon]::after{content:attr(data-soon);position:absolute;left:50%;top:calc(100% + 16px);
  transform:translate(-50%,-6px);white-space:nowrap;padding:.75em 1.2em;background:#161616;color:#eee9da;
  border:1px solid rgba(203,214,227,.35);font-family:var(--accent);font-style:italic;font-size:.95rem;
  letter-spacing:.02em;text-transform:none;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.hdr__nav a[data-soon]:hover::after,.hdr__nav a[data-soon]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.nav-overlay__menu a[data-soon-tag]::after{content:attr(data-soon-tag);margin-left:.6em;vertical-align:super;
  font-family:var(--sans,sans-serif);font-size:.28em;letter-spacing:.22em;text-transform:uppercase;color:var(--h-bronze-lit)}
@keyframes hdr-soon{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.hdr__nav a[data-soon]::before{animation: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 #812b28;background:#812b28; /* brand red, like every other booking button */
  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:#eee9da;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, #1f1f1f);border-top:1px solid var(--h-line, rgba(238,233,218,.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(238,233,218,.16))}
@media(min-width:1024px){.mobile-bar{color:#eee9da;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;min-height:44px;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:#eee9da;padding:.85rem .3rem;line-height:1.3}
nav.mobile-bar a:hover{color:#cbd6e3}

/* 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:'IM Fell English',Georgia,'Times New Roman',serif; /* stands in for Forward Serif; see amami.css */
}

/* --- 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}
}

/* --- language switch -------------------------------------------------------
   A two-item dropdown. <details> so it opens without script, and the current
   language shows on the button. On a phone the header has no room beside the
   logo, the Reserve button and the burger, so it moves into the menu panel. */
.lang{position:relative;display:none}
.lang > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.34rem;
  padding:.5em .7em;border:1px solid var(--h-line);color:var(--h-cream);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.lang > summary::-webkit-details-marker{display:none}
.lang > summary::after{content:"";width:5px;height:5px;margin-left:.1rem;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-1px)}
.lang > summary:hover{border-color:var(--h-bronze-lit);color:var(--h-bronze-lit)}
.lang__menu{position:absolute;top:calc(100% + 6px);right:0;z-index:5;min-width:132px;
  background:var(--h-ink);border:1px solid var(--h-line);padding:.3rem}
.lang__menu button{display:block;width:100%;text-align:left;background:none;border:0;
  color:var(--h-cream);font:inherit;font-size:.78rem;letter-spacing:.06em;
  padding:.55em .7em;cursor:pointer}
.lang__menu button:hover{background:var(--h-ink-soft);color:var(--h-bronze-lit)}
.lang__menu button[aria-current="true"]{color:var(--h-bronze-lit)}
.lang__menu button[aria-current="true"]::after{content:" ✓";font-size:.8em}
@media(min-width:1024px){.lang{display:block}}

/* the copy in the menu panel */
.nav-overlay .lang--panel{display:block;margin-top:1.4rem}
.nav-overlay .lang--panel .lang__row{display:flex;gap:.5rem}
.nav-overlay .lang--panel button,.nav-overlay .lang--panel a{flex:1;background:none;border:1px solid var(--h-line);
  color:var(--h-cream);font:inherit;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.75em .5em;cursor:pointer}
.nav-overlay .lang--panel button[aria-current="true"],.nav-overlay .lang--panel a[aria-current="true"]{border-color:var(--h-bronze-lit);
  color:var(--h-bronze-lit)}
@media(min-width:1024px){.nav-overlay .lang--panel{display:none}}

/* --- the phone header, per the reference ------------------------------------
   Reserve on the left as an outlined button, the mark centred, the menu on the
   right. The solid Reserve in the right-hand group is for the desktop only. */
.hdr .hdr__resm{display:none;padding:.62em 1em;font-size:.7rem;letter-spacing:.12em;
  background:transparent;border:1px solid rgba(253,248,244,.7);text-decoration:underline;
  text-underline-offset:3px}
.hdr .hdr__resm:hover{background:var(--h-cocoa);border-color:var(--h-cocoa);color:#fff}
/* On a phone the language control sits beside Reserve rather than in the menu
   panel, so both live in one group in the left column. Space is tight at 360px,
   so the button and the control are set small and the mark shrinks with them. */
.hdr__ml{display:none}
.lang--m{display:none}
@media(max-width:1023px){
  .hdr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding-inline:clamp(12px,3.5vw,20px)}
  .hdr__ml{display:flex;align-items:center;gap:.4rem;grid-column:1;justify-self:start}
  .hdr .hdr__resm{display:inline-block;padding:.6em .75em;font-size:.62rem;
    letter-spacing:.08em}
  .lang--m{display:block}
  .lang--m > summary{padding:.52em .5em;font-size:.62rem;letter-spacing:.08em;gap:.24rem}
  .lang--m .lang__menu{left:0;right:auto;min-width:120px}
  .hdr__logo{grid-column:2;justify-self:center}
  .hdr__logo img{height:28px}
  .hdr__right{grid-column:3;justify-self:end}
  .hdr__right .btn--solid{display:none}
  .burger{width:44px;height:44px}
}
@media(min-width:1024px){.lang--m{display:none}}

/* The booking widget on the restored reservation page: the panel is cream, so
   the widget's own white card needs a little room rather than a border. */
body.has-amami-hdr .rs-otwidget{margin:0 0 1.2rem;min-height:230px}
body.has-amami-hdr .rs-otwidget iframe{max-width:100%}

/* The booking embed sat inside the panel's 72px side padding, which left
   OpenTable's own flow 471px to work in on a laptop. It uses the full width of
   the panel now, and on a wide screen it breaks out over the gutter as well. */
/* Pulling it out of the panel's padding gained width but the padding is a
   clamp, so a fixed pull overflowed the viewport at some widths. It stays
   inside the panel and takes its height instead — OpenTable's flow is
   responsive and reads fine at this column width. */
body.has-amami-hdr .rs-otembed{margin-inline:0;width:100%}

/* Language: a label, not a control. EN | IT in the nav's own type, the
   active one in cream, the other dimmed; no flags, no dropdown, no globe. */
.hdr .lang{display:inline-flex;align-items:center;gap:.55em;
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--h-cream)}
.hdr .lang button,.hdr .lang a{background:none;border:0;padding:.35em .1em;margin:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;color:inherit;opacity:.5;transition:opacity .2s ease-out}
.hdr .lang button:hover,.hdr .lang a:hover,.hdr .lang button[aria-current="true"],.hdr .lang a[aria-current="true"]{opacity:1}
.hdr .lang i{font-style:normal;opacity:.35}
.hdr .lang--m{margin-left:.6rem}
@media (max-width:760px){.hdr .lang{font-size:.625rem;gap:.4em}}
/* One switch at a time: the mobile one beside Reserve below 1024px, the
   desktop one in the right cluster above it. */
@media (max-width:1023px){.hdr__right .lang{display:none}}
@media (min-width:1024px){.hdr .lang--m{display:none}}

@media (max-width:760px){.hdr .lang button,.hdr .lang a{min-height:44px;min-width:32px}}

/* §6 — every control a thumb can reach is at least 44px tall on phones. The
   logo and the small Reserve pill grow their hit area, not their artwork. */
@media (max-width:1023px){
  .hdr .hdr__resm{display:inline-flex;align-items:center;min-height:44px}
  .hdr__logo{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
  .nav-overlay__aside .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
  .nav-overlay__aside dd:not(.lang__row) a{display:inline-block;padding:10px 0;margin:-10px 0}
  .nav-overlay .lang--panel .lang__row button,.nav-overlay .lang--panel .lang__row a{min-height:44px}
}

/* Phones and tablets (2026-09-23): the bottom bar already carries Reserve, so
   the header drops its own Reserve pill, which was wrapping onto two lines and
   pushing the logo off centre at 360-414px. What is left is language, mark,
   menu; minmax(0,1fr) keeps the side columns equal so the mark sits dead
   centre whatever the language control measures. */
@media (max-width:1023px){
  .hdr{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .hdr .hdr__resm{display:none}
  .hdr .lang--m{margin-left:0}
}

/* The switch is now two links; they dress exactly like the buttons did. */
.hdr .lang a,.nav-overlay .lang--panel a{text-decoration:none;color:inherit}
.nav-overlay .lang--panel a{display:inline-flex;align-items:center;justify-content:center;text-align:center}

/* phones: the 44px language links centre their label, so EN | IT sit on one line with the bar */
.hdr .lang a,.hdr .lang button{display:inline-flex;align-items:center;justify-content:center}