/* Stili comuni dei siti 2027 (libreria FestinaCMS2027): il sito li carica con
   <link href="_content/FestinaCMS2027/css/festina.css" rel="stylesheet" /> in App.razor. */

/* La barra rossa in fondo quando Blazor va in errore (il div sta in LayoutFestina). */
#blazor-error-ui {
    background: #b32121;
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ===== Voci selezionate: il bagliore bianco-azzurro di Hector =====
   Vale per il menu in alto (LayoutFestina, .festina-voce-attiva), per il menu laterale e per
   l'indice "In questa pagina" (PaginaDettaglio: MudNavLink .active). !important perché icona e
   testo di MudNavLink prendono il colore dal tema. */
.festina-voce-attiva {
    color: #eaf6ff !important;
    text-shadow: 0 0 6px #7ec8ff, 0 0 12px rgba(74, 134, 255, 0.85);
    font-weight: 600;
}

.mud-nav-link.active .mud-nav-link-text {
    color: #eaf6ff !important;
    text-shadow: 0 0 6px #7ec8ff, 0 0 12px rgba(74, 134, 255, 0.85);
    font-weight: 600;
}

.mud-nav-link.active .mud-icon-root,
.mud-nav-link.active .mud-nav-link-icon {
    color: #eaf6ff !important;
    filter: drop-shadow(0 0 4px #7ec8ff) drop-shadow(0 0 8px #4a86ff);
}

/* ===== Pagina di login (statica, SSR) ===== */
.festina-login-sfondo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a27; /* Background della palette scura del template (come Hector) */
    padding: 24px;
}

.festina-login-card {
    width: 100%;
    max-width: 400px;
}

.festina-label {
    display: block;
    font-size: 0.8rem;
    margin: 12px 0 4px;
    color: #b0b0b0;
}

.festina-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 1rem;
    border: 1px solid #555;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    background: #2a2a3a;
    color: #eee;
}

.festina-input:focus {
    border-color: #26374b; /* primario MudBlazor scuro */
    box-shadow: 0 0 0 1px #26374b;
}

.festina-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 20px;
    font-size: 0.85rem;
    color: #ccc;
}

.festina-submit {
    width: 100%;
    padding: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #fff;
    background: #26374b;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.festina-submit:hover {
    background: #34495e;
}

.festina-link {
    color: #26374b;
    text-decoration: none;
}

/* ===== Pagina di dettaglio (PaginaDettaglio, modello mudblazor.com) ===== */
/* menu laterale e indice restano fermi mentre il contenuto scorre (64px = appbar + respiro) */
.festina-laterale {
    position: sticky;
    top: 88px;
}

.festina-indice .title {
    font-weight: 500;
}

/* le ancore delle sezioni si fermano sotto l'appbar, non dietro */
.festina-sezione-ancora {
    scroll-margin-top: 88px;
}

/* ===== Card "lucciola" (CardLuminose): il bagliore segue il mouse =====
   Portato dal MudExCardList di MudBlazor.Extensions (HoverMode LightBulb). Le variabili
   --mouse-x/--mouse-y le imposta cardluminose.js su ogni card visibile. */
.festina-card-lista {
    padding: 4px;
}

.festina-cards {
    display: grid;
    gap: var(--festina-cards-spazio, 16px);
    grid-template-columns: 1fr;
}

@media (min-width: 960px) {
    .festina-cards {
        grid-template-columns: repeat(var(--festina-cards-colonne, 3), minmax(0, 1fr));
    }
    .festina-card-lista[style*="--festina-cards-colonne: 0"] .festina-cards {
        display: flex;
        flex-wrap: wrap;
    }
}

.festina-card-lista .festina-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

/* ::before = la card sotto il mouse (più forte), ::after = tutte le altre card della lista
   (più tenue): stanno fra lo sfondo della card e il suo contenuto */
.festina-lucciola .festina-card::before,
.festina-lucciola .festina-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 500ms;
    pointer-events: none;
    z-index: 0;
}

.festina-lucciola .festina-card::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), var(--festina-lucciola-colore), transparent var(--festina-lucciola-raggio, 40%));
}

.festina-lucciola .festina-card::after {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), var(--festina-lucciola-colore), transparent var(--festina-lucciola-raggio, 40%));
    opacity: 0;
}

.festina-lucciola .festina-cards:hover > .festina-card::after {
    opacity: 0.6;
}

.festina-lucciola .festina-card:hover::before {
    opacity: 1;
}

/* il contenuto della card sopra al bagliore */
.festina-lucciola .festina-card > * {
    position: relative;
    z-index: 1;
}

/* L'icona di accesso in appbar: piccola e quasi invisibile, si accende solo al passaggio del mouse. */
.festina-accedi-discreto {
    opacity: 0.35;
    transition: opacity 200ms;
}

.festina-accedi-discreto:hover {
    opacity: 1;
}

/* Il logo in appbar al posto della scritta: alto quasi quanto la barra (64px), un po' di respiro. */
.festina-logo {
    height: 52px;
    margin: 6px 4px;
    display: block;
}

/* ===== Home a righe diagonali (SezioneLanding, dalla landing page di mudblazor.com) =====
   --festina-sezione-diff = quanto "sale" la diagonale sul bordo destro con skewY(-12°): tan(12°)≈0.213,
   metà larghezza → ~0.106 della larghezza; con lo stesso valore di padding il contenuto resta
   dentro. Formula presa pari pari dal loro _landingpage.scss (--section-diff). */
:root {
    --festina-sezione-diff: calc(calc(calc(100vw - 16px) * 0.106) + calc(128 * 1px) - 0.106 * calc(calc(100vw - 15px) / 2 - 1080px / 2));
    --festina-blu: #26374b;
}

.festina-landing-sezione {
    position: relative;
    overflow: clip; /* lo sfondo inclinato non deve uscire dalla sezione, né di lato né sotto */
}

.festina-landing-sfondo-contenitore {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
}

.festina-landing-sfondo {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.festina-landing-sfondo.inclinata {
    transform: skewY(-12deg);
}

.festina-landing-sfondo.dritta {
    height: calc(100% + var(--festina-sezione-diff));
}

.festina-landing-sfondo.fine-dritta {
    top: -50%;
    height: 50%;
}

.festina-landing-sfondo.grigio { background-color: var(--mud-palette-background-gray); }
.festina-landing-sfondo.fondo { background-color: var(--mud-palette-background); }
.festina-landing-sfondo.superficie { background-color: var(--mud-palette-surface); }
.festina-landing-sfondo.scuro { background-color: var(--festina-blu); }

.festina-landing-contenuto {
    z-index: 1;
    position: relative;
}

.festina-landing-contenuto.padding-dritta {
    padding: 128px 0;
}

.festina-landing-contenuto.padding-inclinata {
    padding: var(--festina-sezione-diff) 0;
}

/* la prima sezione: meno padding sopra (c'è già l'appbar), di più sotto per la diagonale */
.festina-landing-cima .festina-landing-contenuto {
    padding-top: calc(var(--festina-sezione-diff) / 1.5) !important;
    padding-bottom: calc(var(--festina-sezione-diff) * 1.5) !important;
}

/* le strisce in fondo allo sfondo inclinato (200px l'una, come le loro) */
.festina-striscia {
    width: 100%;
    height: 200px;
}

.festina-striscia.sfumata {
    background: linear-gradient(82deg, #26374b 0%, #3b5170 100%);
}

.festina-striscia.fondo { background-color: var(--mud-palette-background); }
.festina-striscia.superficie { background-color: var(--mud-palette-surface); }
.festina-striscia.grigio { background-color: var(--mud-palette-background-gray); }
.festina-striscia.blu { background-color: var(--festina-blu); }

/* Le sezioni escono dal padding di MudMainContent (pa-4 + il wrapper mt-4 del layout) per arrivare ai bordi. */
.festina-landing-sezione {
    margin-left: -16px;
    margin-right: -16px;
}

.festina-landing-cima {
    margin-top: -32px;
}

/* ===== Footer (LayoutFestina, slot Footer) =====
   Il main content è una colonna flex alta almeno la finestra: il corpo cresce, il footer resta in fondo. */
.festina-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.festina-corpo {
    flex: 1 0 auto;
}

.festina-footer {
    flex-shrink: 0;
    margin: 48px -16px -16px -16px; /* esce dal pa-4 del main content e arriva ai bordi e in fondo */
    padding: 40px 0 24px;
    background-color: var(--festina-blu);
    color: #cfd8e3;
    /* SOPRA gli sfondi inclinati delle sezioni landing (assoluti, sbordano dalla loro section):
       senza questo la diagonale dell'ultima sezione si dipinge sul footer e lo "cancella" */
    position: relative;
    z-index: 2;
}

/* il footer resta STACCATO dal contenuto (anche dalle sezioni landing): 96px di aria sopra */
.festina-footer {
    margin-top: 96px;
}

.festina-footer a {
    color: #eaf6ff;
    text-decoration: none;
}

.festina-footer a:hover {
    text-decoration: underline;
}

.festina-footer .festina-footer-titolo {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 8px;
}

.festina-footer .festina-footer-riga {
    display: block;
    line-height: 1.7;
}

.festina-footer .festina-footer-fine {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 24px;
    padding-top: 12px;
    font-size: 0.8rem;
    color: #9fb0c3;
}

/* ===== Banner cookie (BannerCookie): fisso in basso, non blocca la pagina ===== */
.festina-cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: min(720px, calc(100vw - 32px));
    z-index: 1400;
}

/* "Contattaci" nel menu in alto: grassetto, un po' staccato dalle altre voci. */
.festina-contattaci {
    font-weight: 700 !important;
    margin-left: 24px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* ===== Blog (VistaBlog) ===== */
.festina-post-immagine {
    max-width: 100%;
    border-radius: 8px;
}

.festina-post-scheda {
    transition: box-shadow 200ms;
}

.festina-post-scheda:hover {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 4px 16px rgba(0,0,0,0.35);
}

/* il Markdown reso in HTML: spaziature da articolo */
.festina-markdown { line-height: 1.7; font-size: 1.02rem; }
.festina-markdown h1, .festina-markdown h2, .festina-markdown h3, .festina-markdown h4 { margin: 1.4em 0 0.5em; line-height: 1.25; }
.festina-markdown h1 { font-size: 1.7rem; }
.festina-markdown h2 { font-size: 1.45rem; }
.festina-markdown h3 { font-size: 1.2rem; }
.festina-markdown p { margin: 0 0 1em; }
.festina-markdown ul, .festina-markdown ol { margin: 0 0 1em 1.6em; }
.festina-markdown li { margin: 0.25em 0; }
.festina-markdown blockquote { margin: 1em 0; padding: 0.5em 1em; border-left: 3px solid var(--festina-blu); opacity: 0.9; }
.festina-markdown pre { padding: 12px 16px; border-radius: 6px; overflow-x: auto; background: rgba(0,0,0,0.35); }
.festina-markdown code { font-size: 0.92em; }
.festina-markdown img { max-width: 100%; border-radius: 6px; }
.festina-markdown table { border-collapse: collapse; margin: 1em 0; }
.festina-markdown th, .festina-markdown td { border: 1px solid rgba(255,255,255,0.15); padding: 6px 10px; }
.festina-markdown a { color: #7ec8ff; }

/* la strisciolina colorata in testa ai post (colori Material degli argomenti) */
.festina-post-striscia {
    height: 6px;
    border-radius: 3px;
    margin-bottom: 16px;
}

.festina-post-scheda {
    overflow: hidden;
}

.festina-post-scheda .festina-post-striscia,
.mud-card > .festina-post-striscia {
    border-radius: 0;
    margin-bottom: 0;
}

.festina-post-titolo {
    color: #ffffff;
}

/* ===== Bordo "vivo" che cambia colore (dalla home di MudBlazor.Extensions: .feature-card-special) =====
   Solo il bordo SUPERIORE (la strisciolina in testa a post e schede): il gradiente coi colori
   Material degli argomenti (--festina-bordo, inline) SCORRE avanti e indietro (background-position
   animato, come il loro @keyframes borderGlow). Il resto del bordo resta com'è. */
.festina-bordo-vivo > .festina-post-striscia {
    background-image: var(--festina-bordo, linear-gradient(90deg, #2196F3, #E91E63, #FFC107, #4CAF50, #2196F3)) !important;
    background-size: 300% 100% !important;
    background-position: 0% 50%;
    will-change: background-position, filter;
    animation: festina-bordo-vivo 8s linear infinite;
}

/* i colori SCORRONO (background-position) e RUOTANO nella tonalità (hue-rotate): il cambio è ben visibile */
@keyframes festina-bordo-vivo {
    0%   { background-position: 0% 50%;   filter: hue-rotate(0deg); }
    50%  { background-position: 100% 50%; filter: hue-rotate(180deg); }
    100% { background-position: 0% 50%;   filter: hue-rotate(360deg); }
}

/* l'articolo aperto in una scheda con il bordo vivo */
.festina-post-aperto {
    padding: 24px 28px 28px;
    background-color: var(--mud-palette-surface);
}

/* ===== I titoli di pagina (l'H1: la testata di PaginaDettaglio, il titolo delle Novità, gli h4 delle pagine semplici) in BIANCO ===== */
.festina-dettaglio-testata .mud-typography-h4,
.festina-dettaglio-testata .mud-typography-h3,
.festina-post-titolo,
.festina-blog .mud-typography-h4,
.mud-main-content > .festina-corpo > .mud-container > .mud-typography-h4,
.mud-main-content > .festina-corpo > .mud-container > .mud-typography-h3 {
    color: #ffffff;
}

/* ===== Tema CHIARO (LayoutFestina con InterruttoreTema: MudLayout.festina-chiaro) =====
   Gli stili sopra sono nati per lo scuro fisso: qui si adattano al chiaro. Il colore "forte"
   è --mud-palette-primary (per celiacidiqui.it il rosso Austria), così ogni sito porta il suo. */
.festina-chiaro .festina-voce-attiva,
.festina-chiaro .mud-nav-link.active .mud-nav-link-text {
    color: var(--mud-palette-primary) !important;
    text-shadow: none;
}

.festina-chiaro .mud-nav-link.active .mud-icon-root,
.festina-chiaro .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
    filter: none;
}

.festina-chiaro .festina-dettaglio-testata .mud-typography-h4,
.festina-chiaro .festina-dettaglio-testata .mud-typography-h3,
.festina-chiaro .festina-post-titolo,
.festina-chiaro .festina-blog .mud-typography-h4,
.festina-chiaro .mud-main-content > .festina-corpo > .mud-container > .mud-typography-h4,
.festina-chiaro .mud-main-content > .festina-corpo > .mud-container > .mud-typography-h3 {
    color: var(--mud-palette-text-primary);
}

.festina-chiaro .festina-post-scheda:hover {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.15);
}

.festina-chiaro .festina-markdown pre { background: rgba(0,0,0,0.06); }
.festina-chiaro .festina-markdown th, .festina-chiaro .festina-markdown td { border-color: rgba(0,0,0,0.15); }
.festina-chiaro .festina-markdown a { color: var(--mud-palette-primary); }

/* Il footer: il sito può cambiarne il colore con --festina-footer-sfondo (default il blu SIC),
   anche diverso fra chiaro e scuro (es. .festina-chiaro { --festina-footer-sfondo: ... }). */
.festina-footer {
    background-color: var(--festina-footer-sfondo, var(--festina-blu));
}