/*
 * ==========================================================
 * PROGETTO:    Kerno Framework
 * FILE:        site.css
 * Path:        public/css/site.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Reset, box model e tipografia di base condivisi da qualunque
 * applicazione ospite, indipendenti dal tema (colori/branding letti
 * dalle variabili di theme.css).
 *
 * FUNZIONE DEL FILE:
 * Questo foglio di stile raccoglie regole CSS specifiche per: stili
 * generali di base del sito (reset, tipografia, classi di utilita').
 * 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: base globale del sito
 * ========================================================== */

/*
 * Sezione: Reset e Box Model
 * Imposta il comportamento di dimensionamento per tutti gli elementi.
 */
* {
    /* Include padding e border nel calcolo della larghezza totale */
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    color: var(--color-text);
    background-color: var(--color-on-primary);
    /* Font Segoe UI con fallback standard */
    font: 14px/20px "Segoe UI", Helvetica, Arial, Sans-Serif;
    width: 100%;
}

/* Forza la visualizzazione come elementi blocco per i tag semantici HTML5 */
header, footer, main, aside, nav, section, article {
    display: block;
}

/*
 * Sezione: Tipografia
 * Definizione degli stili per titoli e paragrafi.
 */
h1 {
    color: var(--color-text-soft);
    text-shadow: 2px 2px 2px var(--color-border-light);
    font-weight: normal;
    font-size: 42px;
    margin: 0 0 60px;
}

h2 {
    color: var(--color-text-heading);
    font-weight: normal;
    font-size: 30px;
    margin: 40px 0 60px;
}

h3 {
    color: var(--color-text-heading);
    font-weight: normal;
    font-size: 24px;
}

p {
    text-align: justify;
    margin: 0 0 10px;
    hyphens: auto;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*
 * Sezione: Classi di Utilità
 * Classi riutilizzabili per layout e colori.
 */
.gradient {
    background: var(--color-primary-light) !important;
    background: linear-gradient(to bottom, var(--color-primary-light), var(--color-primary-mid)) !important;
    color: var(--color-on-primary) !important;
    transition: all 0.3s ease !important;
}

.gradient:hover {
    background: var(--color-btn-hover-light) !important;
    background: linear-gradient(to bottom, var(--color-btn-hover-light), var(--color-btn-hover-dark)) !important;
}