/* ==========================================================================
   Erboristeria Officinale Sardegna — stili di base
   Valori ricavati dal sito WordPress attuale (design system del tema).
   ========================================================================== */
@import url("font.css");

:root {
  --verde: #4B5D3A;            /* primario: pulsanti, link, prezzi */
  --verde-scuro: #3D4936;      /* fasce scure (marquee, barra servizi) */
  --verde-cornice: #2F4A32;    /* cornici inclinate dietro moduli e foto */
  --verde-chiaro: #E7ECE2;     /* sezioni e footer */
  --verde-sfumato: #DCE5D5;
  --accento: #8A9A5B;          /* voce di menu attiva, hover */
  --sfondo: #F7F4ED;           /* sfondo pagina */
  --sfondo-header: #F7F5EF;
  --bianco: #FFFFFF;
  --testo: #2D2D2D;
  --testo-2: #705C4D;          /* testi secondari, footer */
  --titolo-scuro: #1F2D18;
  --prezzo: #4F653B;
  --grigio-bordo: #B8B1AD;

  --f-titoli: "Gilda Display", Georgia, serif;
  --f-serif: Georgia, "Times New Roman", serif;       /* equivale al "Playfair Display" del sito attuale, che non viene mai caricato */
  --f-ui: "Nunito Sans", Arial, sans-serif;           /* menu, pulsanti, footer */
  --f-testo: Arial, Helvetica, sans-serif;            /* equivale al "Lato" del sito attuale, che non viene mai caricato */

  --contenitore: 1200px;
  --raggio: 4px;
  --ombra-card: 0 8px 24px rgba(45, 45, 45, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--sfondo); color: var(--testo);
  font: 400 18px/1.6 var(--f-testo);
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: var(--verde); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--accento); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; font-family: var(--f-serif); line-height: 1.2; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenitore { width: 100%; max-width: var(--contenitore); margin: 0 auto; }

/* --- Pulsanti ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 36px;
  background: var(--verde); border: 1px solid var(--verde); color: var(--bianco);
  font: 600 14px/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0; cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease, color .3s ease;
}
.btn:hover { background: var(--accento); border-color: var(--accento); color: var(--bianco); transform: translateY(-2px); }

/* --- Etichette e titoli ricorrenti ------------------------------------- */
.etichetta { font: 600 14px/18px var(--f-testo); text-transform: uppercase; letter-spacing: 1px; color: var(--verde); }

/* --- Animazioni di ingresso (semplici, al posto di quelle di Elementor) -- */
.appare { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.appare.visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .appare { opacity: 1; transform: none; transition: none; } }

/* --- Moduli ------------------------------------------------------------- */
.modulo-cornice { position: relative; max-width: 1152px; margin: 0 auto; }
.modulo-cornice::before {
  content: ""; position: absolute; inset: -14px -18px -14px -20px; background: var(--verde-cornice); transform: rotate(-1.2deg); z-index: 0;
}
.modulo-scheda { position: relative; z-index: 1; background: var(--bianco); border: 1px solid rgba(79, 101, 59, .35); padding: 37px 30px 41px; }
.modulo-scheda .etichetta { color: #32402C; font-size: 12.48px; line-height: 20px; font-weight: 700; letter-spacing: 1px; }
.modulo-scheda h3 { font: 400 31.2px/37.44px var(--f-serif); color: var(--titolo-scuro); text-transform: capitalize; margin-top: 10px; }
.modulo-scheda .sotto { font-size: 18px; line-height: 29px; color: #32402C; margin-top: 8px; }
.campi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin-top: 10px; }
.campo { display: block; }
.campo.largo { grid-column: 1 / -1; }
.campo.trappola { position: absolute; left: -9999px; width: 210px; opacity: 0; pointer-events: none; }
.campo label { display: block; font: 600 15px/24px var(--f-testo); color: #2B3A24; margin-bottom: 0; }
.campo input, .campo textarea {
  display: block; width: 100%; height: 42px; margin: 6px 0 10px; padding: 0 14px; background: var(--bianco);
  border: 1px solid rgba(79, 101, 59, .35); border-radius: var(--raggio); font: 400 16px/1.4 var(--f-testo); color: var(--testo);
}
.campo textarea { height: 115px; padding: 10px 14px; resize: vertical; margin-bottom: 14px; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--accento); outline-offset: 0; }
.esito { grid-column: 1 / -1; margin: 8px 0 0; font: 600 15px/24px var(--f-testo); color: var(--verde); }
.esito--errore { color: #9B2C2C; }
.modulo-scheda .btn { height: 41px; padding: 0 20px; font: 600 14px/1 var(--f-ui); text-transform: none; }

@media (max-width: 767px) {
  body { font-size: 16px; line-height: 1.6; }
  .modulo-scheda { padding: 23px 18px 24px; }
  .modulo-scheda h3 { font-size: 21.6px; line-height: 25.92px; }
  .modulo-scheda .sotto { font-size: 16px; line-height: 25.6px; }
  .campo label { font-size: 13px; line-height: 20.8px; }
  .campo input { height: 37px; font-size: 13px; }
  .modulo-scheda .btn { height: 38px; padding: 0 21px; font-size: 12px; }
  .campo input { margin-bottom: 8px; } .campo textarea { margin-bottom: 14px; }
  .campi { gap: 0 8px; }
}