/*
Theme Name:   Astra Child ViviSandrigo
Theme URI:    https://www.vivisandrigo.it/
Description:   Child theme di Astra per il sito dell'associazione ViviSandrigo. Contiene le personalizzazioni (CSS, snippet) sicure agli aggiornamenti del tema genitore.
Author:        Andrea Chemello
Author URI:    https://www.vivisandrigo.it/
Template:      astra
Version:       1.6.1
License:       GNU General Public License v2 or later
License URI:   http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:   astra-child-vivisandrigo
*/

/* ==========================================================================
   ViviSandrigo — Personalizzazioni
   Aggiungi qui le regole CSS. Le variabili colore/font sono centralizzate
   per cambiare l'identità visiva da un solo punto.
   ========================================================================== */

:root {
    /* Palette ufficiale ViviSandrigo, dal logo (confermata 2026-08-18) */
    --vs-brand-blue:  #2FC8F4;  /* pennellata del logo — accento principale, pulsanti, link */
    --vs-brand-dark:  #1A1A1A;  /* nero carbone del logo — testi, linee */
    --vs-brand-white: #FFFFFF;  /* sfondo */

    /* Palette Festa della Trebbiatura (vedi DESIGN.md) — SOLO per le pagine dedicate a
       quella festa, non per l'identità generale del sito */
    --vs-trebbiatura-primary:   #C0392B;   /* rosso mattone/terracotta */
    --vs-trebbiatura-secondary: #2E7D4F;   /* verde campagna */
    --vs-trebbiatura-accent:    #E0A41B;   /* oro grano/ocra */
}

.vs-btn-social {
    display: inline-block;
    background-color: var(--vs-brand-blue);
    color: var(--vs-brand-white) !important;
    padding: 0.75em 1.75em;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none !important;
}

/* Nasconde l'header originale di Astra: lo sostituiamo con il nostro
   (vedi vivisandrigo_site_header in functions.php). */
#masthead {
    display: none !important;
}

/* Astra imposta body{overflow-x:hidden} per evitare barre di scorrimento
   orizzontali, ma questo disattiva position:sticky in tutta la pagina
   (comportamento noto del CSS). "clip" ottiene lo stesso risultato senza
   quel problema. */
body {
    overflow-x: clip;
}

/* ==========================================================================
   Header personalizzato: logo grande in cima, sotto la barra di navigazione
   che si "appiccica" in alto scorrendo (position:sticky) con menu al centro
   e social a destra. Il piccolo logo dentro la barra è nascosto finché la
   barra non si aggancia (classe .is-stuck aggiunta via JS in functions.php).
   ========================================================================== */

.vs-site-header {
    background-color: var(--vs-brand-white);
}

.vs-header-top {
    display: flex;
    justify-content: center;
    padding: 28px 24px;
}

.vs-logo-big {
    height: 140px;
    width: auto;
    display: block;
}

.vs-sticky-sentinel {
    height: 0;
}

.vs-site-nav {
    position: sticky;
    top: 0;
    z-index: 500;
    background-color: var(--vs-brand-dark);
}

.vs-nav-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 24px;
    flex-wrap: wrap;
    gap: 10px 24px;
}

.vs-logo-small {
    position: absolute;
    left: 24px;
    top: 50%;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.vs-logo-small img {
    height: 48px;
    width: auto;
    display: block;
}

.vs-site-nav.is-stuck .vs-logo-small {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.vs-nav-menu {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vs-nav-menu a {
    color: var(--vs-brand-white);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.vs-nav-menu a:hover,
.vs-nav-menu a:focus {
    color: var(--vs-brand-blue);
}

.vs-nav-social {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
}

.vs-nav-social a {
    color: var(--vs-brand-white);
    display: inline-flex;
    transition: transform 0.2s ease, color 0.2s ease;
}

.vs-nav-social a:hover,
.vs-nav-social a:focus {
    color: var(--vs-brand-blue);
    transform: scale(1.18);
}

.vs-nav-social svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Sotto i 782px (tablet/telefono in verticale): il logo grande resta ma la
   barra passa da "menu-centro + social-a-destra assoluti" a un'unica riga
   centrata che va a capo, per non sovrapporsi su schermi stretti. */
@media (max-width: 782px) {
    .vs-nav-inner {
        flex-direction: column;
        padding: 14px 16px;
    }

    .vs-logo-small {
        position: static;
        transform: none;
        margin-bottom: 6px;
    }

    .vs-site-nav.is-stuck .vs-logo-small {
        transform: none;
    }

    .vs-nav-social {
        position: static;
        transform: none;
    }
}