/* =========================================================
   Pizzeria San Remo — design tokens
   Palette grounded in the pizza counter, not stock-photo
   tomato-red: worked dough, flour parchment, salumeria bottle-green,
   crust-gold brass, a bordeaux/vinaccia thread tying back to the
   family's other address, the Brasserie San Remo (est. 1919).
   ========================================================= */
:root{
  --ink:        #241c16;   /* dark roast / primary text (adaptive: swaps in dark mode) */
  --ink-soft:   #4a3d31;   /* secondary text on paper (adaptive) */
  --paper:      #f1ead9;   /* flour parchment background (adaptive) */
  --paper-2:    #e7ddc6;   /* slightly deeper paper, section bands (adaptive) */
  --card:       #fbf7ec;   /* card / row surface (adaptive) */
  --line:       #d7c9a3;   /* warm hairline, not gray (adaptive) */
  --bottle:     #2f4a3c;   /* bottle green as TEXT accent (adaptive, brightens in dark mode) */
  --brass:      #c6923a;   /* crust-gold brass as TEXT accent (adaptive) */
  --brass-hi:   #e0ac54;
  --wine:       #7a1f2b;   /* bordeaux/vinaccia — heritage accent, TEXT (adaptive) */
  --wine-wash:      #f0dcd9; /* bordeaux-tinted section background (adaptive) */
  --wine-wash-line: #e3c3bf; /* hairline on the wine wash (adaptive) */
  --dish-bg:    #f8ece9;   /* bordeaux-tinted dish card surface (adaptive) */
  --dish-line:  #e6cdc7;   /* dish card border (adaptive) */

  /* Fixed tokens: always-dark surfaces (hero, footer) that do NOT swap in
     dark mode, paired with always-light text/fills so they never collide. */
  --onyx:              #241c16;
  --onyx-wine:          #3a1d1c;  /* wine-tinted dark, for hero scrim + footer */
  --cream:              #f6f1e4;
  --bottle-solid:       #2f4a3c;
  --bottle-solid-hover: #24392e;
  --wine-glow:          #e2a4ac;  /* bordeaux accent for text on fixed onyx surfaces */

  --font-display: "Fraunces", "Iowan Old Style", ui-serif, serif;
  --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", ui-monospace, monospace;

  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 18px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: 220ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:    #191410;
    --paper-2:  #14100c;
    --card:     #211a14;
    --ink:      #f1ead9;
    --ink-soft: #c9bda4;
    --line:     #3a2f22;
    --bottle:   #6f9c85;
    --brass:    #d9a24f;
    --brass-hi: #f0c076;
    --wine:     #e2a4ac;
    --wine-wash:      #2a1518;
    --wine-wash-line: #452225;
    --dish-bg:        #2c1517;
    --dish-line:      #4a2224;
    color-scheme: dark;
  }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
}

img{ max-width: 100%; display: block; }
a{ color: inherit; }

::selection{ background: var(--brass); color: var(--onyx); }

:focus-visible{
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
@media (min-width: 960px){
  .container{ max-width: 920px; }
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.eyebrow::before{
  content: "";
  width: 1.4em;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.section{
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 58px;
}
.section-head{
  margin-bottom: var(--space-4);
}
.section-title{
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.05;
}
.section-title em{
  font-style: italic;
  color: var(--bottle);
  font-weight: 500;
}
@media (prefers-color-scheme: dark){
  .section-title em{ color: var(--brass-hi); }
}
.section-sub{
  margin-top: 0.6rem;
  color: var(--ink-soft);
  max-width: 46ch;
  font-size: 1rem;
}

/* reveal-on-scroll */
[data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
}
[data-reveal].in-view{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.75rem 1.3rem;
  border-radius: var(--radius-m);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active{ transform: scale(0.97); }
.btn svg{ width: 1.15em; height: 1.15em; flex: none; }

.btn-primary{ background: var(--bottle-solid); color: var(--cream); }
.btn-primary:hover{ background: var(--bottle-solid-hover); }

.btn-brass{ background: var(--brass); color: var(--onyx); }
.btn-brass:hover{ background: var(--brass-hi); }

.btn-ghost{
  background: transparent;
  border-color: currentColor;
  color: var(--cream);
}
.btn-ghost:hover{ background: rgba(241,234,217,0.1); }

.btn-outline{
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-outline:hover{ border-color: var(--bottle); color: var(--bottle); }

.btn-block{ width: 100%; }

/* =========================================================
   Sticky order bar (mobile-first primary CTA)
   ========================================================= */
.order-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.order-bar a{
  background: var(--card);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9rem 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.order-bar a svg{ width: 1.2em; height: 1.2em; }
.order-bar a.call{ color: var(--bottle); }
@media (prefers-color-scheme: dark){ .order-bar a.call{ color: var(--brass-hi); } }
.order-bar a.wa{ background: var(--bottle-solid); color: var(--cream); }
.order-bar a:active{ filter: brightness(0.94); }

/* =========================================================
   Header / chip nav
   ========================================================= */
.chipnav{
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: stretch;
}
.lang-switch{
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.6rem 0 var(--space-3);
  border-right: 1px solid var(--line);
}
.lang-btn{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.35rem 0.4rem;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur), border-color var(--dur);
}
.lang-btn.active{ color: var(--wine); border-color: var(--wine); }
.chipnav-inner{
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem var(--space-3);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chipnav-inner::-webkit-scrollbar{ display: none; }
.chip{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.chip.active{
  background: var(--bottle-solid);
  border-color: var(--bottle-solid);
  color: var(--cream);
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  /* Restored original hero photo + scrim: this is the exact combination
     that read well (whole pizza clearly visible, text legible). */
  background:
    linear-gradient(180deg, rgba(36,28,22,0.87) 0%, rgba(36,28,22,0.90) 55%, rgba(36,28,22,0.94) 100%),
    url("images/hero-pizza-forno.jpg") center 55% / cover no-repeat;
  color: var(--cream);
  padding: var(--space-6) 0 var(--space-5);
  position: relative;
  overflow: hidden;
}
.hero-inner{ position: relative; }
.hero .eyebrow{ margin-bottom: var(--space-3); color: var(--brass-hi); text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.6); }
.hero h1{
  font-size: clamp(3rem, 15vw, 5.5rem);
  line-height: 0.92;
  color: var(--cream);
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 4px 26px rgba(0,0,0,0.55);
}
.hero h1 .accent{
  font-style: italic;
  font-weight: 500;
  color: var(--brass-hi);
}
.hero-tagline{
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 18px rgba(0,0,0,0.55);
  max-width: 32ch;
  line-height: 1.35;
}
.hero-sub{
  margin-top: var(--space-2);
  color: color-mix(in srgb, var(--cream) 92%, transparent);
  max-width: 44ch;
  font-size: 1rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 2px 14px rgba(0,0,0,0.5);
}

.heritage-note{
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--wine-glow);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--wine-glow) 55%, transparent);
  border-radius: 999px;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  background: color-mix(in srgb, var(--onyx-wine) 65%, transparent);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.heritage-note svg{ width: 1.1em; height: 1.1em; flex: none; }

.status-pill{
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 0.55rem 0.9rem 0.55rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cream) 25%, transparent);
  background: color-mix(in srgb, var(--onyx-wine) 70%, transparent);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.status-dot{
  width: 0.6em; height: 0.6em; border-radius: 50%;
  background: #7fbf8f;
  box-shadow: 0 0 0 3px color-mix(in srgb, #7fbf8f 30%, transparent);
  flex: none;
}
.status-pill[data-state="closed"] .status-dot{
  background: var(--brass-hi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass-hi) 30%, transparent);
}

.hero-ctas{
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* =========================================================
   Menu
   ========================================================= */
.menu-cat{ margin-bottom: var(--space-5); scroll-margin-top: 64px; }
.menu-cat:last-child{ margin-bottom: 0; }
.menu-cat-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.6rem;
  margin-bottom: 1.1rem;
}
.menu-cat-head h3{
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-style: italic;
  font-weight: 500;
}
.menu-cat-price{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--bottle);
  white-space: nowrap;
}
@media (prefers-color-scheme: dark){ .menu-cat-price{ color: var(--brass-hi); } }

.menu-grid{
  display: grid;
  gap: 0.9rem;
}
@media (min-width: 700px){
  .menu-grid{ grid-template-columns: 1fr 1fr; gap: 0.9rem 1.6rem; }
}

.menu-row{
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px dotted var(--line);
}
.menu-row .name{
  font-weight: 700;
  flex: none;
}
.menu-row .leader{
  flex: 1;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-4px);
  min-width: 0.5rem;
}
.menu-row .price{
  font-family: var(--font-mono);
  font-weight: 700;
  flex: none;
  font-size: 0.92rem;
}

.dish{
  background: var(--dish-bg);
  border: 1px solid var(--dish-line);
  border-radius: var(--radius-m);
  padding: 0.9rem 1rem;
}
.dish .name{
  font-weight: 700;
  font-size: 1.02rem;
  display: block;
}
.dish .ingredients{
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 0.25rem 0 0;
}

.builder{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-3);
}
.builder p{ margin: 0 0 0.8rem; color: var(--ink-soft); font-size: 0.95rem; }
.tag-cloud{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.menu-gallery{
  display: grid;
  gap: 0.9rem;
  margin: var(--space-4) 0 var(--space-5);
}
@media (min-width: 700px){
  .menu-gallery{ grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
}
.menu-gallery figure{
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
}
.menu-gallery img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.menu-gallery figcaption{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--line);
}

.drinks-list{ display: grid; gap: 0; }
@media (min-width: 700px){ .drinks-list{ grid-template-columns: 1fr 1fr; column-gap: 2rem; } }

/* =========================================================
   Come ordinare
   ========================================================= */
.order-section{ background: var(--wine-wash); }
.order-section .order-card{ border-color: var(--wine-wash-line); }
.order-cards{
  display: grid;
  gap: 1rem;
  margin-top: var(--space-3);
}
@media (min-width: 700px){ .order-cards{ grid-template-columns: 1fr 1fr; } }
.order-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-3);
}
.order-card .k{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine);
}
.order-card .v{
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0.3rem 0 1rem;
  word-break: break-word;
}
.order-note{
  margin-top: var(--space-3);
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 52ch;
}

/* =========================================================
   Orari — oven dial
   ========================================================= */
.hours-wrap{
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 800px){
  .hours-wrap{ grid-template-columns: 260px 1fr; }
}
.dial-figure{ margin: 0; display: flex; justify-content: center; }
.dial svg{ width: 100%; max-width: 260px; height: auto; }
.dial-arc{ transition: stroke-dashoffset 1.1s var(--ease-out); }
.dial-label{
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--ink-soft);
}
.dial-hand{ transition: transform 600ms var(--ease-out); }

.hours-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.hours-list li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
}
.hours-list li:last-child{ border-bottom: none; padding-bottom: 0; }
.hours-list .d{ font-weight: 700; }
.hours-list .t{ font-family: var(--font-mono); color: var(--ink-soft); }

/* =========================================================
   Dove siamo
   ========================================================= */
.map-wrap{
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}
@media (min-width: 700px){ .map-wrap{ aspect-ratio: 16/9; } }
.map-wrap iframe{ width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.25) contrast(1.05); }

.address-block{ margin-top: var(--space-3); }
.address-block address{
  font-style: normal;
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.address-actions{ margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* =========================================================
   Footer
   ========================================================= */
footer{
  background: var(--onyx-wine);
  color: var(--cream);
  padding: var(--space-5) 0 calc(var(--space-4) + 74px);
}
@media (min-width: 700px){ footer{ padding-bottom: var(--space-5); } }
.footer-grid{
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 700px){ .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; } }
footer .brand{
  font-family: var(--font-display);
  font-size: 1.6rem;
}
footer .ig{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.8rem;
  color: var(--brass-hi);
  text-decoration: none;
  font-weight: 700;
}
footer .ig svg{ width: 1.3em; height: 1.3em; }
footer h4{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 60%, transparent);
  margin: 0 0 0.8rem;
}
footer p, footer a{ color: color-mix(in srgb, var(--cream) 88%, transparent); text-decoration: none; margin: 0 0 0.4rem; }
footer .heritage{
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--wine-glow);
}
footer .heritage a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
footer .fine{
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--cream) 60%, transparent);
}