/* Cascade layers: bootstrap (base) < cms (struttura) < design (grafica IA).
   Ogni livello vince sul precedente A PRESCINDERE dalla specificita: il CSS del
   design (design.css, in @layer design) batte SEMPRE la struttura del CMS, che
   batte SEMPRE Bootstrap. Niente piu !important ne guerre di specificita.
   Bootstrap resta integro: l'@import lo carica nel layer senza modificarne il
   file. I TOKEN (theme.css) restano non-layered: le variabili valgono sempre. */
@layer bootstrap, cms, design;
@import url("../vendor/bootstrap/bootstrap.min.css") layer(bootstrap);

@layer cms {

:root {
    --bg: #ffffff;
    --text: #1f2328;
    --muted: #6b7280;
    --accent: #d99a28;
    --primary: var(--accent);
    --secondary: #6750a4;
    --highlight: #c23b72;
    --border: #e5e7eb;
    --surface: #ffffff;
    --surface-alt: #f5f3f7;
    /* Superficie SCURA reale (bande scure + footer). Il tema la deriva dalla
       palette; questi sono i default se non c'e tema salvato. */
    --surface-dark: #14181c;
    --on-surface-dark: #f5f7fa;
    --on-primary: #ffffff;
    /* Larghezza di default: contenitore ampio come Bootstrap (.container xxl = 1320px).
       Il tema puo restringere via token, ma la base e sempre "larga". La leggibilita
       del testo lungo e garantita da --max-prose sulle colonne di contenuto. */
    --max: 1320px;
    --max-prose: 72ch;
    --font-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-headings: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-base: 16px;
    --radius: 8px;
    --header-bg: #ffffff;
    --header-text: #1f2328;
    --footer-bg: #ffffff;
    --footer-text: #6b7280;
    --header-image: none;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
}
h1, h2, h3, h4 { font-family: var(--font-headings); }
/* padding 1.5rem = mezzo gutter massimo di Bootstrap (.g-5): assorbe i margini
   negativi delle .row (anche in header/footer) senza scroll orizzontale. */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.site-header {
    border-bottom: 1px solid var(--border);
    background-color: var(--header-bg);
    background-image: var(--header-image);
    background-size: cover;
    background-position: center;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
.brand { font-weight: 700; font-size: 1.15rem; color: var(--header-text); text-decoration: none; }
.site-logo { display: block; height: 40px; width: auto; max-width: 220px; object-fit: contain; }
.header-brand-wrap { display: flex; flex-direction: column; }
.header-tagline { color: var(--header-text); opacity: .72; font-size: .82rem; }
.header-centered .nav-menu { justify-content: center; flex-wrap: wrap; }
.nav-menu { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }
.nav-menu a { color: var(--header-text); opacity: .75; text-decoration: none; font-size: .95rem; }
.nav-menu a:hover { color: var(--accent); opacity: 1; }
/* Il <main> e una TELA a tutta larghezza: NON e piu un .container. Cosi le
   SEZIONI del Design Package (.design-section) toccano i bordi dello schermo
   senza trucchi 100vw (che causavano la barra di scorrimento orizzontale). Il
   contenuto resta centrato dal .ds-container interno di ogni sezione. */
.site-main { width: 100%; }
/* Rete di sicurezza: la pila di sezioni non deve MAI generare scroll orizzontale
   (es. una .row Bootstrap che sfiora il bordo nell'area della scrollbar). clip
   non crea un contenitore di scroll: non rompe position:sticky ne il full-bleed. */
.site-main > .wf { overflow-x: clip; }
/* Il "container" va messo DOVE SERVE, cioe nei contenuti senza design:
   il wireframe "standard" centra e impagina il contenuto come faceva prima il
   .container del main. Le pagine "a pila" (stack) restano a tutta larghezza. */
.wf-standard { max-width: var(--max); margin-inline: auto; padding: 2.5rem 1.25rem; }
h1 { letter-spacing: -.02em; }
.meta, .news-date, .date { color: var(--muted); font-size: .85rem; }
.content { margin-top: 1.25rem; }
/* Colonna di testo lungo leggibile dentro il layout ampio (chrome largo, testo ~72ch). */
.content, .content-body { max-width: var(--max-prose); }
.content img { max-width: 100%; height: auto; border-radius: var(--radius); }
.content table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.content th, .content td { border: 1px solid var(--border); padding: .5rem .7rem; }
.content th { background: #f9fafb; text-align: left; }
.content blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--accent); color: var(--muted); }
.archive-list { list-style: none; padding: 0; }
.archive-list li { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.archive-list a { font-size: 1.1rem; color: var(--text); text-decoration: none; }
.archive-list a:hover { color: var(--accent); }
.excerpt { color: var(--muted); margin: .35rem 0 0; }
.empty { color: var(--muted); }
.site-footer { border-top: 1px solid var(--border); background: var(--footer-bg); color: var(--footer-text); font-size: .85rem; padding: 1.5rem 0; }
.error-page { text-align: center; padding: 4rem 0; }
.error-page h1 { font-size: 4rem; margin: 0; color: var(--accent); }

/* Paginazione */
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; }
.page-link {
    display: inline-block; padding: .4rem .7rem; border: 1px solid var(--border);
    border-radius: var(--radius); text-decoration: none; color: var(--text); font-size: .9rem;
}
.page-link:hover { border-color: var(--accent); color: var(--accent); }
.page-link.current { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Campi extra */
.blog-post .cover { width: 100%; height: auto; border-radius: var(--radius); margin-bottom: 1.5rem; }
.attachment { margin: 1.5rem 0; }
.attachment a { display: inline-block; padding: .6rem 1rem; border: 1px solid var(--border);
    border-radius: var(--radius); text-decoration: none; color: var(--text); }
.attachment a:hover { border-color: var(--accent); color: var(--accent); }
.news-location { margin-top: 1.5rem; }
.location-label { font-weight: 600; margin-bottom: .5rem; }
#news-map { height: 320px; border-radius: var(--radius); border: 1px solid var(--border); }
.archive-list .thumb { width: 100%; max-width: 220px; height: auto; border-radius: var(--radius); margin-top: .5rem; display: block; }

/* Navigazione gerarchica (sottomenu) */
.nav-menu { position: relative; }
.nav-menu .has-children > a::after { content: " \25BE"; font-size: .8em; color: var(--muted); }
.nav-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Su desktop: sottomenu a tendina al passaggio del mouse */
@media (min-width: 721px) {
    .nav-menu > li { position: relative; }
    .nav-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 180px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: .4rem 0;
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
        display: none;
        z-index: 20;
    }
    .nav-menu > li:hover > .nav-submenu { display: block; }
    .nav-submenu li a { display: block; padding: .4rem 1rem; }
    .nav-submenu .nav-submenu { position: static; border: 0; box-shadow: none; padding-left: .75rem; }
}
/* Su mobile: sottomenu sempre visibili, indentati */
@media (max-width: 720px) {
    .nav-submenu { padding-left: 1rem; border-left: 2px solid var(--border); margin-top: .25rem; }
    .nav-submenu li { padding: .2rem 0; }
}

/* --- Motore wireframe/blocchi: stili di base delle zone e dei campi --- */
.wf-zone { margin-bottom: 1.5rem; }
.wf-zone-main { margin-bottom: 2rem; }
.content-title { margin: 0 0 .75rem; }
.content-excerpt { font-size: 1.1rem; color: #555; margin-bottom: 1.25rem; }
.content-body { line-height: 1.7; }
.content-fields { margin-top: 1.5rem; border-top: 1px solid #e5e5e5; padding-top: 1rem; }
.field-row { display: flex; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid #f0f0f0; }
.field-label { font-weight: 600; min-width: 160px; color: #444; }
.field-value { flex: 1; }
.field-value img { max-width: 100%; height: auto; border-radius: var(--radius); }
.block-placeholder { padding: .75rem 1rem; background: #faf7ef; border: 1px dashed #d9c68a; border-radius: var(--radius); color: #8a7320; font-size: .9rem; }

/* Voci di menu "etichetta" (non cliccabili) */
.nav-label { cursor: default; opacity: .85; font-weight: 600; }
.site-nav .nav-label, .nav-menu .nav-label { padding: inherit; }


/* --- Ponte token -> Bootstrap 5 -------------------------------------
   Caricato DOPO bootstrap.min.css: le variabili --bs-* vengono agganciate
   ai nostri design token, cosi il tema (Aspetto > Tema) pilota anche i
   componenti Bootstrap senza toccare il framework. Se Bootstrap non e
   presente, queste variabili restano semplicemente inutilizzate. */
:root {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-font-family: var(--font-base);
    --bs-body-font-size: var(--fs-base);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent);
    --bs-secondary-color: var(--muted);
    --bs-heading-font-family: var(--font-headings);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-headings); }
.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
}
.card { --bs-card-border-radius: var(--radius); --bs-card-border-color: var(--border); }
/* Il nostro .container mantiene la larghezza del token anche con Bootstrap */
.container { max-width: var(--max); }

/* --- Token estesi (spaziature, ombre, forme) ------------------------
   Fallback identici all'aspetto di base: senza tema salvato nulla cambia. */
h1 { font-size: var(--fs-h1, 40px); }
.wf-zone + .wf-zone { margin-top: var(--sp-section, 48px); }
.btn { border-radius: var(--btn-radius, var(--radius)); }
.card, .component-hero, .component-cta, .component-carousel, .component-hero-slider { box-shadow: var(--shadow, none); }
.component-hero { min-height: var(--hero-min-h, 420px); }
.hero-centered, .hero-split { background: var(--header-bg); border: 1px solid var(--border); }
.hero-centered[style*="background-image"] { background-size: cover; background-position: center; color: #fff; }
.hero-transparent { background: transparent; border: 0; }
.cta-banner { background: var(--primary); color: var(--on-primary); }
.cta-boxed { background: var(--surface); border: 1px solid var(--border); }
.cta-transparent { background: transparent; border: 0; }
.component-carousel { background: var(--surface); border: 1px solid var(--border); }
.component-footer { background: var(--footer-bg); color: var(--footer-text); }
.header-bootstrap .navbar { color: var(--header-text); background: var(--header-bg); }
.header-bootstrap .navbar-brand,
.header-bootstrap .nav-link { color: var(--header-text); }
.header-bootstrap .navbar-toggler { border-color: color-mix(in srgb, var(--header-text) 35%, transparent); }
.header-bootstrap .navbar-toggler-icon { filter: var(--navbar-toggler-filter, none); }
.header-sticky, .design-section-sticky { position: sticky; top: 0; z-index: 1030; }
.header-bootstrap .dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--text); --bs-dropdown-link-color: var(--text); }
.component-card-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.component-hero-slider { width: 100%; overflow: hidden; background: var(--surface-alt); }
.hero-slider-image { height: clamp(420px, 68vh, 760px); object-fit: cover; }
.hero-slider-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.18)); }
.hero-slider-caption { inset: auto auto 12% 8%; width: min(680px, 80%); text-align: left; color: #fff; }
.hero-slider-title { font-size: clamp(2.2rem, 5vw, 5rem); font-weight: 800; line-height: 1; }
.hero-slider-excerpt { max-width: 52ch; font-size: clamp(1rem, 1.5vw, 1.25rem); }

/* Banner di testata delle pagine interne (gestore "Slider & Banner"): fascia
   immagine a tutta larghezza sotto l'header, con velo scuro. */
.mc-pagehero { position: relative; width: 100%; height: clamp(200px, 34vh, 360px); overflow: hidden; margin-bottom: 2rem; }
.mc-pagehero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mc-pagehero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.5)); }

/* ===== Contratto strutturale Design Package v2 — modello a DUE LIVELLI =====
   .design-section  = FASCIA a tutta larghezza: dipinge la superficie (surface),
                      porta la spaziatura verticale (pt/pb) e lo slug .ds-<key>.
   .ds-container    = CONTENITORE interno: centra il contenuto alla larghezza
                      scelta (narrow/content/wide/full) con un gutter laterale.
   Cosi lo sfondo di ogni banda arriva sempre ai bordi dello schermo mentre il
   contenuto resta leggibile e centrato. */
.design-section { position: relative; width: 100%; }
.design-section-sticky { position: sticky; }
.ds-container { width: 100%; margin-inline: auto; }
/* padding-inline 1.5rem = mezzo gutter massimo di Bootstrap (.g-5 = 3rem):
   assorbe i margini negativi delle .row cosi non sbordano (niente scrollbar
   orizzontale sotto i ~1152px). */
.ds-container.ds-width-narrow  { max-width: 46rem;   padding-inline: 1.5rem; }
.ds-container.ds-width-content { max-width: 72rem;   padding-inline: 1.5rem; }
.ds-container.ds-width-wide    { max-width: var(--max); padding-inline: 1.5rem; }
/* full: nessun limite ne gutter — il template gestisce da se il proprio centro
   (es. .ds-hero-inner con max-width e margin-inline:auto). */
.ds-container.ds-width-full    { max-width: none;    padding-inline: 0; }
.ds-spacing-none { padding-block: 0; }
.ds-spacing-sm { padding-block: 1.25rem; }
.ds-spacing-md { padding-block: 2.5rem; }
.ds-spacing-lg { padding-block: 4rem; }
.ds-spacing-xl { padding-block: clamp(4.5rem, 9vw, 8rem); }

/* ===== Scala di spaziatura del design (ritmo verticale coerente) =====
   Un unico sistema di passi che il Design Package usa via pt/pb/gap: il CMS
   accetta solo questi passi, così le spaziature restano sempre "sulla scala". */
:root {
    --ds-space-0: 0;      --ds-space-1: .25rem; --ds-space-2: .5rem;  --ds-space-3: .75rem;
    --ds-space-4: 1rem;   --ds-space-5: 1.5rem; --ds-space-6: 2rem;   --ds-space-7: 2.5rem;
    --ds-space-8: 3rem;   --ds-space-9: 4rem;   --ds-space-10: 5rem;  --ds-space-11: 6rem;
    --ds-space-12: 8rem;
}
/* pt: oltre a padding-top espone il valore in --_dspt, cosi un elemento interno
   (es. il footer, dove l'accento sta in cima alla fascia) puo riusare lo stesso
   passo scelto dall'IA come spaziatura interna. */
.ds-pt-0{padding-top:0;--_dspt:0}.ds-pt-1{padding-top:var(--ds-space-1);--_dspt:var(--ds-space-1)}.ds-pt-2{padding-top:var(--ds-space-2);--_dspt:var(--ds-space-2)}.ds-pt-3{padding-top:var(--ds-space-3);--_dspt:var(--ds-space-3)}.ds-pt-4{padding-top:var(--ds-space-4);--_dspt:var(--ds-space-4)}.ds-pt-5{padding-top:var(--ds-space-5);--_dspt:var(--ds-space-5)}.ds-pt-6{padding-top:var(--ds-space-6);--_dspt:var(--ds-space-6)}.ds-pt-7{padding-top:var(--ds-space-7);--_dspt:var(--ds-space-7)}.ds-pt-8{padding-top:var(--ds-space-8);--_dspt:var(--ds-space-8)}.ds-pt-9{padding-top:var(--ds-space-9);--_dspt:var(--ds-space-9)}.ds-pt-10{padding-top:var(--ds-space-10);--_dspt:var(--ds-space-10)}.ds-pt-11{padding-top:var(--ds-space-11);--_dspt:var(--ds-space-11)}.ds-pt-12{padding-top:var(--ds-space-12);--_dspt:var(--ds-space-12)}
.ds-pb-0{padding-bottom:0}.ds-pb-1{padding-bottom:var(--ds-space-1)}.ds-pb-2{padding-bottom:var(--ds-space-2)}.ds-pb-3{padding-bottom:var(--ds-space-3)}.ds-pb-4{padding-bottom:var(--ds-space-4)}.ds-pb-5{padding-bottom:var(--ds-space-5)}.ds-pb-6{padding-bottom:var(--ds-space-6)}.ds-pb-7{padding-bottom:var(--ds-space-7)}.ds-pb-8{padding-bottom:var(--ds-space-8)}.ds-pb-9{padding-bottom:var(--ds-space-9)}.ds-pb-10{padding-bottom:var(--ds-space-10)}.ds-pb-11{padding-bottom:var(--ds-space-11)}.ds-pb-12{padding-bottom:var(--ds-space-12)}
/* gap: spazio verticale fra i blocchi diretti della sezione (owl selector) */
.ds-gap-1>*+*{margin-top:var(--ds-space-1)}.ds-gap-2>*+*{margin-top:var(--ds-space-2)}.ds-gap-3>*+*{margin-top:var(--ds-space-3)}.ds-gap-4>*+*{margin-top:var(--ds-space-4)}.ds-gap-5>*+*{margin-top:var(--ds-space-5)}.ds-gap-6>*+*{margin-top:var(--ds-space-6)}.ds-gap-7>*+*{margin-top:var(--ds-space-7)}.ds-gap-8>*+*{margin-top:var(--ds-space-8)}.ds-gap-9>*+*{margin-top:var(--ds-space-9)}.ds-gap-10>*+*{margin-top:var(--ds-space-10)}.ds-gap-11>*+*{margin-top:var(--ds-space-11)}.ds-gap-12>*+*{margin-top:var(--ds-space-12)}
.ds-surface-light { background: var(--surface); }
.ds-surface-cream { background: var(--surface-alt); }
.ds-surface-accent { background: var(--primary); color: var(--on-primary); }
.ds-surface-dark { background: var(--surface-dark); color: var(--on-surface-dark); }
.ds-tone-muted { color: var(--muted); }
.ds-tone-inverse { color: #fff; }
/* Footer dentro una fascia design: lo sfondo lo dipinge la sezione (surface),
   quindi il componente footer non deve sovrapporre il proprio --footer-bg ne il
   proprio padding verticale (lo governa pt/pb della sezione). */
.design-section .site-footer,
.design-section .component-footer { background: transparent; color: inherit; padding-block: 0; }
/* Accento in cima al footer (es. border-top): deve stare al BORDO ALTO della
   fascia, non lasciare una striscia scura sopra. Azzeriamo il padding-top della
   fascia footer e spostiamo lo spazio DENTRO, sotto la linea. */
.design-section[data-component="footer"] { padding-top: 0; }
.design-section[data-component="footer"] > .site-footer { padding-top: var(--_dspt, var(--ds-space-8)); }
.ds-align-start { text-align: left; }
.ds-align-center { text-align: center; }
.ds-align-end { text-align: right; }
.wf-marketing-home > .wf-zone,
.wf-editorial-page > .wf-zone { margin-bottom: 0; }
/* Pagine con Design Package: le SEZIONI gestiscono TUTTA la spaziatura verticale
   (section_style / scala pt-pb / padding dei template). Il CMS non impone alcun
   ritmo fra le zone: cosi e l'IA, dal JSON, a decidere quando gli spazi esistono
   (spacing/pt/pb) o quando le sezioni si toccano (spacing:none / pt:0). */
.wf > .wf-zone { margin-block: 0; }
.wf > .wf-zone + .wf-zone { margin-top: 0; }

/* Hook dei layout pronti dei blocchi (LayoutSnippetCatalog).
   La struttura arriva da Bootstrap; questi default sobri usano i token del
   tema e restano sovrascrivibili dal CSS dell'Aspetto (.cms-site .blk-*, che
   ha specificita maggiore e viene caricato dopo). */
.blk { margin-block: 1.5rem; }
.blk-hero { text-align: center; padding: clamp(2rem, 6vw, 4rem) 1.25rem; background: var(--surface-alt); border-radius: var(--radius); }
.blk-hero-sub { color: var(--muted); max-width: 42rem; margin: .5rem auto 1.25rem; }
.blk-media-img, .blk-row-img { width: 100%; height: auto; border-radius: var(--radius); }
.blk-list { list-style: none; padding: 0; margin: 0; }
.blk-list li { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.blk-rows .blk-row { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.blk-rows .blk-row:last-child { border-bottom: 0; }

/* ===== Componente form contatti (stile base; il design puo sovrascrivere) ===== */
.cf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Fascia contatti a due colonne: pitch introduttivo a sinistra, form a destra. */
.component-contact-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--ds-space-7, 3rem); align-items: start; }
.component-contact-split .cf-aside { min-width: 0; }
.component-contact-form { display: grid; gap: var(--ds-space-4); }
.component-contact-form .cf-row { display: grid; gap: var(--ds-space-4); grid-template-columns: 1fr 1fr; }
.component-contact-form .cf-field { display: grid; gap: .35rem; }
.component-contact-form .cf-label { font-size: .82rem; font-weight: 600; }
.component-contact-form .cf-input { width: 100%; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; }
.component-contact-form .cf-textarea { min-height: 8rem; resize: vertical; }
.component-contact-form .cf-submit { justify-self: start; }
.component-contact-form .cf-alert { padding: .8rem 1rem; border-radius: var(--radius); }
.component-contact-form .cf-alert.cf-ok { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
.component-contact-form .cf-alert.cf-err { background: color-mix(in srgb, #dd3333 16%, transparent); color: var(--text); }
@media (max-width: 620px) { .component-contact-form .cf-row { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .component-contact-split { grid-template-columns: 1fr; gap: var(--ds-space-5, 2rem); } }

/* Galleria immagini (campo gallery, resa nel dettaglio contenuto) */
.content-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--ds-space-3); }
.content-gallery .gallery-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

} /* @layer cms */