/*
 * ==========================================================
 * PROGETTO:    Kerno Framework
 * FILE:        main.css
 * Path:        public/css/main.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Gestisce la griglia generale della pagina, header, contenuto, footer e adattamenti responsive/stampa.
 *
 * FUNZIONE DEL FILE:
 * Questo foglio di stile raccoglie regole CSS specifiche per: layout principale dell’applicazione.
 * Le regole definiscono solo la presentazione grafica degli elementi HTML e
 * non introducono logica applicativa. Eventuali comportamenti dinamici sono
 * gestiti dai file JavaScript o dal markup prodotto dalle view PHP.
 *
 * NOTE OPERATIVE:
 * - mantenere i selettori coerenti con il markup generato dalle view;
 * - modificare colori, spaziature e transizioni solo verificando le pagine
 *   che riutilizzano gli stessi componenti;
 * - evitare rinominazioni dei selettori senza aggiornare anche HTML e JS.
 * ==========================================================
 */

/* ==========================================================
 * SEZIONE: layout globale della pagina
 * ========================================================== */

/*
 * Componenti UI Globali
 *
 * Definisce l'estetica degli elementi ricorrenti nel sistema,
 * garantendo coerenza visiva tra le varie sezioni.
 */

/*
 * Sezione: Struttura Main Layout (Grid)
 * Gestisce la distribuzione degli spazi nel layout a tre colonne.
 */
#wrap {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: minmax(calc(2.5% + 5px), 1fr) minmax(214px, 1400px) minmax(calc(2.5% + 5px), 1fr);
}

#header {
    height: 55px;
    line-height: 48px;
    grid-column: 2 / 3;
    grid-row: 1;
    font-size: 20px;
    position: sticky;
    top: 0;
    z-index: 5 !important;
}

/*
 * Banner di avviso ambiente non-produzione (vedi layouts/main.php,
 * is_dev()): generico per qualunque applicazione basata su Kerno, non
 * solo Corsi. Dentro #wrap, subito dopo #header (riga aggiuntiva nel
 * grid, vedi grid-template-rows sopra): nel normale flusso del
 * documento, niente position: fixed ne' calcolo di offset in JS (primo
 * tentativo, scartato: fragile, con un elemento nero/vuoto residuo).
 * grid-row esplicito su tutti e quattro gli elementi della colonna
 * (qui, #content e #footer): il banner e' l'unico dei quattro assente
 * dal markup fuori da is_dev(), e senza grid-row il browser
 * riposiziona gli elementi rimasti sulle prime righe disponibili
 * invece di lasciare vuota solo la riga 2, spingendo il footer su
 * quella con altezza 1fr anziche' sull'ultima riga auto.
 *
 * position: sticky (non fixed, vedi sopra) con top pari all'altezza
 * fissa di #header (55px, invariata nei breakpoint attuali): resta
 * visibile sotto la barra menu durante lo scroll, ma senza uscire dal
 * flusso della grid ne' richiedere calcoli JS. z-index inferiore a
 * quello di #header cosi' l'header resta sopra durante la transizione
 * di scroll in cui i due sticky si sovrappongono per un istante.
 */
#development-banner {
    position: sticky;
    top: 55px;
    z-index: 4;
    grid-column: 1 / 4;
    grid-row: 2;
    background: #e74c3c;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 0;
}

/* Utente collegato: a destra del banner (come il testo, in maiuscolo), prima della "x" di chiusura. */
#development-banner-user {
    position: absolute;
    top: 4px;
    right: 40px;
}

/*
 * Pulsante di chiusura del banner (vedi dev-banner-close.js): nasconde
 * solo l'istanza corrente della pagina, senza persistenza (niente
 * localStorage/sessionStorage) - torna visibile al prossimo
 * caricamento, cosi' non c'e' nulla da ricordare di riattivare.
 */
#development-banner-close {
    position: absolute;
    top: 0;
    right: 8px;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
}

#development-banner-close:hover {
    opacity: 0.7;
}

/* Contenitore della testata: allineamento tra logo e navigazione */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 0;
}


.logo {
    height: 55px;
    display: flex;
    align-items: center;
}

.logo-text {
    margin-bottom: 8px;
}

/* Layout del logo: icona e testo sono dentro lo stesso collegamento (header.php),
   che prende tutta l'altezza dell'intestazione perche' l'icona (.logo-image) si
   adatti a quella; il distacco tra icona e testo e' il riempimento dell'icona. */
.logo a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
}

/* Stesso effetto delle voci di menu di primo livello (vedi .menu-main a:hover in
   menu.css): il gradiente di sfondo coincide con quello dell'header, quindi e' il
   cambio di colore del testo a rendere visibile l'hover. */
.logo a:hover {
    color: var(--color-on-dark);
}

#content {
    grid-column: 2 / 3;
    grid-row: 3;
    padding-bottom: 10px;
}

#main {
    margin-top: 25px;
    margin-bottom: 40px;
}

/* Altezza minima, non fissa: su schermi stretti copyright, licenziatario e
 * link privacy vanno a capo, e con un'altezza fissa la seconda riga usciva
 * dal riquadro colorato (testo bianco su sfondo bianco, quindi invisibile).
 * Flex serve solo a centrare verticalmente il testo, come faceva prima
 * line-height. */
#footer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
    padding: 8px 10px;
    line-height: 1.5;
    grid-column: span 3;
    grid-row: 4;
    text-align: center;
}

/* Link nel footer (link privacy): stesso colore del testo, sottolineati
 * solo al passaggio del mouse, per restare leggibili sullo sfondo del tema */
#footer a {
    color: inherit;
    text-decoration: none;
}

#footer a:hover,
#footer a:focus-visible {
    text-decoration: underline;
}

/* Colori invertiti con gradiente del tema (vedi theme.css) */
.reverse {
    color: white;
    background: var(--color-primary);
    background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-dark));
}

/* Elemento fissato in alto durante lo scorrimento */
.sticky {
    position: sticky;
    top: 0;
}

/*
 * Media Queries: Mobile
 * Adattamento per piccoli tablet e smartphone.
 */
@media (max-width: 480px) {
    #content {
        grid-template-columns: auto;
    }
}

/*
 * Media Queries: Stampa
 * Regole per l'ottimizzazione del documento stampato.
 */
@media print {
    #header, #footer, #aside {
        display: none;
    }
}