/* ==========================================================================
   WORLDZ — wz-site.css · v1.0 · 2026-08-06
   Strato leggero su TUTTO il sito (anche pagine pubbliche e checkout):
   porta ovunque il minimo del design system senza rifare i layout esistenti.

   Cosa fa: colore d'azione unico sui bottoni, focus sempre visibile,
   campi form coerenti, avvisi con barra di stato. Cosa NON fa: non tocca
   griglie, sezioni, immagini o impaginazione delle pagine marketing.
   ========================================================================== */

/* ---- Focus visibile ovunque: regola di accessibilità non negoziabile ---- */
body.wz-ds a:focus-visible,
body.wz-ds button:focus-visible,
body.wz-ds input:focus-visible,
body.wz-ds select:focus-visible,
body.wz-ds textarea:focus-visible,
body.wz-ds [tabindex]:focus-visible {
  /* `!important` obbligato: `style.css` del tema azzera outline e ombre su `*` */
  outline: 2px solid var(--wz-brand) !important;
  outline-offset: 2px !important;
  border-radius: var(--wz-r-sm);
}

/* ---- Un solo colore d'azione, anche fuori dal pannello ------------------
   (Il tema dipinge già #04bfbf sui bottoni: qui si allineano forma, altezza
   e contrasto del testo, che sul teal deve essere scuro per passare AA.)    */
body.wz-ds .btn-theme-primary,
body.wz-ds .woocommerce a.button,
body.wz-ds .woocommerce button.button,
body.wz-ds .woocommerce input.button,
body.wz-ds .woocommerce #respond input#submit {
  min-height: 44px; padding: 0 var(--wz-sp-5);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wz-sp-2);
  border-radius: var(--wz-r-md); border: 1px solid transparent;
  font-weight: 650; letter-spacing: 0.005em; box-shadow: none;
  transition: background var(--wz-t-fast) var(--wz-ease),
              color var(--wz-t-fast) var(--wz-ease),
              border-color var(--wz-t-fast) var(--wz-ease);
}
body.wz-ds .woocommerce a.button.alt,
body.wz-ds .woocommerce button.button.alt,
body.wz-ds .woocommerce input.button.alt {
  background: var(--wz-brand); color: #02231f;
}
body.wz-ds .woocommerce a.button.alt:hover,
body.wz-ds .woocommerce button.button.alt:hover,
body.wz-ds .woocommerce input.button.alt:hover {
  background: var(--wz-brand-deep); color: #fff;
}

/* ---- Campi form coerenti (carrello, checkout, contatti) ----------------- */
body.wz-ds .woocommerce form .form-row input.input-text,
body.wz-ds .woocommerce form .form-row textarea,
body.wz-ds .woocommerce form .form-row select {
  min-height: 44px; padding: 10px 13px; box-sizing: border-box;
  font-family: var(--wz-font); font-size: var(--wz-fs-sm); color: var(--wz-ink);
  background: var(--wz-surface); border: 1px solid var(--wz-line);
  border-radius: var(--wz-r-md);
  transition: border-color var(--wz-t-fast) var(--wz-ease),
              box-shadow var(--wz-t-fast) var(--wz-ease);
}
body.wz-ds .woocommerce form .form-row input.input-text:focus,
body.wz-ds .woocommerce form .form-row textarea:focus,
body.wz-ds .woocommerce form .form-row select:focus {
  outline: none; border-color: var(--wz-brand);
  box-shadow: 0 0 0 1px var(--wz-brand), 0 0 0 4px var(--wz-brand-dim) !important;
}

/* ---- Avvisi: barra di stato a sinistra, niente fondi urlati ------------- */
body.wz-ds:not(.wz-plancia) .woocommerce-info,
body.wz-ds:not(.wz-plancia) .woocommerce-message,
body.wz-ds:not(.wz-plancia) .woocommerce-error {
  background: var(--wz-surface); border: 1px solid var(--wz-line);
  border-left: 2px solid var(--wz-line); border-radius: var(--wz-r-md);
  color: var(--wz-ink); padding: 12px 14px;
}
body.wz-ds:not(.wz-plancia) .woocommerce-info    { border-left-color: var(--wz-brand); }
body.wz-ds:not(.wz-plancia) .woocommerce-message { border-left-color: var(--wz-ok); }
body.wz-ds:not(.wz-plancia) .woocommerce-error   { border-left-color: var(--wz-error); }

/* ==========================================================================
   Header fisso: conservare l'ingombro
   Il tema, appena si scrolla di 1px, aggiunge `.is-fixed` al contenitore
   dell'header e ne AZZERA l'altezza (`style.css`: `.sticky-header
   .no-header-transparent .site-header-wrapper.is-fixed { height: 0 }`).
   Il contenuto risale sotto l'header fisso e la parte alta della pagina
   viene tagliata. Qui l'ingombro resta (misura da wz-chrome.js).
   ========================================================================== */
body.wz-ds.sticky-header .site-header-wrapper.is-fixed,
body.wz-ds.sticky-header.no-header-transparent .site-header-wrapper.is-fixed {
  height: var(--wz-headerh, 76px);
}

/* --------------------------------------------------------------------------
   Se il JS del tema non parte, la testa della pagina sparisce
   `onepress/style.css`: `.sticky-header #page > .site-header { position: fixed }`.
   Lo spazio sotto l'header lo riserva un contenitore che **crea il JavaScript**
   (`theme.js` avvolge l'header in `.site-header-wrapper`). Se quel JS non gira
   — errore, blocco, caricamento lento — l'header resta fisso senza nessuno
   spazio riservato e copre i primi 75px di contenuto (la fascia del wizard,
   il titolo di pagina…). Qui: niente contenitore, niente header fisso.
   -------------------------------------------------------------------------- */
body.wz-ds.sticky-header:not(:has(.site-header-wrapper)) #page > .site-header {
  position: relative; top: auto;
}