/* VISUfarma · base del tema.
   Colori e tipografia NON si definiscono qui: sono i Global del Kit di Elementor
   (Sito ▸ Impostazioni del sito ▸ Colori/Tipografia globali), esposti come variabili
   --e-global-color-<id> e --e-global-typography-<id>-*.
   Questo file fa solo tre cose: base del testo a 18 px, modalità di accessibilità, piccole correzioni. */

/* ------------------------------------------------------------------ Base e dimensione del testo
   Tutta la scala tipografica del Kit è in rem: cambiando la radice, cresce tutto insieme (DS1 §4). */
html { font-size: 112.5%; }                      /* 18 px · A  */
html[data-size='small'] { font-size: 101.25%; }  /* 90%  · A− */
html[data-size='large'] { font-size: 140.625%; } /* 125% · A+ */

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Righe di massimo ~70 caratteri nei testi lunghi (DS1 · regole d'uso) */
.vf-measure, .vf-measure .elementor-widget-container { max-width: 70ch; }

/* Link nel testo sempre sottolineati (DS1 · regole d'uso) */
.elementor-widget-text-editor a,
.elementor-widget-theme-post-content a { text-decoration: underline; text-underline-offset: 3px; }

/* Focus sempre visibile, anello blu scuro (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--e-global-color-vfbluscuro, #0E3F73);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Link «salta al contenuto» */
.vf-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  background: var(--e-global-color-primary, #14589F); color: #fff;
  padding: .75rem 1rem; border-radius: 0 0 8px 0; font-weight: 700;
}
.vf-skip:focus { left: 0; }

/* Le icone VISUfarma sono a tratto (stroke = currentColor): prendono il colore dell'icona, non del testo */
.elementor-icon-list-icon svg { color: var(--e-icon-list-icon-color, currentColor); }
.elementor-button-icon svg, .elementor-icon svg { overflow: visible; }

/* Link d'azione (pulsante in variante «link») e inviti nelle card: sottolineati (DS1 · link sempre sottolineati) */
.vf-link .elementor-button-text,
.vf-underline .elementor-heading-title { text-decoration: underline; text-underline-offset: 3px; }

/* Header: su smartphone il pulsante Area medici resta solo icona (l'etichetta resta per i lettori di schermo) */
@media (max-width: 560px) {
  .vf-btn-medici .elementor-button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vf-btn-medici .elementor-button { padding-left: 14px; padding-right: 14px; }
}

/* Container largo quanto il suo contenuto (Avanzate ▸ Classi CSS: vf-fit), es. il gruppo azioni dell'header */
.e-con.vf-fit { --width: auto; width: auto; }

/* Pulsante del menu a tendina: 44 px come «Aa» e ricerca (WCAG 2.5.8), bordo grigio medio */
.vf-header .elementor-menu-toggle {
  width: 44px; height: 44px; padding: 0; justify-content: center;
  border-color: var(--e-global-color-vfgrigiomedio, #6D6F71);
}
@media (max-width: 767px) {
  .vf-header .elementor-search-form__toggle { --e-search-form-toggle-size: 44px; }
}
/* Tendina del menu: separata dalla pagina sottostante */
.vf-header .elementor-nav-menu--dropdown { box-shadow: 0 16px 28px rgba(20, 88, 159, .12); border-bottom: 1px solid var(--e-global-color-vflinea, #DDDEDF); }

/* Testo A+ su schermi medi: le voci non stanno più in una riga accanto a logo e pulsanti,
   il menu va su una seconda riga dell'header invece di uscire dallo schermo (WCAG 1.4.4 / 1.4.10) */
@media (min-width: 1025px) and (max-width: 1439px) {
  html[data-size='large'] .vf-header > .e-con-inner { flex-wrap: wrap !important; row-gap: 0; padding-top: 12px; }
  html[data-size='large'] .vf-header > .e-con-inner > .elementor-widget-nav-menu { order: 3; flex: 1 0 100% !important; max-width: 100%; }
  html[data-size='large'] .vf-header .elementor-nav-menu--main { justify-content: flex-start; }
  html[data-size='large'] .vf-header .elementor-nav-menu__align-end .elementor-nav-menu { justify-content: flex-start; }
}

/* Etichette dei pulsanti e del menu su una riga sola nell'header */
.vf-header .elementor-button, .vf-header .elementor-nav-menu a { white-space: nowrap; }

/* ------------------------------------------------------------------ Alto contrasto (DS2 §7)
   Stessi Global, valori più scuri: ogni widget che usa i colori globali si adegua da solo. */
html[data-contrast='high'] [class*='elementor-kit-'] {
  --e-global-color-text: #000000;
  --e-global-color-vfgrigio: #000000;
  --e-global-color-vfgrigiomedio: #000000;
  --e-global-color-vfgrigiochiaro: #000000;
  --e-global-color-primary: #0E3F73;
  --e-global-color-accent: #8F3312;
  --e-global-color-vflinea: #000000;
  --e-global-color-vfsuperficie: #FFFFFF;
  --e-global-color-vfbluchiaro: #FFFFFF;
}
html[data-contrast='high'] a:not(.elementor-button) { text-decoration: underline !important; }
html[data-contrast='high'] .e-con,
html[data-contrast='high'] .elementor-widget-container,
html[data-contrast='high'] .elementor-button { box-shadow: none !important; }
html[data-contrast='high'] .vf-card,
html[data-contrast='high'] .elementor-field-textual { border-width: 2px !important; border-color: #000 !important; }
/* Hero: il velo diventa bianco pieno fino a metà, il testo resta su bianco */
html[data-contrast='high'] .vf-hero::before {
  background-image: linear-gradient(90deg, #fff 0 46%, rgba(255,255,255,.58) 76%, rgba(255,255,255,.22) 100%) !important;
  opacity: 1 !important;
}
@media (max-width: 767px) {
  html[data-contrast='high'] .vf-hero::before {
    background-image: linear-gradient(180deg, #fff 0 52%, rgba(255,255,255,.6) 82%, rgba(255,255,255,.25) 100%) !important;
  }
}

/* ------------------------------------------------------------------ Card
   Classe da assegnare ai container-card in Elementor (Avanzate ▸ Classi CSS: vf-card):
   solleva al passaggio del mouse. Bordo, raggio e ombra restano impostati nel widget. */
.vf-card { transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.vf-card:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(60,60,59,.08), 0 18px 40px rgba(20,88,159,.12); }
.vf-card:focus-within { outline: 3px solid var(--e-global-color-vfbluscuro, #0E3F73); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .vf-card, .vf-card:hover { transition: none; transform: none; }
}

/* L'intera card è cliccabile tramite il link del titolo (un solo link per card, niente link doppi).
   Widget e container di Elementor sono «position: relative»: tra il titolo e la card devono tornare statici,
   altrimenti il link si allarga solo al widget del titolo e foto e testi restano fuori. */
.vf-card--link { position: relative; }
.vf-card--link :is(.e-con, .elementor-widget):has(.vf-card__link),
.vf-card--link .vf-card__link,
.vf-card--link .vf-card__link .elementor-heading-title { position: static; }
.vf-card--link .vf-card__link a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.vf-card--link .vf-card__above { position: relative; z-index: 2; }
/* Etichette con link propri dentro la card (tipologia, area, categoria): sopra il link della card,
   ma solo le parole sono cliccabili; il resto della riga porta ancora al prodotto */
.vf-card--link .vf-card__links { position: relative; z-index: 2; pointer-events: none; }
.vf-card--link .vf-card__links a { pointer-events: auto; }
.vf-card__links a, .vf-pill-link a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vf-card__links a:hover, .vf-pill-link a:hover { text-decoration-thickness: 2px; }
/* nelle pillole la forma basta come segnale: sottolineate solo al passaggio */
.vf-card__links.elementor-widget-heading .elementor-heading-title:is(span) a,
.vf-pill-link a { text-decoration: none; }
.vf-card__links.elementor-widget-heading .elementor-heading-title:is(span) a:hover,
.vf-pill-link a:hover { text-decoration: underline; }

/* Riga d'azione in fondo alla card, allineata tra card vicine */
.vf-card__foot { margin-top: auto; }

/* Card prodotto: con il foglio illustrativo l'invito «Scheda prodotto» non serve */
.vf-card__foot:has(.vf-if-link a.elementor-button[href]:not([href=''])) .vf-cta-fallback { display: none; }

/* Foto dinamiche (immagine in evidenza come sfondo): riempiono il riquadro senza deformarsi */
.e-con.vf-media { background-size: cover; background-position: center center; background-repeat: no-repeat; }

/* Freccia degli inviti: fuori dalla sottolineatura */
.vf-arrow { display: inline-block; margin-left: .35em; text-decoration: none; }

/* ------------------------------------------------------------------ Apertura: comando del video emozionale
   Compare solo quando la fascia ha un video di sfondo (Stile ▸ Sfondo ▸ Video); con la sola foto resta nascosto. */
.vf-hero__controls { display: none !important; }
.vf-hero:has(video) .vf-hero__controls {
  display: flex !important; position: absolute; right: 24px; bottom: 24px; z-index: 2; width: auto;
}
.vf-video-toggle .elementor-button { width: 48px; height: 48px; padding: 0; border-radius: 50%; justify-content: center; }
.vf-video-toggle .elementor-button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vf-video-toggle .elementor-button-icon { margin: 0 !important; }
/* In pausa l'icona diventa «riproduci» */
.vf-video-toggle.is-paused .elementor-button-icon svg { display: none; }
.vf-video-toggle.is-paused .elementor-button-icon::before { content: ''; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
@media (max-width: 767px) {
  .vf-hero:has(video) .vf-hero__controls { position: static; align-self: flex-end; margin-top: 16px; }
  .vf-hero__controls .elementor-widget-heading { display: none; }
}

/* ------------------------------------------------------------------ Menu
   «Area medici» nel menu principale serve solo nel menu a tendina (su desktop c'è il pulsante) */
.vf-header .elementor-nav-menu--main .vf-menu-medici { display: none; }
/* Menu orizzontali del footer: quando vanno a capo, le righe restano allineate a sinistra */
.vf-footer-menu .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: wrap; gap: 4px 24px; }
.vf-footer-menu .elementor-nav-menu--main > .elementor-nav-menu > li { margin: 0 !important; }

/* ------------------------------------------------------------------ Pagina dell'area terapeutica (wireframe 03) */
/* L'indice «In questa pagina» resta a vista mentre si legge (solo da desktop: sotto i 1025 px sta sopra il testo) */
@media (min-width: 1025px) {
  .vf-sticky { position: sticky; top: 24px; align-self: flex-start; }
}
.vf-indice__voce .elementor-heading-title a {
  display: block; padding: 8px 0 8px 14px; border-left: 2px solid var(--e-global-color-vflinea, #DDDEDF);
  color: inherit; text-decoration: none;
}
.vf-indice__voce .elementor-heading-title a:hover { color: var(--e-global-color-primary, #14589F); text-decoration: underline; text-underline-offset: 3px; }
/* sezione in lettura: bordo blu e grassetto, non solo colore (WCAG 1.4.1) */
.vf-indice__voce .elementor-heading-title a[aria-current='true'] {
  border-left: 4px solid var(--e-global-color-primary, #14589F); padding-left: 12px; font-weight: 700; color: var(--e-global-color-primary, #14589F);
}
/* le ancore non finiscono attaccate al bordo della finestra */
.vf-sezione-area, #prodotti, #approfondimenti { scroll-margin-top: 24px; }
.vf-testo-area p:last-child { margin-bottom: 0; }

/* Lucchetto davanti a «Scheda nell'area medici» (icona del DS, colore del testo) */
.vf-lucchetto {
  display: inline-block; width: 1em; height: 1em; margin-right: .4em; vertical-align: -.15em; background: currentColor;
  -webkit-mask: url('../../../../plugins/visufarma-core/assets/icons/i-lock.svg') center / contain no-repeat;
  mask: url('../../../../plugins/visufarma-core/assets/icons/i-lock.svg') center / contain no-repeat;
}

/* ------------------------------------------------------------------ Articolo di VISUfarma Informa (wireframe 08 · 1)
   Fatto per leggere: corpo più grande, interlinea ampia, righe brevi, titoli intermedi ben staccati (WCAG 1.4.8) */
.vf-articolo__testo .elementor-widget-theme-post-content { font-size: 1.125rem; line-height: 1.75; }
.vf-articolo__testo h2 { font-size: 1.5rem; line-height: 1.3; margin: 2em 0 .5em; }
.vf-articolo__testo h3 { font-size: 1.25rem; margin: 1.6em 0 .4em; }
.vf-articolo__testo p, .vf-articolo__testo ul, .vf-articolo__testo ol { margin: 0 0 1em; }
.vf-articolo__testo li + li { margin-top: .35em; }
.vf-articolo__immagine figcaption { margin-top: 8px; font-size: .875rem; color: var(--e-global-color-vfgrigio, #595B5D); }

/* ------------------------------------------------------------------ Rilasci (Impostazioni ▸ Rilasci)
   Barra dell'anteprima riservata, sopra tutto; pagina «Sezione in arrivo» per le sezioni non ancora pubbliche */
.vf-anteprima {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 24px;
  background: #FFF4D6; color: #3C3C3B; border-bottom: 1px solid #E8D49A; font-size: 14px; line-height: 1.4;
}
.vf-anteprima strong { font-weight: 700; }
.vf-anteprima a { margin-left: auto; color: #14589F; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.vf-in-arrivo { max-width: 1200px; margin: 0 auto; padding: 96px 24px 120px; }
.vf-in-arrivo h1 { margin: 0 0 12px; font-size: clamp(2rem, 4vw, 2.75rem); }
.vf-in-arrivo p { max-width: 60ch; font-size: 1.125rem; }
.vf-in-arrivo__occhiello { margin: 0 0 8px; font-size: 13px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--e-global-color-vfgrigio, #595B5D); }
.vf-in-arrivo a.vf-in-arrivo__home { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 8px; background: var(--e-global-color-primary, #14589F); color: #fff; font-weight: 700; text-decoration: none; }
.vf-in-arrivo a.vf-in-arrivo__home:hover, .vf-in-arrivo a.vf-in-arrivo__home:focus { background: var(--e-global-color-vfbluscuro, #0E3F73); color: #fff; }
/* Link verso sezioni non ancora pubbliche: restano visibili ma sono testo (niente manina, niente effetto «card cliccabile») */
a.vf-link-in-arrivo, a.vf-link-in-arrivo:hover { cursor: default; text-decoration: none; }
.vf-card--link:has(.vf-card__link a.vf-link-in-arrivo),
.vf-card--link:has(.vf-card__link a.vf-link-in-arrivo):hover { transform: none; cursor: default; }

/* Testi istituzionali: misura di lettura coerente con le aree. */
.vf-company-copy { max-width: 72ch; margin-inline: auto; padding: 48px 0 64px; }
.vf-company-copy h1 { margin: 0 0 32px; }
.vf-company-copy h2 { margin-top: 40px; }
@media (max-width: 767px) { .vf-company-copy { padding: 32px 0 40px; } }