/* Stili aggiuntivi del tema (caricati dopo app.css). */

/* Popup guida gratuita — overlay + pannello (indipendente da Tailwind) */
.vr-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(44, 40, 40, .6);
}
.vr-modal.is-open { display: flex; }
.vr-modal__panel {
    position: relative;
    z-index: 1;
    background: var(--paper);
    width: 100%;
    max-width: 28rem;
    max-height: 90vh;
    overflow: auto;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .4);
}
@media (min-width: 768px) { .vr-modal__panel { padding: 2.5rem; } }

/* Font morbido/tondeggiante per testi selezionati (frasi "per attività"…).
   Per cambiarlo basta modificare questa famiglia (es. "Pinyon Script"). */
.vr-soft {
    font-family: "Cormorant Garamond", "Times New Roman", serif !important;
    font-weight: 500;
}

/* Font "brand" richiesto da Valentina (mail 29/07/2026): Noto Serif Display
   ExtraCondensed per il nome in hero, le scritte "Scarica la guida gratuita"
   e tutte le parole in azzurro polvere (text-peri).
   NB: dichiarato dopo .vr-soft così, a parità di !important, vince sul nome hero. */
.vr-brand,
.text-peri {
    font-family: "Noto Serif Display", "Times New Roman", serif !important;
    font-stretch: 62.5%;
}


/* Formattazione del contenuto gestito dall'editor WordPress (pagine, privacy) */
.vr-prose h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--ink);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
.vr-prose h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.vr-prose p { margin-bottom: 1rem; }
.vr-prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.vr-prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.vr-prose li { margin-bottom: 0.25rem; }
.vr-prose a {
    color: var(--peri);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s;
}
.vr-prose a:hover { color: var(--ink); }
.vr-prose strong { font-weight: 600; }
.vr-prose blockquote {
    border-left: 2px solid var(--peri);
    padding-left: 1.25rem;
    font-style: italic;
    color: rgba(44, 40, 40, .75);
    margin: 1.5rem 0;
}

/* Header trasparente sopra la hero (solo home): testi bianchi finché non si
   scorre; con lo scroll compare lo sfondo chiaro (classe .is-solid via JS). */
#vr-header {
    /* Effetto "tendina": scende dall'alto con curva morbida quando ricompare.
       NB: Tailwind 4 muove l'elemento con la proprietà `translate`, che va
       inclusa nella transizione insieme a `transform`. */
    transition: translate .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1), background-color .35s ease, backdrop-filter .35s ease;
    will-change: translate;
}
#vr-header.vr-header-glass:not(.is-solid) {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#vr-header.vr-header-glass:not(.is-solid) nav {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
/* L'ombra serve alle voci sopra la foto dell'hero, non ai pannelli a tendina:
   quelli hanno fondo chiaro e la ereditavano, sporcando i testi. */
#vr-header.vr-header-glass:not(.is-solid) #vr-mega-panel,
#vr-header.vr-header-glass:not(.is-solid) #vr-racconti-panel {
    text-shadow: none;
}
/* Doppio logo: quello con scritte bianche (e monogramma VR azzurro
   originale) compare solo quando l'header è trasparente. */
.vr-header-logo-white { display: none; }
#vr-header.vr-header-glass:not(.is-solid) .vr-header-logo { display: none; }
#vr-header.vr-header-glass:not(.is-solid) .vr-header-logo-white {
    display: block;
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .3));
}
#vr-header.vr-header-glass:not(.is-solid) #vr-mobile-open span {
    background-color: #fff;
}