/* ────────────────────────────────────────────────────────────
   girasole_rosso — Fiordipizza Rufina (production)
   Palette dal brand REALE: rosso pomodoro · giallo girasole · verde
   basilico · nero forno · crema. Light + dark (token semantici).
   Sezioni sempre-scure (hero/ticker/farine/footer) usano COSTANTI
   --cream/--char e NON flippano col tema.
   ──────────────────────────────────────────────────────────── */

:root {
  /* ── costanti (indipendenti dal tema) ── */
  --cream:     oklch(0.965 0.018 88);   /* chiaro stabile: testo/bg su sezioni scure */
  --char:      oklch(0.205 0.018 50);   /* nero forno: sezioni sempre-scure */
  --char-2:    oklch(0.270 0.020 52);
  --tomato:    oklch(0.560 0.195 28);   /* rosso pomodoro */
  --tomato-br: oklch(0.620 0.205 30);
  --sun:       oklch(0.800 0.150 80);   /* giallo girasole */
  --sun-deep:  oklch(0.720 0.150 74);
  --basil:     oklch(0.520 0.110 145);  /* verde basilico */
  --terra:     oklch(0.620 0.115 48);   /* terracotta */
  --line-lt:   color-mix(in oklab, var(--cream) 18%, transparent);

  /* ── semantici (flippano col tema) — default = chiaro ── */
  --bg:         oklch(0.965 0.018 88);
  --bg-alt:     oklch(0.935 0.026 82);
  --fg:         oklch(0.235 0.020 55);
  --fg-2:       oklch(0.400 0.025 50);
  --fg-mute:    oklch(0.520 0.022 52);
  --border:     color-mix(in oklab, var(--fg) 13%, transparent);
  --border-2:   color-mix(in oklab, var(--fg) 24%, transparent);
  --accent-ink: oklch(0.470 0.175 28);  /* tomato leggibile come testo su bg */

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:128px;
  --radius: 4px;
  --shell: 1200px; --narrow: 740px;
  --pad: clamp(1.25rem, 4vw, 3.25rem);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

:root[data-theme="dark"] {
  --bg:         oklch(0.200 0.012 60);  /* near-black caldo, mai #000 */
  --bg-alt:     oklch(0.245 0.014 58);
  --fg:         oklch(0.922 0.016 86);  /* crema, non bianco */
  --fg-2:       oklch(0.780 0.020 80);
  --fg-mute:    oklch(0.665 0.020 78);
  --border:     color-mix(in oklab, var(--fg) 16%, transparent);
  --border-2:   color-mix(in oklab, var(--fg) 30%, transparent);
  --accent-ink: oklch(0.745 0.150 36);  /* tomato schiarito per AA su scuro */
}
/* fallback se il JS è off */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:oklch(0.200 0.012 60); --bg-alt:oklch(0.245 0.014 58);
    --fg:oklch(0.922 0.016 86); --fg-2:oklch(0.780 0.020 80); --fg-mute:oklch(0.665 0.020 78);
    --border:color-mix(in oklab,var(--fg) 16%,transparent); --border-2:color-mix(in oklab,var(--fg) 30%,transparent);
    --accent-ink:oklch(0.745 0.150 36);
  }
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  transition:background-color .3s ease, color .3s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.04; letter-spacing:-0.015em; margin:0; font-optical-sizing:auto; }
p{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:var(--fg); text-decoration:none; border-bottom:1px solid var(--border-2); transition:color .18s,border-color .18s,background-color .18s; }
a:hover{ color:var(--accent-ink); border-color:var(--tomato); }
a:focus-visible,button:focus-visible{ outline:2px solid var(--tomato); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--tomato); color:var(--cream); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip{ position:absolute; left:-9999px; background:var(--char); color:var(--cream); padding:.5rem 1rem; z-index:300; border:0; }
.skip:focus{ left:1rem; top:1rem; }

.ico{ width:1em; height:1em; display:inline-block; vertical-align:-0.12em; }
.ico--sun{ color:var(--sun-deep); width:1.05em; height:1.05em; }

/* ─── Buttons ─── */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:600; font-size:1rem; padding:.85rem 1.4rem; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer; line-height:1; transition:background-color .18s,color .18s,border-color .18s; }
.btn--sm{ padding:.55rem .95rem; font-size:.92rem; }
.btn--tomato{ background:var(--tomato); color:var(--cream); border-color:var(--tomato); }
.btn--tomato:hover{ background:var(--tomato-br); border-color:var(--tomato-br); color:var(--cream); }
.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--border-2); }
.btn--ghost:hover{ border-color:var(--fg); background:var(--bg-alt); color:var(--fg); }
.btn--ghost-light{ background:transparent; color:var(--cream); border-color:color-mix(in oklab,var(--cream) 55%,transparent); }
.btn--ghost-light:hover{ background:color-mix(in oklab,var(--cream) 14%,transparent); color:var(--cream); border-color:var(--cream); }
.cta{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }

/* ─── Topbar ─── */
.bar{ position:sticky; top:0; z-index:100; background:color-mix(in oklab,var(--bg) 90%,transparent); backdrop-filter:saturate(150%) blur(10px); -webkit-backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--border); }
.bar__in{ max-width:var(--shell); margin:0 auto; padding:.6rem var(--pad); display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.bar__brand{ border:0; display:flex; align-items:center; }
.bar__brand img{ height:42px; width:auto; }
.bar__nav{ display:flex; gap:1.6rem; }
.bar__nav a{ border:0; font-size:.96rem; font-weight:500; color:var(--fg-2); }
.bar__nav a:hover{ color:var(--accent-ink); }
.bar__end{ display:flex; align-items:center; gap:var(--s2); }
.bar__tel{ border:0; font-weight:700; font-size:.96rem; white-space:nowrap; color:var(--fg); }
.bar__tel:hover{ color:var(--accent-ink); }
.theme-tog{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; background:transparent; border:1.5px solid var(--border-2); border-radius:var(--radius); color:var(--fg-2); cursor:pointer; transition:color .18s,border-color .18s,background-color .18s; }
.theme-tog:hover{ color:var(--accent-ink); border-color:var(--accent-ink); }
.theme-tog svg{ display:block; transition:transform .4s cubic-bezier(.2,.6,.2,1); }
:root[data-theme="dark"] .theme-tog svg{ transform:rotate(180deg); }
.lang-tog{ display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 .6rem; font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.04em; color:var(--fg-2); border:1.5px solid var(--border-2); border-radius:var(--radius); }
.lang-tog:hover{ color:var(--accent-ink); border-color:var(--accent-ink); }
.burger{ display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:1.5px solid var(--border-2); border-radius:var(--radius); }
.burger span{ width:20px; height:2px; background:var(--fg); transition:transform .2s,opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mnav{ display:none; flex-direction:column; padding:var(--s2) var(--pad) var(--s3); border-bottom:1px solid var(--border); background:var(--bg); position:sticky; top:55px; z-index:99; }
.mnav a{ border:0; padding:.7rem 0; font-size:1.15rem; font-family:var(--serif); font-weight:500; border-bottom:1px solid var(--border); }
.mnav__cta{ margin-top:var(--s2); color:var(--accent-ink); font-weight:600; }

/* ─── Ticker / marquee (sempre scuro) ─── */
.ticker{ background:var(--char); color:var(--cream); overflow:hidden; border-bottom:3px solid var(--tomato); }
.ticker__track{ display:flex; align-items:center; white-space:nowrap; width:max-content; padding:.7rem 0; animation:marquee 32s linear infinite; }
.ticker__track > *{ margin-right:1.4rem; }
.ticker__track span{ font-family:var(--serif); font-style:italic; font-size:1.05rem; letter-spacing:.01em; }
.ticker .ico{ color:var(--sun); width:1.2em; height:1.2em; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ─── Hero (sempre scuro: foto + scrim) ─── */
.hero{ position:relative; min-height:min(86vh,760px); display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; filter:saturate(1.1) contrast(1.05) brightness(.86); animation:kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }
.hero__scrim{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(to top, color-mix(in oklab,var(--char) 94%,transparent) 0%, color-mix(in oklab,var(--char) 74%,transparent) 28%, color-mix(in oklab,var(--char) 38%,transparent) 50%, transparent 70%),
  linear-gradient(to right, color-mix(in oklab,var(--char) 88%,transparent) 0%, color-mix(in oklab,var(--char) 48%,transparent) 40%, transparent 72%); }
.hero__body{ position:relative; z-index:2; max-width:var(--shell); margin:0 auto; width:100%; padding:var(--s5) var(--pad) var(--s5); color:var(--cream); }
.hero__eyebrow{ font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--sun); margin-bottom:var(--s3); text-shadow:0 1px 10px color-mix(in oklab,var(--char) 82%,transparent); }
.hero__title{ font-size:clamp(2.8rem,1.8rem+5.2vw,5.2rem); font-weight:600; line-height:.98; letter-spacing:-0.022em; color:var(--cream); text-shadow:0 2px 30px color-mix(in oklab,var(--char) 50%,transparent); }
.u-script{ font-style:italic; font-weight:500; color:var(--sun); }
.hero__lede{ max-width:46ch; margin:var(--s3) 0 var(--s4); font-size:1.15rem; color:color-mix(in oklab,var(--cream) 94%,transparent); text-shadow:0 1px 12px color-mix(in oklab,var(--char) 72%,transparent); }
.hero__open{ display:inline-flex; align-items:center; gap:.6rem; margin-top:var(--s4); font-size:.95rem; color:color-mix(in oklab,var(--cream) 88%,transparent); }
.dot{ width:9px; height:9px; border-radius:50%; background:color-mix(in oklab,var(--cream) 45%,transparent); display:inline-block; }
.dot.is-open{ background:var(--sun); box-shadow:0 0 0 4px color-mix(in oklab,var(--sun) 26%,transparent); }
.dot.is-closed{ background:var(--tomato-br); }

/* ─── Intro ─── */
.intro{ position:relative; max-width:var(--narrow); margin:0 auto; padding:var(--s4) var(--pad) var(--s2); }
.intro p{ font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,1.05rem+1.5vw,2rem); line-height:1.36; }
.intro strong{ font-weight:600; color:var(--accent-ink); }
.intro__sun{ position:absolute; top:calc(50% - 34px); right:-64px; width:68px; height:68px; color:var(--sun); opacity:.85; }
@media (max-width:1024px){ .intro__sun{ display:none; } }
.spin{ animation:spin 44s linear infinite; transform-origin:50% 50%; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ─── Section scaffold ─── */
.sec{ max-width:var(--shell); margin:0 auto; padding:var(--s6) var(--pad); }
.sec--alt{ max-width:none; background:var(--bg-alt); }
.sec--alt>*{ max-width:var(--shell); margin-inline:auto; }
.sec__head{ max-width:54ch; margin-bottom:var(--s4); }
.kick{ display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--accent-ink); margin-bottom:var(--s2); }
.kick--light{ color:var(--sun); }
.sec h2{ font-size:clamp(1.9rem,1.3rem+2.4vw,3rem); }
.sec__intro{ color:var(--fg-2); margin-top:var(--s2); font-size:1.08rem; }

/* ─── Menu ─── */
.menu{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.menu__row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--border); }
.menu__row h3{ font-size:1.42rem; font-weight:600; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.menu__row p{ color:var(--fg-2); margin-top:.35rem; max-width:58ch; }
.menu__row a{ border:0; color:var(--accent-ink); font-weight:600; }
.menu__price{ font-family:var(--serif); font-style:italic; color:var(--fg-mute); white-space:nowrap; font-size:1.1rem; }
.menu__row--mark{ background:linear-gradient(90deg,color-mix(in oklab,var(--sun) 22%,transparent),transparent 70%); margin-inline:calc(-1*var(--s2)); padding-inline:var(--s2); border-radius:var(--radius); border-bottom-color:transparent; }
.tag{ font-family:var(--sans); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--cream); background:var(--tomato); padding:.22rem .55rem; border-radius:4px; }
.allergeni{ margin-top:var(--s4); font-size:.92rem; color:var(--fg-mute); max-width:70ch; }
.allergeni strong{ color:var(--fg-2); }

/* ─── Gallery "Dal forno" ─── */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.shot{ margin:0; position:relative; overflow:hidden; border-radius:var(--radius); background:var(--char); aspect-ratio:4/3; }
.shot img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.12) contrast(1.05); transition:transform .7s cubic-bezier(.2,.6,.2,1); }
.shot:hover img{ transform:scale(1.06); }
.shot figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1rem .8rem; color:var(--cream); font-size:.9rem; font-weight:600; background:linear-gradient(transparent,color-mix(in oklab,var(--char) 80%,transparent)); }
.shot--tall{ grid-row:span 2; aspect-ratio:3/4; }
.shot--wide{ grid-column:1 / -1; aspect-ratio:21/9; }
.grid__note{ margin-top:var(--s3); color:var(--fg-mute); font-size:.92rem; max-width:60ch; }

/* ─── Le farine (firma, sempre scuro) ─── */
.farine{ background:var(--char); color:var(--cream); position:relative; }
.farine__in{ max-width:var(--shell); margin:0 auto; padding:var(--s7) var(--pad); display:grid; gap:var(--s5); }
.farine h2{ color:var(--cream); font-size:clamp(2.2rem,1.5rem+3vw,3.6rem); }
.farine p{ color:color-mix(in oklab,var(--cream) 84%,transparent); margin-top:var(--s2); max-width:54ch; font-size:1.12rem; }
.farine strong{ color:var(--sun); font-weight:600; }
.steps{ list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:0; max-width:56ch; }
.steps li{ padding:var(--s3) 0; border-top:1px solid var(--line-lt); color:color-mix(in oklab,var(--cream) 82%,transparent); display:flex; gap:1rem; align-items:baseline; }
.steps span{ font-family:var(--serif); font-style:italic; color:var(--sun); font-size:1.2rem; min-width:2.2rem; }
.farine__deco{ position:relative; display:grid; place-items:center; min-height:320px; }
.farine__sun{ width:min(56vw,290px); height:min(56vw,290px); color:var(--sun); filter:drop-shadow(0 0 30px color-mix(in oklab,var(--sun) 30%,transparent)); }

/* ─── Recensioni ─── */
.quotes{ display:grid; gap:var(--s4); grid-template-columns:1fr; }
.quote{ margin:0; padding:var(--s3) 0; border-top:2px solid var(--tomato); }
.quote p{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,1rem+1.2vw,1.7rem); line-height:1.38; }
.quote cite{ display:block; margin-top:var(--s2); font-style:normal; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-mute); }
.rec-foot{ margin-top:var(--s4); color:var(--fg-mute); font-size:.92rem; }

/* ─── Orari & dove ─── */
.orari{ display:grid; gap:var(--s4); }
.hours{ border-collapse:collapse; width:100%; max-width:420px; }
.hours th,.hours td{ text-align:left; padding:.7rem 0; border-bottom:1px solid var(--border); font-size:1.06rem; }
.hours th{ font-weight:700; }
.hours td{ color:var(--fg-2); text-align:right; font-variant-numeric:tabular-nums; }
.addr{ font-style:normal; margin:var(--s3) 0; color:var(--fg-2); line-height:1.7; }
.addr a{ border:0; color:var(--fg); font-weight:500; }
.addr a:hover{ color:var(--accent-ink); }
.orari__map{ border-radius:var(--radius); overflow:hidden; min-height:320px; border:1px solid var(--border); }
.orari__map iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; filter:saturate(.95); }

/* ─── Footer (sempre scuro) ─── */
.foot{ background:var(--char); color:color-mix(in oklab,var(--cream) 80%,transparent); }
.foot__in{ max-width:var(--shell); margin:0 auto; padding:var(--s6) var(--pad) var(--s4); display:grid; gap:var(--s4); grid-template-columns:1fr; }
.foot__brand{ display:flex; flex-direction:column; gap:.5rem; }
.foot__sun{ color:var(--sun); width:38px; height:38px; }
.foot__name{ font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--cream); }
.foot__brand p{ font-size:.92rem; color:color-mix(in oklab,var(--cream) 64%,transparent); max-width:34ch; }
.foot__col h3{ font-family:var(--sans); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sun-deep); font-weight:700; margin-bottom:var(--s2); }
.foot__col p{ font-size:.95rem; color:color-mix(in oklab,var(--cream) 78%,transparent); line-height:1.75; }
.foot a{ color:color-mix(in oklab,var(--cream) 80%,transparent); border-bottom-color:var(--line-lt); }
.foot a:hover{ color:var(--sun); border-color:var(--sun); }
.foot__credit{ max-width:var(--shell); margin:0 auto; padding:var(--s3) var(--pad); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between; border-top:1px solid var(--line-lt); font-size:.82rem; color:color-mix(in oklab,var(--cream) 58%,transparent); }
.foot__credit code{ font-family:ui-monospace,Menlo,monospace; color:var(--sun-deep); }

/* ─── Motion: reveal ─── */
[data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.6,.2,1); }
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1!important; transform:none!important; transition:none!important; }
  .ticker__track,.spin,.hero__img{ animation:none!important; }
  body{ transition:none!important; }
}

/* ─── Responsive ─── */
@media (min-width:720px){
  .quotes{ grid-template-columns:1fr 1fr; gap:var(--s5); }
  .orari{ grid-template-columns:1fr 1fr; align-items:stretch; gap:var(--s5); }
  .foot__in{ grid-template-columns:1.5fr 1fr 1fr 1fr; }
  .farine__in{ grid-template-columns:1.1fr .9fr; align-items:center; }
}
@media (min-width:960px){
  .grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; }
  .shot--tall{ grid-row:span 2; }
  .shot--wide{ grid-column:span 2; aspect-ratio:auto; }
}
@media (max-width:860px){
  .bar__nav{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:520px){
  .bar__tel{ display:none; }
  .cta .btn{ width:100%; justify-content:center; }
  .grid{ grid-template-columns:1fr; }
  .shot--tall{ aspect-ratio:4/3; grid-row:auto; }
}