/* MI AMI 2027 - home hero con nuvole animate */

/* Galano Grotesque, font 2027 (subset latino):
   'Galano Alt' per i testi normali, 'Galano' solo per i testi in maiuscolo */
@font-face { font-family: 'Galano Alt'; src: url('../fonts/galano/galano-alt-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Galano Alt'; src: url('../fonts/galano/galano-alt-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Galano Alt'; src: url('../fonts/galano/galano-alt-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Galano'; src: url('../fonts/galano/galano-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Galano'; src: url('../fonts/galano/galano-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* l'hero esce dal contenitore del tema a tutta larghezza: evito lo scroll orizzontale */
body { overflow-x: clip; }

/* questi stili poi vanno messi nello 2026/css/style.css  */
body, #page.site {
  background: #50a9ee!important;
  color: #111!important;
}
.entry-content a, header.entry-header h1 { color: #111!important ;}
.singular .entry-header { border-bottom: 2px solid #111!important; }
.woocommerce-loop-product__title, .woocommerce-Price-amount, .product_title.entry-title, .product_meta a, .um .um-field-label, .um-field-checkbox-option, .um-field-radio-option, #site-navigation *, .site-branding *, nav a, .entry-content a, header.entry-header h1 {
  color: #111!important;
}
h1, h2, h3, h4, h5, h6 { color: #111!important; }
#main {padding-top:0!important; padding-bottom:0!important;}
.seguici h3 {color:#fff!important;}
.form-newsletter {
    max-width: 500px!important;
    margin:0 auto!important;
    margin-top:200px!important;
}
.site .button:not(:hover):not(:active):not(.has-background), button:not(:hover):not(:active):not(.has-background), input[type=submit]:not(:hover):not(:active):not(.has-background), input[type=reset]:not(:hover):not(:active):not(.has-background), .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background), .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background), .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
    background-color: #111!important; color:#fff!important;
}
.primary-navigation-open #primary-mobile-menu.button *,
.primary-navigation-open #site-navigation #primary-menu-list * { color:#fff!important; }


/* --- pagina: il cielo con le nuvole è lo sfondo di tutto l'article
   (logo + contenuto WordPress), qualunque sia la lunghezza --- */
.mi27-page {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* ritaglia lo sfondo fisso: sotto si ferma alla fine dell'article (il footer resta fuori),
       sopra invece prosegue dietro l'header, così non resta la fascia azzurra
       dello spazio sotto il menu */
    clip-path: inset(-100vh 0 0 0);
    background-color: #4aa3ee;
}

/* l'header sta sopra il cielo che gli passa dietro */
/* (non posiziono l'header stesso: su mobile il menu del tema è absolute rispetto
   alla pagina, se l'header diventa relative l'hamburger scende) */
.site-header > .site-branding {
    position: relative;
    z-index: 2;
}
.site-header > .primary-navigation { z-index: 3; }

/* font 2027 forzato su tutto il contenuto dell'article
   (gli pseudo-elementi delle icone, es. dashicons, mantengono il loro font) */
.mi27-page,
.mi27-page * {
    font-family: 'Galano Alt', sans-serif !important;
}

/* 2026/css/style.css limita "article > * > *" a alignwide (!important, sopra 768px):
   nuvole e lockup devono restare larghi quanto serve */
.mi27-clouds > .mi27-cloud,
.mi27-content > .mi27-lockup { max-width: none !important; }

/* --- nuvole: livello fisso grande quanto lo schermo, ritagliato dall'article --- */
.mi27-clouds {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    --scale: 1;
}
/* ogni nuvola è una "corsia" larga quanto lo schermo: l'immagine parte appena
   fuori a sinistra e la corsia trasla di (larghezza schermo + larghezza nuvola),
   così quando esce da un lato rientra dall'altro */
.mi27-cloud {
    position: absolute;
    left: 0;
    top: var(--top);
    width: 100%;
    animation: mi27-drift var(--dur) linear infinite;
    animation-delay: var(--delay);
    will-change: transform;
}
.mi27-cloud.mi27-rtl { animation-direction: reverse; }
.mi27-cloud img {
    position: absolute;
    top: 0;
    right: 100%;
    width: calc(var(--w) * var(--scale));
    max-width: none;
    height: auto;
}
@keyframes mi27-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100% + var(--w) * var(--scale))); }
}

/* --- logo, poi subito il contenuto WordPress --- */
.mi27-content,
.mi27-page > .wrapper {
    position: relative;
    z-index: 1;
}
.mi27-content {
    display: flex;
    justify-content: center;
    padding: clamp(4rem, 12vw, 9rem) 1rem 0;
    margin-bottom: clamp(2rem, 5vw, 4rem) !important;
}
.mi27-page > .wrapper {
    margin-top: 0 !important;
    padding-bottom: clamp(3rem, 8vw, 6rem);
}

/* lockup = immagine (logo, chiave, edizione) + data in testo:
   le misure della data sono in cqw, cioè % della larghezza del lockup,
   così resta allineata all'immagine a ogni dimensione.
   Centratura ottica: la chiave sporge a sinistra per ~10% della larghezza,
   sposto il lockup a sinistra della metà così è centrata la scritta;
   la larghezza è /1.1 così anche con lo spostamento la chiave resta nello schermo */
.mi27-lockup {
    width: min(900px, calc((100vw - 2rem) / 1.1));
    transform: translateX(-5%);
    container-type: inline-size;
}
.mi27-lockup img {
    display: block;
    width: 100%;
    height: auto;
}
.mi27-date {
    margin: -3.1cqw 0 0 10.4cqw;
    font-family: 'Galano Alt', sans-serif;
    font-weight: 500;
    font-size: 6.65cqw;
    line-height: 1;
    letter-spacing: -0.06em;
    white-space: nowrap;
    color: #000;
}

@media (max-width: 600px) {
    .mi27-clouds { --scale: 1.6; }
}

/* su mobile le dimensioni dei font scelte in WordPress (Grande, Enorme, Gigantesco...)
   seguono la larghezza dello schermo; sopra i 652px valgono quelle del tema.
   WordPress applica le classi .has-*-font-size con var(--wp--preset--font-size--*) !important,
   quindi si ridefiniscono quelle variabili (preset di twentytwentyone: 40, 96, 144px) */
@media (max-width: 651.98px) {
    .mi27-page {
        --wp--preset--font-size--large: clamp(1.25rem, 6vw, 1.5rem);
        --wp--preset--font-size--extra-large: clamp(1.5rem, 8vw, 2.5rem);
        --wp--preset--font-size--huge: clamp(2rem, 11vw, 4rem);
        --wp--preset--font-size--gigantic: clamp(2.5rem, 14vw, 5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mi27-cloud { animation-play-state: paused; }
}