/* ==========================================================
   MONDOPROFUMI — foglio di stile della testata
   Progetto approvato il 17 agosto 2026.
   Sostituisce magazine.css, tema.css e correzioni.css.
   ========================================================== */

:root{
  --fondo:#EDF3E8;
  --superficie:#E2EBDB;
  --testo:#181818;
  --secondario:#5C6957;
  --separatore:#D2DFC9;
  --identita:#3A5A2E;
  --identita-hover:#4C7340;
  --identita-velo:#E4EDDD;

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --t-apertura:2.55rem;
  --t-titolo:1.95rem;
  --t-sezione:1.45rem;
  --t-h2:1.44rem;
  --t-h3:1.19rem;
  --t-corpo:1.0625rem;
  --t-meta:0.8125rem;
  --t-occhiello:0.6875rem;

  --colonna:720px;
  --pagina:1200px;
  --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.25rem; --sp-5:3.5rem;

  --verde:#3A5A2E;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--testo);
  font-family:var(--sans);font-size:var(--t-corpo);line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--identita);outline-offset:2px}
.progress-bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--identita);z-index:60}

.container,.contenitore{max-width:var(--pagina);margin:0 auto;padding:0 var(--sp-3)}

/* ---------- testata ---------- */
.site-header{border-bottom:1px solid var(--separatore);background:var(--fondo)}
.header-inner{max-width:var(--pagina);margin:0 auto;padding:var(--sp-4) var(--sp-3) 0;text-align:center;position:relative}
.logo{
  font-family:var(--serif);font-size:2.6rem;font-weight:400;letter-spacing:.055em;
  line-height:1;text-decoration:none;color:var(--testo);display:inline-block;
}
.logo .accent{color:inherit}
.filetto{height:1px;background:var(--identita);margin:.7rem auto .5rem;width:min(340px,70%)}
.sottotestata{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--secondario)}

.main-nav{
  border-top:1px solid var(--separatore);margin-top:var(--sp-3);
  display:flex;justify-content:center;gap:2.1rem;flex-wrap:wrap;
}
.main-nav a{
  display:block;padding:.85rem 0;text-decoration:none;font-size:.875rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--testo);
  border-bottom:2px solid transparent;
}
.main-nav a:hover{color:var(--identita);border-bottom-color:var(--identita)}

.header-actions{position:absolute;right:var(--sp-3);top:var(--sp-4)}
.search-toggle,.mobile-toggle{background:none;border:none;color:var(--testo);cursor:pointer;padding:4px}
.mobile-toggle{display:none}

/* ---------- apertura ---------- */
.apertura{padding:var(--sp-4) 0;border-bottom:1px solid var(--separatore)}
.apertura-testa{margin-bottom:var(--sp-3)}
.apertura h1{
  font-family:var(--serif);font-size:var(--t-apertura);font-weight:400;
  line-height:1.12;letter-spacing:-.013em;margin:.45rem 0 .7rem;max-width:19em;
}
.apertura h1 a{text-decoration:none}
.apertura h1 a:hover{color:var(--identita)}
.apertura-griglia{display:grid;grid-template-columns:2fr 1fr;gap:var(--sp-4)}
.apertura figure{margin:0}
.apertura figure img{width:100%;aspect-ratio:21/9;object-fit:cover}
.sommario{font-size:1.19rem;color:var(--secondario);margin:0;max-width:42em}

.occhiello{
  font-size:var(--t-occhiello);letter-spacing:.14em;text-transform:uppercase;
  color:var(--identita);font-weight:500;
}
.meta,.card-meta{font-size:var(--t-meta);color:var(--secondario)}
.card-meta .dot{margin:0 6px}

.secondarie{display:flex;flex-direction:column}
.secondaria{border-top:1px solid var(--separatore);padding:var(--sp-2) 0}
.secondaria:first-child{border-top:none;padding-top:0}
.secondaria h3{font-family:var(--serif);font-size:1.24rem;font-weight:400;line-height:1.26;margin:.25rem 0 0}
.secondaria h3 a{text-decoration:none}
.secondaria h3 a:hover{color:var(--identita)}

/* ---------- blocchi e schede ---------- */
.blocco,.section-header{padding-top:var(--sp-4)}
.blocco{padding-bottom:var(--sp-4);border-top:1px solid var(--separatore)}
.blocco:first-of-type{border-top:none}
.intestazione-blocco{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--sp-3)}
.intestazione-blocco h2,.section-title{
  font-family:var(--serif);font-size:var(--t-sezione);font-weight:600;margin:0;
}
.intestazione-blocco a{font-size:var(--t-meta);color:var(--secondario);text-decoration:none}
.intestazione-blocco a:hover{color:var(--identita)}

.griglia-4,.articles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.griglia-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.griglia-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}

.scheda,.article-card{margin:0}
.scheda a,.article-card a{text-decoration:none;display:block}
.card-image{background:var(--superficie);border:1px solid var(--separatore);aspect-ratio:4/3;overflow:hidden;position:relative}
.card-image img{width:100%;height:100%;object-fit:cover}
.card-image.no-img{background:var(--superficie)}
.card-badge{display:none}
.scheda h3,.card-title{
  font-family:var(--serif);font-size:1.19rem;font-weight:400;line-height:1.26;margin:.5rem 0 .3rem;
}
.scheda a:hover h3,.article-card a:hover .card-title{color:var(--identita)}
.card-excerpt{display:none}

.elenco-titoli{list-style:none;margin:0;padding:0}
.elenco-titoli li{border-top:1px solid var(--separatore);padding:.7rem 0}
.elenco-titoli li:first-child{border-top:none;padding-top:0}
.elenco-titoli a{text-decoration:none;font-size:1.05rem}
.elenco-titoli a:hover{color:var(--identita)}

.empty-state{padding:var(--sp-5) 0;text-align:center;color:var(--secondario)}
.empty-state h2{font-family:var(--serif);font-weight:400}

/* ---------- pagina categoria ---------- */
.testata-categoria{padding:var(--sp-4) 0 var(--sp-3);border-bottom:1px solid var(--separatore)}
.testata-categoria h1{font-family:var(--serif);font-size:var(--t-titolo);font-weight:400;margin:.4rem 0 .6rem}
.testata-categoria p{color:var(--secondario);margin:0;max-width:44em}

/* ---------- articolo ---------- */
.article-page,.articolo{max-width:var(--colonna);margin:0 auto;padding:var(--sp-4) var(--sp-3) var(--sp-5)}
.article-header{margin-bottom:var(--sp-3)}
.briciole{font-size:var(--t-meta);color:var(--secondario);margin-bottom:var(--sp-3)}
.briciole a{text-decoration:none}
.hero-badge{
  display:inline-block;font-size:var(--t-occhiello);letter-spacing:.14em;text-transform:uppercase;
  color:var(--identita)!important;background:none!important;font-weight:500;padding:0;
}
.article-page h1,.articolo h1{
  font-family:var(--serif);font-size:var(--t-titolo);font-weight:400;line-height:1.2;
  letter-spacing:-.01em;margin:.5rem 0 .8rem;
}
.article-subtitle{font-size:1.19rem;line-height:1.6;color:var(--secondario);margin:0}
.article-meta-bar{
  font-size:var(--t-meta);color:var(--secondario);padding:var(--sp-2) 0;
  border-top:1px solid var(--separatore);border-bottom:1px solid var(--separatore);
  margin:var(--sp-2) 0 var(--sp-3);display:flex;gap:.5rem;flex-wrap:wrap;
}
.article-cover{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:.5rem}
.article-body{font-size:var(--t-corpo);line-height:1.78}
.article-body p{margin:0 0 1.35rem}
.article-body h2{font-family:var(--serif);font-size:var(--t-h2);font-weight:600;line-height:1.3;margin:var(--sp-4) 0 .8rem}
.article-body h3{font-family:var(--serif);font-size:var(--t-h3);font-weight:600;margin:var(--sp-3) 0 .6rem}
.article-body a{color:var(--identita);text-decoration:none;border-bottom:1px solid var(--identita)}
.article-body a:hover{background:var(--identita-velo)}
.article-body ul,.article-body ol{margin:0 0 1.35rem;padding-left:1.3rem}
.article-body li{margin-bottom:.5rem}
.article-body blockquote{
  margin:var(--sp-3) 0;padding-left:var(--sp-3);border-left:2px solid var(--identita);
  font-family:var(--serif);font-size:1.24rem;line-height:1.5;
}
.article-body img{margin:var(--sp-3) 0}
figure{margin:var(--sp-3) 0}
figcaption{font-size:var(--t-meta);color:var(--secondario);margin-top:.5rem;line-height:1.5}

.related-section{max-width:var(--pagina);margin:0 auto;padding:0 var(--sp-3) var(--sp-5)}
.related-section .section-header{border-top:1px solid var(--separatore);margin-bottom:var(--sp-3)}

/* ---------- piè di pagina ---------- */
.site-footer{border-top:1px solid var(--separatore);margin-top:var(--sp-5);padding:var(--sp-4) 0;background:var(--fondo);color:var(--testo)}
.footer-inner{max-width:var(--pagina);margin:0 auto;padding:0 var(--sp-3);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-3)}
.footer-brand .logo{font-size:1.35rem}
.footer-brand p{font-size:var(--t-meta);color:var(--secondario);margin-top:.6rem;max-width:26em}
.footer-col h4{
  font-size:var(--t-occhiello);letter-spacing:.12em;text-transform:uppercase;
  color:var(--secondario);font-weight:500;margin:0 0 .7rem;
}
.footer-col a{display:block;font-size:.9rem;text-decoration:none;color:var(--testo);margin-bottom:.4rem}
.footer-col a:hover{color:var(--identita)}
.footer-col p{font-size:var(--t-meta);color:var(--secondario)}
.newsletter-form{display:flex;gap:.5rem;flex-wrap:wrap}
.newsletter-form input{
  font-family:inherit;font-size:.95rem;padding:.6rem .75rem;flex:1;min-width:0;
  border:1px solid var(--separatore);background:#fff;border-radius:2px;color:var(--testo);
}
.newsletter-form button{
  font-family:inherit;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.6rem 1.2rem;background:var(--identita);color:#fff;border:none;border-radius:2px;cursor:pointer;
}
.newsletter-form button:hover{background:var(--identita-hover)}
.footer-bottom{
  max-width:var(--pagina);margin:var(--sp-3) auto 0;padding:var(--sp-2) var(--sp-3) 0;
  border-top:1px solid var(--separatore);font-size:var(--t-meta);color:var(--secondario);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
}

/* ---------- ricerca ---------- */
.search-overlay{
  position:fixed;inset:0;background:rgba(24,24,24,.92);z-index:100;
  display:none;flex-direction:column;align-items:center;padding-top:18vh;
}
.search-overlay.open{display:flex}
.search-overlay input{
  width:min(620px,90%);font-family:var(--serif);font-size:1.6rem;padding:.6rem 0;
  background:none;border:none;border-bottom:1px solid rgba(255,255,255,.35);color:#fff;
}
.search-overlay input:focus{outline:none;border-bottom-color:#fff}
.search-results-live{width:min(620px,90%);margin-top:var(--sp-3);max-height:55vh;overflow:auto}
.search-results-live a{display:block;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.12);text-decoration:none;color:#fff}
.sr-cat{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sr-title{font-family:var(--serif);font-size:1.05rem}
.mobile-overlay{display:none}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1023px){
  .apertura-griglia{grid-template-columns:1fr;gap:var(--sp-3)}
  .griglia-4,.articles-grid{grid-template-columns:repeat(2,1fr)}
  .griglia-3{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr}
}

@media (max-width:767px){
  :root{
    --t-apertura:1.85rem;--t-titolo:1.6rem;--t-sezione:1.3rem;--t-h2:1.3rem;
    --sp-4:1.6rem;--sp-5:2.4rem;
  }
  .header-inner{padding:.8rem var(--sp-3);text-align:left;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--fondo);z-index:40}
  .logo{font-size:1.3rem}
  .filetto,.sottotestata{display:none}
  .main-nav{
    display:none;position:absolute;left:0;right:0;top:100%;background:var(--fondo);
    border-bottom:1px solid var(--separatore);flex-direction:column;gap:0;margin:0;padding:0 var(--sp-3);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:.75rem 0;border-bottom:1px solid var(--separatore);border-top:none}
  .header-actions{position:static;display:flex;gap:.4rem}
  .mobile-toggle{display:block}
  .apertura{padding:var(--sp-3) 0}
  .apertura figure img{aspect-ratio:16/9}
  .griglia-4,.articles-grid,.griglia-3,.griglia-2{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .article-page,.articolo{padding-left:var(--sp-3);padding-right:var(--sp-3)}
}

@media (min-width:1440px){:root{--pagina:1280px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}