/* =========================================================================
   Digital Muffin — token del brand.

   Questo file e la traduzione uno-a-uno di theme.json del tema a blocchi.
   E l'unico posto dove vivono colori, corpi testo e spaziature: se il brand
   cambia un colore, si cambia qui e si aggiorna tutto il sito.

   Gli stessi valori sono anche nei "Colori globali" e "Font globali" di
   Elementor (Impostazioni sito), cosi chi lavora nell'editor visuale trova
   solo la palette del brand.
   ========================================================================= */

/* ---------- Font self-hosted. Nessuna chiamata al CDN di Google. ---------- */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-700.woff2') format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url('fonts/poppins-800.woff2') format('woff2')}
@font-face{font-family:Allura;font-style:normal;font-weight:400;font-display:swap;src:url('fonts/allura-400.woff2') format('woff2')}

:root{
  /* --- Colori --- */
  --dm-bianco:#ffffff;
  --dm-nero:#14181b;
  --dm-tiffany:#4fb0c4;
  --dm-tiffany-tenue:#7bcdd8;
  --dm-tiffany-chiaro:#eef9fa;
  --dm-pavone:#0f5070;
  --dm-pavone-scuro:#0a3346;
  --dm-magenta:#d6007a;
  --dm-magenta-scuro:#b5006a;
  --dm-grigio-chiaro:#f4f5f6;
  --dm-grigio-bordo:#e5e7ea;
  --dm-grigio-testo:#5b636b;

  /* --- Corpi testo, fluidi come in theme.json --- */
  --dm-corpo-xs:0.75rem;
  --dm-corpo-piccolo:0.875rem;
  --dm-corpo-base:1rem;
  --dm-corpo-grande:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --dm-corpo-sottotitolo:clamp(1.1875rem,1.1rem + .4vw,1.375rem);
  --dm-corpo-titolo-sezione:clamp(1.75rem,1.4rem + 1.6vw,2.375rem);
  --dm-corpo-titolo-pagina:clamp(2.125rem,1.6rem + 2.4vw,3.25rem);
  --dm-corpo-display:clamp(2.375rem,1.7rem + 3.2vw,3.625rem);

  /* --- Spaziature --- */
  --dm-sp-10:4px;  --dm-sp-20:8px;  --dm-sp-30:12px; --dm-sp-40:16px;
  --dm-sp-50:24px; --dm-sp-60:32px; --dm-sp-70:48px; --dm-sp-80:64px;
  --dm-sp-90:88px; --dm-sp-100:128px;

  /* --- Ombre e movimento --- */
  --dm-ombra-soft:0 1px 2px rgba(20,24,27,.06), 0 1px 1px rgba(20,24,27,.04);
  --dm-ombra-media:0 4px 12px rgba(16,80,112,.10), 0 2px 4px rgba(16,80,112,.06);
  --dm-ombra-alta:0 16px 40px rgba(16,80,112,.16), 0 4px 10px rgba(16,80,112,.08);
  --dm-ease:cubic-bezier(.4,0,.2,1);
  --dm-durata:200ms;

  /* --- Larghezze --- */
  --dm-contenuto:1180px;
  --dm-largo:1440px;
}

/* ---------- Base ---------- */
body{
  font-family:Poppins,system-ui,-apple-system,sans-serif;
  font-size:var(--dm-corpo-base);
  font-weight:400;
  line-height:1.55;
  color:var(--dm-nero);
  background:var(--dm-bianco);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:Poppins,system-ui,-apple-system,sans-serif;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
  color:inherit;
}
h1{font-size:var(--dm-corpo-display);font-weight:800;line-height:1.08}
h2{font-size:var(--dm-corpo-titolo-sezione)}
h3{font-size:var(--dm-corpo-sottotitolo);letter-spacing:0}
h4{font-size:var(--dm-corpo-grande);letter-spacing:0}
h5{font-size:var(--dm-corpo-base);letter-spacing:0}
h6{font-size:var(--dm-corpo-piccolo);letter-spacing:.04em;text-transform:uppercase}

a{color:var(--dm-pavone);text-decoration:none;transition:color var(--dm-durata) var(--dm-ease)}
a:hover{color:var(--dm-magenta)}

/* ---------- Utilita del brand, usabili come classi CSS in Elementor ---------- */
.dm-eyebrow{
  font-size:var(--dm-corpo-xs);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0;
}
.dm-script{font-family:Allura,cursive;line-height:1}
.dm-filo{border-top:2px solid var(--dm-tiffany-tenue);padding-top:var(--dm-sp-40)}

.dm-card{
  background:var(--dm-bianco);
  border:1px solid var(--dm-grigio-bordo);
  border-radius:12px;
  box-shadow:var(--dm-ombra-soft);
  transition:box-shadow var(--dm-durata) var(--dm-ease),transform var(--dm-durata) var(--dm-ease);
}
.dm-card:hover{box-shadow:var(--dm-ombra-media)}

/* Testo su fondi scuri: i link devono restare leggibili.
   Il pavone su nero da 2:1, sotto qualunque soglia. */
.dm-su-scuro a:not(.elementor-button):not(.dm-bottone),
.elementor-element.dm-su-scuro a:not(.elementor-button):not(.dm-bottone){color:var(--dm-tiffany-tenue)}
.dm-su-scuro a:not(.elementor-button):not(.dm-bottone):hover{color:var(--dm-bianco)}

/* ---------- Bottoni ---------- */
.elementor-button{
  font-family:Poppins,system-ui,sans-serif;
  font-weight:600;
  border-radius:999px;
  transition:background-color var(--dm-durata) var(--dm-ease),
             color var(--dm-durata) var(--dm-ease),
             box-shadow var(--dm-durata) var(--dm-ease),
             transform var(--dm-durata) var(--dm-ease);
}
.elementor-button:active{transform:scale(.98)}
.dm-bottone-primario .elementor-button{background:var(--dm-magenta);color:var(--dm-bianco)}
.dm-bottone-primario .elementor-button:hover{background:var(--dm-magenta-scuro);color:var(--dm-bianco);box-shadow:var(--dm-ombra-media)}
.dm-bottone-secondario .elementor-button{background:var(--dm-tiffany);color:var(--dm-bianco)}
.dm-bottone-secondario .elementor-button:hover{background:var(--dm-pavone);color:var(--dm-bianco);box-shadow:var(--dm-ombra-media)}
.dm-bottone-chiaro .elementor-button{background:var(--dm-bianco);color:var(--dm-pavone)}
.dm-bottone-chiaro .elementor-button:hover{background:var(--dm-bianco);color:var(--dm-magenta)}

/* ---------- Header sticky ----------
   Lo sticky sta sul wrapper, che e figlio diretto di <body>: un elemento
   sticky si muove dentro il box del genitore, quindi il genitore deve essere
   alto quanto la pagina. Sul contenitore Elementor non funzionerebbe. */
.dm-header-sticky{
  position:sticky;
  top:0;
  z-index:99;
}
.dm-header{
  background:var(--dm-bianco);
  border-bottom:1px solid var(--dm-grigio-bordo);
}
/* Nell'editor di Elementor lo sticky darebbe fastidio. */
.elementor-editor-active .dm-header-sticky,
.elementor-editor-preview .dm-header-sticky{position:relative}
.dm-header .elementor-widget-image img,
.dm-header .hfe-site-logo img{max-height:56px;width:auto}
.dm-logo-footer img{max-height:120px;width:auto}

/* Voce di menu attiva, sottolineata in tiffany */
.dm-header .hfe-nav-menu .menu-item > a{
  padding-bottom:3px;
  border-bottom:2px solid transparent;
  transition:color var(--dm-durata) var(--dm-ease),border-color var(--dm-durata) var(--dm-ease);
}
.dm-header .hfe-nav-menu .menu-item.current-menu-item > a,
.dm-header .hfe-nav-menu .menu-item > a:hover{border-bottom-color:var(--dm-tiffany)}

/* ---------- Contenuti lunghi (articoli, schede progetto) ---------- */
.dm-prose{font-size:var(--dm-corpo-grande);line-height:1.65}
.dm-prose > * + *{margin-top:var(--dm-sp-50)}
.dm-prose a{border-bottom:1px solid currentColor}
.dm-prose h2{margin-top:var(--dm-sp-80)}

/* ---------- Proporzioni immagini delle collezioni ---------- */
.dm-ritratto img{aspect-ratio:4/5;object-fit:cover;width:100%}
.dm-cover-progetto img{aspect-ratio:3/2;object-fit:cover;width:100%}

/* ---------- Campi form (Contact Form 7, Fluent Forms) ---------- */
.dm-form input[type=text],.dm-form input[type=email],.dm-form input[type=tel],
.dm-form textarea,.dm-form select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--dm-grigio-bordo);
  border-radius:12px;
  background:var(--dm-bianco);
  font-family:Poppins,system-ui,sans-serif;
  font-size:15px;
  color:var(--dm-nero);
  transition:border-color var(--dm-durata) var(--dm-ease);
}
.dm-form input:focus,.dm-form textarea:focus,.dm-form select:focus{
  outline:none;
  border-color:var(--dm-tiffany-tenue);
  box-shadow:0 0 0 3px rgba(79,176,196,.18);
}
.dm-form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.dm-form .wpcf7-submit{
  height:52px;padding:0 28px;border:0;border-radius:999px;
  background:var(--dm-magenta);color:var(--dm-bianco);
  font-family:Poppins,system-ui,sans-serif;font-weight:600;font-size:16px;cursor:pointer;
  transition:background-color var(--dm-durata) var(--dm-ease);
}
.dm-form .wpcf7-submit:hover{background:var(--dm-magenta-scuro)}

/* ---------- Accessibilita ---------- */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--dm-tiffany-tenue);
  outline-offset:2px;
}
.dm-salta-al-contenuto,
.dm-salta-al-contenuto:link,
.dm-salta-al-contenuto:visited{
  position:absolute;left:-9999px;top:0;z-index:999;
  padding:12px 20px;
  background:var(--dm-pavone);
  color:var(--dm-bianco);
  font-weight:600;
  border-radius:0 0 8px 0;
}
.dm-salta-al-contenuto:focus{left:0;color:var(--dm-bianco)}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* =========================================================================
   Layout dei template PHP delle collezioni (archivio Lavori, schede).
   Le pagine costruite con Elementor non usano queste classi: hanno i propri
   contenitori. Qui serve solo a far combaciare le viste generate da codice.
   ========================================================================= */

.dm-main{display:block}

.dm-contenitore{
  width:100%;
  max-width:var(--dm-contenuto);
  margin-inline:auto;
  padding-inline:var(--dm-sp-60);
}
.dm-contenitore--largo{max-width:var(--dm-largo)}
.dm-contenitore--stretto{max-width:760px;text-align:center}

.dm-sezione{padding-block:var(--dm-sp-100)}
.dm-sezione--stretta{padding-block:var(--dm-sp-90) var(--dm-sp-80)}

.dm-sfondo-grigio{background:var(--dm-grigio-chiaro)}
.dm-sfondo-pavone-scuro{background:var(--dm-pavone-scuro);color:var(--dm-bianco)}
.dm-sfondo-tiffany{background:var(--dm-tiffany);color:var(--dm-bianco)}

/* Intestazione di pagina */
.dm-intestazione{padding-block:var(--dm-sp-90) var(--dm-sp-80)}
.dm-intestazione h1{margin:var(--dm-sp-30) 0 0;font-size:var(--dm-corpo-titolo-pagina)}
.dm-intestazione__sotto{
  margin:var(--dm-sp-40) 0 0;
  font-size:var(--dm-corpo-grande);
  color:var(--dm-grigio-testo);
  max-width:60ch;
}

/* Bottone dei template PHP (fuori da Elementor) */
.dm-bottone{
  display:inline-block;
  padding:16px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:var(--dm-corpo-base);
  line-height:1.2;
  text-decoration:none;
  transition:background-color var(--dm-durata) var(--dm-ease),box-shadow var(--dm-durata) var(--dm-ease),transform var(--dm-durata) var(--dm-ease);
}
/* Doppia classe: il CSS del kit Elementor usa ".elementor-kit-NN a", che con
   una classe sola vincerebbe sul colore del testo. */
.dm-bottone.dm-bottone--magenta{background:var(--dm-magenta);color:var(--dm-bianco)}
.dm-bottone.dm-bottone--magenta:hover,
.dm-bottone.dm-bottone--magenta:focus{background:var(--dm-magenta-scuro);color:var(--dm-bianco);box-shadow:var(--dm-ombra-media)}
.dm-bottone.dm-bottone--tiffany{background:var(--dm-tiffany);color:var(--dm-bianco)}
.dm-bottone.dm-bottone--tiffany:hover{background:var(--dm-pavone);color:var(--dm-bianco)}
.dm-bottone:active{transform:scale(.98)}

/* CTA finale */
.dm-cta h2{font-size:var(--dm-corpo-titolo-pagina);margin:0}
.dm-cta p{margin:var(--dm-sp-40) 0 0;font-size:var(--dm-corpo-grande)}
.dm-cta__azione{margin-top:var(--dm-sp-70) !important}

/* Scheda progetto */
.dm-progetto__meta{
  display:flex;flex-wrap:wrap;gap:var(--dm-sp-50);
  margin:var(--dm-sp-50) 0 0;
  color:var(--dm-grigio-testo);
  font-size:var(--dm-corpo-piccolo);font-weight:600;
}
.dm-progetto__cover img{border-radius:20px;width:100%;height:auto;display:block}
.dm-progetto__griglia{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:var(--dm-sp-80)}
.dm-progetto__dettagli{padding:var(--dm-sp-60);align-self:start}
.dm-progetto__dettagli h2{font-size:var(--dm-corpo-grande);margin:0}
.dm-progetto__dettagli h2 + p{margin:var(--dm-sp-30) 0 0;color:var(--dm-grigio-testo)}
.dm-progetto__dettagli > * + h2{margin-top:var(--dm-sp-60)}
.dm-progetto__ingredienti{font-size:var(--dm-corpo-piccolo)}
.dm-progetto__ingredienti a{color:var(--dm-pavone)}

/* Scheda persona */
.dm-membro__griglia{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:var(--dm-sp-80);align-items:start}
.dm-membro__ritratto img{border-radius:20px;width:100%;height:auto;display:block}
.dm-membro__testo h1{font-size:var(--dm-corpo-titolo-pagina);margin:0}
.dm-membro__ruolo{margin:var(--dm-sp-30) 0 0;font-weight:600;color:var(--dm-pavone)}
.dm-membro__testo .dm-prose{margin-top:var(--dm-sp-50)}
.dm-membro__contatti{display:flex;gap:var(--dm-sp-50);margin-top:var(--dm-sp-50);font-weight:600}

/* Paginazione */
.dm-paginazione{margin-top:var(--dm-sp-80)}
.dm-paginazione .page-numbers{
  display:inline-block;padding:8px 14px;border-radius:8px;
  color:var(--dm-pavone);font-weight:600;text-decoration:none;
}
.dm-paginazione .page-numbers.current{background:var(--dm-tiffany-chiaro)}
.dm-paginazione .page-numbers:hover{color:var(--dm-magenta)}

@media (max-width:1024px){
  .dm-progetto__griglia,.dm-membro__griglia{grid-template-columns:1fr;gap:var(--dm-sp-70)}
  .dm-membro__ritratto{max-width:420px}
}
@media (max-width:767px){
  .dm-contenitore{padding-inline:var(--dm-sp-50)}
  .dm-sezione{padding-block:var(--dm-sp-90)}
}

/* ---------- Rifiniture sui widget di Header Footer Builder ---------- */
/* Elenchi del footer: sono link, non un elenco puntato. */
.dm-su-scuro ul{list-style:none;margin:0;padding:0}
.dm-su-scuro li + li{margin-top:var(--dm-sp-30)}

/* Rete di sicurezza sul menu: se un aggiornamento di HFE ripristinasse i suoi
   default, la voce di menu resterebbe comunque leggibile e non alta 36px. */
.dm-header .hfe-nav-menu a.hfe-menu-item,
.dm-header .hfe-nav-menu a.hfe-sub-menu-item{
  font-size:14px;
  font-weight:600;
  line-height:1.4;
}
.dm-header .hfe-nav-menu .menu-item.current-menu-item > a{color:var(--dm-pavone)}

/* Il bottone nell'header e piu compatto del bottone di pagina. */
.dm-header .elementor-widget-button .elementor-button{
  font-size:14px;
  padding:11px 20px;
}