/*
Theme Name: Spino Studio
Theme URI: https://spinostudio.it
Author: Stefano Spinella
Description: Tema su misura per spinostudio.it — biglietto da visita a pagina unica. Tre colori, un font ospitato in casa, nessuno script di terze parti.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: spinostudio
*/

/* ------------------------------------------------------------------
   Archivo ospitato in casa. Non è un vezzo: un font chiamato da
   fonts.googleapis.com trasmette l'IP del visitatore a Google, e
   sarebbe l'unica cosa a rendere obbligatorio il banner cookie.
   Archivo è sotto SIL Open Font License, l'auto-hosting è permesso.
   ------------------------------------------------------------------ */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:75% 112%;
  font-display:swap;
  src:url('assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:75% 112%;
  font-display:swap;
  src:url('assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ============================================================
   Biglietto da visita digitale — Stefano Spinella
   Tre colori, un font, due misure.
   Regola: il giallo fluo non fa mai da inchiostro, solo da
   area piena. Tema unico, deliberato.
   ============================================================ */
:root{
  --c1:#0B0B0B;   /* inchiostro */
  --c2:#EFF0ED;   /* carta */
  --c3:#E2FF00;   /* fluo: riempie, non scrive */
  --c1-soft:rgba(11,11,11,.62);

  --base-mg:clamp(.5rem,1vw,1.5rem);
  --padding-lr:calc(var(--base-mg) * 1.5);
  --maxw:1250px;

  --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --cursore:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2 L22 21 L15.2 21 L12 12.2 L8.8 21 L2 21 Z' fill='%230B0B0B'/%3E%3C/svg%3E") 12 12, pointer;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--c3)}

body{
  margin:0;
  font-family:var(--font);
  font-variation-settings:"wdth" 100;
  font-weight:600;
  font-size:clamp(.9375rem,1vw,1rem);
  line-height:1.45;
  background:var(--c2);
  color:var(--c1);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--c3);color:var(--c1)}
h1,h2,h3{margin:0;font-weight:600;font-family:var(--font)}
p{margin:0;font-weight:600}
ul{margin:0;padding:0}

a{
  color:inherit;text-decoration:none;
  padding:0 .06em;margin:0 -.06em;border-radius:.06em;
  transition:color .25s ease,background .25s ease,border-color .25s ease;
  cursor:var(--cursore);
}
a:hover{background:var(--c3);color:var(--c1)}
:focus-visible{outline:2px solid var(--c1);outline-offset:4px}

/* misure */
.fs-0{font-size:clamp(2.5rem,7vw,5.25rem);line-height:.97;letter-spacing:-.032em;text-wrap:pretty}
.fs-1{font-size:clamp(1.7rem,3vw,3.5rem);line-height:1;letter-spacing:-.022em;text-wrap:pretty}
.fs-2{font-size:clamp(1.0625rem,1.8vw,1.6rem);line-height:1.32;letter-spacing:-.01em}
.banda{font-size:clamp(1.8rem,4.2vw,3.75rem);line-height:1.1;letter-spacing:-.026em;text-wrap:pretty;max-width:26ch;margin:0 auto}

.container{
  max-width:var(--maxw);margin:0 auto;
  padding:calc(var(--base-mg) * 4) var(--padding-lr);
}
/* la schermata piena è un gesto, non un default: la tengono solo l'apertura
   e la fascia gialla. Sulle sezioni di testo produceva il vuoto enorme. */
.container.only-h{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;flex-flow:column;text-align:center;
}

/* l'unica inversione */
.full-yellow{background:var(--c3);color:var(--c1)}
#start-2 .container{min-height:64vh;padding-block:calc(var(--base-mg) * 4)}
.full-yellow ::selection{background:var(--c1);color:var(--c3)}
/* dentro un paragrafo il link deve vedersi anche senza passarci sopra */
.full-yellow a{text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:.06em}
.full-yellow a:hover{background:var(--c1);color:var(--c3)}

/* il marchio: cuneo */
.mk{
  display:block;flex:none;background:var(--c1);
  /* triangolo pieno con l'apice fuori centro: mantiene la proprietà di
     incastrarsi in qualunque forma, ma non è un equilatero generico */
  clip-path:polygon(42% 0,100% 100%,0 100%);
}

/* l'evidenziatore */
.mark{position:relative;white-space:nowrap;display:inline-block}
.mark>span{position:relative;z-index:1}
.mark::before{
  content:"";position:absolute;z-index:0;
  left:-.08em;right:-.08em;top:.1em;bottom:.02em;
  background:var(--c3);transform:scaleX(0);transform-origin:left center;
}
.full-yellow .mark::before{background:var(--c1)}
.mark.lit::before{animation:sweep .75s cubic-bezier(.6,.05,.2,1) forwards}
.mark.lit>span{color:var(--c1)}
.full-yellow .mark.lit>span{color:var(--c3)}
@keyframes sweep{to{transform:scaleX(1)}}

/* nav */
#nav{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  padding:calc(var(--base-mg) * .667) var(--padding-lr);
  display:flex;justify-content:space-between;align-items:center;gap:var(--base-mg);
  color:var(--c1);
}
#nav.on-yellow a:hover,#nav.on-yellow .cta:hover{background:var(--c1);color:var(--c3)}
.logo{
  display:inline-flex;align-items:center;gap:calc(var(--base-mg) * .5);
  font-size:clamp(1.05rem,1.9vw,2.1rem);letter-spacing:-.02em;line-height:1;
}
.logo .mk{width:clamp(15px,1.6vw,26px);aspect-ratio:12/13}
#nav ul{display:flex;gap:var(--base-mg);list-style:none;align-items:center}
#nav ul a{font-size:clamp(1.05rem,2vw,2.25rem);line-height:1;letter-spacing:-.02em}

.cta{
  display:inline-block;
  padding:calc(var(--base-mg) / 3) var(--base-mg);
  border:calc(var(--base-mg) / 8) solid;
  border-radius:calc(var(--base-mg) * 3);
  line-height:1.1;
}
.cta:hover{background:var(--c3);color:var(--c1)}

/* hero */
#start h1{max-width:22ch;margin:0 auto}
#start .fs-2{max-width:44ch;margin:calc(var(--base-mg) * 1.75) auto 0}
/* l'apertura non è più alta uno schermo intero: il titolo e il sottotitolo
   si centrano meglio. L'imbottitura superiore è maggiore di quella inferiore
   per compensare il nav fisso, che copre i primi 66px. */
#start .container{min-height:100vh;padding-block:calc(var(--base-mg) * 5) calc(var(--base-mg) * 3)}
.hero-foot{margin-top:calc(var(--base-mg) * 2.5);display:flex;justify-content:center}
.scrollcue{display:block;width:1px;height:clamp(28px,4vw,52px);background:var(--c1);opacity:.45}

/* elenco servizi */
.sez-h{margin-bottom:calc(var(--base-mg) * 3)}
.voci{border-top:1px solid var(--c1);list-style:none}
.voce{
  display:grid;grid-template-columns:minmax(0,23rem) minmax(0,1fr);
  gap:calc(var(--base-mg) * .5) calc(var(--base-mg) * 3);
  padding-block:calc(var(--base-mg) * 1.75);
  border-bottom:1px solid var(--c1);
  align-items:baseline;
}
@media (max-width:820px){.voce{grid-template-columns:1fr}}
.voce h3{font-size:clamp(1.8rem,2.4vw,2.5rem);line-height:1.03;letter-spacing:-.022em}
.voce p{max-width:52ch}
.settori{margin-top:calc(var(--base-mg) * 2.5);color:var(--c1-soft);max-width:62ch}

/* con chi ho lavorato: griglia, non fila libera — così ogni logo
   sta centrato nella sua cella invece di accodarsi a sinistra */
.clienti{
  /* --scala tiene insieme le proporzioni relative fra i loghi a ogni misura:
     ritagliare ogni logo alla cella (min(w,100%)) le distruggeva, perché tutti
     i marchi larghi finivano alla stessa larghezza e i quadrati restavano piccoli */
  --scala:1;
  display:grid;
  margin-bottom:calc(var(--base-mg) * 2);
  grid-template-columns:repeat(4,1fr);
  gap:calc(var(--base-mg) * 4) calc(var(--base-mg) * 2.5);
  align-items:center;justify-items:center;
  list-style:none;
  border-top:1px solid var(--c1);
  padding-top:calc(var(--base-mg) * 4);
}
.clienti li{display:flex;align-items:center;justify-content:center;width:100%}
/* il logo diventa un link: l'evidenziatore giallo dell'hover vale anche qui,
   con un po' di respiro intorno perché non sembri appiccicato al marchio */
.clienti a{display:block;border-radius:0;
  padding:calc(var(--base-mg) * .9);margin:calc(var(--base-mg) * -.9)}
.clienti img{
  display:block;height:auto;
  /* il pavimento di 48px vincola solo i marchi molto stretti sui telefoni:
     sotto quella misura un lettering disegnato a mano smette di leggersi */
  width:max(48px, calc(var(--w) * var(--scala)));
  max-width:100%;
  /* rete di sicurezza: qualunque logo aggiunto in futuro viene forzato al nero */
  filter:brightness(0);
}
@media (max-width:1100px){
  .clienti{--scala:.86;gap:calc(var(--base-mg) * 3.5) calc(var(--base-mg) * 2.5)}
}
@media (max-width:960px){
  .clienti{--scala:.8;grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .clienti{--scala:.58;grid-template-columns:repeat(2,1fr);
           gap:calc(var(--base-mg) * 3.5) calc(var(--base-mg) * 2.5)}
}
@media (max-width:380px){
  .clienti{--scala:.5}
}

/* chi sono */
#chi-sono .fs-2{max-width:58ch}
#chi-sono .fs-2 + .fs-2{margin-top:calc(var(--base-mg) * 1.5)}

/* footer */
#footer .container{
  max-width:unset;min-height:auto;display:block;
  padding-top:calc(var(--base-mg) * 6);padding-bottom:calc(var(--base-mg) * .667);
}
.bigmark{width:clamp(44px,5vw,78px);aspect-ratio:12/13;margin:0 auto calc(var(--base-mg) * 3)}
#footer-email{text-align:center;margin-bottom:calc(var(--base-mg) * 2)}
#footer-email > a{
  font-size:clamp(2rem,6vw,6rem);line-height:1;letter-spacing:-.035em;
  display:inline-block;word-break:break-word;
}
.copy{
  display:inline-block;background:none;border:0;padding:.05em .2em;
  margin:calc(var(--base-mg) * 1.5) -.2em 0;
  color:inherit;font:inherit;text-decoration:underline;cursor:var(--cursore);
}
.copy:hover{background:var(--c3)}
/* la seconda porta: chi vuole scrivere usa l'email, chi vuole parlare prenota */
.prenota{margin-top:calc(var(--base-mg) * 3)}
.prenota .cta{font-size:clamp(.9rem,1.3vw,1.15rem);border-width:2px}
#footer-legal{
  display:flex;flex-wrap:wrap;gap:calc(var(--base-mg) * .5) calc(var(--base-mg) * 2);
  justify-content:space-between;line-height:1.375;
  margin-top:calc(var(--base-mg) * 4);color:var(--c1-soft);
}
#footer-legal a{color:var(--c1)}
#footer-legal .r{text-align:right}

/* comparse */
.js-anim [data-reveal]{opacity:0;transform:translateY(14px)}
.js-anim [data-reveal].in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.js-anim .enter{opacity:0}
.js-anim .enter.in{opacity:1;transition:opacity 1s ease}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim [data-reveal],.js-anim .enter{opacity:1;transform:none;transition:none}
  .mark.lit::before{animation:none;transform:scaleX(1)}
}

@media (max-width:1024px){
  #nav ul li:not(.keep){display:none}
  /* nav più basso e più grande: da telefono il logo e l'unica azione
     devono essere pollici, non dettagli */
  #nav{padding-block:calc(var(--base-mg) * 1.7) calc(var(--base-mg) * .9)}
  #nav ul{gap:calc(var(--base-mg) * .75)}
  #nav ul a{font-size:clamp(1.2rem,4.2vw,1.5rem)}
  #nav .cta{padding:calc(var(--base-mg) * .55) calc(var(--base-mg) * 1.25);border-width:2px}
  .logo{font-size:clamp(1.3rem,4.6vw,1.7rem)}
  .logo .mk{width:clamp(18px,4.6vw,22px)}
  .container{min-height:unset;padding-block:calc(var(--base-mg) * 4)}
  /* meno vuoto attorno al titolo: era la lamentela principale da telefono */
  /* L'imbottitura superiore deve superare l'altezza della barra fissa,
     che non occupa spazio nel flusso: con 32px il titolo ci finiva sotto. */
  #start .container{min-height:74vh;padding-block:calc(var(--base-mg) * 8) calc(var(--base-mg) * 2)}
  #start .fs-2{margin-top:calc(var(--base-mg) * 1.25)}
  .hero-foot{margin-top:calc(var(--base-mg) * 1.5)}
  /* la fascia da telefono non deve occupare mezza schermata */
  #start-2 .container{min-height:auto;padding-block:calc(var(--base-mg) * 5)}
  #footer-legal{justify-content:flex-start}
  #footer-legal .r{text-align:left}
}

/* ==================================================================
   Pagine interne (privacy, cookie): stessa palette, colonna leggibile
   ================================================================== */
.pagina .container{max-width:74ch;padding-block:calc(var(--base-mg) * 6) calc(var(--base-mg) * 4)}
.pagina h1{
  font-size:clamp(2rem,5vw,3.5rem);line-height:1;letter-spacing:-.03em;
  margin-bottom:calc(var(--base-mg) * 3);text-wrap:pretty;
}
.pagina h2{
  font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.1;letter-spacing:-.02em;
  margin:calc(var(--base-mg) * 3.5) 0 calc(var(--base-mg) * 1.25);
}
.pagina p,.pagina li{
  font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.6;font-weight:600;
  margin-bottom:calc(var(--base-mg) * 1.25);
}
.pagina ul{padding-left:1.2em;margin-bottom:calc(var(--base-mg) * 2)}
.pagina li{margin-bottom:calc(var(--base-mg) * .5)}
.pagina strong{font-weight:800}
.pagina a{text-decoration:underline;text-underline-offset:.14em}
.pagina hr{border:0;border-top:1px solid var(--c1);margin:calc(var(--base-mg) * 3) 0}
.torna{
  display:inline-block;margin-top:calc(var(--base-mg) * 3);
  font-size:.95rem;text-decoration:underline;text-underline-offset:.14em;
}

/* ------------------------------------------------------------------
   Con la barra di amministrazione, WordPress spinge il documento in
   basso di 32px con un margin sull'elemento html. Ma un elemento
   position:fixed si posiziona sul viewport e ignora quel margine,
   quindi la testata finiva sotto la barra. Riguarda solo chi è
   collegato — cioè chi lavora al sito.
   ------------------------------------------------------------------ */
body.admin-bar #nav{top:32px}
@media screen and (max-width:782px){
  body.admin-bar #nav{top:46px}
}