/*
Theme Name: Sorpres
Theme URI: https://sorpres.one
Description: Tema su misura per Sorpres.one: impaginazione da giornale d'epoca (carta, inchiostro, filetti e capilettera). Costruito sul foglio di stile originale del sito.
Author: Helpwebnet
Version: 1.4
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: sorpres
*/

:root{
  --carta:#EFE3C4; --carta2:#E6D7B2; --inchiostro:#2A2015; --seppia:#5A4326;
  --filo:#8C7449; --rosso:#7B2412; --ombra:rgba(60,40,15,.35);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"EB Garamond",Garamond,Georgia,serif;font-size:19.5px;line-height:1.54;color:var(--inchiostro);
  background:#7d6a4c;padding:26px 0 40px;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- foglio ---------- */
.foglio{
  width:min(1180px,94vw);margin:0 auto;position:relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,252,240,.75), rgba(255,252,240,0) 60%),
    radial-gradient(60% 45% at 8% 22%, rgba(160,124,70,.22), transparent 70%),
    radial-gradient(55% 40% at 92% 68%, rgba(150,112,60,.24), transparent 72%),
    radial-gradient(70% 50% at 50% 108%, rgba(120,88,44,.30), transparent 70%),
    linear-gradient(160deg,#F3E8CC 0%,#EADCB8 45%,#E2D0A6 100%);
  border:1px solid #6f5a35;
  box-shadow:0 22px 60px rgba(0,0,0,.45);
  padding:26px;
}
.foglio:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23g)' opacity='0.42'/></svg>");background-size:240px 240px;
  mix-blend-mode:multiply;opacity:.30;
}
.foglio:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(90,62,26,.42), inset 0 0 22px rgba(70,48,20,.30);
}
.cornice{border:3px double var(--inchiostro);padding:18px 20px 26px;position:relative;z-index:2;}

/* ---------- testata ---------- */
.testata{text-align:center;}
.gotico{font-family:"Grenze",serif;font-weight:700;font-size:clamp(50px,9.6vw,112px);line-height:.98;color:var(--inchiostro);
  text-decoration:none;display:block;letter-spacing:.005em;}
.motto{font-family:"EB Garamond",serif;font-variant:small-caps;letter-spacing:.16em;font-size:clamp(11px,1.5vw,15px);
  border-top:1px solid var(--inchiostro);border-bottom:1px solid var(--inchiostro);padding:5px 0;margin-top:12px;}
.volume{display:flex;justify-content:space-between;gap:14px;font-variant:small-caps;letter-spacing:.1em;font-size:13.8px;
  border-bottom:3px double var(--inchiostro);padding:7px 2px 9px;margin-bottom:16px;}
@media(max-width:640px){.volume{font-size:11px;}}

/* ---------- fregi ---------- */
.fregio{display:flex;align-items:center;gap:12px;justify-content:center;margin:16px 0;color:var(--seppia);}
.fregio:before,.fregio:after{content:"";height:1px;background:var(--inchiostro);flex:1;}
.fregio span{font-size:13.8px;letter-spacing:.4em;}
.filetto{border-top:1px solid var(--inchiostro);margin:14px 0;}
.filetto.doppio{border-top:3px double var(--inchiostro);}

/* ---------- griglia ---------- */
.principale{display:grid;grid-template-columns:1fr 2.5fr 1.15fr;gap:0;}
.principale > *{padding:0 18px;border-left:1px solid var(--filo);}
.principale > *:first-child{padding-left:0;border-left:0;}
.principale > *:last-child{padding-right:0;}
@media(max-width:940px){
  .principale{grid-template-columns:1fr;}
  .principale > *{border-left:0;padding:0;border-top:3px double var(--inchiostro);padding-top:18px;margin-top:18px;}
  .principale > *:first-child{border-top:0;margin-top:0;padding-top:0;}
}

h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:900;line-height:1.02;}
.titolone{font-size:clamp(30px,4.6vw,52px);text-align:center;text-transform:uppercase;letter-spacing:-.01em;}
.catenaccio{font-family:"EB Garamond",serif;font-style:italic;font-size:clamp(16px,2vw,21px);text-align:center;
  margin-top:10px;color:var(--seppia);}
.testatina{font-family:"Playfair Display",serif;font-weight:700;font-size:16.2px;text-transform:uppercase;letter-spacing:.14em;
  text-align:center;border-top:1px solid var(--inchiostro);border-bottom:1px solid var(--inchiostro);padding:4px 0;margin-bottom:12px;}
.sottotitolino{font-variant:small-caps;letter-spacing:.14em;font-size:15px;text-align:center;color:var(--seppia);margin:12px 0 8px;}

.duecolonne{columns:2;column-gap:22px;column-rule:1px solid var(--filo);text-align:justify;hyphens:auto;font-size:17.2px;line-height:1.5;}
@media(max-width:640px){.duecolonne{columns:1;}}
.duecolonne p{margin-bottom:9px;}
.capolettera:first-letter{font-family:"Playfair Display",serif;font-weight:900;float:left;font-size:58px;line-height:.76;padding:6px 8px 0 0;}

.incisione{border:1px solid var(--inchiostro);padding:5px;background:#e8dabb;margin:14px 0 6px;}
.incisione svg{display:block;width:100%;height:auto;}
  .riquadro-scena{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--filo);}
  .album{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:112px;gap:5px;}
  .album figure{position:relative;overflow:hidden;border:1px solid var(--inchiostro);background:#000;margin:0;}
  .album figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;}
  .album figure:hover img{transform:scale(1.06);}
  .album figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:6px 8px 5px;
    background:linear-gradient(to top,rgba(20,14,8,.88),rgba(20,14,8,0));
    font-size:12.5px;line-height:1.25;color:#f6ecd2;font-style:italic;}
  .album .g1{grid-column:span 2;grid-row:span 2;}
  .album .g2{grid-column:span 2;grid-row:span 1;}
  .album .g4{grid-column:span 1;grid-row:span 1;}
  .album figcaption{font-size:12.5px;}
  @media(max-width:820px){.album{grid-template-columns:repeat(2,1fr);grid-auto-rows:96px;}
    .album .g1{grid-column:span 2;grid-row:span 2;}
    .album .g2{grid-column:span 2;grid-row:span 1;}
    .album .g4{grid-column:span 1;grid-row:span 1;}}
.scena{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.icona{width:74px;height:auto;margin:2px auto 4px;display:block;}
.fotoincisa{position:relative;height:132px;margin-top:10px;border:1px solid var(--inchiostro);overflow:hidden;}
.fotoincisa .scena{filter:sepia(.35);}
.incisione .lastra{height:210px;filter:sepia(.55) contrast(1.05);
  background:
    radial-gradient(75% 60% at 50% 40%, rgba(255,245,220,.5), transparent 70%),
    repeating-linear-gradient(104deg,#3a2c1c 0 2px,#6a5335 2px 4px,#9a805a 4px 7px);}
.didascalia{font-size:15px;font-style:italic;text-align:center;color:var(--seppia);margin-bottom:12px;}

/* ---------- riquadri (le "inserzioni") ---------- */
.riquadro{border:3px double var(--inchiostro);padding:14px;margin-bottom:18px;background:rgba(255,250,235,.35);}
.riquadro h3{font-size:19.5px;text-align:center;text-transform:uppercase;letter-spacing:.04em;}
.riquadro .marchietto{text-align:center;margin:4px 0 8px;}
.riquadro p{font-size:16.2px;line-height:1.46;text-align:justify;}
.riquadro .piede{font-variant:small-caps;letter-spacing:.1em;font-size:13.8px;text-align:center;border-top:1px solid var(--filo);padding-top:7px;margin-top:9px;color:var(--seppia);}
.notiziola{border-bottom:1px dotted var(--filo);padding-bottom:11px;margin-bottom:11px;font-size:16.2px;text-align:justify;}
.notiziola b{font-variant:small-caps;letter-spacing:.08em;}
.notiziola:last-child{border-bottom:0;}

.sommario a{display:block;text-decoration:none;border-bottom:1px dotted var(--filo);padding:8px 0;font-size:16.2px;}
.sommario a:hover{color:var(--rosso);}
.sommario a .n{font-variant:small-caps;letter-spacing:.1em;color:var(--rosso);margin-right:7px;}

.bottone{display:inline-block;font-family:"Playfair Display",serif;font-weight:700;font-size:13.8px;text-transform:uppercase;
  letter-spacing:.12em;text-decoration:none;border:3px double var(--inchiostro);padding:9px 20px;background:rgba(255,250,235,.5);cursor:pointer;}
.bottone:hover{background:var(--inchiostro);color:var(--carta);}
:focus-visible{outline:3px solid var(--rosso);outline-offset:2px;}

/* ---------- sezioni ---------- */
.sezione{margin-top:26px;}
.tre-riquadri{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.quattro{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.quattro > div{padding:0 16px;border-left:1px solid var(--filo);}
.quattro > div:first-child{border-left:0;padding-left:0;}
.quattro h3{font-size:18px;text-align:center;margin-bottom:8px;}
.quattro .rom{text-align:center;font-family:"Cinzel",serif;font-size:15px;letter-spacing:.14em;color:var(--rosso);}
.quattro p{font-size:16.2px;text-align:left;hyphens:none;line-height:1.48;}
@media(max-width:900px){.tre-riquadri,.quattro{grid-template-columns:1fr;}
  .quattro > div{border-left:0;border-top:1px dotted var(--filo);padding:14px 0 0;}
  .quattro > div:first-child{border-top:0;}}

.indice-esempi{border-top:3px double var(--inchiostro);border-bottom:3px double var(--inchiostro);}
.voce-esempio{display:grid;grid-template-columns:210px 1fr 90px;gap:20px;align-items:baseline;padding:14px 4px;
  border-bottom:1px dotted var(--filo);text-decoration:none;}
.voce-esempio:last-child{border-bottom:0;}
.voce-esempio:hover{background:rgba(255,250,232,.55);}
.voce-esempio .dove{font-variant:small-caps;letter-spacing:.08em;font-size:15px;color:var(--rosso);}
.voce-esempio h3{font-size:24px;}
.voce-esempio p{font-size:16.2px;color:var(--seppia);font-style:italic;}
.voce-esempio .apri{font-variant:small-caps;letter-spacing:.12em;font-size:13.8px;text-align:right;}
@media(max-width:820px){.voce-esempio{grid-template-columns:1fr;gap:4px;}}

.domande{columns:2;column-gap:26px;column-rule:1px solid var(--filo);}
@media(max-width:820px){.domande{columns:1;}}
.dom{break-inside:avoid;margin-bottom:16px;}
.dom h3{font-size:18px;font-variant:small-caps;letter-spacing:.06em;margin-bottom:4px;}
.dom p{font-size:16.2px;text-align:justify;line-height:1.5;}

.avvisofinale{border:3px double var(--inchiostro);padding:22px;text-align:center;margin-top:26px;background:rgba(255,250,235,.4);}
.avvisofinale h2{font-size:clamp(26px,3.6vw,40px);text-transform:uppercase;}
.avvisofinale p{max-width:60ch;margin:14px auto 0;font-size:18px;}
.avvisofinale .bottone{margin-top:18px;}

.colophon{border-top:3px double var(--inchiostro);margin-top:26px;padding-top:14px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;font-size:15px;color:var(--seppia);}
.colophon b{font-variant:small-caps;letter-spacing:.1em;color:var(--inchiostro);display:block;margin-bottom:4px;}
@media(max-width:820px){.colophon{grid-template-columns:1fr;}}

/* ---------- pagina esempio ---------- */
.corpo-esempio{display:grid;grid-template-columns:200px 1fr;gap:24px;}
.corpo-esempio > div:last-child{border-left:1px solid var(--filo);padding-left:24px;}
@media(max-width:940px){.corpo-esempio{grid-template-columns:1fr;}
  .corpo-esempio > div:last-child{border-left:0;padding-left:0;}}
.laterale{position:sticky;top:20px;}
@media(max-width:940px){.laterale{position:static;}}
.blocco{padding-bottom:24px;margin-bottom:24px;border-bottom:3px double var(--inchiostro);}
.blocco:last-child{border-bottom:0;}

.proiezione{position:relative;aspect-ratio:16/9;border:1px solid var(--inchiostro);overflow:hidden;background:#2a2015;}
.frame{position:absolute;inset:0;opacity:0;transition:opacity .9s;display:flex;align-items:flex-end;padding:22px;color:#f6ecd2;
  filter:sepia(.65) contrast(1.06);}
.frame.on{opacity:1;}
.frame .anno{position:absolute;top:18px;left:22px;font-family:"Playfair Display",serif;font-weight:900;font-size:clamp(28px,4.6vw,52px);opacity:.6;}
.frame:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(20,14,8,.82) 0%,rgba(20,14,8,.25) 34%,rgba(20,14,8,0) 62%);}
.frame .cap{position:relative;z-index:2;}
.frame .anno{z-index:2;}
.frame .cap{font-style:italic;font-size:clamp(15px,2vw,21px);text-shadow:0 2px 10px rgba(0,0,0,.8);}
.comandi{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;}
.comandi .nota{font-size:15px;font-style:italic;color:var(--seppia);}

.lettere{columns:2;column-gap:24px;column-rule:1px solid var(--filo);}
@media(max-width:820px){.lettere{columns:1;}}
.lettera{break-inside:avoid;border-bottom:1px dotted var(--filo);padding-bottom:12px;margin-bottom:14px;}
.lettera .chi{font-variant:small-caps;letter-spacing:.09em;font-weight:600;}
.lettera .quando{font-size:13.8px;font-style:italic;color:var(--seppia);}
.lettera p{font-size:16.2px;text-align:justify;margin-top:6px;line-height:1.5;}
.lettera .foto{height:96px;margin-top:9px;border:1px solid var(--inchiostro);filter:sepia(.5);
  background:repeating-linear-gradient(72deg,#3a2c1c 0 2px,#6a5335 2px 5px,#9a805a 5px 8px);}

/* ---------- moduli ---------- */
.campo{margin-bottom:14px;}
.campo label{display:block;font-variant:small-caps;letter-spacing:.1em;font-size:15px;margin-bottom:3px;}
.campo .aiuto{font-size:15px;font-style:italic;color:var(--seppia);margin-bottom:5px;}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  width:100%;border:0;border-bottom:1px solid var(--inchiostro);background:rgba(255,252,240,.45);
  padding:8px 8px;font-family:"EB Garamond",serif;font-size:16.2px;color:var(--inchiostro);}
textarea{border:1px solid var(--inchiostro);min-height:92px;resize:vertical;}
select{border:1px solid var(--inchiostro);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rosso);outline-offset:1px;}
.duecol{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.trecol{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:760px){.duecol,.trecol{grid-template-columns:1fr;}}
.check{display:flex;gap:9px;align-items:flex-start;margin-bottom:9px;font-size:16.2px;}
.check input{margin-top:5px;}
fieldset{border:0;margin-bottom:26px;}
legend{width:100%;}
.numsez{font-family:"Cinzel",serif;font-size:13.8px;letter-spacing:.16em;color:var(--rosso);text-align:center;}
.avvertenza{border:3px double var(--inchiostro);padding:16px 20px;margin-bottom:22px;font-size:17.2px;background:rgba(255,250,232,.5);}
.modulo{display:grid;grid-template-columns:1fr 300px;gap:24px;}
.modulo > div:last-child{border-left:1px solid var(--filo);padding-left:24px;}
@media(max-width:1000px){.modulo{grid-template-columns:1fr;}
  .modulo > div:last-child{border-left:0;padding-left:0;border-top:3px double var(--inchiostro);padding-top:18px;}}
.telegramma{position:sticky;top:20px;}
#riepilogo{width:100%;min-height:230px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.45;
  background:rgba(255,252,240,.6);border:1px solid var(--inchiostro);}
.mancanti{margin-bottom:12px;font-size:16.2px;}
.mancanti b{font-variant:small-caps;letter-spacing:.1em;color:var(--rosso);display:block;margin-bottom:5px;}
.mancanti button{font-family:"EB Garamond",serif;font-size:16.2px;background:none;border:0;border-bottom:1px dotted var(--rosso);
  color:var(--rosso);cursor:pointer;display:block;padding:2px 0;text-align:left;}
.completo{font-style:italic;color:#3f5c2f;}
.azioni-mod{display:flex;flex-direction:column;gap:9px;margin-top:12px;}

@media print{
  body{background:#fff;padding:0;}
  .foglio{box-shadow:none;border:0;width:auto;}
  .foglio:before,.foglio:after{display:none;}
  .azioni-mod,.laterale,.no-print{display:none;}
}

/* --- Semantica dei titoli -------------------------------------------
   .titolone e .testatina erano <div>: ora sono <h1> e <h2>.
   Queste regole annullano line-height e margini ereditati da h1,h2,h3
   e dal browser, cosi l’aspetto resta identico a prima. */
h1.titolone,
h2.testatina{line-height:inherit;margin-top:0;}
h1.titolone{margin-bottom:0;font-family:"Archivo Black",Georgia,serif;font-weight:400;}
h2.testatina{margin-bottom:12px;}

/* --- Misura di riga -------------------------------------------------
   Il paragrafo introduttivo del blocco spot correva su 800px, cioe 86
   caratteri per riga: troppo per un serif in lettura. Il resto della
   pagina sta gia fra 20 e 75 caratteri e non viene toccato. */
.hp-spot p{max-width:64ch;}

/* --- prefers-reduced-motion ----------------------------------------
   Il sito usa scroll-behavior:smooth. Chi ha attivato la riduzione del
   movimento nel sistema operativo riceve lo scorrimento istantaneo. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* --- Scala tipografica ---------------------------------------------
   I 24 valori di font-size in px erano stati scritti uno per uno
   (cinque diversi fra 16 e 16,6). Consolidati su 10 valori, scarto
   massimo 0,5px: nessuna differenza visibile, una sola scala da
   mantenere. I clamp() dei titoli display non sono stati toccati.
   Scala: 11 - 12,5 - 13,8 - 15 - 16,2 - 17,2 - 18 - 19,5 - 24 - 58 */

/* ---------- piede editoriale: dati societari (01/10/2026) ---------- */
.editore{border-top:1px solid var(--filo);margin-top:22px;padding-top:12px;text-align:center;
  font-size:13.8px;line-height:1.6;color:var(--seppia);overflow-wrap:break-word;}
.editore b{font-variant:small-caps;letter-spacing:.1em;color:var(--inchiostro);font-weight:700;}
.editore a{color:var(--inchiostro);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
.editore a:hover{color:var(--rosso);}