/*
Theme Name:  Omnia Sano
Theme URI:   https://omniasano.it/
Description: Child theme di Hello Elementor per Omnia Sano Società Consortile a r.l.
Author:      Omnia Sano
Template:    hello-elementor
Version:     1.1.0
Text Domain: omniasano
*/

/* ==================================================================
   DIPENDENZA

   Questo foglio consuma i token di assets/tokens.css e non ne
   ridefinisce nessuno. tokens.css deve essere in coda PRIMA di
   style.css (dipendenza dichiarata in wp_enqueue_style) e registrato
   anche per l'editor Elementor, altrimenti in editor si vedono i
   fallback e non il sito reale.

   Nessun colore, corpo o raggio va scritto in cifre qui dentro: se
   serve un valore che il kit non ha, si aggiunge al kit. Le uniche
   eccezioni sono marcate una per una con il motivo.

   Due soli breakpoint: 900px (tablet) e 600px (telefono).
   ==================================================================

   NOVITÀ DELLA 1.1.0 — cosa cambia a schermo

   - Corpo del testo corrente portato da 15/16px a --fs-base (17px).
   - Tutto il testo piccolo passa da --text-muted (2,95:1, sotto AA)
     a --text-secondary (7,53:1).
   - Etichette maiuscolette unificate a --fs-2xs (12px): prima erano
     11 o 12 a seconda del punto.
   - Titoli di sezione da 24px a --fs-h3 (22px); .os-all-gruppo h2 da
     18px a --fs-lg (20px); schede esame da 16px a --fs-base.
   - Campi dei moduli a --fs-base: sopra i 16px iOS non fa più lo
     zoom automatico al focus.
   - Ombra in hover delle card unificata su --shadow.
   - Il titolo di .os-avviso ora è davvero colorato (prima il
     selettore non agganciava nulla).
   ================================================================== */


/* ==================================================================
   INDICE
    1. Fondamenta
    2. Utilità trasversali — etichette, link, card, toggle, moduli
    3. Header
    4. Home — hero, disponibilità, tre passi, banda, numeri
    5. Contenuti di pagina — indice, callout, accordion, avvisi, note
    6. Sedi — mappa, card, scheda sede
    7. Chi siamo — timeline, certificazioni
    8. Esami — striscia dati, sezioni, correlati, metodica
    9. Indice esami e pagine area
   10. Allergeni
   11. Tabelle
   12. Moduli e prenotazione
   ================================================================== */


/* ==================================================================
   1. Fondamenta
   ================================================================== */

:root {
  /* Altezza dell'header sticky. Serve allo scroll-margin degli
     anchor: teneva un 90px scritto a mano, scollegato dall'header. */
  --os-header-h: 90px;

  /* Due corpi che il kit non ha. Da promuovere in tokens.css se
     servono anche al portale. */
  --fs-2xs:      12px;  /* etichette maiuscolette */
  --os-fs-cifra: 38px;  /* numeri della home */
  --os-fs-passo: 40px;  /* numerali dei tre passi */
}

/* Cifre tabulari dove i numeri sono incolonnati: referti, tabelle,
   prezzi, tempi di refertazione. Solo font-variant-numeric: la
   sintassi font-feature-settings sovrascrive in blocco le altre
   feature OpenType invece di aggiungersi. */
.tabular,
table td,
table th {
  font-variant-numeric: tabular-nums;
}

/* Gli anchor non finiscono sotto l'header sticky. Il selettore è
   volutamente larghissimo: se un giorno dà noia, restringilo a
   [id]:is(h1, h2, h3, section, .e-con). */
[id] { scroll-margin-top: var(--os-header-h); }

/* Il Text Editor eredita i margini dal tema: azzerati sull'ultimo
   elemento, altrimenti si sommano allo stacco fra sezioni. */
.elementor-widget-text-editor ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.elementor-widget-text-editor li {
  margin-bottom: 6px;
  line-height: var(--lh-base);
}
.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor ul:last-child {
  margin-bottom: 0;
}

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


/* ==================================================================
   2. Utilità trasversali

   Quattro pattern che prima erano ricopiati fra le 3 e le 8 volte.
   Sono raggruppati qui perché il markup di dt, th e label lo genera
   lo shortcode: quando toccherai quel PHP, la strada pulita è
   emettere class="os-label" e togliere quel selettore da qui.
   ================================================================== */

/* ---- Etichetta maiuscoletta -------------------------------------
   Sopra un valore, in testa a una colonna, in cima a un riquadro. */

.os-label,
.os-eyebrow,
.os-slots-label,
.os-num-label,
.os-indice > p,
.os-esame-dati dt,
.os-all-controlli label,
.os-metodica span,
.os-tabella th,
.os-tabella-ricette th {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---- Link di contenuto ------------------------------------------
   Teal scuro, sottolineato solo in hover. */

.os-indice a,
.os-cert a,
.os-esame-sedi a,
.os-area-vuota a,
.os-tabella a,
.os-mappa .leaflet-popup-content a {
  color: var(--teal-dark);
  text-decoration: none;
}
.os-indice a:hover,
.os-cert a:hover,
.os-esame-sedi a:hover,
.os-area-vuota a:hover,
.os-tabella a:hover,
.os-mappa .leaflet-popup-content a:hover {
  text-decoration: underline;
}

/* Dove il link è l'elemento portante della riga. */
.os-area-vuota a,
.os-tabella a,
.os-mappa .leaflet-popup-content a {
  font-weight: var(--fw-medium);
}

/* ---- Card ------------------------------------------------------
   Base per le card costruite qui. .os-card e .os-tile sono
   contenitori Elementor: bordo e raggio arrivano dal pannello, qui
   prendono solo l'hover. */

.os-correlato,
.os-esame-card,
.os-area-tile {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
}

.os-correlato,
.os-esame-card,
.os-area-tile,
.os-card,
.os-tile {
  transition: border-color .15s ease, box-shadow .15s ease;
}

.os-correlato:hover,
.os-esame-card:hover,
.os-area-tile:hover,
.os-card:hover,
.os-tile:hover {
  border-color: var(--teal-dark);
  box-shadow: var(--shadow);
}

/* ---- Toggle (details/summary) -----------------------------------
   Tre usi: nota sulle disponibilità, legenda allergeni, accordion
   della preparazione. Il marcatore nativo va via in tutti e tre. */

.os-slots-info summary,
.os-legenda summary,
.os-acc summary {
  font-weight: var(--fw-medium);
  color: var(--teal-dark);
  cursor: pointer;
  list-style: none;
}
.os-slots-info summary::-webkit-details-marker,
.os-legenda summary::-webkit-details-marker,
.os-acc summary::-webkit-details-marker {
  display: none;
}

/* Chevron: apre un pannello di testo. */
.os-slots-info summary,
.os-legenda summary { font-size: var(--fs-sm); }
.os-slots-info summary::after,
.os-legenda summary::after { content: " ›"; }
.os-slots-info[open] summary::after,
.os-legenda[open] summary::after { content: " ⌄"; }

/* ---- Campi di modulo -------------------------------------------
   --fs-base non è estetica: sotto i 16px iOS zooma al focus. */

.os-all-controlli input,
.os-all-controlli select,
.os-form-riga input,
.os-form-riga select {
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.os-all-controlli input:focus,
.os-all-controlli select:focus,
.os-form-riga input:focus,
.os-form-riga select:focus {
  outline: none;
  border-color: var(--teal-dark);
  box-shadow: var(--focus-ring);
}

/* ---- Valore, link con freccia, pulsanti ------------------------- */

.os-valore {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
}

.os-label { margin: 0 0 4px; }

/* I margini del link con freccia restano nel pannello Elementor:
   sono spaziatura, non stile del link. */
.os-link-freccia { font-size: var(--fs-sm); }
.os-link-freccia,
.os-link-freccia p { margin: 0; }

.os-link-freccia a {
  color: var(--teal-dark);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.os-link-freccia a::after {
  content: "→";
  display: inline-block;
  margin-left: 5px;
  transition: transform .15s ease;
}
.os-link-freccia a:hover { text-decoration: underline; }
.os-link-freccia a:hover::after { transform: translateX(3px); }

.os-link-freccia--centrato { text-align: center; }
.os-link-freccia--piccolo  { font-size: var(--fs-xs); }

/* Stile dei due CTA in un posto solo. Sul widget si imposta solo
   testo e link: nessun valore nel pannello Stile, altrimenti vince
   quello e la classe non serve a niente. */

.os-btn .elementor-button,
.os-btn-out .elementor-button {
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  transition: background-color .15s ease, color .15s ease;
}

.os-btn .elementor-button {
  padding: 12px 24px;
  background: var(--teal-dark);
  color: var(--color-white);
  border: 0;
}
.os-btn .elementor-button:hover,
.os-btn .elementor-button:focus-visible {
  background: var(--brand-dark);
  color: var(--color-white);
}

/* Padding ridotto di 2px: compensa il bordo, così i due pulsanti
   affiancati hanno la stessa altezza. */
.os-btn-out .elementor-button {
  padding: 10px 22px;
  background: transparent;
  color: var(--brand);
  border: 2px solid var(--brand);
}
.os-btn-out .elementor-button:hover,
.os-btn-out .elementor-button:focus-visible {
  background: var(--brand);
  color: var(--color-white);
}

/* ---- Elemento cliccabile per intero -----------------------------
   Il link sta su un widget interno; l'overlay ne estende l'area a
   tutto il contenitore. position:static su widget e ancora impedisce
   che uno dei due diventi il blocco contenitore dell'::after. */

.os-clic,
.os-clic > .e-con-inner {
  position: relative;
}

.os-clic .os-clic-link,
.os-clic .os-clic-link a {
  position: static;
}

.os-clic .os-clic-link a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Eventuali link propri restano cliccabili sopra l'overlay. */
.os-clic .elementor-icon-list-items,
.os-clic .os-clic-sopra {
  position: relative;
  z-index: 2;
}


/* ==================================================================
   3. Header
   ================================================================== */

.os-header.elementor-sticky--effects {
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s ease;
}


/* ==================================================================
   4. Home
   ================================================================== */

/* --- Hero ------------------------------------------------------- */

/* Senza min-width:0 un flex item non scende sotto la larghezza del
   proprio contenuto e spinge fuori il vicino. */
.os-hero-alto > * { min-width: 0; }

.os-eyebrow p {
  display: inline-block;
  margin: 0;
  padding: 5px 11px;
  background: var(--teal-50);
  color: var(--teal-dark);
  border-radius: var(--radius-pill);
}

/* --- Pannello disponibilità ------------------------------------- */

.os-slots-label { margin: 0 0 3px; }

.os-slots-sub {
  margin: 0 0 11px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.os-slots-nota {
  margin: 0 0 13px;
  padding: 7px 10px;
  background: var(--teal-50);
  color: var(--teal-dark);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.os-slots-nota p { margin: 0; }

.os-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.os-slots li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: var(--fs-sm);
}

.os-slots-sede { color: var(--text); font-weight: var(--fw-medium); }

.os-slots time,
.os-slots-range {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.os-slots-libera {
  color: var(--success);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
}

.os-slots-foot {
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 10px;
}

.os-slots-time,
.os-slots-fallback {
  margin: 8px 0 0;
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
}

.os-slots-info p {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* --- Tre passi -------------------------------------------------- */

.os-passo-num .elementor-heading-title {
  color: var(--teal-50);
  font-size: var(--os-fs-passo);
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* --- Banda preparazione ----------------------------------------- */

.os-banda-prep {
  background: var(--brand-50);
  border-radius: var(--radius-lg);
}
.os-banda-prep > * { min-width: 0; }

.os-banda-prep .os-banda-titolo .elementor-heading-title {
  color: var(--brand);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.os-banda-prep .os-banda-testo p {
  margin: 6px 0 0;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* --- Numeri ----------------------------------------------------- */

.os-num-cifra,
.os-num-cifra p,
.os-num-cifra .elementor-heading-title {
  margin: 0;
  color: var(--brand);
  font-size: var(--os-fs-cifra);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.os-num-pct { font-size: .6em; margin-left: 1px; }

.os-num-label { line-height: 1.4; }
.os-num-label p { margin: 4px 0 0; }

/* Un gradino sotto l'etichetta: 11px è sotto la scala, ma qui il
   rapporto fra i due righi è l'informazione. */
.os-num-label small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  opacity: .8;
}

.os-stat-periodo {
  margin: 0;
  text-align: center;
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
}


/* ==================================================================
   5. Contenuti di pagina
   ================================================================== */

.os-indice {
  border-left: 3px solid var(--teal-50);
  padding-left: 16px;
}
.os-indice > p { margin: 0 0 6px; }
.os-indice ul { margin: 0; padding-left: 18px; }
.os-indice li { font-size: var(--fs-sm); margin-bottom: 2px; }

.os-callout {
  padding: 12px 16px;
  background: var(--teal-50);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--teal-dark);
}
.os-callout p { margin: 0; }

/* Accordion (preparazione, raccolta campioni). */
.os-acc details {
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.os-acc summary {
  font-size: var(--fs-base);
  color: var(--brand);
}
.os-acc summary::after { content: "+"; float: right; color: var(--teal-dark); }
.os-acc details[open] summary::after { content: "−"; }
.os-acc details > *:not(summary) {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-secondary);
}

/* Avvertenza di sicurezza: pieno contrasto, non testo secondario. */
.os-avviso {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
}
/* In Elementor .elementor-heading-title sta SUL tag h2, non dentro:
   il selettore discendente non agganciava nulla. */
.os-avviso .elementor-heading-title { color: var(--warning); }

/* Avviso "rinvia l'esame", dentro una sezione già colorata. */
.os-avviso-rinvia {
  margin: 0 0 20px;
  padding: 12px 16px;
  background: var(--warning-light);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
}
.os-avviso-rinvia strong { color: var(--warning); }

/* --- Nota di approfondimento ------------------------------------
   Due variabili locali per il tema del blocco: il modificatore
   cambia solo quelle. Prima puntavano a --os-colore-* che non
   esistono nel kit, quindi rendevano i fallback: accento arancio
   invece di --warning e nero neutro nel tooltip. */

.os-nota {
  --os-nota-accento: var(--brand);
  --os-nota-fondo:   var(--bg);

  margin: 32px 0;
  padding: 20px 24px;
  background: var(--os-nota-fondo);
  border-left: 3px solid var(--os-nota-accento);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.os-nota--attenzione {
  --os-nota-accento: var(--warning);
  --os-nota-fondo:   var(--warning-light);
}

/* Il primo paragrafo fa da titolo. */
.os-nota > p:first-child {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--os-nota-accento);
  font-size: var(--fs-base);
  line-height: 1.35;
}
.os-nota > p:first-child strong { font-weight: var(--fw-bold); }

.os-nota p {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.os-nota > p:last-child { margin-bottom: 0; }

.os-nota a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* --- Nota inline (tooltip) --------------------------------------
   Il testo è in position:absolute: gli serve un antenato posizionato.
   Mettila su .os-nota-ancora, o usa un dt della striscia dati, che
   ce l'ha già (sezione 8). */

.os-nota-ancora { position: relative; }

.os-nota-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
  margin-inline-start: .35em;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  color: inherit;
  opacity: .6;
  font: inherit;
  font-size: .8em;
  font-style: italic;
  line-height: 1;
  cursor: help;
  vertical-align: text-top;
}
.os-nota-inline:hover,
.os-nota-inline:focus-visible { opacity: 1; }

.os-nota-inline-testo {
  position: absolute;
  top: calc(100% + .4em);
  inset-inline-start: 0;
  z-index: 20;
  width: max-content;
  max-width: min(30ch, calc(100vw - 2.5rem));
  padding: 11px 14px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  text-align: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease;
}

/* :focus oltre a :focus-visible: al tap su touch :focus-visible di
   norma non scatta e la nota resta inaccessibile. */
.os-nota-inline:hover + .os-nota-inline-testo,
.os-nota-inline:focus + .os-nota-inline-testo,
.os-nota-inline:focus-visible + .os-nota-inline-testo {
  opacity: 1;
  visibility: visible;
}


/* ==================================================================
   6. Sedi
   ================================================================== */

/* --- Mappa Leaflet ---------------------------------------------- */

/* isolation:isolate crea il contesto di impilamento: contiene i
   pannelli Leaflet, che altrimenti scorrono sopra l'header sticky.
   Il solo z-index:0 non basta su un elemento statico. */
.os-mappa {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 28px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Affiancata al testo nella pagina sede: nessun margine. */
.os-sede-alto .os-mappa { margin: 0; }
.os-sede-alto > * { min-width: 0; }

.os-mappa .leaflet-popup-content {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
  margin: 12px 14px;
}
.os-mappa .leaflet-popup-content strong {
  color: var(--brand);
  font-weight: var(--fw-bold);
}

.os-mappa .leaflet-popup-content-wrapper {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* 10px: è l'attribuzione, non contenuto. */
.os-mappa .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, .85);
}

/* --- Scheda sede ------------------------------------------------ */

.os-orari {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-secondary);
  white-space: pre-line;
}


/* ==================================================================
   7. Chi siamo
   ================================================================== */

.os-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--teal-50);
}

.os-timeline li {
  position: relative;
  padding: 0 0 24px 24px;
}

.os-timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--teal-dark);
}

.os-anno {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.os-timeline p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-secondary);
}

/* Certificazioni */
.os-cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
}
.os-cert img { height: 70px; width: auto; object-fit: contain; }
.os-cert p {
  margin: 0;
  font-size: var(--fs-2xs);
  line-height: 1.5;
  text-align: center;
  color: var(--text-secondary);
}


/* ==================================================================
   8. Esami
   ================================================================== */

/* Sezione con titolo generato dallo shortcode: se il contenuto è
   vuoto non compare nulla, titolo compreso. */
.os-sezione { margin-top: 32px; }
.os-sezione h2 {
  margin: 0 0 10px;
  color: var(--brand);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.os-esame-dati {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 18px 20px;
  background: var(--bg);
  border-radius: var(--radius-lg);
}

/* position:relative è l'ancora del tooltip di .os-nota-inline
   (sezione 5): non togliere. */
.os-esame-dati dt {
  position: relative;
  margin-bottom: 3px;
}
.os-esame-dati dd {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.os-esame-sedi { list-style: none; margin: 0; padding: 0; }
.os-esame-sedi li { margin-bottom: 4px; font-size: var(--fs-base); }

.os-correlati {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.os-correlato { padding: 14px 16px; }

.os-correlato-titolo {
  display: block;
  margin-bottom: 3px;
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.os-correlato-desc {
  display: block;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.os-metodica {
  margin: 32px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.os-metodica span { margin-right: 8px; }


/* ==================================================================
   9. Indice esami e pagine area
   ================================================================== */

.os-esami-gruppo { margin-top: 32px; }
.os-esami-gruppo:first-child { margin-top: 0; }
.os-esami-gruppo h2 {
  margin: 0 0 12px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--brand);
}

.os-esami-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.os-esame-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
}

.os-esame-card-titolo {
  color: var(--brand);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.os-esame-card-desc {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.os-esame-card-meta {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--fs-2xs);
}

/* --- Pagina area ------------------------------------------------ */

.os-area-titolo {
  margin: 0 0 12px;
  color: var(--brand);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
}

.os-area-intro {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.os-area-intro p:last-child { margin-bottom: 0; }

/* Tre colonne fisse, non auto-fit: con auto-fit l'ultima riga di
   un'area con quattro voci restava sbilanciata. */
.os-area-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.os-area-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
}

/* 18px: è l'icona, non testo. */
.os-area-tile i {
  color: var(--teal-dark);
  font-size: 18px;
  margin-bottom: 4px;
}

.os-area-tile-nome {
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.os-area-tile-n {
  color: var(--text-secondary);
  font-size: var(--fs-2xs);
}

.os-area-vuota {
  margin: 24px 0 0;
  padding: 16px 18px;
  background: var(--bg);
  border-radius: var(--radius-lg);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-secondary);
}


/* ==================================================================
   10. Allergeni
   ================================================================== */

.os-all-conteggio,
.os-all-vuoto {
  font-size: var(--fs-base);
  color: var(--text-secondary);
}
.os-all-conteggio { margin: 0; }
.os-all-vuoto { margin: 12px 0 0; }

.os-all-controlli {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0 8px;
}
.os-all-controlli > div { flex: 1 1 220px; }
.os-all-controlli label { display: block; margin-bottom: 6px; }

.os-all-gruppo { margin-top: 28px; }
.os-all-gruppo h2 {
  margin: 0 0 10px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--brand);
}

.os-fonte { margin-top: 18px; }
.os-fonte h3 {
  margin: 0 0 4px;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.os-fonte h3 i { color: var(--text-secondary); font-weight: var(--fw-regular); }
.os-fonte ul { list-style: none; margin: 0; padding: 0; }

/* Cinque colonne fisse: nome, tipo, famiglia, badge, codice.
   Il modulo emette sempre tutti e cinque gli span, anche vuoti,
   altrimenti le celle slittano. */
.os-prep {
  display: grid;
  grid-template-columns: 112px 76px 1fr 100px 52px;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0 6px 14px;
  border-left: 3px solid var(--border);
  font-size: var(--fs-xs);
}

/* L'estratto è uno e sta in cima: marcato con navy e fondo tinto. */
.os-prep-estratto {
  border-left-color: var(--brand);
  background: var(--brand-50);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* I componenti: filetto teal pieno, visibile senza essere invadente.
   --teal solo come grafica: 4,19:1, non regge il testo. */
.os-prep-componente { border-left-color: var(--teal); }

.os-prep-nome {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
}

/* 10px: griglia densa a cinque colonne, l'unico punto del sito dove
   scendo sotto la scala. Il colore resta --text-secondary. */
.os-prep-tipo {
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.os-prep-fam {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.os-prep-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.os-prep-cod {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  text-align: right;
}

/* --- Badge e legenda -------------------------------------------- */

/* Il dt della legenda è lo stesso oggetto del badge: quando toccherai
   il PHP, emetti class="os-badge os-badge-ait" sul dt e togli il
   selettore da qui. */
.os-badge,
.os-legenda dt {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-decoration: none;
}

.os-badge { cursor: help; }

.os-badge-ait { background: var(--teal-50);       color: var(--teal-dark); }
.os-badge-ccd { background: var(--warning-light); color: var(--warning); }
.os-badge-mix { background: var(--surface-2);     color: var(--text-secondary); }
.os-badge-ruo { background: var(--danger-light);  color: var(--danger); }

.os-legenda {
  margin: 20px 0 8px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: var(--radius-lg);
}

.os-legenda dl {
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.os-legenda dl > div {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.os-legenda dt {
  flex: 0 0 44px;
  background: var(--teal-50);
  color: var(--teal-dark);
  text-align: center;
}
.os-legenda dd {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
}


/* ==================================================================
   11. Tabelle

   .os-tabella: tabella di orientamento (/prenota/).
   .os-tabella-ricette: stessa resa più le etichette da data-et.
   ================================================================== */

.os-tabella,
.os-tabella-ricette {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.os-tabella th,
.os-tabella-ricette th {
  padding: 0 12px 8px 0;
  text-align: left;
}

.os-tabella td,
.os-tabella-ricette td {
  padding: 12px 12px 12px 0;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  line-height: 1.5;
  vertical-align: top;
}

.os-tabella td:first-child,
.os-tabella-ricette td:first-child {
  width: 46%;
  color: var(--text);
  font-weight: var(--fw-medium);
}

.os-tabella-ricette caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* Resa a blocchi su telefono. La width del primo td va azzerata qui:
   prima serviva un !important per batterla. */
@media (max-width: 600px) {
  .os-tabella thead,
  .os-tabella-ricette thead { display: none; }

  .os-tabella tr,
  .os-tabella-ricette tr {
    display: block;
    border-top: 1px solid var(--border);
    padding: 12px 0;
  }

  .os-tabella td,
  .os-tabella-ricette td {
    display: block;
    width: auto;
    border: 0;
    padding: 0;
  }

  .os-tabella td:first-child,
  .os-tabella-ricette td:first-child {
    width: auto;
    margin-bottom: 4px;
    font-weight: var(--fw-bold);
  }

  .os-tabella-ricette td::before {
    content: attr(data-et) " · ";
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: .05em;
  }
}


/* ==================================================================
   12. Moduli e prenotazione
   ================================================================== */

/* --- Disponibilità, versione estesa ----------------------------- */

/* VERIFICARE: .os-slots-riga e .os-slot non sono emesse da nessun
   altro punto di questo foglio, la versione base usa .os-slots li.
   Se il markup di /prenota/ non le stampa, queste due regole non
   fanno nulla e vanno cambiate in .os-slots-estesa .os-slots li. */
.os-slots-estesa .os-slots-riga,
.os-slots-estesa .os-slot {
  padding: 16px 18px;
  font-size: var(--fs-base);
}
.os-slots-estesa .os-slots { max-width: 720px; }

.os-slots-info-aperto {
  max-width: 720px;
  margin-top: 20px;
  border-left: 3px solid var(--teal-dark);
  padding-left: 16px;
}
.os-slots-info-aperto h3 {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand);
}
.os-slots-info-aperto p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-secondary);
}

/* --- Modulo di richiamata (CF7) --------------------------------- */

.os-form-riga { display: block; margin-bottom: 14px; }
.os-form-riga > span {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.os-nota-form {
  margin: 4px 0 14px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
}

.wpcf7-form .wpcf7-acceptance {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* Stessi valori di .os-btn: se un giorno metti la classe os-btn sul
   wrapper del submit, questo blocco si può cancellare. */
.wpcf7-form input[type="submit"] {
  padding: 12px 24px;
  background: var(--teal-dark);
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  cursor: pointer;
  transition: background-color .15s ease;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus-visible {
  background: var(--brand-dark);
}


/* ==================================================================
   Adattamenti — 900px (tablet) e 600px (telefono)
   ================================================================== */

@media (max-width: 900px) {
  .os-mappa { height: 300px !important; margin-top: 20px; }
  .os-area-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .os-area-tiles { grid-template-columns: 1fr; }

  .os-nota {
    margin: 24px 0;
    padding: 16px 18px;
    border-radius: 0;
  }

  .os-prep {
    grid-template-columns: 1fr auto;
    row-gap: 2px;
  }
  .os-prep-tipo  { grid-column: 2; text-align: right; }
  .os-prep-fam   { grid-column: 1 / -1; }
  .os-prep-badge { grid-column: 1 / -1; }
  .os-prep-cod   { grid-column: 2; text-align: right; }
}

/* ==================================================================
   Ponte verso i globali Elementor
   Ri-puntano le variabili del Kit 590 sui token. Da qui in poi
   qualunque widget che pesca "un colore globale" pesca un token.
   ================================================================== */

.elementor-kit-590 {
  --e-global-color-primary:   var(--brand);
  --e-global-color-secondary: var(--teal-dark);
  --e-global-color-text:      var(--text);
  --e-global-color-accent:    var(--teal);

  --e-global-typography-primary-font-family: var(--font-display);
  --e-global-typography-primary-font-size:   var(--fs-h1);
  --e-global-typography-primary-font-weight: var(--fw-bold);
  --e-global-typography-primary-line-height: var(--lh-tight);

  --e-global-typography-text-font-family:    var(--font-ui);
  --e-global-typography-text-font-size:      var(--fs-base);
  --e-global-typography-text-line-height:    var(--lh-base);
}