/*
Theme Name: Green Diamant
Description: Tema WordPress standalone per greendiamant.com. Header/footer hardcoded, Home via ACF Pro (o versione statica senza ACF), News via template WordPress nativi.
Version: 1.0.0
Text Domain: greendiamant
Requires PHP: 7.4
*/

/* ==========================================================================
   MINI-RESET — equivalente mirato del "preflight" di Tailwind (disattivato
   apposta, vedi tailwind.config.js, per non entrare in conflitto col resto
   di questo file). Senza preflight il browser applica i SUOI stili di default
   su bottoni, link, heading, box-sizing: qui li azzeriamo esplicitamente
   prima di tutto il resto, così le utility class Tailwind partono da una
   base pulita identica a quella dell'originale.
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

/*
 * Fallback per le variabili CSS composte di Tailwind (transform, backdrop-filter, ecc.).
 * Normalmente le dichiara "@tailwind base" (qui omesso, vedi sopra): senza un valore di
 * default, una var() che punta a una custom property MAI dichiarata è "invalida al momento
 * del calcolo" e invalida l'INTERA proprietà che la usa — non solo quel pezzo. Risultato reale
 * riscontrato: .backdrop-blur-xl componeva "backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) ..."
 * e con --tw-backdrop-brightness (e gli altri --tw-backdrop-*) mai dichiarati da nessuna parte,
 * l'intero backdrop-filter veniva scartato dal browser: il pannello menu mobile non ha MAI
 * sfocato lo sfondo sottostante, a prescindere dal valore di opacità. Stesso rischio per
 * "transform" (usato da group-hover:scale-105/125 sulle card prodotto), che compone anche
 * --tw-translate-x/y, --tw-rotate, --tw-skew-x/y insieme a --tw-scale-x/y.
 *
 * Stesso identico bug, stavolta su "background-image": gli overlay a gradiente (es. hero,
 * "bg-gradient-to-r from-void from-30% via-void/85 to-void/20") compongono
 * "linear-gradient(to right, var(--tw-gradient-stops))" dove --tw-gradient-stops referenzia
 * a sua volta var(--tw-gradient-via-position) e var(--tw-gradient-to-position). "via-*" e
 * "to-*" NON dichiarano mai queste due variabili posizionali (solo "from-*" dichiara la
 * propria "--tw-gradient-from-position"), quindi restavano indefinite ovunque nel foglio di
 * stile: l'intero background-image veniva scartato e il gradiente non appariva affatto, non
 * sfumato — proprio invisibile. Valori presi 1:1 da quelli che Tailwind stesso dichiara nel
 * layer "base" (qui disattivato) per queste tre variabili.
 */
*,
*::before,
*::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* compensa l'header fixed, così le ancore non ci finiscono sotto */
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: inherit;
  appearance: none;
}
button {
  cursor: pointer;
}

/* ==========================================================================
   Variabili di brand — estratte dal sito originale (greendiamant.com)
   ========================================================================== */
:root {
  --gd-bg: #0a0a0a; /* sfondo scuro principale (body/footer) */
  --gd-accent: #008542; /* verde brand (CTA, accenti, theme-color) — invariato nei due temi */
  --gd-text: #ffffff;
  --gd-text-muted: rgba(255, 255, 255, 0.65);
  --gd-border: rgba(255, 255, 255, 0.12);
  --gd-header-scrolled-bg: rgba(10, 10, 10, 0.92);
  --gd-card-bg: rgba(255, 255, 255, 0.02);
  --gd-font-heading: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --gd-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --gd-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

/*
 * Tema chiaro — attivato aggiungendo data-theme="light" su <html>
 * (toggle gestito da assets/js/custom.js, preferenza salvata in localStorage).
 * Replica il toggle ☀ presente nella navbar del sito originale, al posto delle
 * pagine separate "Home Light"/"News Light".
 */
html[data-theme="light"] {
  --gd-bg: #ffffff;
  --gd-text: #0a0a0a;
  --gd-text-muted: rgba(10, 10, 10, 0.65);
  --gd-border: rgba(10, 10, 10, 0.12);
  --gd-header-scrolled-bg: rgba(255, 255, 255, 0.92);
  --gd-card-bg: rgba(10, 10, 10, 0.02);
}

/* ==========================================================================
   Tema chiaro — override mirati delle classi Tailwind hardcoded usate nei
   template (bg-void, text-white, border-silver, ecc.). Necessari perché il
   clone usa le classi letterali dell'originale (sempre scure) invece di
   variabili CSS: qui le "ribaltiamo" solo quando data-theme="light" è attivo.
   L'accento verde (emerald-brand) resta identico in entrambi i temi.
   ========================================================================== */
html[data-theme="light"] .bg-void {
  background-color: #ffffff;
}
html[data-theme="light"] .bg-void\/95 {
  background-color: rgba(255, 255, 255, 0.95);
}
html[data-theme="light"] .bg-void\/\[0\.85\] {
  background-color: rgba(255, 255, 255, 0.85);
}
html[data-theme="light"] .bg-void\/50 {
  background-color: #ffffff;
}
html[data-theme="light"] .border-silver\/10 {
  border-color: rgba(10, 10, 10, 0.1);
}
html[data-theme="light"] .border-silver\/15 {
  border-color: rgba(10, 10, 10, 0.15);
}
html[data-theme="light"] .border-silver\/20 {
  border-color: rgba(10, 10, 10, 0.2);
}
html[data-theme="light"] .border-silver\/30 {
  border-color: rgba(10, 10, 10, 0.3);
}
html[data-theme="light"] .border-white\/20 {
  border-color: rgba(10, 10, 10, 0.15);
}
html[data-theme="light"] .text-white {
  color: #0a0a0a;
}
html[data-theme="light"] .text-white\/20 {
  color: rgba(10, 10, 10, 0.2);
}
html[data-theme="light"] .text-white\/30 {
  color: rgba(10, 10, 10, 0.3);
}
html[data-theme="light"] .text-white\/40 {
  color: rgba(10, 10, 10, 0.4);
}
html[data-theme="light"] .text-white\/50 {
  color: rgba(10, 10, 10, 0.5);
}
html[data-theme="light"] .text-white\/60 {
  color: rgba(10, 10, 10, 0.6);
}
html[data-theme="light"] .text-white\/70 {
  color: rgba(10, 10, 10, 0.7);
}
html[data-theme="light"] .text-white\/80 {
  color: rgba(10, 10, 10, 0.8);
}
html[data-theme="light"] .bg-white\/\[0\.02\] {
  background-color: rgba(10, 10, 10, 0.03);
}

/* Card Performance ("Perché Green Diamant"): nel markup queste card non hanno
   MAI una classe di sfondo (solo "border border-silver/10"), quindi restano
   trasparenti e si confondono col fondo sezione. Sul sito originale, in tema
   chiaro, le card hanno sfondo bianco pieno che le stacca dal fondo sezione
   (leggermente grigio per via di performance_bg_image a opacity-10) — verificato
   su screenshot dal vivo. Il bordo è già corretto tramite l'override
   .border-silver\/10 qui sopra: qui serve solo il background. */
html[data-theme="light"] .gd-scale-in--performance {
  background-color: #ffffff;
}

/* Sottotitolo "& Philosophy" (sezione Chi Siamo): sul sito originale in tema
   chiaro non è semplicemente bianco/30 (che darebbe un grigio troppo scuro),
   è un grigio più chiaro e preciso — colore campionato pixel-per-pixel dallo
   screenshot dal vivo. Applicata insieme a "text-white/30" (che resta invariata
   in tema scuro): questa regola, dichiarata dopo l'override generico di
   .text-white\/30 qui sopra, vince per ordine nel foglio di stile. */
html[data-theme="light"] .gd-about-subtitle {
  color: #d2d5db;
}

/* Info aziendali (Chi Siamo) e campi del form contatti: nel markup hanno solo
   "border border-silver/15", mai una classe di sfondo. Sul sito originale, in
   tema chiaro, hanno un riempimento grigio molto chiaro (la sezione intorno è
   bianca, quindi qui serve un fondo leggermente più scuro del bianco per farle
   risaltare — il contrario delle card Performance/Sostenibilità, che stanno su
   una sezione già grigia e quindi sono bianche piene). Valore verificato su
   screenshot dal vivo. */
html[data-theme="light"] .gd-about-info-item,
html[data-theme="light"] .gd-cf7-field {
  background-color: #f9fafb;
}

/* Sezione Sostenibilità ("Green Work"): sfondo leggermente grigio invece di
   bianco pieno, come sul sito originale — stesso trattamento della sezione
   Performance. Selettore per ID (#green-work) apposta: vince sempre su
   ".bg-void" indipendentemente dall'ordine nel foglio di stile. */
html[data-theme="light"] #green-work {
  background-color: #f9fafb;
}

/* Card Sostenibilità: sfondo bianco pieno per staccare dal fondo sezione
   grigio qui sopra — stesso trattamento delle card Performance, stesso motivo. */
html[data-theme="light"] .gd-fade-in--sustainability {
  background-color: #ffffff;
}

/* Footer: sullo stesso grigio chiaro delle altre superfici "card" del sito
   originale, invece del bianco pieno che eredita ora da var(--gd-bg).
   NOTA: il <footer> reale in footer.php usa le utility Tailwind dirette
   (bg-void border-t border-silver/10), non la classe ".gd-footer" che esiste
   solo nel CSS semantico legacy/non usato piu' in basso in questo file —
   quella regola quindi non aveva mai avuto effetto. Uso invece la nuova
   classe "gd-footer-surface" aggiunta apposta al tag <footer>. */
html[data-theme="light"] .gd-footer-surface {
  background-color: #f9fafb;
}



/* ==========================================================================
   Bug di specificità CSS trovato controllando /light e /light/news del sito
   originale: i bottoni/card restavano con bordo grigio all'hover invece di
   diventare verdi. Causa: i selettori sopra (html[data-theme="light"] .classe)
   hanno più "peso" (specificità) delle semplici utility hover di Tailwind
   (.hover\:X:hover), quindi vincevano ANCHE durante l'hover, bloccando il
   verde. Le regole qui sotto hanno selettori ancora più specifici apposta,
   per vincere sempre e ripristinare l'hover verde in tema chiaro — verificato
   che sul sito originale l'hover è lo stesso verde in entrambi i temi.
   ========================================================================== */
html[data-theme="light"] .hover\:bg-emerald-brand\/90:hover {
  background-color: rgba(0, 133, 66, 0.9);
}
html[data-theme="light"] .hover\:border-emerald-brand:hover {
  border-color: #008542;
}
html[data-theme="light"] .hover\:border-emerald-brand\/30:hover {
  border-color: rgba(0, 133, 66, 0.4);
} /* /light usa 0.4, non 0.3 come /dark: verificato dal vivo */
html[data-theme="light"] .hover\:border-emerald-brand\/40:hover {
  border-color: rgba(0, 133, 66, 0.4);
}
html[data-theme="light"] .hover\:text-emerald-brand:hover {
  color: #008542;
}
/* Varianti group-hover (tag pill e icona freccia dentro le card prodotto,
   attivate dall'hover sulla card genitore con classe "group") */
html[data-theme="light"] .group:hover .group-hover\:border-emerald-brand\/40 {
  border-color: rgba(0, 133, 66, 0.4);
}
html[data-theme="light"] .group:hover .group-hover\:text-emerald-brand {
  color: #008542;
}
/* bg-black e bg-black/60 (contenitori foto, badge categoria) restano scuri in
   entrambi i temi: sono un trattamento fotografico, non un colore di sfondo pagina.
   ECCEZIONE: il pannello Processo (dentro #about) non è una foto, è un pannello UI —
   in tema chiaro diventa chiaro anche lui, colore "card" esatto dall'handoff ufficiale. */
html[data-theme="light"] .gd-process-panel-bg {
  background-color: #f9fafb;
  background-image:
    repeating-linear-gradient(90deg, #eef3f0 0px, #eef3f0 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(0deg, #eef3f0 0px, #eef3f0 1px, transparent 1px, transparent 40px);
}

/* Card categorie prodotto (Catalogo Prodotti): badge codice (EDGE/FLEX/MATCH/...)
   bianco con ombra e testo verde pieno, invece del bg-black/60 fisso da tema scuro. */
html[data-theme="light"] .gd-cat-badge {
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  color: #008542;
}

/* Sfondo della card prodotto: stesso grigio chiarissimo del footer, invece del
   bg-white/[0.02] quasi trasparente pensato per il tema scuro. */
html[data-theme="light"] .gd-fade-in--products {
  background-color: #f9fafb;
}

/* Selettore lingua (plugin GTranslate, shortcode [gtranslate]): il colore del testo
   della lingua attualmente selezionata (.gt_selected a) e' impostato via CSS iniettato
   dinamicamente dal JS del plugin (switcher_text_color nelle impostazioni, fisso e non
   theme-aware). Qui lo forziamo via CSS con specificita' piu' alta, solo in tema chiaro. */
html[data-theme="light"] .gtranslate_wrapper .gt_switcher .gt_selected a {
  color: rgb(107, 114, 128) !important;
}
/* Il bordo del cerchio numero e la linea verticale usano var(--gd-accent)/border-silver
   già gestiti altrove; qui serve solo scurire il testo bianco fisso non coperto dagli
   override generali perché specifico a questo pannello (numero non attivo, bianco/60). */
html[data-theme="light"] .gd-process-panel-bg [data-gd-process-number] {
  color: rgba(10, 10, 10, 0.6);
}

/* Eccezione: il testo bianco sui bottoni verdi (CTA con bg-emerald-brand) resta
   bianco anche in tema chiaro — serve per il contrasto sul bottone colorato,
   non è testo "di pagina". */
html[data-theme="light"] .bg-emerald-brand.text-white {
  color: #ffffff;
}

/* Gradiente overlay hero: usa utility "from-void/via-void/to-void" separate da
   "bg-void", vanno ribaltate a parte per non restare scure in tema chiaro. */
html[data-theme="light"] .from-void {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="light"] .via-void\/85 {
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
    var(--tw-gradient-from),
    rgba(255, 255, 255, 0.85) var(--tw-gradient-via-position),
    var(--tw-gradient-to);
}
html[data-theme="light"] .to-void\/20 {
  --tw-gradient-to: rgba(255, 255, 255, 0.2) var(--tw-gradient-to-position);
}

/* Transizione morbida tra i due temi, invece di uno scatto secco */
body {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

body {
  background-color: var(--gd-bg);
  color: var(--gd-text);
  font-family: var(--gd-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--gd-font-heading);
  font-weight: 800;
  color: var(--gd-text);
}

a {
  color: inherit;
}

/* Bottone stile "Preventivo" (CTA verde, come da sito originale) */
.gd-btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--gd-accent);
  color: #ffffff;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.gd-btn-cta:hover {
  opacity: 0.85;
}

/* ==========================================================================
   Form contatti — Contact Form 7 (sezione #contatti della Home). Il markup a
   "caselle bordate con mini-label mono" (vedi gd_cf7_create_default_form() in
   functions.php) usa le utility Tailwind del tema per il wrapper di ogni campo,
   ma l'<input>/<textarea>/<button> generato da CF7 riceve una sola classe
   custom per ciascun tipo — le utility Tailwind con ":"/"/" dentro non sono
   affidabili dentro ai tag CF7 — stilizzata qui per riottenere lo stesso
   risultato visivo del form statico originale.
   ========================================================================== */
.gd-cf7-input {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--gd-text);
  font-family: var(--gd-font-body);
  font-size: 0.875rem;
  line-height: 1.5;
}
/* Niente anello di focus del browser sui campi del form contatti (richiesto
   esplicitamente): il bordo della casella (gia' visibile di suo, vedi
   .gd-cf7-field) resta l'unico indicatore visivo quando un campo e' attivo. */
.gd-cf7-input:focus {
  outline: none;
}
.gd-cf7-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
html[data-theme="light"] .gd-cf7-input::placeholder {
  color: rgba(10, 10, 10, 0.2);
}
textarea.gd-cf7-input {
  resize: none;
}
.gd-cf7-field .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--gd-font-mono);
  font-size: 0.65rem;
  color: #ff6b6b;
}
.gd-cf7-acceptance {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}
.gd-cf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0;
}
.gd-cf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}
/*
 * Checkbox di accettazione privacy: il reset globale sopra (border-width:0 su
 * ogni elemento) toglie anche il bordo nativo della checkbox, che quindi
 * risultava invisibile su sfondo scuro (restava solo il quadratino, senza
 * contorno, praticamente impercettibile). Qui si ridisegna a mano con
 * appearance:none, cosi' il bordo (sempre visibile) e il segno di spunta al
 * click sono garantiti in ogni browser, senza dipendere dal rendering nativo.
 * Bordo portato a opacita' 0.6 (prima 0.5rem/0.35 risultava comunque troppo
 * tenue su nero pieno) + un leggero fondo quando non selezionata, cosi' il
 * quadratino si riconosce a colpo d'occhio anche senza zoomare.
 */
.gd-cf7-acceptance input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin-top: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
html[data-theme="light"] .gd-cf7-acceptance input[type="checkbox"] {
  background: rgba(10, 10, 10, 0.03);
  border-color: rgba(10, 10, 10, 0.5);
}
.gd-cf7-acceptance input[type="checkbox"]:checked {
  background: var(--gd-accent);
  border-color: var(--gd-accent);
}
.gd-cf7-acceptance input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Niente anello di focus del browser (richiesto esplicitamente): il cambio
   di colore del bordo al passaggio/selezione resta l'unico feedback visivo. */
.gd-cf7-acceptance input[type="checkbox"]:focus {
  outline: none;
}
.gd-cf7-acceptance .wpcf7-list-item-label {
  font-family: var(--gd-font-mono);
  font-size: 0.65rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.4);
}
html[data-theme="light"] .gd-cf7-acceptance .wpcf7-list-item-label {
  color: rgba(10, 10, 10, 0.4);
}
.gd-cf7-acceptance a {
  color: var(--gd-accent);
}
.gd-cf7-acceptance a:hover {
  text-decoration: underline;
}
.gd-cf7-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  background-color: var(--gd-accent);
  color: #ffffff;
  padding: 1rem 0;
  font-family: var(--gd-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: background-color 0.15s ease;
}
.gd-cf7-submit:hover {
  background-color: rgba(0, 133, 66, 0.9);
}
.gd-cf7-submit:focus {
  outline: none;
}
/*
 * Stato disabilitato: il bottone resta disabilitato finche' la checkbox privacy
 * non e' spuntata (vedi assets/js/custom.js). Niente hover ne' cursore "pointer"
 * mentre e' disabilitato, cosi' e' chiaro che non e' cliccabile.
 */
.gd-cf7-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.wpcf7-response-output {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--gd-border);
  font-family: var(--gd-font-mono);
  font-size: 0.7rem;
  color: var(--gd-text-muted);
}
.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--gd-accent);
  color: var(--gd-accent);
}
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

/* ==========================================================================
   Header / Nav — gli stili visivi sono classi Tailwind dirette nel markup
   (vedi header.php); qui resta solo ciò che non può essere una utility class.
   ========================================================================== */

/* Voce di menu corrispondente alla pagina corrente (classe aggiunta dal
   walker custom in functions.php quando WordPress marca l'item come "current").
   Selettore raddoppiato per vincere sulle utility Tailwind (es. text-white/60)
   applicate sullo stesso link, indipendentemente dall'ordine dei fogli di stile. */
.is-active.is-active {
  color: var(--gd-accent);
}

/* L'icona (☀/🌙) viene impostata da assets/js/custom.js in base al tema attivo. */

/* ==========================================================================
   Menu mobile — pannello a schermo intero, valori verificati nel bundle
   sorgente dell'originale: fade 300ms sul pannello, stagger 80ms tra i link.
   Nascosto di default con opacity+pointer-events (non "hidden" di Tailwind,
   per poterlo controllare via classe JS senza il rischio di conflitti di
   specificità già visti altrove in questo tema).
   ========================================================================== */
.gd-mobile-menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.gd-mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.gd-mobile-menu__link {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.gd-mobile-menu.is-open .gd-mobile-menu__link {
  opacity: 1;
  transform: translateY(0);
}
.gd-mobile-menu__link:nth-child(1) {
  transition-delay: 0ms;
}
.gd-mobile-menu__link:nth-child(2) {
  transition-delay: 80ms;
}
.gd-mobile-menu__link:nth-child(3) {
  transition-delay: 160ms;
}
.gd-mobile-menu__link:nth-child(4) {
  transition-delay: 240ms;
}
.gd-mobile-menu__link:nth-child(5) {
  transition-delay: 320ms;
}
.gd-mobile-menu__link:nth-child(6) {
  transition-delay: 400ms;
}
.gd-mobile-menu__link:nth-child(7) {
  transition-delay: 480ms;
}
/* Blocca lo scroll della pagina sotto quando il menu mobile è aperto */
body.gd-mobile-menu-open {
  overflow: hidden;
}

/* Logo — due varianti sempre presenti nell'HTML (vedi gd_the_logo() in
   functions.php), il CSS mostra quella giusta in base al tema attivo.
   Classi custom dedicate (non la utility Tailwind "hidden") per evitare lo
   stesso tipo di conflitto di specificità già risolto altrove nel tema. */
.gd-logo--light {
  display: none;
}
.gd-logo--dark {
  display: block;
}
html[data-theme="light"] .gd-logo--dark {
  display: none;
}
html[data-theme="light"] .gd-logo--light {
  display: block;
}

/* Toggle generico dark/light: stesso pattern di .gd-logo--dark/--light qui sopra
   ("stampa sempre entrambe le varianti nel markup, decide il CSS"), ma
   riusabile per qualunque coppia di elementi dark/light — per esempio le icone
   categoria del Catalogo Prodotti (category_icon / category_icon_light in ACF). */
.gd-theme-img--light {
  display: none;
}
.gd-theme-img--dark {
  display: block;
}
html[data-theme="light"] .gd-theme-img--dark {
  display: none;
}
html[data-theme="light"] .gd-theme-img--light {
  display: block;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.gd-footer {
  background-color: var(--gd-bg);
  border-top: 1px solid var(--gd-border);
  padding: 4rem 2rem 1.5rem;
}
.gd-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
}
.gd-footer__columns {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--gd-border);
}
.gd-footer__brand p {
  color: var(--gd-text-muted);
  font-size: 0.9rem;
  margin-top: 1rem;
  max-width: 320px;
}
.gd-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 1rem;
}
.gd-footer__nav a {
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--gd-text-muted);
  text-transform: uppercase;
  font-weight: 600;
}
.gd-footer__col p {
  font-size: 0.85rem;
  color: var(--gd-text-muted);
  margin: 0.25rem 0;
}
.gd-footer__col p:first-child {
  color: var(--gd-text);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.gd-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--gd-text-muted);
}
.gd-footer__bottom-links a {
  margin-left: 1.25rem;
  text-decoration: none;
  color: var(--gd-text-muted);
}

/* ==========================================================================
   News (archive.php / single.php) — NON gestito da Elementor
   ========================================================================== */
.gd-news-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8rem 2rem 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}
.gd-news-card {
  border: 1px solid var(--gd-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--gd-card-bg);
}
.gd-news-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.gd-news-card__body {
  padding: 1.25rem;
}
.gd-news-card__body h2 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}
.gd-news-card__body a {
  text-decoration: none;
}
.gd-news-single {
  max-width: 800px;
  margin: 0 auto;
  padding: 8rem 2rem 4rem;
}
.gd-news-single img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 2rem;
}

/* ==========================================================================
   Homepage — sezioni, ricostruite dal sito originale (page-templates/template-home.php)
   ========================================================================== */
.gd-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;
}
.gd-section--dark {
  background-color: var(--gd-card-bg);
  max-width: none;
}
.gd-section--dark > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.gd-kicker {
  color: var(--gd-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.gd-section__title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 2.5rem;
}
.gd-section__intro {
  max-width: 640px;
  color: var(--gd-text-muted);
  margin-bottom: 2.5rem;
}
.gd-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--gd-border);
  color: var(--gd-text);
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.gd-btn-outline:hover {
  border-color: var(--gd-accent);
}

/* --- Hero --- */
.gd-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 2rem 4rem;
  background-size: cover;
  background-position: center;
  position: relative;
}
.gd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  z-index: 0;
}
.gd-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
.gd-eyebrow {
  color: var(--gd-accent);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.gd-hero__title {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.gd-hero__title .gd-accent {
  color: var(--gd-accent);
}
.gd-hero__desc {
  max-width: 560px;
  color: var(--gd-text-muted);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}
.gd-hero__actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 4rem;
}
.gd-hero__stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
.gd-stat__number {
  display: block;
  font-family: var(--gd-font-heading);
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--gd-accent);
}
.gd-stat__label {
  font-size: 0.8rem;
  color: var(--gd-text-muted);
  text-transform: uppercase;
}

/* --- Prodotti: accordion verticale (una voce aperta alla volta) --- */
.gd-accordion {
  border-top: 1px solid var(--gd-border);
}
.gd-accordion-item {
  border-bottom: 1px solid var(--gd-border);
}
.gd-accordion-item__header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--gd-text);
}
.gd-accordion-item__thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--gd-card-bg);
}
.gd-accordion-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gd-accordion-item__label {
  font-family: var(--gd-font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  flex: 1;
}
.gd-accordion-item__chevron {
  transition: transform 0.3s ease;
  color: var(--gd-accent);
  flex-shrink: 0;
}
.gd-accordion-item.is-open .gd-accordion-item__chevron {
  transform: rotate(180deg);
}
.gd-accordion-item__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.gd-accordion-item__panel-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
}
.gd-accordion-item__image {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--gd-card-bg);
}
.gd-accordion-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gd-accordion-item__code {
  display: inline-block;
  color: var(--gd-accent);
  font-weight: 800;
  font-family: var(--gd-font-heading);
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.gd-accordion-item__tags {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.gd-accordion-item__tags li {
  font-size: 0.75rem;
  border: 1px solid var(--gd-border);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  color: var(--gd-text-muted);
}

/* ==========================================================================
   Pannello Processo — avanzamento reale via requestAnimationFrame, verificato
   leggendo il bundle JS sorgente dell'originale (non stimato): opacità riga
   (1 attivo / 0.5 completato / 0.25 in attesa), colore bordo, contenuto
   numero/spunta e larghezza/altezza delle barre sono impostati direttamente
   come stile inline da assets/js/custom.js — qui restano solo transizioni
   morbide per bordo/opacità così i cambi di stato non sono di scatto.
   ========================================================================== */
[data-gd-process-row] {
  transition: opacity 0.3s ease;
}
[data-gd-process-circle] {
  transition: border-color 0.4s ease;
}
[data-gd-process-icon] {
  transition: opacity 0.3s ease;
}

/* --- Performance --- */
.gd-performance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}
.gd-performance-item__value {
  display: block;
  font-family: var(--gd-font-heading);
  font-weight: 800;
  font-size: 2.75rem;
  color: var(--gd-accent);
}
.gd-performance-item__label {
  display: block;
  font-weight: 700;
  margin-top: 0.5rem;
}
.gd-performance-item__sublabel {
  display: block;
  font-size: 0.8rem;
  color: var(--gd-text-muted);
}

/* --- Chi siamo --- */
.gd-about {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
}
.gd-about__body p {
  color: var(--gd-text-muted);
  margin-bottom: 1rem;
}
.gd-about__info-row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gd-border);
  font-size: 0.85rem;
}
.gd-about__info-label {
  color: var(--gd-text-muted);
  text-transform: uppercase;
  font-size: 0.75rem;
}
.gd-about__info-value {
  font-family: var(--gd-font-heading);
  font-weight: 700;
}

/* --- Sostenibilità --- */
.gd-sustainability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.gd-sustainability-item {
  border: 1px solid var(--gd-border);
  border-radius: 16px;
  padding: 1.75rem;
}
.gd-sustainability-item p {
  color: var(--gd-text-muted);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* --- Contatti --- */
.gd-contact {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
}
.gd-contact__info p {
  margin-bottom: 1.25rem;
  color: var(--gd-text-muted);
}
.gd-contact__info strong {
  display: block;
  color: var(--gd-text);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.gd-contact__downloads {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ==========================================================================
   Animazioni — valori estratti dal bundle sorgente originale (Framer Motion),
   cercando i pattern initial/animate/whileInView/transition nel file JS
   pubblico, non stimati a occhio. Ogni sezione ha parametri leggermente
   diversi verificati singolarmente.
   ========================================================================== */

/* Cutting-line — pattern di sottili linee verticali di sfondo sull'hero,
   valori esatti dall'handoff WordPress ufficiale del cliente (prima era
   omesso: non ricostruibile da computed style). */
.cutting-line {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(51, 51, 51, 0.15) 0px,
    rgba(51, 51, 51, 0.15) 0.5px,
    transparent 0.5px,
    transparent calc(100% / 12)
  );
}

/* Hero: si anima al mount (non allo scroll, essendo above-the-fold) —
   initial:{opacity:0,y:40}, animate:{opacity:1,y:0},
   transition:{duration:.8, ease:[.16,1,.3,1]}
   NOTA specificità: selettore raddoppiato (.gd-fade-in--hero.gd-fade-in--hero)
   apposta — alcuni elementi hanno anche utility Tailwind tipo "transition-colors"
   che, caricate DOPO questo file, altrimenti sovrascriverebbero silenziosamente
   la nostra transition-property (bug reale riscontrato: card senza animazione). */
.gd-fade-in--hero.gd-fade-in--hero {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.gd-fade-in--hero.gd-fade-in--hero.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Card Catalogo Prodotti: whileInView, viewport once + margin -50px —
   whileInView:{opacity:1,y:0}, transition:{duration:.6, delay: i*.1} */
.gd-fade-in--products.gd-fade-in--products {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}
.gd-fade-in--products.gd-fade-in--products.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.grid > .gd-fade-in--products:nth-child(1) {
  transition-delay: 0ms;
}
.grid > .gd-fade-in--products:nth-child(2) {
  transition-delay: 100ms;
}
.grid > .gd-fade-in--products:nth-child(3) {
  transition-delay: 200ms;
}
.grid > .gd-fade-in--products:nth-child(4) {
  transition-delay: 300ms;
}
.grid > .gd-fade-in--products:nth-child(5) {
  transition-delay: 400ms;
}

/* Voci Sostenibilità: whileInView, viewport once (senza margin) —
   whileInView:{opacity:1,y:0}, transition:{duration:.5, delay: i*.1} */
.gd-fade-in--sustainability.gd-fade-in--sustainability {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s ease-out;
}
.gd-fade-in--sustainability.gd-fade-in--sustainability.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.grid > .gd-fade-in--sustainability:nth-child(1) {
  transition-delay: 0ms;
}
.grid > .gd-fade-in--sustainability:nth-child(2) {
  transition-delay: 100ms;
}
.grid > .gd-fade-in--sustainability:nth-child(3) {
  transition-delay: 200ms;
}
.grid > .gd-fade-in--sustainability:nth-child(4) {
  transition-delay: 300ms;
}

/* Card Performance: whileInView, viewport once (senza margin) — MA non è un
   fade-up come le altre sezioni: è uno scale-in.
   initial:{opacity:0,scale:.95}, whileInView:{opacity:1,scale:1},
   transition:{duration:.5, delay: c*.1} */
.gd-scale-in--performance.gd-scale-in--performance {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s ease-out;
}
.gd-scale-in--performance.gd-scale-in--performance.is-visible {
  opacity: 1;
  transform: scale(1);
}
.grid > .gd-scale-in--performance:nth-child(1) {
  transition-delay: 0ms;
}
.grid > .gd-scale-in--performance:nth-child(2) {
  transition-delay: 100ms;
}
.grid > .gd-scale-in--performance:nth-child(3) {
  transition-delay: 200ms;
}
.grid > .gd-scale-in--performance:nth-child(4) {
  transition-delay: 300ms;
}

/* Chi Siamo — colonna testo (sinistra, INCLUSA la griglia info: sono nello
   stesso motion.div, non due blocchi separati — correzione rispetto a una
   versione precedente che li aveva sdoppiati per errore):
   initial:{opacity:0,x:-20}, whileInView:{opacity:1,x:0}, transition:{duration:.7} */
.gd-slide-in--left.gd-slide-in--left {
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out;
}
.gd-slide-in--left.gd-slide-in--left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Chi Siamo — pannello Processo (destra): scorre da destra con un piccolo
   ritardo — initial:{opacity:0,x:20}, whileInView:{opacity:1,x:0},
   transition:{duration:.7, delay:.2} */
.gd-slide-in--right.gd-slide-in--right {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 0.7s ease-out 0.2s,
    transform 0.7s ease-out 0.2s;
}
.gd-slide-in--right.gd-slide-in--right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Contatti — colonna info (sinistra): stesso schema orizzontale di Chi Siamo
   ma con durata diversa — initial:{opacity:0,x:-20},
   whileInView:{opacity:1,x:0}, transition:{duration:.6} */
.gd-slide-in--left-fast.gd-slide-in--left-fast {
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}
.gd-slide-in--left-fast.gd-slide-in--left-fast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Contatti — colonna form (destra): initial:{opacity:0,x:20},
   whileInView:{opacity:1,x:0}, transition:{duration:.6, delay:.2} */
.gd-slide-in--right-fast.gd-slide-in--right-fast {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 0.6s ease-out 0.2s,
    transform 0.6s ease-out 0.2s;
}
.gd-slide-in--right-fast.gd-slide-in--right-fast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fallback generico per sezioni non ancora verificate puntualmente nel bundle:
   stessi valori "cards" come stima ragionevole, DA VERIFICARE quando
   affronteremo quella sezione nel dettaglio. */
.gd-fade-in.gd-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}
.gd-fade-in.gd-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .gd-header__nav {
    display: none;
  } /* da sostituire con menu mobile via JS */
  .gd-footer__columns {
    grid-template-columns: 1fr;
  }
  .gd-about,
  .gd-contact {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   News — contenuto articolo (single.php) e paginazione (archive.php).
   Le immagini nei blocchi Gutenberg replicano lo <figure class="my-6"><img
   class="w-full border border-silver/20"></figure> verificato sul sito reale.
   Gli altri blocchi (paragrafo, heading, citazione, separatore) non erano
   presenti nell'unico articolo pubblicato al momento della scansione: stile
   di base ragionevole, coerente col resto del tema, non verificato puntualmente.
   ========================================================================== */
.gd-news-content p {
  color: var(--gd-text-muted);
  font-family: var(--gd-font-body);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}
.gd-news-content h2,
.gd-news-content h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.gd-news-content figure,
.gd-news-content .wp-block-image {
  margin: 1.5rem 0;
}
.gd-news-content img {
  width: 100%;
  border: 1px solid var(--gd-border);
}
.gd-news-content figcaption {
  margin-top: 0.5rem;
  font-family: var(--gd-font-mono);
  font-size: 0.75rem;
  color: var(--gd-text-muted);
  text-align: center;
}
.gd-news-content blockquote {
  border-left: 2px solid var(--gd-accent);
  padding-left: 1.5rem;
  margin: 2rem 0;
  color: var(--gd-text);
  font-style: italic;
}
.gd-news-content hr {
  border-color: var(--gd-border);
  margin: 2rem 0;
}
.gd-news-content a {
  color: var(--gd-accent);
  text-decoration: underline;
}

/* Paginazione News (the_posts_pagination) */
.pagination,
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.page-numbers {
  font-family: var(--gd-font-mono);
  font-size: 0.75rem;
  color: var(--gd-text-muted);
  border: 1px solid var(--gd-border);
  padding: 0.5rem 0.9rem;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}
.page-numbers:hover,
.page-numbers.current {
  border-color: var(--gd-accent);
  color: var(--gd-accent);
}