/* =====================================================================
   site.css — foglio di stile unico e pulito del sito Daniela Scandurra.
   Sostituisce le ~45 CSS Elementor/tema/plugin dell'export WordPress.
   Contiene SOLO: reset, font, header, menu (desktop + mobile), footer,
   barra copyright, bottone WhatsApp. Gli stili dei blocchi di contenuto
   "cst-" restano (per ora) in custom-overrides.css.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

/* ---------- token ---------- */
:root{
  --cream:#F9F3F2;
  --pink:#F768BD;
  --pink-soft:#FDD9EF;
  --teal:#007EA7;
  --ink:#262626;
  --ink-nav:#0D111C;
  --container:1320px;
  --vsp:64px;        /* spaziatura verticale standard: gap tra sezioni/blocchi e padding+margin verticale dei box colorati. Uniforme su tutto il sito. */
}
@media(max-width:900px){ :root{ --vsp:40px; } }

/* ---------- reset minimale ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Quicksand",sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;border:0;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;}
/* parole/URL lunghi vanno a capo invece di sforare e allargare la pagina (es. link
   Facebook per esteso su chi-sono). Globale, così non ricapita altrove. */
p,li,a,h1,h2,h3,h4,h5,blockquote,figcaption,dd,dt{overflow-wrap:break-word;}

.container{max-width:var(--container);margin:0 auto;padding:0 20px;width:100%;}

/* =====================================================================
   HEADER
   Due zone: pannello crema (logo+nav) che cresce, zona bianca (CTA+burger).
   Il confine crema/bianco cade subito prima del bottone CERCA, come nell'originale.
   ===================================================================== */
/* Header TRASPARENTE (come il sito live): non ha colore proprio, è lo sfondo
   della pagina (rettangolo crema, vedi più sotto) a colorarne la metà sinistra.
   Contenuto nel container principale di riferimento (1320 centrato). */
/* Header STICKY: resta in cima allo scroll. Quando "incollato" (is-stuck, via JS dopo
   pochi px di scroll) prende sfondo bianco + ombra e gli elementi si rimpiccioliscono. */
/* Sticky sul WRAPPER template-part (Gutenberg block theme): il wrapper Gutenberg
 * ha altezza = altezza header, quindi position:sticky solo su .site-header limita
 * lo stick al box del wrapper e l'header scivola via allo scroll. Il selettore
 * `header.wp-block-template-part` è il wrapper che WordPress genera per la
 * template-part "header" con tagName=header. */
header.wp-block-template-part{position:sticky;top:0;z-index:900;}
.site-header{background:transparent;position:sticky;top:0;z-index:900;transition:background .25s ease,box-shadow .25s ease;}
.site-header.is-stuck{background:#ffffff !important;box-shadow:0 4px 16px rgba(0,0,0,.08);}
.site-header__row{display:flex;align-items:stretch;max-width:var(--container);margin:0 auto;}
.site-header__left{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:42px;
  padding:25px 42px 25px 0;
}
.site-header__right{
  flex:0 0 auto;
  display:flex;align-items:center;gap:42px;
  padding:25px 0 25px 0;
}

/* ===== Sfondo "a rettangolo" delle pagine interne =====
   Default: rettangolo crema in alto-a-sinistra (full-bleed verso sx, attaccato
   in alto), dietro l'header trasparente e la hero — replica di .page_wrap::before
   del live (940×600, z basso). Le pagine senza (webinar/home) usano .no-herobg. */
/* overflow-x: clip (non hidden) così il clipping orizzontale resta ma NON si crea uno
   scroll container sul body, che romperebbe la position:sticky dell'header. */
body{position:relative;overflow-x:clip;}
body::before{
  content:"";position:absolute;top:0;left:0;
  width:65.3%;height:600px;background:var(--cream);
  z-index:0;pointer-events:none;
}
body.no-herobg::before{display:none;}
/* NB: .site-header NON qui — userebbe position:relative sovrascrivendo lo sticky.
   Resta sticky (z-index:900) definito sopra. */
main,.site-footer{position:relative;z-index:1;}
/* Kill the block-flow gap WP inserts between the header template part and the
   first child of <main> — the hero's cream gradient must sit flush against the
   header (which has the same gradient on the home page). */
main.wp-block-group,main.wp-block-group > *:first-child{margin-top:0 !important;}
main.wp-block-group.is-layout-flow > * + *{margin-block-start:0;}
/* Same rule for the post-content wrapper, so sections stack flush and
   negative margins (e.g. .home-startbox margin-bottom:-90px) can overlap. */
.wp-block-post-content.is-layout-flow > *{margin-block-start:0 !important;}
.wp-block-post-content > *:first-child{margin-top:0 !important;}
.site-header__logo{flex:0 0 auto;display:flex;}
/* display:block: l'img inline lascerebbe ~6px di descender sotto, scentrando
   verticalmente il logo rispetto all'hamburger (che è centrato). */
.site-header__logo img{height:58px;width:auto;display:block;transition:height .25s ease;}
/* rimpicciolimento da sticky (desktop): meno padding verticale + logo più piccolo */
.site-header__left,.site-header__right{transition:padding .25s ease;}
.site-header.is-stuck .site-header__left{padding-top:15px;padding-bottom:15px;}
.site-header.is-stuck .site-header__right{padding-top:15px;padding-bottom:15px;}
.site-header.is-stuck .site-header__desktop .site-header__logo img{height:46px;}

.site-nav{margin-left:auto;}
.site-nav__list{display:flex;align-items:center;gap:42px;}
.site-nav__list a{
  font-size:17px;
  font-weight:300;
  text-transform:uppercase;
  color:var(--ink-nav);
  line-height:1.5;
  position:relative;
  transition:color .2s ease;
}
.site-nav__list a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  background:var(--pink);transition:right .25s ease;
}
.site-nav__list a:hover{color:var(--pink);}
.site-nav__list a:hover::after{right:0;}
/* pagina corrente: stessa resa dell'hover (rosa + sottolineatura) */
.site-nav__list a.is-current{color:var(--pink);}
.site-nav__list a.is-current::after{right:0;}

/* CTA "Cerca per comportamento" */
.site-header__cta{
  display:inline-block;
  padding:9px 35px 10px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink-nav);
  font-size:17px;
  font-weight:300;
  text-transform:uppercase;
  line-height:1.5;
  transition:background .2s ease,color .2s ease;
}
.site-header__cta:hover{background:var(--ink);color:#fff;}

/* hamburger (apre overlay) */
.site-burger{
  flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer;
  width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;
}
.site-burger svg{display:block;}

/* riga header mobile (logo + burger) — nascosta sopra il breakpoint */
.site-header__mobile{display:none;}

/* =====================================================================
   MENU MOBILE (overlay fullscreen)
   ===================================================================== */
.menu-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(38,38,38,.28);
  display:flex;justify-content:flex-end;align-items:flex-start;
  padding:16px;
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s;
}
.menu-overlay.is-open{opacity:1;visibility:visible;}
.menu-overlay__panel{
  background:#fff;border-radius:0;box-shadow:0 18px 50px rgba(0,0,0,.18);
  width:min(420px,100%);max-height:calc(100vh - 32px);overflow-y:auto;
  display:flex;flex-direction:column;
  padding:18px 28px 40px;
  transform:translateY(-10px);transition:transform .25s ease;
}
.menu-overlay.is-open .menu-overlay__panel{transform:none;}
.menu-overlay__top{display:flex;align-items:center;justify-content:flex-end;}
.menu-overlay__close{
  background:none;border:0;cursor:pointer;width:40px;height:40px;position:relative;
}
.menu-overlay__close::before,.menu-overlay__close::after{
  content:"";position:absolute;left:8px;top:19px;width:24px;height:2px;background:var(--ink);
}
.menu-overlay__close::before{transform:rotate(45deg);}
.menu-overlay__close::after{transform:rotate(-45deg);}
/* search */
.menu-overlay__search{margin:18px 0 26px;}
.menu-overlay__search input{
  width:100%;border:0;border-bottom:1px solid rgba(99,99,99,.45);
  background:none;padding:6px 2px;font-family:inherit;font-size:20px;color:#636363;
}
.menu-overlay__search input::placeholder{color:#636363;opacity:.7;font-style:italic;}
.menu-overlay__search input:focus{outline:none;border-bottom-color:var(--pink);}
/* nav */
.menu-overlay__nav{display:flex;flex-direction:column;}
.menu-overlay__nav > a{
  display:block;text-align:left;padding:13px 0;
  font-size:24px;font-weight:400;line-height:1;color:var(--ink);
}
.menu-overlay__nav > a:hover{color:var(--pink);}
.menu-overlay__nav > a.is-current{color:var(--pink);text-decoration:underline;text-underline-offset:5px;}
/* accordion Comportamenti */
.menu-overlay__group{display:flex;flex-direction:column;}
.menu-overlay__toggle{
  display:flex;align-items:center;gap:14px;
  background:none;border:0;cursor:pointer;padding:13px 0;
  font-family:inherit;font-size:24px;font-weight:400;line-height:1;color:var(--ink);text-align:left;
}
.menu-overlay__sign{display:inline-block;width:1em;font-style:normal;}
.menu-overlay__sign::before{content:"+";}
.menu-overlay__group.is-open .menu-overlay__toggle{color:var(--pink);}
.menu-overlay__group.is-open .menu-overlay__sign::before{content:"\2212";}
.menu-overlay__sub{display:none;flex-direction:column;padding:2px 0 10px 16px;}
.menu-overlay__group.is-open .menu-overlay__sub{display:flex;}
.menu-overlay__sub a{
  display:block;padding:9px 0;
  font-size:20px;font-weight:400;line-height:1;color:#636363;
}
.menu-overlay__sub a:hover{color:var(--pink);}
.menu-overlay__sub a.is-current{color:var(--pink);text-decoration:underline;text-underline-offset:5px;}
/* socials */
.menu-overlay__socials{display:flex;justify-content:flex-start;gap:16px;margin-top:34px;}
.menu-overlay__socials a{
  width:48px;height:48px;border-radius:50%;background:#F9CFD6;
  display:inline-flex;align-items:center;justify-content:center;
}
.menu-overlay__socials img{display:block;width:auto;height:auto;max-width:22px;max-height:20px;}
body.menu-open{overflow:hidden;}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{background:transparent;}
/* sfondo full-width: striscia trasparente (= bianco body) sul 5% sinistro,
   poi crema. Replica il gradiente Elementor che lascia sbucare la barra teal. */
.site-footer__main{
  background:linear-gradient(90deg,transparent 5%,var(--cream) 5%);
  position:relative;z-index:1;padding:60px 0 70px;
}
.site-footer__inner{
  max-width:var(--container);margin:0 auto;padding:0 55px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:start;
}
.site-footer__logo img{height:62px;width:auto;margin-bottom:22px;}
.site-footer__about{font-size:18px;font-weight:400;line-height:1.4;color:var(--ink);max-width:320px;}

.site-footer__menu a{
  display:inline-block;padding:6px 0;
  font-size:16px;font-weight:300;text-transform:uppercase;color:#1B0707;
  transition:color .2s ease;
}
.site-footer__menu a:hover{color:var(--pink);}
.site-footer__menu a.is-current{color:var(--pink);text-decoration:underline;text-underline-offset:4px;}
/* bottone outlined "Accedi al webinar gratuito" nel menu footer */
.site-footer__menu a.site-footer__webinar{
  display:inline-block;margin-top:18px;padding:14px 24px;
  border:1px solid #C9BFBC;color:#1B0707;
  font-size:15px;font-weight:400;text-transform:uppercase;letter-spacing:.2px;
  transition:border-color .2s ease,color .2s ease;
}
.site-footer__menu a.site-footer__webinar:hover{border-color:var(--pink);color:var(--pink);}
.site-footer__menu a.site-footer__webinar.is-current{text-decoration:none;border-color:var(--pink);color:var(--pink);}

.site-footer__col--cta{display:flex;flex-direction:column;align-items:flex-start;}
.site-footer__contact{
  display:inline-block;padding:18px 46px;background:var(--teal);color:#fff;
  font-size:20px;font-weight:500;text-transform:uppercase;line-height:1.25;
  transition:opacity .2s ease;
}
.site-footer__contact:hover{opacity:.9;}
.site-footer__socials{display:flex;gap:18px;margin-top:28px;}
.site-footer__socials a{
  width:54px;height:54px;border-radius:50%;background:var(--pink-soft);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  transition:transform .2s ease;
}
.site-footer__socials a:hover{transform:scale(1.08);}
/* icone fornite dal cliente: aspect-ratio diversi → si normalizzano per altezza */
.site-footer__socials svg,.site-footer__socials img{display:block;width:auto;height:20px;}

/* barra copyright — sovrapposta di -50px al footer; il teal sbuca nella
   striscia trasparente 5% creando il blocchetto in basso a sinistra. */
.site-copyright{
  background:var(--teal);color:#fff;text-align:left;
  margin-top:-50px;position:relative;z-index:0;padding:74px 20px 26px;
}
.site-copyright__inner{max-width:var(--container);margin:0 auto;padding:0 55px;}
.site-copyright p{margin:0;font-size:14px;font-weight:400;}
.site-copyright a{color:#fff;text-decoration:underline;}

/* =====================================================================
   WHATSAPP floating button
   ===================================================================== */
.wa-float{
  position:fixed;bottom:40px;left:40px;z-index:9999;
  width:60px;height:60px;border-radius:50%;background:#25D366;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 11px rgba(0,0,0,.5);
}
.wa-float svg{width:32px;height:32px;fill:#fff;}

/* =====================================================================
   CONTENUTO (prose) — tipografia pagine interne (riusabile)
   ===================================================================== */
/* container principale di riferimento (1320 flush, contenuto a sx ~60px @1440),
   coerente con header e con chi-sono. I testi prose si limitano a 1005px (come
   l'entry-content del live); blocchi larghi (.books, .cols) usano tutto il 1320. */
/* Inset orizzontale = 10px per allineare i contenuti al box visibile dell'header
   (logo e CTA "Cerca" sono a 10px dai bordi del container 1320). */
.page-content{max-width:1320px;margin:0 auto;padding:var(--vsp) 10px;}
@media(max-width:1360px){.page-content{padding-left:20px;padding-right:20px;}}
.page-content.prose > h1,.page-content.prose > h2,.page-content.prose > h3,.page-content.prose > p{max-width:1005px;}
/* Scala tipografica IDENTICA al tema live (advice): base 1.2rem=19.2px,
   h1 2.65em, h2 2.45em, h3 1.65em. Stessi valori usati su chi-sono/sg/con/bas. */
.prose h1{font-family:"Quicksand",sans-serif;font-size:50.88px;font-weight:700;line-height:1.1;color:var(--ink);margin:0 0 20px;}
.prose h2{font-family:"Quicksand",sans-serif;font-size:47.04px;font-weight:700;line-height:1.021;color:var(--ink);margin:0 0 20px;}
.prose h3{font-family:"Quicksand",sans-serif;font-size:31.68px;font-weight:300;line-height:1.086;color:var(--ink);margin:0 0 16px;}
.prose h3 strong,.prose h2 strong{color:var(--pink);font-weight:700;}
.prose p{font-size:19.2px;font-weight:400;line-height:1.3;color:#6B6E71;margin:0 0 24px;}
@media(max-width:900px){
  .prose h1{font-size:32px;}
  .prose h2{font-size:30px;}
  .prose h3{font-size:24px;}
}
.prose img{display:block;}
.prose a{color:var(--pink);text-decoration:underline;}
.btn-cta{
  display:inline-block;background:var(--teal);color:#fff !important;
  font-size:15px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:14px 30px;text-decoration:none !important;line-height:1.4;
}
.btn-cta:hover{opacity:.92;}
.cols{display:flex;gap:32px;align-items:center;}
.cols--top{align-items:flex-start;}
.col-60{flex:0 0 60%;min-width:0;}
.col-40{flex:0 0 33.33%;min-width:0;}
.col-50{flex:1 1 0;min-width:0;}

/* libri: due copertine centrate con caption + bottone */
.books{display:flex;gap:40px;justify-content:center;align-items:stretch;margin-top:34px;}
.book{flex:1 1 0;min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center;}
/* area immagine ad altezza fissa: le due copertine si allineano in alto e in basso */
.book>a:first-child{display:flex;align-items:flex-end;justify-content:center;height:500px;width:100%;}
.book img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;}
/* .prose p batte .book__cap per specificità: rialzo la specificità per il bold */
.books .book__cap{font-weight:700;color:var(--ink);margin:18px 0 20px;}
.book .btn-cta{margin:auto auto 0;}
/* spazio sotto la griglia libri, prima della sezione "Parti da qui" */
.libri-index{padding-bottom:90px;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:860px){
  .cols{flex-direction:column;align-items:stretch;}
  .col-40{flex-basis:auto;}
  .page-content{padding:var(--vsp) 24px;}
}
@media(max-width:640px){
  /* libri-index: due copertine affiancate -> cascata verticale. L'area immagine a
     500px fissi (per allineare le cover in alto/in basso su desktop) qui lascia un
     vuoto enorme: la rendo fluida e centro la copertina. */
  .books{flex-direction:column;gap:28px;align-items:center;}
  .book{flex:0 0 auto;width:100%;max-width:320px;}
  .book>a:first-child{height:auto;}
  .book img{height:auto;width:62%;max-width:220px;}
  /* divisore leggero tra i due libri impilati, per non confonderli */
  .book + .book{border-top:1px solid rgba(38,38,38,.10);padding-top:28px;}
}
@media(max-width:1024px){
  .site-header__desktop{display:none;}
  .site-header__mobile{
    display:flex;align-items:center;justify-content:space-between;
    max-width:var(--container);margin:0 auto;padding:18px 24px;
    transition:padding .25s ease;
  }
  .site-header__mobile .site-header__logo img{height:50px;}
  /* su mobile l'header sticky NON si rimpicciolisce (diventerebbe troppo piccolo):
     resta della stessa dimensione, cambia solo lo sfondo bianco + ombra. */
  /* mobile: il rettangolo crema della hero (pagine interne) diventa full-width
     così l'header e l'intro poggiano su una banda crema piena, non spezzata. */
  body::before{width:100%;}
  /* footer: la griglia è su .site-footer__inner (non __main): è LÌ che va il
     collasso a colonna singola — altrimenti resta a 3 colonne e sborda. */
  .site-footer__inner{grid-template-columns:1fr;gap:34px;text-align:center;}
  /* mobile: sfondo crema a tutta larghezza (su desktop il gradiente lascia una
     striscia trasparente del 5% a sx per far sbucare il teal del copyright). */
  .site-footer__main{padding:50px 30px;background:var(--cream);}
  .site-footer__about{margin:0 auto;}
  .site-footer__menu{display:flex;flex-direction:column;align-items:center;}
  .site-footer__col--cta{align-items:center;}
  .site-footer__socials{justify-content:center;}
}
@media(max-width:600px){
  .wa-float{width:54px;height:54px;bottom:24px;left:24px;}
}
/* Su desktop l'header mostra già Scuola Genitori, Consulenze e Alta Sensibilità:
   nascondi i duplicati nell'overlay (su mobile l'header non ha nav, quindi restano).
   Specificità (0,2,0): le regole base .menu-overlay__nav>a e .menu-overlay__sub a sono
   (0,1,1) e batterebbero un semplice .menu-overlay__dup (0,1,0). */
@media(min-width:1025px){
  .menu-overlay__nav .menu-overlay__dup{display:none;}
}