/*
Theme Name:   Fabiana Faustini
Description:  Child theme North (Ensoul) di Twenty Twenty-Five per il sito di Fabiana Faustini, psicologa e psicoterapeuta. Design tokens allineati al progetto Figma.
Tags: Tailwind, Accessibility, Custom Menu, Custom Logo, Editor Style, Featured Images, Site Editor, Block Editor Patterns, Wide Blocks, Block Editor Styles, Style Variations, Accessible, Blog, Portfolio, Corporate, Blocks
Author:       Ensoul
Template:     twentytwentyfive
Version:      0.1.0
Text Domain:  fabiana-faustini
*/

/* I bleed orizzontali del design (strip contatti, breakout) NON devono
   allargare il documento: senza clip il breakout North (che si centra su
   100vw vs larghezza body) va fuori asse e appare scroll laterale. */
html,
body {
  overflow-x: clip;
}

#inactivity_message {
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  color: #999;
  padding: 0 2rem;
  text-align: center;
}

.sticky {
  position: sticky;
  top: 20px;
}

/* Il blockGap del root (theme.json 1rem) mette 16px sopra il <main>: su pagine
   100dvh produce un finto scroll. Il ritmo verticale lo gestiscono i blocchi. */
.wp-site-blocks > * + * {
  margin-block-start: 0;
}

/* Riga footer per-pagina (numeretto + ©): overlay assoluto al fondo del
   wrapper 100dvh — non occupa flusso (le immagini possono toccare il bottom)
   e sulle pagine lunghe resta a fine contenuto, come nel design. */
main section:has(> .ff-page-footer) {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-left: var(--spacing-content-padding-mobile, 10px);
  padding-right: var(--spacing-content-padding-mobile, 10px);
}

@media (min-width: 768px) {
  main section:has(> .ff-page-footer) {
    padding-left: var(--spacing-content-padding, 20px);
    padding-right: var(--spacing-content-padding, 20px);
  }
}

/* Padding laterale mobile del design = 10px (token content-padding-mobile),
   non 8 (xs): override mirato sui wrapper di pagina che usano px-xs. */
@media (max-width: 767px) {
  main .pl-xs {
    padding-left: var(--spacing-content-padding-mobile, 10px);
  }

  main .pr-xs {
    padding-right: var(--spacing-content-padding-mobile, 10px);
  }
}

/* Voci del menu header/footer: link senza sottolineatura (il design le mostra
   come testo bold pulito; la sottolineatura resta per i link nel contenuto). */
.header-fixed a,
.footer-fixed a {
  text-decoration: none;
}

/* Voce di menu della pagina corrente: sottolineata come da design (classe
   gestita da page-transitions.js, aggiornata a ogni swap barba). */
.header-fixed a.is-active {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Indice del blog: titoli-link puliti; hover = banda gialla (secondary-100)
   sull'intera riga full-bleed, come da design (frame 10 - Hover). */
.wp-block-query.is-clickable-items a {
  text-decoration: none;
}

.wp-block-query.is-clickable-items .wp-block-post .ensoul-columns-section {
  transition: background-color 220ms ease;
}

.wp-block-query.is-clickable-items .wp-block-post:hover .ensoul-columns-section {
  /* fill campionato dal frame Figma "10 - Hover" (fuori palette: candidato
     token hover-highlight in design-tokens) */
  background-color: #ffffa1;
}

/* Range intermedio 768-1279: la griglia editoriale 5×20% (disegnata a 1920)
   rende le colonne testo illeggibili. Scala proporzionale a gradini: il
   layout mantiene le proporzioni del design come un poster ridotto. */
@media (min-width: 1100px) and (max-width: 1279px) {
  body {
    zoom: 0.88;
  }

  main [style*="min-height: 100dvh"] {
    min-height: calc(100dvh / 0.88) !important;
  }
}

@media (min-width: 900px) and (max-width: 1099px) {
  body {
    zoom: 0.78;
  }

  main [style*="min-height: 100dvh"] {
    min-height: calc(100dvh / 0.78) !important;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  body {
    zoom: 0.66;
  }

  main [style*="min-height: 100dvh"] {
    min-height: calc(100dvh / 0.66) !important;
  }
}

/* Sotto zoom le unità vw non scalano: il breakout North (w-screen + -ml-50vw)
   si disallinea. In questi range gli antenati sono già full-width: 100% basta.
   NB: dentro @layer utilities — gli !important delle utility North vivono lì
   e battono qualunque !important fuori layer (GC-078); nello stesso layer
   vince l'ordine di sorgente (child dopo global.css). */
@media (min-width: 768px) and (max-width: 1279px) {
  @layer utilities {
    body:not(.wp-admin) .ensoul-breakout {
      width: 100% !important;
      max-width: none !important;
      left: 0 !important;
      right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }
}

/* Menu mobile (Figma 916:736): overlay full-screen sotto la barra header
   (ff + trigger restano visibili sopra, z-index maggiore). Aperto/chiuso da
   page-transitions.js con body.ff-menu-open; il trigger diventa "Close". */
.ff-menu-toggle {
  cursor: pointer;
}

.ff-mobile-panel {
  display: none;
}

body.ff-menu-open .ff-mobile-panel {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  /* fondo oliva scuro campionato dal frame 916:736 (fuori palette:
     candidato token menu-overlay in design-tokens) */
  background: #434223;
  color: var(--wp--preset--color--base, #ffffea);
  padding: 80px var(--spacing-content-padding-mobile, 10px) 14px;
  overflow-y: auto;
}

body.ff-menu-open .ff-mobile-panel > .ensoul-columns-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

/* testi e link del pannello in crema (gli inline style dei paragraph
   puntano a contrast: qui serve l'override) */
body.ff-menu-open .ff-mobile-panel p,
body.ff-menu-open .ff-mobile-panel a {
  color: var(--wp--preset--color--base, #ffffea) !important;
}

body.ff-menu-open .ff-mobile-panel a.is-active {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* anche la barra header (ff + Close) diventa crema sopra il pannello */
body.ff-menu-open .header-fixed p,
body.ff-menu-open .header-fixed a {
  color: var(--wp--preset--color--base, #ffffea) !important;
}

body.ff-menu-open {
  overflow: hidden;
}

/* Contatti, strip mobile: 3 foto che sbordano ai lati come da design
   (quadro e pianta mezze fuori viewport). */
@media (max-width: 767px) {
  /* geometria dal frame 916:70-73: span totale 524/375 = 140vw,
     prima foto che parte a -108px (-28.8%) */
  .ff-strip > .ensoul-columns-block {
    width: 140%;
    margin-left: -28.8%;
    flex-wrap: nowrap;
  }
}

/* Cursore-freccia del content-slider: North lo renderizza senza opacity-0
   iniziale → appare a riposo in alto a sinistra. Visibile solo in hover
   (il JS continua a gestire i suoi stati dentro l'hover). */
.wp-block-ensoul-content-slider:not(:hover) .navigation-arrow {
  opacity: 0;
}

/* Utente loggato: la admin bar spinge giù la pagina (margin-top su html),
   quindi i blocchi ensoul con altezza viewport inline (min-height: 100dvh)
   sborderebbero della sua altezza — la si sottrae, come fa core in
   theme.json (calc con --wp-admin--admin-bar--height). !important perché
   lo stile è inline. Stesso offset per l'header fixed, che altrimenti
   finisce nascosto sotto la barra. */
body.admin-bar [style*="min-height: 100dvh"] {
  min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)) !important;
}

body.admin-bar .header-fixed {
  top: var(--wp-admin--admin-bar--height, 0px);
}