/* =====================================================================================================
   BASE TECNICA COMUNE dei siti diretti Dgitaly — base.css
   Solo INVARIANTI (uguali in ogni sito): niente identità visiva. I colori sono variabili con default neutri:
   il foglio del sito le ridefinisce in :root (vedi README, «Come si adatta»). Classi col prefisso x-.
   Provenienza di ogni regola: README.md (file:righe dei tre temi del 21/10).
   Si carica PRIMA del foglio del sito (functions-base.php lo mette come dipendenza).
   ===================================================================================================== */

:root {
  /* misure */
  --x-header-h: 84px;            /* ripiego: base.js la sostituisce con l'altezza VERA della testata */
  --x-anchor-gap: 12px;          /* aria fra testata e titolo raggiunto da un'ancora */
  --x-gutter: clamp(16px, 4vw, 48px);
  --x-container: 1240px;
  --x-ease: cubic-bezier(.2, .7, .2, 1);

  /* fuoco (≥3:1 sia su bianco sia su quasi-nero; ridefinirlo per banda se serve) */
  --x-focus: #0b5cad;

  /* skip link */
  --x-skip-bg: #111418;
  --x-skip-fg: #ffffff;

  /* firma «Powered by Dgitaly» — default pensati per un piè SCURO (tutti e tre i siti del 21/10) */
  --x-firma-fg: #c3c9d1;
  --x-firma-link: #e6e9ed;
  --x-firma-link-hover: #ffffff;
  --x-firma-line: rgba(255, 255, 255, .12);
  --x-firma-disk: #ffffff;       /* dischetto CHIARO sotto il marchio: l'asset rosso scuro su fondo scuro sparisce */

  /* pulsanti flottanti */
  --x-float-offset: 18px;
  --x-float-gap: 12px;
  --x-wa-size: 56px;
  --x-top-size: 48px;
  --x-float-bg: #1f2328;         /* disco scuro: glifo WhatsApp #25D366 su #1f2328 = 7,9:1 */
  --x-float-fg: #ffffff;
  --x-float-ring: rgba(255, 255, 255, .22);
  --x-wa-glyph: #25D366;
  --x-float-reserve: 150px;      /* spazio vuoto in fondo al piè sul telefono: a fine pagina i flottanti stanno sul vuoto */

  /* menu a tutto schermo */
  --x-overlay-bg: #ffffff;
  --x-overlay-fg: #1d2125;
  --x-overlay-line: rgba(0, 0, 0, .12);

  /* rivelazioni */
  --x-reveal-shift: 22px;
}

/* ---------------------------------------------------------------- base */
body { margin: 0; }
img { max-width: 100%; height: auto; }
/* clip e NON hidden: overflow:hidden su un antenato uccide position:sticky della testata */
.wp-site-blocks { overflow-x: clip; }

/* NESSUNA STRISCIA fra testata, contenuto e piè: il core mette
   `:where(.wp-site-blocks) > * { margin-block-start: <blockGap> }` fra header, main e footer. */
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks > main > .wp-block-post-content { margin-block: 0; }
/* bande a tutta larghezza attaccate fra loro (le sezioni del sito portano la classe x-band, o sono alignfull) */
.wp-block-post-content > .x-band,
.wp-block-post-content > .alignfull { margin-block: 0; }

/* ---------------------------------------------------------------- fuoco, skip link, ancore */
:focus-visible { outline: 3px solid var(--x-focus); outline-offset: 3px; }
/* il contorno compare solo da tastiera, mai dopo un clic (WordPress mette outline anche su :focus) */
.wp-site-blocks *:focus:not(:focus-visible) { outline: none; }
/* lo skip link lo inserisce il core (template con <main>); qui solo leggibilità e sopra la testata */
.skip-link.screen-reader-text:focus { background: var(--x-skip-bg); color: var(--x-skip-fg); z-index: 100000; }
/* ancore e bersaglio dello skip link sotto la testata sticky.
   ⚠ NON aggiungere anche `html { scroll-padding-top }`: scroll-padding e scroll-margin si SOMMANO. */
:where([id]) { scroll-margin-top: calc(var(--x-header-h) + var(--wp-admin--admin-bar--height, 0px) + var(--x-anchor-gap)); }

/* ---------------------------------------------------------------- testata sticky */
/* lo sticky va sul WRAPPER del template-part (<header class="wp-block-template-part">), figlio diretto di
   .wp-site-blocks: messo sul gruppo interno non si attacca mai, perché il suo contenitore è alto quanto lui. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
/* ⚠ niente backdrop-filter / filter / transform sulla testata o sui suoi antenati: diventano il blocco
   contenitore dell'overlay fisso del menu (alto quanto la testata invece che a tutto schermo).
   Il vetro, se serve, va su uno pseudo-elemento ::before della testata. */

/* ---------------------------------------------------------------- menu a tutto schermo (wp:navigation con classe x-nav)
   Il core passa all'overlay solo sotto 600px: il punto di rottura vero si MISURA (dove la riga del menu sborda)
   e si scrive qui. 1239px è il valore di [A] e [L]; [F] usava 1279px. */
@media (max-width: 1239px) {
  .x-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
  .x-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}
/* ogni regola dell'overlay sta sotto .is-menu-open: un padding non scoperto da .is-menu-open gonfia la testata desktop */
.x-nav .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important; inset: 0; height: 100vh; height: 100dvh; max-height: 100dvh; overflow-y: auto;
  background: var(--x-overlay-bg) !important; color: var(--x-overlay-fg) !important; z-index: 100000;
  padding: calc(var(--wp-admin--admin-bar--height, 0px) + 1.25rem) var(--x-gutter) 6rem !important;
}
/* justifyContent:right della navigazione allinea a destra anche le voci dell'overlay: si riallinea a sinistra */
.x-nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding-top: 3.5rem !important; }
.x-nav .is-menu-open .wp-block-navigation__container { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; width: 100%; }
.x-nav .is-menu-open .wp-block-navigation-item { width: 100%; flex-direction: column; align-items: stretch !important; border-bottom: 1px solid var(--x-overlay-line); }
.x-nav .is-menu-open .wp-block-navigation-item__content { width: 100%; text-align: left; padding: .9rem .2rem !important; }
.x-nav .is-menu-open .wp-block-navigation__submenu-container { position: static !important; border: 0 !important; box-shadow: none !important; padding: 0 0 .6rem 1rem !important; min-width: 0 !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; height: auto !important; width: auto !important; }
.x-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border: 0; }
.x-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }

/* ---------------------------------------------------------------- firma «Powered by [logo] Dgitaly»
   Riga di fondo del piè: testo legale e firma CENTRATI sulla stessa linea mediana; sotto i 900px uno sotto
   l'altro, centrati. Firma su UNA riga: un solo flex (il link) con align-items:center e la stessa interlinea. */
.x-firma { border-top: 1px solid var(--x-firma-line); }
.x-firma__inner {
  width: min(100% - 2 * var(--x-gutter), var(--x-container)); margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.75rem;
  padding-block: 1.2rem 1.4rem; text-align: center; font-size: .86rem; line-height: 26px; color: var(--x-firma-fg);
}
/* il layout «flow» del gruppo dà al secondo paragrafo un margin-top: in riga sposterebbe la mediana */
.x-firma__inner > * { margin: 0 !important; line-height: 26px; }
.x-firma__links { white-space: nowrap; }
.x-firma__links a { color: var(--x-firma-link); text-decoration: underline; text-underline-offset: .2em; }
.x-firma__powered a { display: inline-flex; align-items: center; gap: .45rem; line-height: 26px; color: var(--x-firma-link); text-decoration: none; font-weight: 600; }
.x-firma__powered a:hover { color: var(--x-firma-link-hover); text-decoration: underline; text-underline-offset: .2em; }
/* marchio 18px su dischetto chiaro di 26px; l'asset dgitaly.svg non si tocca */
.x-firma__powered img { width: 18px; height: 18px; padding: 4px; box-sizing: content-box; background: var(--x-firma-disk); border-radius: 50%; display: block; flex: none; }
@media (max-width: 900px) { .x-firma__inner { flex-direction: column; gap: .5rem; } }

/* ---------------------------------------------------------------- WhatsApp */
/* pulsante flottante, stampato da functions-base.php (wp_footer) */
.x-wa-float {
  position: fixed; z-index: 60;
  right: max(var(--x-float-offset), env(safe-area-inset-right)); bottom: max(var(--x-float-offset), env(safe-area-inset-bottom));
  width: var(--x-wa-size); height: var(--x-wa-size); border-radius: 50%; display: grid; place-items: center;
  background: var(--x-float-bg); color: var(--x-wa-glyph); box-shadow: 0 0 0 1px var(--x-float-ring), 0 10px 24px -8px rgba(0, 0, 0, .45);
  transition: transform .2s var(--x-ease);
}
.x-wa-float svg { width: 55%; height: 55%; display: block; }
.x-wa-float:hover { transform: scale(1.06); }
.x-wa-float:focus-visible { outline-offset: 4px; }
/* link WhatsApp nel testo, nella barra alta o nei recapiti: icona ufficiale verde davanti alla parola */
.x-wa-link { display: inline-flex; align-items: center; gap: .45rem; }
.x-wa-link::before { content: ""; width: 1em; height: 1em; flex: none; background: url(../img/whatsapp.svg) center / contain no-repeat; }

/* ---------------------------------------------------------------- «torna su» (creato da base.js: senza JS non esiste) */
.x-to-top {
  position: fixed; z-index: 60; padding: 0; cursor: pointer;
  right: max(var(--x-float-offset), env(safe-area-inset-right)); bottom: max(var(--x-float-offset), env(safe-area-inset-bottom));
  width: var(--x-top-size); height: var(--x-top-size); border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--x-float-ring); background: var(--x-float-bg); color: var(--x-float-fg);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s, transform .25s, visibility 0s linear .25s;
}
.x-to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s, visibility 0s; }
.x-to-top svg { width: 22px; height: 22px; display: block; }
.x-to-top:focus-visible { outline-offset: 3px; }
/* impilato SOPRA il WhatsApp, centrato sul suo asse, senza toccarlo (base.js mette x-has-wa se il WhatsApp c'è) */
.x-has-wa .x-to-top {
  right: calc(max(var(--x-float-offset), env(safe-area-inset-right)) + (var(--x-wa-size) - var(--x-top-size)) / 2);
  bottom: calc(max(var(--x-float-offset), env(safe-area-inset-bottom)) + var(--x-wa-size) + var(--x-float-gap));
}
/* con il menu a tutto schermo aperto i flottanti spariscono (il core mette has-modal-open su <html>) */
html.has-modal-open .x-wa-float, html.has-modal-open .x-to-top { display: none; }
/* telefono: a fondo pagina i flottanti stanno sul vuoto e non sui link del piè. La riserva sta sull'ULTIMA riga
   del piè (.x-firma), dentro il fondo del piè: messa sul wrapper del template-part scoprirebbe il colore del body
   quando il fondo del piè è dipinto su un gruppo interno. */
@media (max-width: 600px) {
  .x-firma { padding-bottom: var(--x-float-reserve); }
}

/* ---------------------------------------------------------------- rivelazioni allo scorrimento
   Le classi x-rv / x-rv-in le mette SOLO base.js, SOLO sugli elementi sotto la piega e SOLO con movimento
   consentito: senza JS, con movimento ridotto o nell'editor non c'è nulla da nascondere (fail-visible).
   Si muove con `translate` (mai opacity): il contrasto non cala mai durante l'ingresso e la proprietà
   `translate` non sovrascrive il `transform` che il sito mette sullo stesso elemento. */
.x-rv { translate: 0 var(--x-reveal-shift); transition: translate .7s var(--x-ease); transition-delay: calc(var(--x-rv-i, 0) * 70ms); }
.x-rv.x-rv-in { translate: none; }

/* ---------------------------------------------------------------- movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  .x-rv, .x-rv.x-rv-in { translate: none !important; transition: none !important; }
  .x-to-top, .x-to-top.is-shown { transform: none; transition: none; }
  .x-wa-float { transition: none; }
  .x-wa-float:hover { transform: none; }
}