/*
Theme Name: Al Pinserino
Theme URI: https://www.alpinserinoroma.it/
Author: Al Pinserino
Description: Tema su misura per la pinseria Al Pinserino — pinsa romana con lunga lievitazione. Richiede il plugin "Al Pinserino - Menù" per la gestione di menù, orari e contatti.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: al-pinserino
*/

:root{
  --oven:#1B1512;
  --oven-2:#241A15;
  --oven-3:#2E2119;
  --flour:#F2E9D8;
  --flour-2:#EBE0CB;
  --tomato:#C3361B;
  --tomato-dark:#9B2A15;
  --gold:#E4A930;
  --basil:#5C7A46;
  --crust:#8A7259;
  --cream-ink:#241A15;
  --cream-ink-muted:#6B5A47;
  --oven-ink:#F2E9D8;
  --oven-ink-muted:#C9BBA6;
  --display: "Fraunces", serif;
  --body: "Manrope", sans-serif;
  --mono: "Space Mono", monospace;
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  background:var(--oven);
  color:var(--oven-ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--tomato);color:var(--flour);}

a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;background:var(--gold);
  display:inline-block;
}
section.light .eyebrow{color:var(--tomato-dark);}
section.light .eyebrow::before{background:var(--tomato-dark);}

/* ---------- NAV ---------- */
header.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(27,21,18,0.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(242,233,216,0.08);
  transition:background .3s ease;
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{
  font-family:var(--display);
  font-weight:700;
  font-style:italic;
  font-size:1.4rem;
  letter-spacing:0.01em;
  color:var(--flour);
  text-decoration:none;
  display:flex;align-items:center;gap:10px;
}
.brand-mark{
  width:34px;height:34px;border-radius:50%;
  background:var(--gold);
  color:var(--oven);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-style:normal;font-weight:800;font-size:1.05rem;
  flex:none;
}
.brand--custom-logo{display:flex;align-items:center;}
.brand--custom-logo img{max-height:44px;width:auto;display:block;}
.brand--custom-logo a{display:flex;align-items:center;}
.nav-links{display:flex;gap:34px;list-style:none;margin:0;padding:0;}
.nav-links li{list-style:none;}
.nav-links a{
  font-size:0.86rem;font-weight:600;text-decoration:none;color:var(--oven-ink-muted);
  letter-spacing:0.02em;
  position:relative;padding-bottom:4px;
  transition:color .2s ease;
}
.nav-links a:hover{color:var(--flour);}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0%;
  background:var(--tomato);transition:width .25s ease;
}
.nav-links a:hover::after{width:100%;}

.nav-right{display:flex;align-items:center;gap:18px;}
.btn{
  font-family:var(--body);font-weight:700;font-size:0.86rem;
  padding:11px 22px;border-radius:2px;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--tomato);color:#fff;}
.btn-primary:hover{background:var(--tomato-dark);}
.btn-ghost{background:transparent;color:var(--flour);border-color:rgba(242,233,216,0.35);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);}
section.light .btn-ghost{color:var(--cream-ink);border-color:rgba(36,26,20,0.3);}
section.light .btn-ghost:hover{border-color:var(--tomato);color:var(--tomato);}

.burger{display:none;background:none;border:none;color:var(--flour);font-size:1.6rem;cursor:pointer;padding:4px;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:150px 0 90px;
  background:
    radial-gradient(ellipse 900px 520px at 82% 8%, rgba(228,169,48,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 6% 100%, rgba(195,54,27,0.14), transparent 60%),
    var(--oven);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px);
  pointer-events:none;
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr 0.85fr;gap:40px;align-items:end;
}
.hero-title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.6rem, 6.6vw, 5.1rem);
  line-height:1.02;
  letter-spacing:-0.01em;
  margin:0 0 26px;
  color:var(--flour);
}
.hero-title em{
  font-style:italic;font-weight:600;color:var(--gold);
}
.hero-sub{
  font-size:1.1rem;line-height:1.6;color:var(--oven-ink-muted);
  max-width:46ch;margin:0 0 34px;
}
.status-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:0.78rem;
  color:var(--oven-ink-muted);
  background:rgba(242,233,216,0.05);
  border:1px solid rgba(242,233,216,0.14);
  padding:9px 16px;border-radius:100px;
  margin-bottom:34px;
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--crust);flex:none;}
.status-dot.open{background:#7FBF66;box-shadow:0 0 0 4px rgba(127,191,102,0.18);}
.status-dot.soon{background:var(--gold);box-shadow:0 0 0 4px rgba(228,169,48,0.18);}
.status-dot.closed{background:var(--tomato);box-shadow:0 0 0 4px rgba(195,54,27,0.18);}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}

.hero-side{
  position:relative;z-index:2;
  text-align:right;
  padding-bottom:8px;
  border-bottom:1px solid rgba(242,233,216,0.14);
}
.hero-number{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(4.5rem, 11vw, 9rem);
  line-height:0.85;
  color:var(--flour);
  margin:0;
}
.hero-number-label{
  font-family:var(--mono);font-size:0.74rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold);display:block;margin-top:6px;
}

.crust-divider{
  position:relative;height:34px;background:var(--flour);
  -webkit-mask: radial-gradient(circle at 17px 0, transparent 15px, black 15.5px) repeat-x;
  mask: radial-gradient(circle at 17px 0, transparent 15px, black 15.5px) repeat-x;
  -webkit-mask-size:34px 34px;mask-size:34px 34px;
}
.crust-divider .speckles{position:absolute;inset:0;overflow:visible;}
.crust-divider span{
  position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--oven);opacity:0.16;
}

/* ---------- GENERIC SECTION ---------- */
section{padding:100px 0;position:relative;}
section.light{background:var(--flour);color:var(--cream-ink);}
section.dark2{background:var(--oven-2);}

.section-title{
  font-family:var(--display);font-weight:600;font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.08;margin:0 0 28px;letter-spacing:-0.01em;
}
section.light .section-title{color:var(--cream-ink);}

/* ---------- CHI SIAMO ---------- */
.chisiamo-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:70px;align-items:start;}
.chisiamo-copy p{
  font-size:1.05rem;line-height:1.8;color:var(--oven-ink-muted);margin:0 0 20px;
}
.chisiamo-copy p:first-of-type::first-letter{
  font-family:var(--display);font-style:italic;font-weight:600;
  font-size:3.4rem;float:left;line-height:0.75;padding:6px 10px 0 0;color:var(--gold);
}
.facts{list-style:none;margin:0;padding:24px 0 0;border-top:1px solid rgba(242,233,216,0.14);}
.facts li{
  display:flex;align-items:baseline;gap:18px;padding:20px 0;
  border-bottom:1px solid rgba(242,233,216,0.1);
}
.facts li:last-child{border-bottom:none;}
.fact-num{
  font-family:var(--mono);font-weight:700;font-size:1.5rem;color:var(--gold);flex:none;width:76px;
}
.fact-label{font-size:0.98rem;color:var(--oven-ink-muted);line-height:1.4;}
.fact-label strong{color:var(--flour);font-weight:700;display:block;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;font-family:var(--mono);margin-bottom:4px;}

/* ---------- MENU ---------- */
.menu-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:36px;}
.menu-head p{font-size:1.02rem;color:var(--cream-ink-muted);max-width:48ch;line-height:1.6;margin:0;}

.menu-controls{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  margin-bottom:8px;
}
.search-box{
  position:relative;flex:1;min-width:220px;max-width:320px;
}
.search-box input{
  width:100%;padding:11px 16px 11px 38px;
  border:1px solid rgba(36,26,20,0.22);border-radius:2px;
  background:#fff;font-family:var(--body);font-size:0.92rem;color:var(--cream-ink);
}
.search-box::before{
  content:"⌕";position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--cream-ink-muted);font-size:1.05rem;
}
.tabs{display:flex;gap:8px;flex-wrap:wrap;}
.tab{
  font-family:var(--mono);font-size:0.76rem;letter-spacing:0.03em;
  padding:9px 15px;border-radius:100px;border:1px solid rgba(36,26,20,0.2);
  background:transparent;color:var(--cream-ink-muted);cursor:pointer;
  transition:all .18s ease;white-space:nowrap;
}
.tab:hover{border-color:var(--tomato);color:var(--tomato);}
.tab.active{background:var(--oven);border-color:var(--oven);color:var(--flour);}

.menu-list{margin-top:40px;}
.menu-group-title{
  font-family:var(--mono);font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--tomato-dark);margin:38px 0 14px;padding-bottom:8px;
  border-bottom:1px solid rgba(36,26,20,0.15);
}
.menu-group-title:first-child{margin-top:0;}
.menu-item{padding:16px 0;border-bottom:1px dashed rgba(36,26,20,0.18);}
.menu-item-row{display:flex;align-items:baseline;gap:10px;}
.menu-item-name{font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--cream-ink);white-space:nowrap;}
.menu-item-leader{flex:1;border-bottom:1px dotted rgba(36,26,20,0.3);height:0;transform:translateY(-4px);}
.menu-item-price{font-family:var(--mono);font-weight:700;font-size:0.98rem;color:var(--tomato-dark);white-space:nowrap;}
.menu-item-desc{font-size:0.9rem;color:var(--cream-ink-muted);margin-top:5px;line-height:1.5;}
.tag-vegana{
  font-family:var(--mono);font-size:0.62rem;letter-spacing:0.06em;text-transform:uppercase;
  background:rgba(92,122,70,0.15);color:var(--basil);padding:2px 8px;border-radius:100px;margin-left:8px;
}
.menu-empty{padding:40px 0;text-align:center;color:var(--cream-ink-muted);font-style:italic;}
.menu-note{
  margin-top:26px;font-size:0.85rem;color:var(--cream-ink-muted);font-style:italic;
}
.menu-foot{margin-top:50px;display:flex;justify-content:center;}

/* ---------- MEDAGLIONE 3D (logo pinsa + pizza che girano) ---------- */
.medallion-3d{position:relative;perspective:800px;}
.medallion-3d.mini{width:34px;height:34px;flex:none;}
.medallion-3d.large{width:220px;height:220px;margin:0 auto;}

.medallion-tilt{
  width:100%;height:100%;position:relative;
  display:block;
  transform-style:preserve-3d;
  transform:rotateX(60deg);
}
.medallion-spin{
  width:100%;height:100%;position:absolute;inset:0;
  display:block;
  transform-style:preserve-3d;
  animation:medallion-rotate 7s linear infinite;
}
@keyframes medallion-rotate{from{transform:rotateZ(0deg);}to{transform:rotateZ(360deg);}}

.disc{position:absolute;left:50%;top:50%;border-radius:50%;display:block;}
.disc-pinsa{
  width:94%;height:58%;margin-left:-47%;margin-top:-29%;
  background:linear-gradient(155deg, var(--gold), #cf9a2a 55%, var(--crust));
  transform:translateZ(-5px) rotateZ(10deg);
  box-shadow:0 6px 14px rgba(0,0,0,0.35);
}
.disc-pizza{
  width:72%;height:72%;margin-left:-36%;margin-top:-36%;
  background:radial-gradient(circle at 38% 34%, #d9502c, var(--tomato) 55%, var(--tomato-dark) 100%);
  transform:translateZ(5px);
  box-shadow:0 8px 18px rgba(0,0,0,0.4);
}
.disc-pizza .fleck{position:absolute;width:9%;height:9%;border-radius:50%;opacity:0.85;}

.medallion-label{
  margin:16px 0 0;min-height:1.3em;text-align:center;
  font-family:var(--mono);font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold);transition:opacity .35s ease;
}
.medallion-label.fade{opacity:0;}

@media (prefers-reduced-motion: reduce){
  .medallion-spin{animation:none;}
}

/* ---------- FOTO PRIMA DEL MENU ---------- */
.photo-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:center;}
.photo-picture img{
  width:100%;height:auto;border-radius:2px;
  box-shadow:0 20px 40px rgba(0,0,0,0.35);
}
.photo-copy p{font-size:1.05rem;line-height:1.8;color:var(--oven-ink-muted);margin:0;}

@media (max-width:860px){
  .photo-grid{grid-template-columns:1fr;gap:30px;}
  .photo-picture{order:-1;}
}
.vetrina-head{text-align:center;margin-bottom:10px;}
.vetrina-head .eyebrow{justify-content:center;}
.vetrina-head .section-title{text-align:center;}
.vetrina-medallion{display:flex;flex-direction:column;align-items:center;margin:0 0 54px;}

.flavor-controls{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px;}
.search-box--dark input{
  background:rgba(242,233,216,0.06);border-color:rgba(242,233,216,0.25);color:var(--flour);
}
.search-box--dark input::placeholder{color:var(--oven-ink-muted);}
.search-box--dark::before{color:var(--oven-ink-muted);}
#flavorCategorySelect{
  font-family:var(--mono);font-size:0.78rem;letter-spacing:0.02em;
  padding:11px 14px;border-radius:2px;
  background:rgba(242,233,216,0.06);border:1px solid rgba(242,233,216,0.25);color:var(--flour);
}

.flavor-marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.flavor-track{display:flex;gap:18px;width:max-content;animation:flavor-scroll 30s linear infinite;}
@keyframes flavor-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.flavor-marquee:hover .flavor-track,
.flavor-marquee:focus-within .flavor-track{animation-play-state:paused;}

.flavor-card{
  flex:none;width:190px;background:var(--oven-3);
  border:1px solid rgba(242,233,216,0.1);border-radius:2px;padding:18px;cursor:pointer;
  transition:border-color .2s ease, transform .2s ease;
}
.flavor-card:hover{border-color:var(--gold);transform:translateY(-3px);}
.flavor-card-cat{
  font-family:var(--mono);font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:8px;
}
.flavor-card-name{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--flour);margin-bottom:6px;}
.flavor-card-price{font-family:var(--mono);font-size:0.85rem;color:var(--oven-ink-muted);}
.flavor-empty{text-align:center;color:var(--oven-ink-muted);font-style:italic;padding:30px 0;}

@media (prefers-reduced-motion: reduce){
  .flavor-track{animation:none !important;}
}

@media (max-width:860px){
  .medallion-3d.large{width:170px;height:170px;}
  .flavor-card{width:160px;}
}

.apm-add-cart{
  margin-top:12px;
  font-family:var(--body);font-weight:700;font-size:0.82rem;
  padding:9px 18px;border-radius:2px;border:1px solid var(--tomato);
  background:transparent;color:var(--tomato-dark);cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.apm-add-cart:hover{background:var(--tomato);color:#fff;}
.apm-add-cart:disabled{opacity:0.7;cursor:default;}

.apm-cart-link{position:relative;gap:6px;}
.apm-cart-count{
  font-family:var(--mono);font-weight:700;font-size:0.78rem;
}

/* ---------- FRANCHISING ---------- */
.franchising-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.franchising-copy p{font-size:1.05rem;line-height:1.8;color:var(--oven-ink-muted);}
.franchising-card{
  background:var(--oven-3);border:1px solid rgba(242,233,216,0.1);
  padding:36px;border-radius:2px;
}
.franchising-card dl{margin:0;}
.franchising-card dt{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.franchising-card dd{margin:0 0 24px;font-size:1.05rem;color:var(--flour);}
.franchising-card dd:last-child{margin-bottom:0;}
.franchising-card a{text-decoration:none;color:var(--flour);border-bottom:1px solid var(--tomato);}

/* ---------- FOOTER / CONTATTI ---------- */
footer{background:var(--oven-2);padding-top:90px;}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:50px;padding-bottom:60px;}
.footer-col h4{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;
}
.footer-col p, .footer-col a{
  font-size:0.98rem;line-height:1.7;color:var(--oven-ink-muted);text-decoration:none;
}
.footer-col a{display:block;margin-bottom:6px;}
.footer-col a:hover{color:var(--flour);}
.map-embed{width:100%;height:230px;border:0;filter:grayscale(0.4) contrast(1.05);border-radius:2px;}
.footer-bar{
  border-top:1px solid rgba(242,233,216,0.1);
  padding:24px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:0.8rem;color:var(--crust);
}
.footer-bar a{color:var(--crust);text-decoration:underline;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none;opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .nav-links{
    position:fixed;top:66px;left:0;right:0;bottom:0;
    background:var(--oven);flex-direction:column;gap:0;
    padding:20px 28px;transform:translateX(100%);
    transition:transform .3s ease;
    overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links li{width:100%;}
  .nav-links a{padding:16px 0;border-bottom:1px solid rgba(242,233,216,0.08);width:100%;display:block;}
  .burger{display:block;}
  .nav-right .btn-primary{padding:9px 14px;font-size:0.78rem;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-side{text-align:left;order:-1;margin-bottom:10px;border-bottom:none;}
  .hero-number{font-size:4.2rem;}
  .chisiamo-grid{grid-template-columns:1fr;gap:40px;}
  .franchising-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:36px;}
  section{padding:70px 0;}
  .menu-item-name{white-space:normal;}
}