/*
Theme Name: Villa Mafalda
Theme URI: https://villamafalda.it
Author: Laio Webdesign
Author URI: https://laiowebdesign.com
Description: Tema custom per Villa Mafalda. 
Version: 1..2
Text Domain: villa-mafalda
*/

/* ==========================================================================
   DESIGN TOKENS — tutto qui, in vw dove ha senso per i titoli grandi.
   Se devi ritoccare colori/font a livello globale, cambia solo qui.
   ========================================================================== */

:root {
  /* Colori */
  --vm-green-900: #103f2b;   /* verde scurissimo — footer, card servizi, CTA */
  --vm-green-700: #186641;   /* verde brand — bottoni, link, eyebrow */
  --vm-green-500: #259961;   /* verde acceso — accenti testo */
  --vm-green-100: #dceee4;   /* verde chiaro — card */
  --vm-peach: #f2c8ba;       /* pesca — accenti, card */
  --vm-blue-200: #c7d8e1;    /* azzurro — card, foto team */
  --vm-cream: #f7f3ea;       /* crema — card articoli */
  --vm-ink: #193229;         /* testo scuro principale */
  --vm-body: #63736c;        /* testo secondario */
  --vm-bg: #f7f7f7;          /* sfondo chiaro generale */
  --vm-white: #ffffff;

  /* Font */
  --vm-font-display: "Playfair Display", Georgia, serif;   /* titoli grandi */
  --vm-font-serif: Georgia, serif;                          /* titoli card / brand */
  --vm-font-body: Lato, sans-serif;                          /* paragrafi */
  --vm-font-ui: Lato, sans-serif;                            /* nav, bottoni, label */

  /* Dimensioni titoli in vw (con clamp per non esagerare su schermi enormi/piccoli) */
  --vm-h1: clamp(2.6rem, 5.9vw, 7.05rem);   /* 113px a 1920px */
  --vm-h2: clamp(2.2rem, 3.8vw, 4.56rem);   /* 73px a 1920px */
  --vm-h3: clamp(1.3rem, 1.4vw, 1.7rem);    /* 27px card */

  --vm-radius-pill: 999px;
  --vm-radius-card: 22px;
  --vm-radius-lg: 36px;

  --vm-container: 1500px;
}

/* ==========================================================================
   RESET MINIMO
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--vm-font-body);
  color: var(--vm-ink);
  background: var(--vm-bg);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden; /* rete di sicurezza: se un elemento in un punto qualsiasi del sito rifiuta di restringersi (es. una parola lunga in una griglia), la pagina resta comunque contenuta nello schermo invece di scorrere di lato */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

.vm-container {
  max-width: var(--vm-container);
  margin-inline: auto;
  padding-inline: clamp(24px, 10%, 150px);
}

.vm-eyebrow {
  font-family: var(--vm-font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.98px;
  text-transform: uppercase;
  color: var(--vm-green-700);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vm-eyebrow.is-on-dark { color: #a4dab5; }

.vm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--vm-green-700);
  color: var(--vm-white);
  border: 1px solid var(--vm-green-700);
  border-radius: var(--vm-radius-pill);
  padding: 18px 32px;
  font-family: var(--vm-font-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.26px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.vm-btn:hover {
  background: #dbebe0;
  color: #103f2b;
  border-color: #dbebe0;
}
.vm-btn.is-light {
  background: var(--vm-white);
  color: var(--vm-green-900);
  border-color: var(--vm-white);
}
.vm-link-underline {
  border-bottom: 1px solid currentColor;
  font-weight: 700;
  font-size: 13px;
  padding-bottom: 4px;
}