/* ═══════════════════════════════════════════════════════════════════════
   ACCENTI ROSSI E DATA IN TOP BAR · ritocchi di Riccardo, 05/10
   Va caricato DOPO blue-2.css (e dopo ty-timer.css sulla pagina grazie).
   Il rosso e' quello della palette gia' usato dal pallino "in diretta"
   (#e63241): la pagina resta blu, il rosso segna solo i tre punti che
   Riccardo vuole far saltare all'occhio.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --red-accent: #e63241;
    --gradient-cta-red: linear-gradient(180deg, #f2505d 0%, #e63241 48%, #c41f2e 100%);
}

/* ─── 1 · TOP BAR: la data della prima serata, grande e in chiaro ───── */

.top-bar__when {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    color: var(--color-bone-white);
}

.top-bar__date {
    display: inline-block;
    padding: 3px 9px 2px;
    border-radius: 6px;
    background: var(--gradient-cta-blue);
    color: #ffffff;
    font-family: var(--font-display-heavy, 'Google Sans Flex', 'Google Sans', sans-serif);
    font-weight: 800;
    font-size: 1.22em;
    letter-spacing: 0.01em;
    line-height: 1.15;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(10, 24, 60, 0.18), 0 4px 10px rgba(10, 24, 60, 0.14);
}

/* Sul telefono la striscia della opt-in era forzata su una riga sola a
   ~9px: con la data dentro diventava illeggibile. Qui torna a 12px e
   va a capo, cosi' "Prima serata DOMENICA ALLE 20:30" sta su una riga
   sua sotto "Evento gratuito". */
@media (max-width: 767px) {
    .top-bar:not(.top-bar--warn) .top-bar__line,
    .top-bar--warn .top-bar__line {
        flex-wrap: wrap;
        white-space: normal;
        row-gap: 6px;
        column-gap: 6px;
        font-size: 12px;
        letter-spacing: 0.03em;
    }

    .top-bar:not(.top-bar--warn) .top-bar__sep {
        display: none;
    }

    .top-bar__line > .top-bar__main,
    .top-bar__line > .top-bar__when {
        flex: 0 0 100%;
        justify-content: center;
    }

    .top-bar__date {
        font-size: 15px;
    }
}

/* ─── 2 · OPT-IN: "l'intelligenza artificiale" in rosso ─────────────── */

.hero .hero__title-mid strong.hl-red {
    color: var(--red-accent);
    -webkit-text-fill-color: var(--red-accent);
}

/* ─── 3 · OPT-IN: "100% GRATIS!" sottolineato a pennarello rosso ───────
   La pennellata sta sulla riga stessa (::after), NON su uno span dentro
   la riga: la riga ha il testo riempito col gradiente (background-clip:
   text) e Safari su iPhone non dipinge il testo di uno span posizionato
   li' dentro, quindi "100% GRATIS!" spariva e restava solo la riga rossa. */

.hero__title-big--em.u-red {
    position: relative;
    margin-bottom: 0.2em;
}

.hero__title-big--em.u-red::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.08em;
    height: 0.3em;
    pointer-events: none;
    -webkit-text-fill-color: initial;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M6 30 C 60 18, 140 12, 220 15 S 350 22, 394 14' fill='none' stroke='%23e63241' stroke-width='14' stroke-linecap='round'/%3E%3Cpath d='M40 44 C 120 33, 220 30, 300 34 S 360 40, 380 37' fill='none' stroke='%23e63241' stroke-width='9' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ─── 4 · PAGINA GRAZIE: "ATTENZIONE…" e "NON È ANCORA CONFERMATO" ─────
   Stessa piastra delle frasi chiave, ma rossa. */

.hero__title-big.plate-red::before,
.hero__sub-big.plate-red::before {
    background: var(--gradient-cta-red);
    box-shadow:
        0 1px 2px rgba(90, 10, 20, 0.20),
        0 8px 22px rgba(160, 20, 35, 0.22);
}