/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ---------------------------------------------------------------------------
   .hero-full — immagine di sfondo a tutta altezza schermo
   ---------------------------------------------------------------------------
   Da mettere nel campo "Classi CSS aggiuntive" (pannello Avanzate) di un
   blocco Stackable Columns che abbia un'immagine di sfondo. Sostituisce il
   trucco del padding verticale enorme: con il padding l'altezza è un numero
   fisso in px, quindi su uno schermo alto l'immagine resta bassa e su uno
   basso deborda. Qui l'altezza la decide lo schermo.

   Perché .stk-block.hero-full e non .hero-full: Stackable scrive lo stile del
   blocco in un <style> dentro il contenuto della pagina, con !important e
   selettore .stk-XXXXXXX (specificità 0,1,0). Quel <style> sta nel body,
   quindi DOPO questo foglio: a parità di specificità e di !important vince
   lui. Aggiungendo .stk-block saliamo a 0,2,0 e vinciamo noi, senza dover
   svuotare a mano i padding nell'editor.
   --------------------------------------------------------------------------- */

.stk-block.hero-full {
    /* Alzalo all'altezza dell'header se l'header NON è trasparente, per
       togliere la striscia di scroll in fondo. Es: --hero-offset: 90px; */
    --hero-offset: 0px;

    /* Il punto dell'immagine che deve restare sempre inquadrato quando lo
       schermo taglia. Es: 50% 30% tiene alte le teste dei ballerini. */
    --hero-focus: 50% 50%;

    min-height: calc(100vh - var(--hero-offset)) !important;
    display: flex !important;
    align-items: center !important;
    background-position: var(--hero-focus) !important;

    /* Il padding non serve più a fare altezza: resta solo perché il testo non
       tocchi i bordi quando lo schermo è basso e il contenuto è alto. */
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* svh = altezza della finestra al netto delle barre del browser mobile.
   Con 100vh, su iPhone e Android la barra degli indirizzi fa sballare
   l'altezza e l'immagine "salta" allo scroll. */
@supports (min-height: 100svh) {
    .stk-block.hero-full {
        min-height: calc(100svh - var(--hero-offset)) !important;
    }
}

/* Il contenitore interno di Stackable è centrato con margin auto: dentro un
   flex senza questo si stringerebbe sul contenuto invece di occupare la riga. */
.stk-block.hero-full > .stk-block-content {
    width: 100%;
}

/* ---------------------------------------------------------------------------
   Header trasparente sopra l'hero
   ---------------------------------------------------------------------------
   Si attiva da solo sulle pagine che contengono un blocco .hero-full: la classe
   .has-hero-full sul <body> la mette functions.php guardando il contenuto della
   pagina, non il suo ID. Nessuna configurazione nel Customizer, e nessun numero
   da aggiornare quando la pagina cambierà nome o diventerà la home.

   L'header viene tolto dal flusso (position: absolute) invece che reso solo
   trasparente: così non occupa più la sua fascia di pagina e l'immagine parte
   davvero dal bordo superiore. Resta absolute e non fixed, quindi scorre via
   con la pagina come adesso — non diventa un menu appiccicato.
   --------------------------------------------------------------------------- */

.has-hero-full #main-container {
    position: relative;
}

.has-hero-full #header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    /* La velatura scura è ciò che rende leggibile il menu, molto più del colore
       del testo: una foto ha punti chiari e punti scuri, e il testo bianco su
       una zona chiara sparisce. Sfuma a trasparente entro l'altezza dell'header,
       quindi sull'immagine non si vede come una fascia. */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.25) 55%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* Le righe dell'header hanno un fondo proprio impostato dal Customizer:
   va tolto, altrimenti copre la velatura qui sopra. */
.has-hero-full #header [data-row],
.has-hero-full #header [data-device] {
    background: transparent !important;
}

/* --- voci di menu: contrasto e dimensione ---------------------------------- */

.has-hero-full #header .ct-menu-link,
.has-hero-full #header .ix-logo-text a {
    color: #fff !important;

    /* Rete di sicurezza sui punti chiari della foto: appena percettibile sul
       fondo scuro, salva la leggibilità dove la velatura non basta. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.has-hero-full #header .ct-menu-link {
    font-size: 1.05rem;      /* ~17px, contro i ~14px di prima */
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Il menu è impostato su "type-2", che ha già la sua barretta di sottolineatura
   su hover e sulla voce corrente: qui si ricolora e basta, invece di aggiungere
   una seconda sottolineatura che si sovrapporrebbe alla sua. */
.has-hero-full #header .header-menu-1 {
    --menu-indicator-active-color: #fff;
}

.has-hero-full #header .ct-menu-link:hover,
.has-hero-full #header .current-menu-item > .ct-menu-link {
    color: #fff !important;
}

/* Contorno visibile per chi naviga da tastiera: senza, il fuoco si perde
   completamente sopra una fotografia. */
.has-hero-full #header .ct-menu-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* Hamburger e voci del pannello mobile: stessa logica del menu desktop. */
.has-hero-full #header .ct-header-trigger {
    color: #fff !important;
}

.has-hero-full #header .ct-header-trigger .ct-icon {
    fill: currentColor;
}
