/* ============================================================
   components.css — CCF Balduina
   Nav, footer, buttons, cards, badges — reusable components
   ============================================================ */


/* === HEADER / NAV === */
/* Nav sempre alla stessa tonalità semi-trasparente con blur, come da mockup — non cambia con lo scroll */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(42, 31, 26, 0.88);   /* Stesso tono/opacità del mockup — più chiaro dell'hero pieno */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: box-shadow var(--transition-base);
}

/* Su scroll: stesso colore, solo un'ombra in più per dare profondità */
.site-header.scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
}

.nav-inner {
    display: flex;
    align-items: center;
    height: 96px;           /* Altezza fissa nav desktop — alzata da 72px per fare spazio a un logo più grande */
    gap: var(--space-md);   /* 24px (non 32px) — nav più compatta, meno "sparsa" */
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.nav-logo img {
    /* 84px — è uno stemma dettagliato con scritte piccole al suo interno,
       deve essere ben leggibile. Sta comodamente negli 96px di .nav-inner. */
    height: 84px;
    width: auto;
}

/* Voce di menu — raggruppate a destra insieme alla CTA, logo resta a sinistra (come da mockup) */
.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-md);  /* 24px (non 32px) — meno spazio vuoto tra le voci */
    margin-left: auto;
}

.nav-link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgba(247, 243, 236, 0.8);    /* Crema chiaro — nav è sempre scuro */
    letter-spacing: 0.02em;
    position: relative;
    padding-bottom: 2px;
    transition: color var(--transition-fast);
}

/* Underline ambra su hover — visibile su sfondo scuro */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-white);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.nav-link.active {
    color: var(--color-white);
}

/* CTA nav "Prenota una prova" */
.nav-cta {
    flex-shrink: 0;
}

.nav-cta .btn {
    /* Pulsante più compatto solo qui — nella nav il bottone standard
       (0.75rem 1.5rem) risultava sproporzionato rispetto al resto. */
    padding: 0.55rem 1.25rem;
    font-size: 0.8125rem;
}

/* Hamburger button (solo mobile) */
.nav-hamburger {
    display: none;          /* Nascosto su desktop */
    flex-direction: column;
    gap: 5px;
    width: 28px;
    height: 28px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 200;
}

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-cream);  /* Chiaro — nav è sempre scuro */
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* X sopra l'overlay crema — linee scure */
.nav-hamburger.open span {
    background-color: var(--color-dark);
}

/* Trasformazione hamburger → X quando il menu è aperto */
.nav-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
    opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile overlay */
.nav-mobile-overlay {
    display: none;           /* Nascosto su desktop */
    position: fixed;
    inset: 0;
    background-color: var(--color-cream);  /* Sfondo crema pieno */
    z-index: 150;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    padding: var(--space-2xl);
}

.nav-mobile-overlay.open {
    display: flex;
}

.nav-mobile-overlay .nav-link {
    font-size: var(--text-2xl);  /* Voci grandi nel menu mobile */
    font-family: var(--font-heading);
}


/* === FOOTER === */
.site-footer {
    background-color: var(--color-dark);   /* Footer scuro */
    color: var(--color-cream);             /* Testo chiaro su sfondo scuro */
    padding-block: var(--space-3xl) var(--space-xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;  /* Logo/info | Navigazione | Contatti */
    gap: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    border-bottom: 1px solid rgba(247,243,236,.12);  /* Linea separatrice sottile */
}

.footer-brand .nav-logo img {
    /* Niente filtro bianco: è uno stemma a colori pieni con sfondo proprio
       (non un'icona monocolore), resta leggibile così anche su sfondo scuro. */
    height: 76px;
}

.footer-tagline {
    color: rgba(247,243,236,.6);  /* Tagline footer semi-trasparente */
    font-size: var(--text-sm);
    margin-top: var(--space-sm);
    line-height: 1.6;
}

.footer-heading {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-amber);   /* Titoli colonne footer in ambra */
    margin-bottom: var(--space-md);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.footer-link {
    color: rgba(247,243,236,.7);   /* Link footer semi-trasparenti */
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--color-white);   /* Bianco pieno su hover */
}

.footer-contact-item {
    font-size: var(--text-sm);
    color: rgba(247,243,236,.7);  /* Info contatto footer */
    line-height: 1.8;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-xl);
    font-size: var(--text-xs);
    color: rgba(247,243,236,.4);  /* Copyright — testo molto trasparente */
    flex-wrap: wrap;
    gap: var(--space-sm);
}


/* === BUTTONS === */

/* Base condivisa da tutti i bottoni */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.75rem 1.5rem;
    border-radius: 30px;           /* Pill shape — bordi completamente tondi come nel mockup */
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
    min-height: 44px;   /* Touch target minimo 44px per accessibilità mobile */
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent;
}

/* Bottone primario rosso — CTA principale */
.btn-primary {
    background-color: var(--color-red);   /* Sfondo rosso primario */
    color: var(--color-white);            /* Testo bianco */
    border-color: var(--color-red);
}

.btn-primary:hover {
    background-color: var(--color-red-hover);  /* Rosso più scuro su hover */
    border-color: var(--color-red-hover);
    transform: translateY(-1px);               /* Leggero lift su hover */
    box-shadow: var(--shadow-md);
}

/* Bottone outline — azione secondaria */
.btn-outline {
    background-color: transparent;
    color: var(--color-red);       /* Testo rosso */
    border-color: var(--color-red);
}

.btn-outline:hover {
    background-color: var(--color-red);   /* Riempimento rosso su hover */
    color: var(--color-white);
}

/* Bottone ghost — per sfondi scuri (hero, sezioni dark) */
.btn-ghost {
    background-color: rgba(255, 255, 255, 0.12);  /* Bianco semi-trasparente */
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Bottone su sfondo scuro (footer, hero scuro) */
.btn-light {
    background-color: var(--color-white);   /* Bianco su scuro */
    color: var(--color-dark);
    border-color: var(--color-white);
}

.btn-light:hover {
    background-color: var(--color-cream);
    border-color: var(--color-cream);
    transform: translateY(-1px);
}

/* Link-style CTA con freccia */
.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-red);   /* Rosso */
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.cta-link:hover {
    gap: 0.625rem;  /* La freccia si sposta verso destra su hover */
}


/* === PAGE HERO — intestazione pagine interne (chi siamo, corsi, sedi, blog, ecc.) === */
.page-hero {
    background: linear-gradient(160deg, var(--color-dark), #3A2A22);  /* Sfumatura scura come da mockup */
    padding-block: var(--space-2xl) var(--space-xl);
    text-align: center;      /* Testo centrato — regola condivisa da tutte le pagine nel mockup */
}

.page-hero h1 {
    color: var(--color-white);          /* Titolo bianco — leggibile su sfondo scuro */
    margin-top: var(--space-xs);
}

.page-hero .section-label {
    color: var(--color-amber);          /* Eyebrow ambra su sfondo scuro, come nel mockup */
}

.page-hero p {
    color: rgba(247, 243, 236, 0.65);   /* Sottotitolo chiaro — grigio originale illeggibile su sfondo scuro */
}

.page-hero .text-gray {
    color: rgba(247, 243, 236, 0.55);   /* Link secondari (es. breadcrumb "Tutti i corsi") su sfondo scuro */
}


/* === FILTER TABS — pillole di filtro, condivise da corsi/galleria/blog === */
.filter-tab {
    padding: 0.5rem 1.25rem;
    border-radius: 100px;                     /* Pillola arrotondata */
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray);                 /* Tab inattivo in grigio */
    background-color: var(--color-white);
    border: 1px solid var(--color-line);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.filter-tab:hover {
    border-color: var(--color-red);
    color: var(--color-red);                  /* Rosso su hover */
}

.filter-tab.active {
    background-color: var(--color-red);       /* Sfondo rosso per tab attivo */
    border-color: var(--color-red);
    color: var(--color-white);                /* Testo bianco su tab attivo */
}


/* === CARD GENERICA === */
.card {
    background-color: var(--color-white);   /* Card su sfondo bianco */
    border: 1px solid var(--color-line);    /* Bordo leggero */
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
    transform: translateY(-4px);  /* Lift leggero su hover */
    box-shadow: var(--shadow-md);
}

.card-body {
    padding: var(--space-lg);  /* Padding interno card */
}

.card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;             /* Ritaglia mantenendo proporzioni */
    background-color: var(--color-cream-alt);  /* Placeholder sfondo */
}


/* === BADGE === */
/* Etichetta categoria (blog, corsi) */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge-red {
    background-color: var(--color-red-bg);  /* Sfondo rosso tenue */
    color: var(--color-red);                /* Testo rosso */
}

.badge-amber {
    background-color: rgba(232,169,58,.12);  /* Sfondo ambra tenue */
    color: #B07A10;                           /* Testo ambra scuro — contrasto sufficiente */
}

.badge-gray {
    background-color: rgba(107,101,96,.08);  /* Sfondo grigio tenue */
    color: var(--color-gray);
}


/* === CONTENUTO CKEDITOR (.ck-content) ===
   Regole per il testo scritto in CKEditor 5 (descrizione corsi, bio/CV
   istruttori, articoli blog, testi pagine...) — in particolare per le
   immagini inserite nel testo con allineamento sinistra/destra, che devono
   "fluttuare" con il testo che vi scorre attorno, come su una rivista.
   Non carichiamo l'intero foglio di stile di CKEditor (233KB, pensato per
   l'interfaccia dell'editor) — solo le regole che servono davvero qui,
   riscritte con le variabili di stile del sito. */
.ck-content p {
    margin-bottom: var(--space-md);
}

.ck-content blockquote {
    border-left: 3px solid var(--color-red);   /* Barra laterale — coerente con gli accenti del sito */
    font-style: italic;
    color: var(--color-gray);
    padding-left: var(--space-md);
    margin: var(--space-md) 0;
}

.ck-content ul, .ck-content ol {
    margin: 0 0 var(--space-md) var(--space-lg);
}

.ck-content ul { list-style-type: disc; }
.ck-content ol { list-style-type: decimal; }
.ck-content li { margin-bottom: var(--space-xs); }

/* Immagine "a blocco" (allineamento centro/nessuno) — a riga intera */
.ck-content .image {
    margin: var(--space-md) auto;
    text-align: center;
}

.ck-content .image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
    margin: 0 auto;
}

.ck-content .image > figcaption {
    font-size: var(--text-sm);
    color: var(--color-gray);
    text-align: center;
    margin-top: var(--space-xs);
}

/* Immagine allineata a sinistra/destra — il testo le scorre attorno */
.ck-content .image-style-align-left {
    float: left;
    margin: 0 var(--space-md) var(--space-sm) 0;
    max-width: 45%;
}

.ck-content .image-style-align-right {
    float: right;
    margin: 0 0 var(--space-sm) var(--space-md);
    max-width: 45%;
}

.ck-content .image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}

/* Tabelle (disponibili solo nella configurazione "extended" di CKEditor) */
.ck-content .table table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
}

.ck-content .table table th,
.ck-content .table table td {
    border: 1px solid var(--color-line);
    padding: var(--space-xs) var(--space-sm);
}

.ck-content .table table th {
    background-color: var(--color-cream);
    font-weight: 700;
}

/* Dimensioni testo (menu "fontSize" di CKEditor, configurazione "extended") */
.ck-content .text-tiny { font-size: 0.75em; }
.ck-content .text-small { font-size: 0.85em; }
.ck-content .text-big { font-size: 1.4em; }
.ck-content .text-huge { font-size: 1.8em; }


/* === RESPONSIVE — TABLET (max-width: 768px) === */
@media (max-width: 768px) {
    /* Mostra hamburger, nascondi link desktop */
    .nav-hamburger {
        display: flex;
        margin-left: auto;   /* .nav-links (che porta margin-left:auto) è nascosto — spinge l'hamburger a destra */
    }

    .nav-links,
    .nav-cta {
        display: none;  /* Nascosti su mobile — sostituiti dall'overlay */
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;  /* Due colonne su tablet */
    }

    .footer-brand {
        grid-column: 1 / -1;  /* Brand occupa tutta la larghezza */
    }
}


/* === RESPONSIVE — MOBILE (max-width: 480px) === */
@media (max-width: 480px) {
    /* Su schermi stretti il testo attorno a un'immagine da 45% diventerebbe
       illeggibile (poche parole a riga) — l'immagine va a riga intera. */
    .ck-content .image-style-align-left,
    .ck-content .image-style-align-right {
        float: none;
        max-width: 100%;
        margin: var(--space-sm) 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;  /* Una colonna su mobile */
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
}