/* =============================================== */
/* FONT E STILI DI BASE */
/* =============================================== */

/* Stili applicati a entrambi i temi */
body {
    font-family: 'Lato', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .card-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
}
@keyframes fadeInBackground {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
/* =============================================== */
/* TEMA DI DEFAULT (DARK MODE) */
/* Applicato quando <html> ha la classe .dark-mode */
/* =============================================== */
html.dark-mode body {
    background-color: #0F0529; /* Questo colore si vedrà per un istante mentre carica l'immagine */
    color: #EAEAEA;
    background-image: url('../img/background-dark.webp'); 
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    /* Aggiungi questa riga: */
    animation: fadeInBackground 1s ease-in-out;
}

html.dark-mode .card {
    background-color: rgba(23, 10, 54, 0.75);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

html.dark-mode .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
}

html.dark-mode .form-control,
html.dark-mode .form-select {
    background-color: #1c0a40;
    color: #fff;
    border-color: #4a148c;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
    background-color: #1c0a40;
    color: #fff;
    border-color: #ffd700;
    box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25);
}

html.dark-mode .accordion-item {
    border-color: rgba(255, 215, 0, 0.2);
}

html.dark-mode .accordion-body {
    color: #EAEAEA;
}

html.dark-mode .accordion-body a {
    color: #8cb5ff;
}

html.dark-mode .text-muted {
    color: #a0a0a0 !important;
}
html.dark-mode .form-control::placeholder {
    color: #fff;
}

/* =============================================== */
/* TEMA ALTERNATIVO (LIGHT MODE) */
/* Applicato quando <html> ha la classe .light-mode */
/* =============================================== */

html.light-mode body {
    background-color: #f4f7f6; /* Colore di fallback */
    color: #212529;
    background-image: url('../img/background-light.jpg'); 
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    animation: fadeInBackground 1s ease-in-out;
}

html.light-mode .navbar {
    background-color: rgba(255, 255, 255, 0.3); /* Sfondo chiaro per la navbar */
}

/* Gestisce il colore dei link della navbar in light-mode in modo specifico */
html.light-mode .navbar-nav .nav-link,
html.light-mode .navbar-brand {
    color: #212529; /* Colore base del testo */
}

html.light-mode .navbar-nav .nav-link:hover,
html.light-mode .navbar-brand:hover {
    color: #000; /* Colore al passaggio del mouse */
}

/* Gestisce anche il testo dentro l'hamburger menu su mobile */
html.light-mode .navbar-collapse .d-flex {
    color: #212529 !important;
}

html.light-mode .btn-outline-light {
    --bs-btn-color: #212529; /* Pulsanti outline scuri */
    --bs-btn-border-color: #212529;
    --bs-btn-hover-bg: #212529;
}

html.light-mode .card {
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #212529; 
}
/* Definisce un colore più scuro per il testo "muted" in light mode */
html.light-mode .text-muted {
    color: #6c757d !important; /* Grigio scuro standard di Bootstrap */
}

html.light-mode .dropdown-menu-dark {
    --bs-dropdown-bg: #e9ecef; /* Sfondo chiaro per dropdown */
    --bs-dropdown-link-color: #212529;
    --bs-dropdown-link-hover-bg: #dee2e6;
}

/* =============================================== */
/* COMPONENTI COMUNI */
/* =============================================== */

.navbar {
    backdrop-filter: blur(5px);
}

.card {
    box-shadow: 0 4px 30px rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
}

.card-container .card-img-top {
    transition: transform 0.4s ease-in-out;
}

.card-container .card-img-top.reversed {
    transform: rotate(180deg);
}

.btn-primary {
    background-color: #4a148c; /* Viola profondo */
    border-color: #4a148c;
    box-shadow: 0 0 10px #ffd700;
}

.btn-primary:hover {
    background-color: #7b1fa2;
    border-color: #7b1fa2;
}

.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2);
}

.social-icon {
    transition: transform 0.2s;
}
.social-icon:hover {
    transform: scale(1.2);
    color: #ffd700 !important;
}

.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #3e0c70;
}

/* =============================================== */
/* LAYOUT CROCE CELTICA */
/* =============================================== */
.celtic-cross-layout {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 1rem;
    max-width: 1100px;
    margin: auto;
}

@media (min-width: 992px) {
    .celtic-cross-layout {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 1.5rem;
    }

    .celtic-cross-layout .cc-card-1 { grid-area: 2 / 2 / 3 / 3; z-index: 1; }
    .celtic-cross-layout .cc-card-2 { grid-area: 2 / 2 / 3 / 3; z-index: 2; transform: rotate(90deg); }
    .celtic-cross-layout .cc-card-3 { grid-area: 3 / 2 / 4 / 3; }
    .celtic-cross-layout .cc-card-4 { grid-area: 2 / 1 / 3 / 2; }
    .celtic-cross-layout .cc-card-5 { grid-area: 1 / 2 / 2 / 3; }
    .celtic-cross-layout .cc-card-6 { grid-area: 2 / 3 / 3 / 4; }
    .celtic-cross-layout .cc-card-7 { grid-area: 1 / 4 / 4 / 5; }

    .celtic-cross-layout .cc-reading-summary {
        grid-column: 1 / 5;
        margin-top: 2rem;
    }
}

.celtic-cross-layout .cc-card-2 .card-img-top.reversed {
    transform: rotate(180deg) rotate(90deg);
}

@media (max-width: 991.98px) {
    .celtic-cross-layout .cc-card-2 {
        transform: rotate(0deg); 
        margin-top: -30px;
        margin-bottom: 30px;
    }
    .celtic-cross-layout .cc-card-2 .card-img-top.reversed {
        transform: rotate(180deg);
    }
}
/* =============================================== */
/* STILI GRIMORIO DIGITALE */
/* =============================================== */

.card-grimoire {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    background: transparent;
    border: none;
}

.card-grimoire:hover {
    transform: scale(1.08);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.card-grimoire .card-img-top {
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.card-title-small {
    font-family: 'Lato', sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
    color: #EAEAEA;
}

/* Correzione per il light mode */
html.light-mode .card-title-small {
    color: #212529;
}

html.light-mode .modal-content {
    background-color: #f8f9fa;
    color: #212529;
}

html.light-mode .btn-close-white {
    filter: invert(1);
}
/* =============================================== */
/* CONTROLLO MUSICA DI SOTTOFONDO */
/* =============================================== */
.music-control-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: rgba(74, 20, 140, 0.8); /* Viola semi-trasparente */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1050; /* Sopra la maggior parte degli elementi */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s, background-color 0.2s;
}

.music-control-button:hover {
    transform: scale(1.1);
    background-color: #4a148c;
}

.music-control-button.playing i::before {
    /* Cambia l'icona quando la musica è in riproduzione */
    content: "\f04c"; /* Icona Font Awesome per "pausa" */
}

/* =============================================== */
/* STILI INTERPRETAZIONE IA (FINALE E ROBUSTO) */
/* =============================================== */

/* Stile per l'area di risposta dell'IA in reading.php */
#ai-response-area {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

/* Stile generico per il testo della risposta */
.ai-response-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    line-height: 1.7;
    white-space: pre-wrap;
}

/* --- REGOLE GLOBALI PER GARANTIRE LA LEGGIBILITÀ --- */

/* DARK MODE (DEFAULT) */
/* Assicura che tutto il contenuto della card IA sia chiaro */
html.dark-mode #ai-interpretation-section .card {
    color: #EAEAEA;
}
html.dark-mode #ai-interpretation-section .card .card-header h5 {
    color: #EAEAEA;
}

/* LIGHT MODE */
/* Assicura che tutto il contenuto della card IA sia scuro */
html.light-mode #ai-interpretation-section .card {
    background-color: #e9ecef !important;
    color: #212529;
}
html.light-mode #ai-interpretation-section .card .card-header h5 {
    color: #212529;
}
html.light-mode.form-control::placeholder {
    color: #000;
}
/* =============================================== */
/* EFFETTO PREMIUM FOSFORESCENTE (BORDO + TIMBRO) */
/* =============================================== */

/* --- 1. Wrapper per il bordo animato (nella navbar) --- */
.premium-glow-wrapper {
  position: relative;
  border-radius: 8px;
  padding: 2px;
  /* L'animazione del gradiente crea il bordo fosforescente */
  background: linear-gradient(45deg, #ffd700, #ff8c00, #e05bff, #ffd700);
  background-size: 400% 400%;
  animation: premium-border-flow 4s ease infinite;
}

/* Rende il link all'interno del wrapper nuovamente scuro */
.premium-glow-wrapper .nav-link {
    background-color: #0F0529; /* Sfondo scuro per il link */
    border-radius: 6px; /* Bordo interno leggermente più piccolo */
}
html.light-mode .premium-glow-wrapper .nav-link {
    background-color: #f8f9fa; /* Sfondo chiaro per il link in light mode */
}


/* --- 2. Il "timbro" Premium --- */
.premium-stamp {
  position: absolute;
  top: -10px;
  right: -15px;
  background-color: #ffd700; /* Oro */
  color: #212529; /* Testo scuro */
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  transform: rotate(15deg); /* Inclinato */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  pointer-events: none; /* Non interferisce con il click sul link */
}

/* Adatta la posizione del timbro per il titolo della pagina */
.premium-title-container {
    position: relative;
    display: inline-block; /* Permette il posizionamento assoluto del timbro */
}
/* Stile specifico per il timbro posizionato su una card */
.premium-stamp.card-stamp {
  top: 10px;
  right: 10px;
  transform: rotate(10deg);
  font-size: 0.8rem;
}
.premium-stamp.page-title {
    font-size: 0.9rem;
    top: -15px;
    right: -25px;
}
.has-stamp {
    padding-right: 50px; /* Aggiunge spazio per non sovrapporre il testo al timbro */
}

/* --- 3. Animazione per il bordo fosforescente --- */
@keyframes premium-border-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =============================================== */
/* FIX PER ESPORTAZIONE PDF (Appiattimento 3D) */
/* =============================================== */
.pdf-export-mode .card-flipper {
    transform: none !important;
    transition: none !important;
}
.pdf-export-mode .card-front {
    display: none !important;
}
.pdf-export-mode .card-back {
    transform: none !important;
    position: relative !important;
    backface-visibility: visible !important;
}
.pdf-export-mode {
    height: auto !important;
    overflow: visible !important;
}