/* =====================================================================
   FUMETTI AL RICETTO — Foglio di stile 2026
   Base: valori reali del sito 2025 (Montserrat, gerarchia tipografica)
   Tema edizione: Azzurro "Alberto" + giallo come accento CTA
   Tema WordPress: GeneratePress + child "fumetti-child"
   ===================================================================== */

/* =====================================================================
   1. TOKEN — cambia qui, si aggiorna tutto il sito
   ===================================================================== */
:root {
  --far-titolo:    #0E3A5A;
  --far-testo:     #1d1e20;
  --far-grigio:    #56585e;
  --far-accent:    #2AA9E0;
  --far-accent-2:  #FDBB2D;
  --far-coral:     #ec493a;
  --far-sfondo:    #ffffff;
  --far-linea:     #e6e8ec;
  --far-inchiostro:#111111;

  --far-font:       'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --far-font-jp:    'Noto Sans JP', var(--far-font);
  --far-font-comic: 'Luckiest Guy', var(--far-font);
  --far-display:    'Bangers', var(--far-font);

  --far-fs-body: 1.0625rem;
  --far-fs-h1: clamp(2.5rem, 2rem + 3vw, 3.5rem);
  --far-fs-h2: clamp(2.08rem, 1.67rem + 2.5vw, 2.92rem);
  --far-fs-h3: clamp(1.74rem, 1.39rem + 2.08vw, 2.43rem);
  --far-fs-h4: clamp(1.45rem, 1.16rem + 1.74vw, 2.03rem);
  --far-fs-h5: clamp(1.21rem, 0.96rem + 1.45vw, 1.69rem);
  --far-fs-h6: clamp(1rem, 0.8rem + 1.21vw, 1.41rem);
  --far-fs-small: 0.875rem;

  --far-content-max: 1280px;
  --far-gutter: clamp(1rem, 4vw, 2rem);
  --far-space: clamp(2.5rem, 6vw, 5rem);
  --far-radius: 14px;

  color-scheme: light;
}

/* =====================================================================
   2. RESET & BASE MODERNI (specificità bassa: GeneratePress può sovrascrivere)
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

:where(img, svg, video, canvas) { max-width: 100%; height: auto; }
:where(img) { font-style: italic; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* compensa header sticky — regola sull'altezza reale */
}

body {
  font-family: var(--far-font);
  font-size: var(--far-fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--far-testo);
  background-color: var(--far-sfondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

:lang(ja) { font-family: var(--far-font-jp); }

/* =====================================================================
   3. TIPOGRAFIA
   ===================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--far-font);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--far-testo);
  text-wrap: balance;
}
h1 { font-size: var(--far-fs-h1); } /* aggiungi color: var(--far-titolo); se vuoi H1 blu notte */
h2 { font-size: var(--far-fs-h2); }
h3 { font-size: var(--far-fs-h3); }
h4 { font-size: var(--far-fs-h4); }
h5 { font-size: var(--far-fs-h5); color: var(--far-accent); }
h6 { font-size: var(--far-fs-h6); }

/* Sottotitolo "fumetto" — usare SOLO su frasi brevi (tutto maiuscolo) */
.far-sub {
  font-family: var(--far-font-comic);
  font-weight: 400;
  color: var(--far-titolo);
  line-height: 1.1;
  letter-spacing: .01em;
}

p {
  color: #2b2d31;
  font-size: 1.0625rem;
  max-width: 68ch;
  text-wrap: pretty;
}

a { color: var(--far-accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--far-titolo); }

hr { border: 0; border-top: 1px solid var(--far-linea); margin: var(--far-space) 0; }

/* =====================================================================
   4. LARGHEZZA CONTENUTO — max 1280px (GeneratePress)
   NOTA: imposta anche in Aspetto → Personalizza → Layout → Larghezza contenitore = 1280px.
   Le righe qui sotto sono il rinforzo CSS.
   ===================================================================== */
.grid-container { max-width: var(--far-content-max); }

.far-container {
  max-width: var(--far-content-max);
  margin-inline: auto;
  padding-inline: var(--far-gutter);
}
.far-section { padding-block: var(--far-space); }

/* =====================================================================
   5. BOTTONI — stile "sticker" da fumetto
   ===================================================================== */
.far-btn {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px; padding: .7em 1.4em;
  font-family: var(--far-font); font-weight: 600; font-size: 1rem; line-height: 1;
  color: #fff; background: var(--far-accent);
  border: 2px solid var(--far-inchiostro); border-radius: 12px;
  box-shadow: 3px 3px 0 rgba(17,17,17,.85);
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.far-btn:hover  { color:#fff; transform: translate(-1px,-1px); box-shadow: 5px 5px 0 rgba(17,17,17,.9); }
.far-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(17,17,17,.9); }

.far-btn--cta { background: var(--far-accent-2); color: var(--far-titolo); }
.far-btn--cta:hover { color: var(--far-titolo); }

/* =====================================================================
   6. ACCENTI FUMETTO — utility opzionali, da usare con parsimonia
   ===================================================================== */
.far-eyebrow {
  display: inline-block; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; font-size: .8rem; color: var(--far-accent);
}

.far-highlight {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--far-accent) 30%, transparent),
    color-mix(in srgb, var(--far-accent) 30%, transparent));
  background-size: 100% .55em; background-repeat: no-repeat; background-position: 0 88%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 .05em;
}

.far-panel {
  background: #fff;
  border: 3px solid var(--far-inchiostro);
  border-radius: var(--far-radius);
  box-shadow: 6px 6px 0 rgba(14,58,90,.9);
}

.far-badge {
  display: inline-block; font-family: var(--far-display); font-weight: 400;
  font-size: 1.1rem; line-height: 1; letter-spacing: .03em;
  color: #fff; background: var(--far-accent);
  padding: .35em .8em; border: 2px solid var(--far-inchiostro);
  border-radius: 999px; transform: rotate(-2deg);
}
.far-badge--giallo { background: var(--far-accent-2); color: var(--far-titolo); }

.far-display { font-family: var(--far-display); font-weight: 400; letter-spacing: .02em; }

.far-halftone {
  background-image: radial-gradient(
    color-mix(in srgb, var(--far-accent) 22%, transparent) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
}

/* =====================================================================
   7. ACCESSIBILITÀ & UX
   ===================================================================== */
:focus-visible {
  outline: 3px solid var(--far-accent);
  outline-offset: 2px; border-radius: 2px;
}

::selection { background: var(--far-accent); color: #fff; }

@media (hover: none) and (pointer: coarse) {
  nav a, .far-btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* =====================================================================
   8. RESPONSIVE — rifiniture (la scala fluida fa già il grosso)
   ===================================================================== */
@media (max-width: 640px) {
  :root { --far-space: 2.5rem; }
  p { max-width: 100%; }
  .far-badge { transform: none; }
}

table { width: 100%; border-collapse: collapse; }
iframe, embed, object { max-width: 100%; }

/* =====================================================================
   9. STAMPA — pulizia base
   ===================================================================== */
@media print {
  nav, .far-btn, footer { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}

/* =====================================================================
   SCHEME PER PAGINA — combinazioni colore selezionabili dal meta box
   "Combinazione colore" (meta _far_scheme → classe body.far-scheme-*).
   Il DEFAULT del sito resta quello dei token in :root
   (azzurro #2AA9E0 / blu notte #0E3A5A / giallo #FDBB2D).
   Tutto il layout usa var(--far-accent)/var(--far-titolo): cambiare
   scheme ribalta bottoni, link, kicker e bordi senza altre modifiche.
   Volendo si può cambiare anche il FONT per scheme, ad es.:
     body.far-scheme-verde { --far-font-comic: 'Bangers', var(--far-font); }
   ===================================================================== */
body.far-scheme-azzurro   { --far-accent:#2AA9E0; --far-titolo:#0E3A5A; }
body.far-scheme-verde     { --far-accent:#8EB524; --far-titolo:#2f4a12; }
body.far-scheme-rosso     { --far-accent:#E63329; --far-titolo:#5a1410; }
body.far-scheme-arancione { --far-accent:#F5843E; --far-titolo:#5a2f10; }

/* =====================================================================
   HEADER, NAV E ACCESSIBILITÀ — struttura base del tema autonomo
   (hamburger sotto 900px, skip link, testo solo screen reader)
   ===================================================================== */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75em 1.25em;
  clip: auto;
  background: var(--far-titolo);
  color: #fff;
  font-family: var(--far-font);
  text-decoration: none;
  border-radius: 4px;
}

.site-header {
  background: var(--far-sfondo);
  border-bottom: 1px solid var(--far-linea);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
}
.site-branding .custom-logo {
  display: block;
  max-height: 56px;
  width: auto;
}
.site-title {
  font-family: var(--far-font);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--far-titolo);
  text-decoration: none;
}

.main-navigation ul {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-navigation a {
  font-family: var(--far-font);
  font-weight: 600;
  color: var(--far-titolo);
  text-decoration: none;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--far-accent);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background: none;
  border: 2px solid var(--far-titolo);
  border-radius: 6px;
  cursor: pointer;
}
.menu-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--far-titolo);
}

@media (max-width: 900px) {
  .menu-toggle {
    display: flex;
  }
  .main-navigation ul {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--far-sfondo);
    border-bottom: 1px solid var(--far-linea);
    padding: 0.5rem 1.25rem 1rem;
  }
  .main-navigation.is-open ul {
    display: flex;
  }
  .main-navigation ul a {
    display: block;
    padding: 0.75rem 0;      /* target touch ≥ 44px */
  }
  .site-header__inner {
    position: relative;
  }
}

/* Footer — sfondo ambra, testi blu notte */
.site-footer {
  margin-top: 3rem;
  background: var(--far-accent-2);
  color: var(--far-titolo);
}
.site-footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 3rem);
}
.site-footer p { color: var(--far-titolo); max-width: none; margin: 0; }
.footer-name {
  font-family: var(--far-font-comic);
  font-size: 1.6rem;
  line-height: 1.1;
}
.footer-payoff { font-weight: 600; margin-top: .35rem; }
.footer-credits p { font-size: .9rem; margin-bottom: .3rem; }
.footer-credits p:last-child { margin-bottom: 0; }
.footer-social { display: flex; gap: 1rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;                /* target touch ≥ 44px */
  color: var(--far-titolo);
  border: 2px solid var(--far-titolo);
  border-radius: 50%;
  transition: background-color .15s ease, color .15s ease;
}
.footer-social a:hover { background: var(--far-titolo); color: var(--far-accent-2); }

@media (max-width: 820px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
}

/* =========================================================
   HERO — home (Sezione 1)
   ========================================================= */
.hero-intro { text-align:center; max-width:900px; margin:0 auto clamp(2rem,5vw,3.5rem); }
.hero-intro h1 { color:var(--far-titolo); }
.hero-claim { font-weight:600; color:var(--far-testo);
  font-size:clamp(1.1rem,1rem + .8vw,1.4rem); max-width:none; margin-inline:auto; }

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr .8fr;
  gap:clamp(1rem,3vw,2.5rem);
  align-items:start;
}
.hero-grid > * { min-width:0; }

.hero-text h2 { margin-bottom:1rem; }
.hero-text .hero-lead { max-width:none; }

/* Colonna centrale: locandina + bottone sotto */
.hero-centro { display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem; }
.hero-centro .hero-media { width:100%; }
.hero-btn { font-size:1rem; padding:.85em 1.6em; border-radius:999px; }

/* Diabolik: colonna destra, ribassata */
.hero-alberto { margin-top:120%; }

.hero-media img { display:block; width:100%; height:auto;
  border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.hero-locandina img { object-fit:contain; }
.hero-alberto img { aspect-ratio:1/1; object-fit:cover; }

@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; justify-items:center; }
  .hero-centro{ align-items:center; }
  .hero-alberto{ margin-top:0; }
  .hero-media img{ max-width:480px; }
}

/* =========================================================
   SEZIONE 2 — Annuncio "3-4 ottobre 2026" (foto sfondo + card bianca)
   ========================================================= */
.annuncio{
  background-size:cover;
  background-position:center;
  background-attachment:fixed;      /* parallax: sfondo fisso al scroll */
  padding:clamp(3rem,9vw,7rem) var(--far-gutter);
  display:flex;
  justify-content:center;
}
.annuncio-card{
  background:#fff;
  max-width:760px;
  width:100%;
  text-align:center;
  padding:clamp(2rem,5vw,3.5rem);
  border-radius:4px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.annuncio-data{ color:var(--far-titolo); margin-bottom:1.5rem; }
.annuncio-testo p{ color:var(--far-testo); max-width:none; margin:0 auto 1.3rem; }
.annuncio-testo p:last-child{ margin-bottom:0; }

@media (max-width:768px){
  .annuncio{ background-attachment:scroll; }
}

/* =========================================================
   SEZIONE 3 — Galleria (Modula)
   ========================================================= */
.gallery-title { text-align:center; color:var(--far-titolo); }
.gallery-sub { text-align:center; max-width:none; margin:0 auto clamp(1.5rem,4vw,2.5rem); }

/* =========================================================
   SEZIONE — News (home) + navigazione articoli
   ========================================================= */
.news-title { text-align:center; color:var(--far-titolo); margin-bottom:clamp(1.5rem,4vw,2.5rem); }

.news-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(1rem,2vw,1.5rem);
}
.news-card{
  display:flex; flex-direction:column;
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.news-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.16); }
.news-card-img{ aspect-ratio:16/10; background:#eee; overflow:hidden; }
.news-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.news-card-body{ padding:1rem 1.1rem 1.3rem; }
.news-card-title{ font-size:1.1rem; color:var(--far-titolo); margin:0 0 .5rem; }
.news-card-excerpt{ font-size:.95rem; color:var(--far-grigio); margin:0; max-width:none; }

.news-more{ display:flex; justify-content:center; margin-top:clamp(1.5rem,4vw,2.5rem); }

/* Navigazione Prec/Succ nel singolo articolo */
.post-nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:1rem;
  align-items:center;
  margin-top:clamp(2rem,5vw,3.5rem);
  padding-block:1rem;
  border-top:1px solid var(--far-linea);
}
.post-nav-prev{ text-align:left; }
.post-nav-next{ text-align:right; }
.post-nav-prev a, .post-nav-next a{ font-weight:600; }

@media (max-width:980px){
  .news-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .news-grid{ grid-template-columns:1fr; }
  .post-nav{ grid-template-columns:1fr; justify-items:center; }
  .post-nav-prev, .post-nav-next{ text-align:center; }
}

/* =========================================================
   SEZIONE — Espositori
   ========================================================= */
.espositori-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3rem); align-items:center;
}
.espositori-testo h2{ color:var(--far-titolo); margin-bottom:1rem; }
.espositori-testo .far-btn{ margin-top:1.25rem; }
.espositori-img img{ width:100%; height:auto; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.18); display:block; }

/* =========================================================
   SEZIONE — Location + mappa
   ========================================================= */
.location-title{ text-align:center; color:var(--far-titolo); }
.location-sub{ text-align:center; max-width:none; margin:0 auto clamp(1.5rem,4vw,2.5rem); }
.location-grid{
  display:grid; grid-template-columns:1fr 1.4fr;
  gap:clamp(1.5rem,4vw,3rem); align-items:center;
}
.location-blocco{ margin-bottom:1.5rem; }
.location-blocco h3{ color:var(--far-accent); margin:0 0 .25rem; }
.location-blocco p{ margin:0; }
.location-info .far-btn{ margin-top:.5rem; }
.location-map{ position:relative; }
.location-map iframe{
  width:100%; height:400px; border:0; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.15); display:block;
}

@media (max-width:820px){
  .espositori-grid,
  .location-grid{ grid-template-columns:1fr; }
  .espositori-img{ order:-1; }        /* immagine sopra il testo su mobile */
  .location-map iframe{ height:320px; }
}

/* =========================================================
   PAGINA — Contatti
   ========================================================= */
.contatti-title{ text-align:center; color:var(--far-titolo); }
.contatti-sub{ text-align:center; max-width:none; margin:0 auto clamp(1.5rem,4vw,2.5rem); }
.contatti-form{ max-width:760px; margin:0 auto clamp(2rem,5vw,3rem); }

.contatti-info{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem);
  text-align:center; margin-bottom:clamp(2rem,5vw,3rem);
}
.contatti-blocco h3{ color:var(--far-titolo); margin:0 0 .5rem; }
.contatti-blocco p{ margin:0 auto; max-width:none; }

.contatti-media{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,3vw,2rem);
}
.contatti-map iframe{ width:100%; height:400px; border:0; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.15); display:block; }
.contatti-foto img{ width:100%; height:400px; object-fit:cover; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.15); display:block; }

@media (max-width:820px){
  .contatti-info,
  .contatti-media{ grid-template-columns:1fr; }
  .contatti-map iframe, .contatti-foto img{ height:300px; }
}

/* =========================================================
   ARTICOLO SINGOLO — header centrato, foto affiancata a destra
   ========================================================= */
.article-header{
  text-align:center;
  max-width:820px;
  margin:0 auto clamp(2rem,5vw,3rem);
}
.article-title{ color:var(--far-titolo); margin:0 0 .6rem; }
.article-subtitle{
  font-size:clamp(1.05rem,2.2vw,1.25rem);
  font-weight:600;
  max-width:none;
  margin:0 0 1rem;
}
.article-meta{
  display:flex; justify-content:center; align-items:center;
  gap:.75rem; flex-wrap:wrap;
  font-size:.9rem;
}
.article-cat{
  color:var(--far-titolo);
  font-weight:700;
  letter-spacing:.06em;
}
.article-cat::after{ content:"·"; margin-left:.75rem; }

.article-body.has-featured{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
.article-featured{ order:2; }          /* foto a destra del testo */
.article-content{ order:1; min-width:0; }
.article-featured img{
  width:100%; height:auto; display:block;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}

@media (max-width:820px){
  .article-body.has-featured{ grid-template-columns:1fr; }
  .article-featured{ order:0; }        /* foto sopra il testo su mobile */
}