/*
Theme Name: Servizi Agricoli Raj
Description: Tema leggero per Servizi Agricoli Raj (lavori in vigna in conto terzi, Veneto e Friuli). Header, footer e barra contatto mobile da codice perche' Elementor Free non ha il Theme Builder; tutto il contenuto delle pagine vive in Elementor. Design token presi da layout-plan/00-site-layer.md e replicati nei Global Colors del Kit.
Author: Zarosis
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: serviziagricoliraj
*/

/* ============================================================
   1. DESIGN TOKEN  — sorgente: 00-site-layer.md §3
   Gli stessi valori stanno nei Global Colors del Kit Elementor.
   Cambiarli in tutti e due i posti cambia tutto il sito.
   Contrasti misurati, non stimati (vedi docs/website/).
   ============================================================ */
:root{
  /* --- colori (§3.1) --- */
  --sar-primary:#2F4A2E;        /* titoli di sezione, header, sfondi scuri — bianco sopra 9.81:1 */
  --sar-primary-dark:#1F3320;   /* footer, hero scuro — bianco sopra 13.53:1 */
  --sar-accent:#A4470F;         /* SOLO pulsante primario WhatsApp e link d'azione — bianco 6.02:1, come testo su surface 5.67:1 */
  --sar-ink:#1E2620;            /* testo corrente — 14.61:1 su surface */
  --sar-ink-soft:#4A5448;       /* testo secondario — 7.45:1 su surface */
  --sar-surface:#FAF8F2;        /* sfondo base */
  --sar-surface-alt:#EEEADD;    /* sfondo alternato */
  --sar-line:#D6D0BE;           /* filetti e bordi: decorativo, non porta mai significato */
  --sar-on-dark:#FFFFFF;
  /* L'accento pieno su fondo scuro non si legge (2.25:1 su primary-dark, misurato).
     Questa e' la sua versione schiarita per i link dentro le sezioni scure:
     6.50:1 su primary-dark e 4.72:1 su primary. */
  --sar-accent-on-dark:#E3A77E;

  /* --- tipografia (§3.2): due famiglie, due/tre pesi, niente altro --- */
  --sar-font-head:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sar-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Scala desktop. I valori di tablet e mobile stanno nelle media query in fondo,
     cosi' corrispondono esattamente a quelli del site layer invece di essere
     un'interpolazione approssimata. */
  --sar-fs-h1:44px;
  --sar-fs-h2:32px;
  --sar-fs-h3:22px;
  --sar-fs-body:18px;
  --sar-fs-small:15px;
  --sar-lh-head:1.2;
  --sar-lh-body:1.6;

  /* --- spaziatura (§3.3) --- */
  --sar-sp-xs:8px;
  --sar-sp-s:16px;
  --sar-sp-m:24px;
  --sar-sp-l:32px;
  --sar-sp-xl:48px;
  --sar-sp-2xl:64px;
  --sar-sp-3xl:96px;

  --sar-section-y:96px;         /* padding verticale di sezione, desktop */
  --sar-gutter:16px;            /* margine laterale su mobile */

  /* --- contenitori --- */
  --sar-wrap:1200px;            /* contenitore contenuto */
  --sar-reading:720px;          /* larghezza massima del testo lungo */

  /* --- controlli --- */
  --sar-radius:6px;
  --tap:48px;                   /* target di tocco minimo */
  --sar-header-h:64px;
  --sar-bar-h:56px;             /* barra contatto mobile */
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--sar-surface);
  color:var(--sar-ink);
  font-family:var(--sar-font-body);
  font-size:var(--sar-fs-body);
  line-height:var(--sar-lh-body);
  /* evita lo scorrimento orizzontale richiesto a 390px */
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--sar-font-head);
  font-weight:600;
  color:var(--sar-primary);
  line-height:var(--sar-lh-head);
  margin:0 0 var(--sar-sp-m);
  text-wrap:balance;
}
h1{font-size:var(--sar-fs-h1);}
h2{font-size:var(--sar-fs-h2);}
h3{font-size:var(--sar-fs-h3);}

p{margin:0 0 var(--sar-sp-m);}
small,.sar-small{font-size:var(--sar-fs-small);}

/* link-action: testo accent sottolineato (§3.4) */
a{color:var(--sar-accent);text-underline-offset:0.15em;}
a:hover{text-decoration-thickness:2px;}

img{max-width:100%;height:auto;}

/* Focus visibile: contorno 3px accent con offset 2px (§3.4). */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--sar-accent);
  outline-offset:2px;
  border-radius:4px;
}

.sar-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.sar-skip:focus{
  position:fixed;top:8px;left:8px;z-index:9999;
  width:auto;height:auto;clip:auto;margin:0;
  padding:var(--sar-sp-xs) var(--sar-sp-s);
  background:var(--sar-primary);color:var(--sar-on-dark);
  border-radius:var(--sar-radius);
}

.sar-wrap{
  width:100%;max-width:var(--sar-wrap);
  margin-inline:auto;
  padding-inline:var(--sar-gutter);
}

/* ============================================================
   3. PULSANTI (§3.4) — un solo stile primario per viewport
   ============================================================ */
.sar-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sar-sp-xs);
  min-height:var(--tap);
  padding:0 var(--sar-sp-m);
  border-radius:var(--sar-radius);
  font-family:var(--sar-font-body);
  font-weight:600;
  font-size:var(--sar-fs-body);
  line-height:1.2;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
}
.sar-btn--primary{background:var(--sar-accent);color:var(--sar-on-dark);}
.sar-btn--primary:hover{background:#8A3B0C;}
.sar-btn--secondary{background:transparent;color:var(--sar-primary);border-color:var(--sar-primary);}
.sar-btn--secondary:hover{background:var(--sar-surface-alt);}
.sar-btn--on-dark{background:transparent;color:var(--sar-on-dark);border-color:var(--sar-on-dark);}
.sar-btn--on-dark:hover{background:rgba(255,255,255,.14);}

/* ============================================================
   4. HEADER (SC-HDR)
   Nel tema per l'eccezione F-05: Elementor Free non ha il Theme Builder.
   Statico, non sticky, come deciso nel site layer: su mobile il contatto
   resta raggiungibile dalla barra fissa in basso (SC-STICKY-CALL).
   ============================================================ */
.sar-header{
  background:var(--sar-primary);
  color:var(--sar-on-dark);
}
.sar-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sar-sp-m);
  min-height:var(--sar-header-h);
}
/* Il nome del sito e' un div, non un H1: l'H1 appartiene alla pagina. */
.sar-logo{
  display:inline-flex;align-items:center;gap:var(--sar-sp-xs);
  min-height:var(--tap);
  color:var(--sar-on-dark);
  font-family:var(--sar-font-head);
  font-weight:600;
  font-size:19px;
  line-height:1.15;
  text-decoration:none;
}
.sar-logo img{max-height:44px;width:auto;}
/* Logo caricato dal Personalizza: alto quanto la barra meno 4px per lato,
   cosi' segue --sar-header-h. Il file ha lo sfondo chiaro e non trasparente:
   il ritaglio tondo lo trasforma in un badge sul verde. */
.custom-logo-link{display:inline-flex;align-items:center;flex-shrink:0;}
.custom-logo-link img{
  height:calc(var(--sar-header-h) - 8px);
  width:auto;
  border-radius:50%;
}

.sar-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;}
.sar-nav a{
  display:flex;align-items:center;
  min-height:var(--tap);
  padding:0 var(--sar-sp-s);
  color:var(--sar-on-dark);
  text-decoration:none;
  border-radius:var(--sar-radius);
  font-size:var(--sar-fs-small);
}
.sar-nav a:hover{background:rgba(255,255,255,.12);}
.sar-nav .current-menu-item > a{background:rgba(255,255,255,.18);font-weight:600;}

.sar-burger{
  display:none;
  min-width:var(--tap);min-height:var(--tap);
  align-items:center;justify-content:center;
  background:transparent;border:2px solid rgba(255,255,255,.45);
  border-radius:var(--sar-radius);
  color:var(--sar-on-dark);
  cursor:pointer;
}
.sar-burger__bars,
.sar-burger__bars::before,
.sar-burger__bars::after{
  display:block;width:20px;height:2px;background:currentColor;content:"";
}
.sar-burger__bars::before{transform:translateY(-6px);}
.sar-burger__bars::after{transform:translateY(4px);}

.sar-header__cta{display:flex;align-items:center;gap:var(--sar-sp-xs);}

/* ============================================================
   5. FOOTER (SC-FTR) — sfondo primary-dark, tre colonne
   ============================================================ */
.sar-footer{
  background:var(--sar-primary-dark);
  color:var(--sar-on-dark);
  margin-top:var(--sar-sp-3xl);
  padding:var(--sar-sp-2xl) 0 var(--sar-sp-xl);
}
.sar-footer a{
  color:var(--sar-on-dark);
  text-decoration-color:rgba(255,255,255,.4);
  text-underline-offset:3px;
}
.sar-footer a:hover{color:var(--sar-accent-on-dark);text-decoration-color:currentColor;}
.sar-footer a:focus-visible{outline:2px solid var(--sar-accent-on-dark);outline-offset:2px;border-radius:2px;}
/* Marchio e contatti piu' larghi (l'indirizzo sta su una riga), pagine strette. */
.sar-footer__grid{
  display:grid;
  grid-template-columns:1.2fr 1.3fr 1fr;
  gap:var(--sar-sp-xl);
}
.sar-footer h2{
  color:var(--sar-on-dark);
  font-family:var(--sar-font-body);
  font-size:var(--sar-fs-small);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:var(--sar-sp-s);
}
.sar-footer p{margin:0;}
.sar-footer ul{list-style:none;margin:0;padding:0;}
/* Testo secondario: bianco all'80% su primary-dark resta sopra 9:1. */
.sar-footer__muted{color:rgba(255,255,255,.8);}

.sar-footer__brand .custom-logo-link img{height:72px;}
.sar-footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sar-sp-s);}
.sar-footer__name{
  font-family:var(--sar-font-head);
  font-size:var(--sar-fs-h3);
  font-weight:600;
  line-height:var(--sar-lh-head);
}
.sar-footer__brand .sar-btn{margin-top:var(--sar-sp-xs);}

/* Ogni riga di contatto alta almeno 48px: e' anche il bersaglio di tocco. */
.sar-footer__contacts li{
  display:flex;align-items:center;gap:var(--sar-sp-s);
  min-height:var(--tap);
}
.sar-footer__contacts a{text-decoration:none;}
.sar-footer__contacts a:hover{text-decoration:underline;}
.sar-footer__icon{flex-shrink:0;color:var(--sar-accent-on-dark);}

/* Sei voci in due colonne: niente colonna lunga e stretta. */
.sar-footer__links{display:grid;grid-template-columns:repeat(2,max-content);column-gap:var(--sar-sp-l);}
.sar-footer__links a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;}
.sar-footer__links a:hover{text-decoration:underline;}

.sar-footer__legal{
  margin-top:var(--sar-sp-xl);
  padding-top:var(--sar-sp-s);
  border-top:1px solid rgba(255,255,255,.2);
  font-size:var(--sar-fs-small);
  color:rgba(255,255,255,.8);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sar-sp-xs) var(--sar-sp-l);
}
.sar-footer__legal-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sar-sp-l);}
.sar-footer__legal a{display:inline-flex;align-items:center;min-height:var(--tap);}

/* ============================================================
   6. BARRA CONTATTO MOBILE (SC-STICKY-CALL, eccezione F-02)
   Due pulsanti a meta' larghezza: WhatsApp accent, Chiama primary.
   Serve perche' il brief chiede WhatsApp e telefono a un tocco nella
   prima viewport e Elementor Free non ha la posizione fissa.
   ============================================================ */
.sar-bar{display:none;}

/* ============================================================
   7. CONTENUTO: aiuti per i widget Elementor
   ============================================================ */

/* Testo lungo: larghezza di lettura 720px (§3.3). */
.sar-reading{max-width:var(--sar-reading);}

/* Tabelle in un Text Editor (eccezione F-04): su schermo stretto scorrono
   da sole invece di allargare la pagina. */
.elementor-widget-text-editor table{
  display:block;
  width:100%;max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-collapse:collapse;
  font-size:var(--sar-fs-small);
}
.elementor-widget-text-editor table th,
.elementor-widget-text-editor table td{
  border:1px solid var(--sar-line);
  padding:var(--sar-sp-xs) var(--sar-sp-s);
  text-align:left;
  vertical-align:top;
}
.elementor-widget-text-editor table th{
  background:var(--sar-surface-alt);
  font-family:var(--sar-font-head);
  font-weight:600;
}
/* Indicazione visiva che la tabella scorre, solo su mobile. */
.sar-table-hint{
  display:none;
  font-size:var(--sar-fs-small);
  color:var(--sar-ink-soft);
  margin-bottom:var(--sar-sp-xs);
}

/* Segnaposto immagine: tinta unita dei token, mai una foto stock (G-03). */
.sar-img-placeholder{
  display:flex;align-items:center;justify-content:center;
  background:var(--sar-primary);
  color:var(--sar-on-dark);
  border-radius:var(--sar-radius);
  min-height:260px;
  font-size:var(--sar-fs-small);
  text-align:center;
  padding:var(--sar-sp-m);
}

/* Niente animazioni di ingresso (§8); se un plugin ne aggiunge, qui si fermano. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   8. CONTENUTO SENZA ELEMENTOR (404, ricerca)
   ============================================================ */
.sar-main{min-height:50vh;}
.sar-entry{padding:var(--sar-sp-2xl) 0;}
.sar-entry__content > *{max-width:var(--sar-reading);}

/* ============================================================
   9. BREAKPOINT  — tablet <=1024, mobile <=767 (§3.3)
   I corpi del testo sono quelli esatti del site layer.
   ============================================================ */
@media (max-width:1024px){
  :root{
    --sar-fs-h1:38px;
    --sar-fs-h2:28px;
    --sar-fs-h3:20px;
    --sar-fs-body:17px;
    --sar-section-y:64px;
  }
  .sar-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;z-index:400;
    background:var(--sar-primary);
    padding:var(--sar-sp-xs) var(--sar-gutter) var(--sar-sp-m);
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .sar-header.is-open .sar-nav{display:block;}
  .sar-header__inner{position:relative;}
  .sar-burger{display:inline-flex;}
  .sar-footer__grid{grid-template-columns:1fr 1fr;gap:var(--sar-sp-l);}
  /* Il marchio prende la riga intera, contatti e pagine affiancati sotto. */
  .sar-footer__brand{grid-column:1 / -1;}
  
   .sar-nav ul {
    flex-direction: column;
    gap: 2px;
  .sar-nav a {
    width: 100%;
  }
}

@media (max-width:767px){
  :root{
    --sar-fs-h1:30px;
    --sar-fs-h2:24px;
    --sar-fs-h3:19px;
    --sar-section-y:48px;
  }

  .sar-footer__grid{grid-template-columns:1fr;}
  .sar-footer__brand .sar-btn{display:none;} /* WhatsApp c'e' gia' nella barra fissa */
  .sar-footer__legal{flex-direction:column;align-items:flex-start;}
  /* spazio in fondo perche' la barra fissa non copra il footer */
  .sar-footer{padding-bottom:calc(var(--sar-sp-xl) + var(--sar-bar-h));}

  /* Nell'header mobile resta il pulsante WhatsApp compatto accanto
     all'hamburger (site layer §4): il telefono sta nella barra in basso. */
  .sar-header__cta .sar-btn--on-dark{display:none;}
  .sar-header__cta .sar-btn{padding:0 var(--sar-sp-s);font-size:var(--sar-fs-small);}
  .sar-logo{font-size:17px;}

  .sar-bar{
    display:grid;
    grid-template-columns:1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:600;
    /* rispetta la barra gesti degli iPhone */
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .sar-bar a{
    display:flex;align-items:center;justify-content:center;
    min-height:var(--sar-bar-h);
    font-family:var(--sar-font-body);
    font-weight:600;
    font-size:var(--sar-fs-body);
    text-decoration:none;
  }
  .sar-bar__wa{background:var(--sar-accent);color:var(--sar-on-dark);}
  .sar-bar__tel{background:var(--sar-primary);color:var(--sar-on-dark);}
  body{padding-bottom:var(--sar-bar-h);}

  .sar-table-hint{display:block;}
}

/* ============================================================
   10. CORREZIONI MISURATE
   Regole nate da difetti rilevati misurando le pagine, non da gusto.
   ============================================================ */

/* I link dentro il testo delle sezioni scure usavano l'accento pieno:
   2.25:1 su primary-dark, sotto il minimo. Qui passano alla variante chiara.
   Il secondo selettore copre il testo delle voci di elenco quando l'intera voce
   e' un link: li' Elementor scrive il colore su uno <span> interno, con una
   regola che viene dopo la nostra; la classe .elementor-widget aggiunta davanti
   serve solo ad alzare la specificita' quanto basta per vincere. */
.sar-su-scuro a,
.elementor-widget.sar-su-scuro a,
.elementor-widget.sar-su-scuro a .elementor-icon-list-text{
  color:var(--sar-accent-on-dark);
}

/* I pulsanti di Elementor uscivano alti 44px: il site layer chiede 48 minimi. */
.elementor-button{
  min-height:var(--tap);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--sar-radius);
}

/* Anche le voci di un Icon List sono bersagli da toccare. */
.elementor-icon-list-item > a{
  min-height:var(--tap);
  display:flex;
  align-items:center;
}

@media (max-width:767px){
  /* Su mobile le CTA vanno a larghezza piena, come chiedono i blueprint. */
  .elementor-widget-button .elementor-button{width:100%;}
  /* Due pulsanti vicini non devono toccarsi: almeno 8px, come da site layer. */
  .elementor-widget-button{margin-bottom:var(--sar-sp-xs);}
}

/* ============================================================
   11. GERARCHIA E RITMO  (correzioni misurate, revisione UI)
   Elementor applica a ogni widget Heading lo stesso stile globale,
   qualunque sia il tag: senza queste regole H1, H2, H3, titoli delle
   card e titoli delle FAQ escono tutti della stessa dimensione.
   Le misure sono quelle del site layer §3.2, prese dai token.
   ============================================================ */

/* Il selettore include il tag per vincere sulla regola del Kit,
   che ha la stessa specificita' ma viene caricata dopo. */
.elementor-widget-heading h1.elementor-heading-title{font-size:var(--sar-fs-h1);}
.elementor-widget-heading h2.elementor-heading-title{font-size:var(--sar-fs-h2);}
.elementor-widget-heading h3.elementor-heading-title{font-size:var(--sar-fs-h3);}
.elementor-widget-heading h4.elementor-heading-title{font-size:var(--sar-fs-h3);}

/* Stessi stili globali, stesso problema: anche card e FAQ sono titoli H3.
   Qui serve una classe in piu' (.elementor-widget) perche' la regola del Kit
   ha la stessa specificita' ed e' caricata dopo il foglio del tema. */
.elementor-widget.elementor-widget-icon-box .elementor-icon-box-title{font-size:var(--sar-fs-h3);}
.elementor-widget.elementor-widget-accordion .elementor-accordion-title{font-size:var(--sar-fs-h3);}

/* Spaziatura dei titoli: la distanza la decide il gap del container,
   non il margine del titolo, altrimenti si sommano e il ritmo salta
   (misurato: 32px dopo alcuni H2, 16px dopo altri). */
.elementor-widget-heading .elementor-heading-title{margin-block:0;}

/* Respiro verticale delle sezioni.
   Su un container "boxed" Elementor sposta il padding sul wrapper interno e
   lascia a zero quello esterno: i 96/64/48px del site layer non arrivavano mai.
   Qui si applicano al wrapper, che e' dove vengono effettivamente resi. */
.sar-site main .e-con.e-con-boxed > .e-con-inner{
  padding-block:var(--sar-section-y);
  /* Anche il margine laterale va messo qui: sul container "boxed" Elementor
     azzera il padding esterno, e senza questo a 390px la tabella dei dati
     d'impresa sbordava di 16px facendo scorrere la pagina in orizzontale. */
  padding-inline:var(--sar-gutter);
  gap:var(--sar-sp-m);
  width:100%;
}

/* Larghezza di lettura: il testo lungo si ferma a 720px (site layer §3.3).
   Solo nelle sezioni a colonna singola: dentro una colonna la larghezza
   la decide gia' la percentuale del blueprint. */
/* Solo nelle sezioni a colonna singola: le colonne del blueprint sono
   container "full", quindi non vengono toccate da questo selettore. */
.sar-site main .e-con.e-con-boxed > .e-con-inner > .elementor-widget-text-editor{
  /* min(): la larghezza di lettura non deve mai superare lo spazio disponibile,
     altrimenti su schermo stretto il blocco sborda invece di restringersi. */
  max-width:min(var(--sar-reading),100%);
}

/* Le voci di elenco sono righe di lettura, non paragrafi larghi. */
.elementor-widget-icon-list .elementor-icon-list-items{max-width:var(--sar-reading);}

/* I widget sono elementi flex dentro i container di Elementor. Un elemento flex
   ha min-width:auto, cioe' si rifiuta di restringersi sotto la larghezza minima
   del suo contenuto: la tabella dei dati d'impresa, larga, faceva percio'
   sbordare la pagina a 390px (misurato: 421px invece di 390). Con min-width:0
   il widget puo' restringersi e la tabella scorre al suo interno, come previsto
   dall'eccezione F-04. */
.sar-site main .e-con > .e-con-inner > .elementor-widget,
.sar-site main .e-con > .elementor-widget,
.sar-site main .e-con > .e-con-inner > .e-con{
  min-width:0;
  max-width:100%;
}