/**
 * HTMB Customizer - Tipografia
 * Stili controllati dal Customizer (Aspetto → Personalizza → HTMB - Tipografia)
 *
 * Questo file usa CSS Custom Properties (variabili) che vengono settate
 * dinamicamente da functions.php in base alle scelte del Customizer.
 */

/* =================================================================
 * TITOLO HOMEPAGE HERO
 * ================================================================= */

/* Titolo principale - Tutte le varianti hero */
.htmb-hero-title,
.htm-hero-content h1,
.htm-hero-content .hestia-title {
    font-family: var(--htmb-heading-font, 'Poppins'), sans-serif;
    font-size: clamp(var(--htmb-title-size-mobile, 50px), 8vw, var(--htmb-title-size, 84px));
    letter-spacing: var(--htmb-letter-spacing, -2px);
    line-height: 1.2;

    /* Effetti visivi controllati dal Customizer */
    background: var(--htmb-title-gradient-bg, none);
    background-size: 200% 200%;
    -webkit-background-clip: var(--htmb-title-gradient-clip, border-box);
    background-clip: var(--htmb-title-gradient-clip, border-box);
    -webkit-text-fill-color: var(--htmb-title-text-fill, currentColor);
    animation: var(--htmb-title-animation, none);

    /* Nessun filter qui, ed e' deliberato. Su WebKit — Safari e Orion su
       iPhone — un filter su un elemento con background-clip:text lo promuove a
       livello di composizione separato: il ritaglio non lo raggiunge piu' e il
       testo resta scritto in trasparente. Il titolo della home spariva del
       tutto sull'iPhone di Daniele, l'8 agosto 2026.
       Il bagliore si perde, il gradiente in movimento resta — ed e' la parte
       che si vede. */
}

/* Animazione gradiente titolo */
@keyframes titleGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Parte 1 del titolo (es. "HTM") */
.home .page-header .title-part-1,
.htmb-hero-title .title-part-1,
.htm-hero-content .title-part-1 {
    font-weight: var(--htmb-htm-weight, 900);
    /* Il bagliore stava qui, su uno span che contiene tutto il testo del
       titolo: e' il caso peggiore, perche' su WebKit basta il filtro su un
       figlio a staccarlo dal ritaglio del genitore. Vedi la nota sopra. */
}

/* Parte 2 del titolo (es. "Builder") */
.home .page-header .title-part-2,
.htmb-hero-title .title-part-2,
.htm-hero-content .title-part-2 {
    font-weight: var(--htmb-builder-weight, 600);
}

/* =================================================================
 * SLOGAN/SUBTITLE HOMEPAGE
 * ================================================================= */

.home .page-header .carousel .sub-title,
.carousel .sub-title,
.htmb-hero-subtitle,
.htm-hero-content p {
    font-size: var(--htmb-slogan-size, 16px);
}

/* =================================================================
 * RESPONSIVE
 * ================================================================= */

@media (max-width: 768px) {
    /* Slogan responsive */
    .home .page-header .carousel .sub-title,
    .carousel .sub-title,
    .htmb-hero-subtitle,
    .htm-hero-content p {
        font-size: var(--htmb-slogan-size-mobile, 14px);
    }

    /* Titolo su più righe per leggibilità */
    .home .page-header .title-part-1,
    .home .page-header .title-part-2,
    .htmb-hero-title .title-part-1,
    .htmb-hero-title .title-part-2,
    .htm-hero-content .title-part-1,
    .htm-hero-content .title-part-2 {
        display: block;
        margin: 5px 0;
    }
}

/* =================================================================
 * ACCESSIBILITÀ
 * ================================================================= */

.home .page-header .hestia-title:focus-visible,
.htmb-hero-title:focus-visible,
.htm-hero-content h1:focus-visible {
    outline: 3px solid var(--htmb-firma);
    outline-offset: 5px;
}