/**
 * Hello Elementor Child - Hularmonia main styles
 */

/* Font self-hosted (brief 02): mai Google Fonts CDN. File woff2 da
   google-webfonts-helper, subset "latin" (U+0000-00FF, copre anche la
   "ò" di "Hularmònia"). Pesi dal modello readdy (report-recon T5.1):
   Cormorant Garamond 300-600 + 400 italic (titoli), Inter 300-600 (testo).
   font-display:swap: il testo resta visibile con il fallback finché il
   font non è caricato. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-v21-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-v21-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-v21-latin-400italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-v21-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-v21-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-v20-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-v20-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-v20-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-v20-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Token (brief 03, T1): stessi valori di tailwind.config.js (colors.hula). */
:root {
  --hula-gold: #B8956A;
  --hula-gold-light: #D9B98C;
  --hula-gold-soft: #E4C9A6;
  --hula-ink: #3A3A3A;
  --hula-ink-deep: #2C2C2C;
  --hula-muted: #6B6B6B;
  --hula-cream: #FAF8F5;
  --hula-sand: #F5F1EB;
  --hula-sand-dark: #E8DFD3;
  --hula-line: #D4C5B0;
  --hula-line-light: #E5E5E5;
  --hula-bordeaux: #2E1A22;
  --hula-night: #221E1A;
  --hula-blush: #E8D5C6;
  --hula-tan: #C9A882;
  --hula-faint: #999999;

  /* Altezza dell'header fisso, misurata sul modello (Playwright):
     104px a 390, 768 e 1440. Usata per scroll-margin-top e per
     distanziare la prima sezione. */
  --hula-header-h: 104px;
}

/* Tra 1024 e 1133px la nav desktop del modello va su due righe
   ("Training & Certifications"): header 108px. Soglia misurata pixel per
   pixel con Playwright, identica su modello e sito (dipende dalla larghezza
   del testo: da riverificare se cambiano voci di menu o font). */
@media (min-width: 1024px) and (max-width: 1133px) {
  :root {
    --hula-header-h: 108px;
  }
}

/* Reset con scope (brief 03, decisione A-19): nessun preflight globale,
   solo le regole del preflight del modello che servono, applicate sotto
   body.hularmonia-scope. :where() azzera la specificità dello scope:
   le regole battono reset.css di Hello Elementor (stessa specificità,
   caricato prima) ma perdono contro le utility Tailwind, che con
   important: '.hularmonia-scope' hanno specificità (0,2,0).
   La neutralizzazione di :hover/:focus dei bottoni del parent sta in
   tailwind-input.css (@layer base), perché deve precedere le utility. */
body.hularmonia-scope {
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.5;
}

:where(.hularmonia-scope) *,
:where(.hularmonia-scope) ::before,
:where(.hularmonia-scope) ::after {
  box-sizing: border-box;
}

:where(.hularmonia-scope) :is(h1, h2, h3, h4, h5, h6, p, figure) {
  margin: 0;
}

/* Titoli come nel preflight del modello: dimensione e peso arrivano
   dalle utility, non dai default di reset.css (h1 2.5rem, peso 500). */
:where(.hularmonia-scope) :is(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

:where(.hularmonia-scope) :is(img, svg) {
  display: block;
  vertical-align: middle;
}

:where(.hularmonia-scope) img {
  max-width: 100%;
  height: auto;
}

/* Link: reset.css li colora #c36 / #336 all'hover. */
:where(.hularmonia-scope) a,
:where(.hularmonia-scope) a:is(:hover, :active, :visited) {
  color: inherit;
  text-decoration: inherit;
}

/* Bottoni senza stile nativo né quello di reset.css (bordo e testo #c36,
   padding, radius). */
:where(.hularmonia-scope) :is(button, [type="button"], [type="submit"], [type="reset"]) {
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  text-align: inherit;
  white-space: normal;
  cursor: pointer;
}

/* ==========================================================================
   Header (brief 03, T5)
   Colori per stato tramite custom property: nel modello sono classi
   condizionali del JS React (variante pagina × scroll). Stati:
   - .hularmonia-header--dark   logo e nav scuri (about, contact)
   - .hularmonia-header--light  logo e nav chiari sopra un'immagine
   - .hularmonia-header--mixed  logo scuro, nav e toggle chiari (home,
                                brief 03b / A-24)
   - .is-scrolled               (JS, scroll > 50px) sfondo bianco + ombra,
                                colori scuri in entrambe le varianti
   - .is-menu-open              (JS) menu mobile aperto: colori chiari sul
                                fondo #3A3A3A dell'overlay (deviazione dal
                                modello, vedi report: lì toggle e logo della
                                variante scura restano #3A3A3A su #3A3A3A).
   `position: fixed` su header e overlay: è il comportamento del modello,
   non layout di flusso (segnalato in report-anomalie).
   ========================================================================== */
.hularmonia-header {
  --hh-ink: var(--hula-ink);
  --hh-accent: var(--hula-gold);
  --hh-link: var(--hula-ink);
  --hh-link-hover: var(--hula-gold);
  --hh-link-active: var(--hula-gold);
  --hh-link-weight: 400;
  --hh-text-shadow: none;
  --hh-toggle: var(--hula-ink);
  --hh-icon-shadow: none;
  background-color: transparent;
}

.hularmonia-header.is-scrolled {
  background-color: #fff;
  /* shadow-sm di Tailwind */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.hularmonia-header--light:not(.is-scrolled),
.hularmonia-header.is-menu-open:not(.is-scrolled) {
  --hh-ink: #fff;
  --hh-accent: var(--hula-gold-light);
  --hh-link: rgb(255 255 255 / 0.95);
  --hh-link-hover: #fff;
  --hh-link-active: var(--hula-gold-soft);
  --hh-link-weight: 500;
  --hh-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  --hh-toggle: #fff;
  --hh-icon-shadow: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* mixed: logo e wordmark restano quelli di dark (default sopra), nav e
   toggle come light. Dopo lo scroll vale il default scuro. */
.hularmonia-header--mixed:not(.is-scrolled) {
  --hh-link: rgb(255 255 255 / 0.95);
  --hh-link-hover: #fff;
  --hh-link-active: var(--hula-gold-soft);
  --hh-link-weight: 500;
  --hh-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  --hh-toggle: #fff;
  --hh-icon-shadow: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* La barra admin di WP (utente loggato) non deve coprire l'header. */
.admin-bar .hularmonia-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .hularmonia-header {
    top: 46px;
  }
}

.hularmonia-header .hularmonia-logo-mark {
  color: var(--hh-ink);
  flex-shrink: 0;
}

.hularmonia-header .hularmonia-logo-mark__accent {
  color: var(--hh-accent);
}

.hularmonia-header .hularmonia-header__name {
  color: var(--hh-ink);
}

.hularmonia-header .hularmonia-header__surname {
  color: var(--hh-accent);
}

.hularmonia-header .hularmonia-header__link {
  color: var(--hh-link);
  font-weight: var(--hh-link-weight);
  text-shadow: var(--hh-text-shadow);
}

.hularmonia-header .hularmonia-header__link:hover,
.hularmonia-header .hularmonia-header__link:focus-visible {
  color: var(--hh-link-hover);
}

.hularmonia-header .hularmonia-header__link[aria-current="page"] {
  color: var(--hh-link-active);
  font-weight: 500;
  text-shadow: none;
}

.hularmonia-header .hularmonia-header__toggle {
  color: var(--hh-toggle);
  filter: var(--hh-icon-shadow);
  /* Modello: w-10 h-10 (40px). Area di tocco portata a 44px (CLAUDE.md,
     regole mobile) con margine -2px: ingombro e posizione restano quelli
     del modello. px hardcoded segnalati in report-anomalie. */
  width: 44px;
  height: 44px;
  margin: -2px;
}

/* Icona del toggle: hamburger chiuso, X aperto (ri-menu-line / ri-close-line). */
.hularmonia-header__toggle[aria-expanded="true"] .hularmonia-header__icon-open,
.hularmonia-header__toggle[aria-expanded="false"] .hularmonia-header__icon-close {
  display: none;
}

/* Menu mobile fullscreen. `hidden` lo toglie dal flusso e dall'albero di
   accessibilità; .is-open (JS) gestisce la dissolvenza come nel modello. */
.hularmonia-mobile-menu {
  opacity: 0;
}

.hularmonia-mobile-menu[hidden] {
  display: none;
}

.hularmonia-mobile-menu.is-open {
  opacity: 1;
}

.hularmonia-mobile-menu .hularmonia-mobile-menu__link {
  color: rgb(255 255 255 / 0.9);
}

.hularmonia-mobile-menu .hularmonia-mobile-menu__link:hover,
.hularmonia-mobile-menu .hularmonia-mobile-menu__link:focus-visible {
  color: #fff;
}

.hularmonia-mobile-menu .hularmonia-mobile-menu__link[aria-current="page"] {
  color: var(--hula-gold-light);
  font-weight: 500;
}

/* Blocco dello scroll della pagina con il menu aperto (classe dal JS). */
html.hularmonia-menu-open {
  overflow: hidden;
}

/* Le ancore non finiscono sotto l'header fisso. */
:where(.hularmonia-scope) [id] {
  scroll-margin-top: var(--hula-header-h);
}

/* Reveal (main.js): stessi valori del modello (.reveal / .is-visible).
   Le classi le aggiunge il JS: senza JS il contenuto resta visibile.
   La transizione sta solo su .is-revealed (brief 04): nel modello
   l'elemento nasce già a opacità 0; qui era visibile prima del JS, e una
   transizione su .hularmonia-reveal partiva con un 1 → 0 che annullava
   la dissolvenza degli elementi già visibili al caricamento. */
.hularmonia-reveal {
  opacity: 0;
  will-change: opacity, transform;
}

.hularmonia-reveal.is-revealed {
  opacity: 1;
  transform: translate(0, 0);
  transition-property: opacity, transform;
  transition-duration: 0.9s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--hularmonia-reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .hularmonia-reveal {
    opacity: 1;
    transition: none;
    transform: none;
  }

  /* .hularmonia-scope davanti: deve battere transition-all /
     transition-opacity (utility, specificità 0,2,0). */
  .hularmonia-scope .hularmonia-header,
  .hularmonia-scope .hularmonia-mobile-menu {
    transition: none;
  }
}

/* ==========================================================================
   Footer (brief 03, T5)
   ========================================================================== */
.hularmonia-footer .hularmonia-logo-mark {
  color: var(--hula-line);
  flex-shrink: 0;
}

.hularmonia-footer .hularmonia-logo-mark__accent {
  color: var(--hula-gold);
}

/* Cognome: #B8956A del modello → gold-light per il contrasto AA su
   #3A3A3A (da ~4,1:1 a ~6,1:1). Unica deviazione cromatica voluta (A-35).
   Il logo del footer resta sui colori del modello. */
.hularmonia-footer .hularmonia-footer__surname {
  color: var(--hula-gold-light);
}

/* Icone social. Modello: w-10 h-10 border border-[#FAF8F5]/20
   (cerchio di 40px, bordo 1px). Area di tocco 44px con margine -2px
   (ingombro invariato); l'anello resta di 40px: bordo trasparente di 2px
   + anello 1px disegnato con box-shadow inset dentro il padding box. */
.hularmonia-footer .hularmonia-footer__social {
  width: 44px;
  height: 44px;
  margin: -2px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgb(250 248 245 / 0.2);
}

.hularmonia-footer .hularmonia-footer__social:hover,
.hularmonia-footer .hularmonia-footer__social:focus-visible {
  box-shadow: inset 0 0 0 1px var(--hula-gold);
}