/* =========================================
   VARIÁVEIS GLOBAIS (:root)
   ========================================= */
:root {
    --header-wide-vertical-padding: 0.2rem;
    --floating-cover-image-width-free: clamp(10rem, 32.142857142857vw + (-46.857142857143px), 200px);
    --floating-cover-image-height-free: clamp(14rem, 3.5714285714vw + 130.7142857143px, 165px);
    --tag-background-grad: hsla(calc(232deg + (0deg + 0deg)), calc(20% * (1 + 0)), clamp(24%, 24% * (1 + 0), 24%), 0.5);
    
    /* CORREÇÃO: Removido "border:" duplicado do valor */
    --border-frequency: 1px solid var(--bg-300);
    --border-radius: 8px;
    --tag-bg-grad: hsla(var(--bg-100), 0.5);
}

.has-inline-color {
    background-color: transparent;
}

/* Cor do Botão de LOGIN */
label[for="modal-login-toggle"] { color: var(--inline-link-color); }
label[for="modal-site-settings-toggle"] { color: var(--layout-link-color); }
button.mobile-menu__frame-button { color: var(--layout-link-color); }

/* =========================================
   SISTEMA DE AVALIAÇÃO (ESTRELAS)
   ========================================= */
.recommendation-section {
    text-align: center;
    margin: 2rem auto;
    padding: 1.5rem;
    border-radius: 12px;
    max-width: 800px;
}

.recommendation-buttons {
    display: inline-flex;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1rem 0;
}

._custom-recommend-button {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: all 0.3s ease;
}

._custom-recommend-button i {
    font-size: 1.5rem;
    transition: all 0.2s ease;
}

._custom-recommend-button:hover i {
    transform: scale(1.15);
}

._custom-recommend-button .vote-count {
    position: absolute;
    bottom: -10px;
    right: -10px;
    background: var(--bg-500);
    color: var(--fg-600);
    font-size: .9rem;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Cores dos votos (Agrupadas para limpeza e eficiência) */
._custom-recommend-button[data-vote="5"] i,
._custom-recommend-button[data-vote="5"].voted i,
.fa-star.far[data-vote="5"] { color: #F44336; } /* Péssimo */

._custom-recommend-button[data-vote="4"] i,
._custom-recommend-button[data-vote="4"].voted i,
.fa-star.far[data-vote="4"] { color: #FF5722; } /* Ruim */

._custom-recommend-button[data-vote="3"] i,
._custom-recommend-button[data-vote="3"].voted i,
.fa-star.far[data-vote="3"] { color: #FF9800; } /* Regular */

._custom-recommend-button[data-vote="2"] i,
._custom-recommend-button[data-vote="2"].voted i,
.fa-star.far[data-vote="2"] { color: #FFEB3B; } /* Bom */

._custom-recommend-button[data-vote="1"] i,
._custom-recommend-button[data-vote="1"].voted i,
.fa-star.far[data-vote="1"] { color: #4CAF50; } /* Excelente */

/* =========================================
   BARRA DE PROGRESSO
   ========================================= */
.recommendation-result {
    margin-top: 1.5rem;
}

.progress-container {
    width: 60%;
    height: 5px;
    background: var(--bg-300);
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(
        90deg,
        #F44336 0%,
        #FF5722 25%,
        #FF9800 50%,
        #FFEB3B 75%,
        #4CAF50 100%
    );
    transition: width 0.5s ease;
}

.percentage-text {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--fg-950);
}

/* =========================================
   RESPONSIVIDADE
   ========================================= */
@media (max-width: 768px) {
    .recommendation-section {
        padding: 1rem;
        margin: 1rem auto;
    }

    .recommendation-buttons {
        gap: 8px;
    }

    ._custom-recommend-button i {
        font-size: 1.25rem;
    }

    ._custom-recommend-button .vote-count {
        font-size: 0.65rem;
        width: 18px;
        height: 18px;
    }

    .progress-container {
        width: 80%;
    }

    .percentage-text {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .recommendation-section {
        padding: 0.5rem;
    }

    .recommendation-buttons {
        gap: 5px;
    }

    ._custom-recommend-button i {
        font-size: 1rem;
    }

    ._custom-recommend-button .vote-count {
        font-size: 0.5rem;
        width: 15px;
        height: 15px;
    }

    .progress-container {
        width: 90%;
    }

    .percentage-text {
        font-size: 0.75rem;
    }
}

/* Oculta a lista da nuvem de taxonomias */ 
.tax-cloud a { display: none; }

/* Estilo Tag de Spoiler no Titulo */
.spoiler-title { filter: blur(2.5px); cursor: pointer; transition: filter 0.3s ease; }
.spoiler-title:hover { filter: none; }

/* Estilo para a tabela de votos */
.user-votes-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-family: Arial, sans-serif;  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.user-votes-table thead { background-color: #f4f4f4; color: #333; }
.user-votes-table th, .user-votes-table td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; }
.user-votes-table th { font-weight: bold; }
.user-votes-table td { font-size: 14px; }
.user-votes-table tr:hover { background-color: #f9f9f9; }

/* Estilo para a mensagem do countdown */
.countdown-message { text-align: center; font-size: 18px; background-color: var(--code-background-inline); padding: 20px 10px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); max-width: 15rem; margin: 0 auto; }
.countdown-message p:first-child { font-weight: bold; color: var(--primary-400); margin-bottom: 0.5rem; }
.countdown-message p:last-child { font-size: 1.5rem; font-weight: 700; color: var(--red-600); }


/* =========================================
   MODO ESCURO (Padrão/Base)
   ========================================= */
/* CORREÇÃO: [data-theme=default] removido pois não existe mais no HTML */
:root {
    /* BACKGROUND */
    --bg-50-free: calc(232deg + var(--hue-rotate)) calc(20% * var(--saturation)) clamp(48%, 96% * var(--darken), 96%);
    --bg-100-free: calc(232deg + var(--hue-rotate)) calc(20% * var(--saturation)) clamp(45%, 90% * var(--darken), 90%);
    --bg-200-free: calc(232deg + var(--hue-rotate)) calc(20% * var(--saturation)) clamp(38%, 75% * var(--darken), 75%);
    --bg-300-free: calc(232deg + var(--hue-rotate)) calc(20% * var(--saturation)) clamp(28%, 28% * var(--darken), 28%);
    --bg-400-free: calc(232deg + var(--hue-rotate)) calc(20% * var(--saturation)) clamp(24%, 24% * var(--darken), 24%);
    --bg-500-free: calc(232deg + var(--hue-rotate)) calc(20% * var(--saturation)) clamp(20%, 20% * var(--darken), 20%);
    --bg-600-free: calc(232deg + var(--hue-rotate)) calc(25% * var(--saturation)) clamp(16%, 16% * var(--darken), 16%);
    --bg-700-free: calc(232deg + var(--hue-rotate)) calc(30% * var(--saturation)) clamp(12%, 12% * var(--darken), 12%);
    --bg-800-free: calc(232deg + var(--hue-rotate)) calc(35% * var(--saturation)) clamp(9%, 9% * var(--darken), 9%);
    --bg-900-free: calc(232deg + var(--hue-rotate)) calc(45% * var(--saturation)) clamp(6%, 6% * var(--darken), 6%);
    --bg-950-free: calc(232deg + var(--hue-rotate)) calc(50% * var(--saturation)) clamp(4%, 4% * var(--darken), 4%);
    
    --bg-50: hsl(var(--bg-50-free));
    --bg-100: hsl(var(--bg-100-free)); 
    --bg-200: hsl(var(--bg-200-free)); 
    --bg-300: hsl(var(--bg-300-free));
    --bg-400: hsl(var(--bg-400-free));
    --bg-500: hsl(var(--bg-500-free));
    --bg-600: hsl(var(--bg-600-free));
    --bg-700: hsl(var(--bg-700-free));
    --bg-800: hsl(var(--bg-800-free));
    --bg-900: hsl(var(--bg-900-free)); 
    --bg-950: hsl(var(--bg-950-free));
    --spoiler-background: var(--text-selection-background);
    --spoiler-color-visible: var(--fg-500);
}

/* FOREGROUND (Texto) - Padrão */
:root, :root .chapter-formatting {
    --fg-100:  hsl(calc(222deg + var(--hue-rotate)) max(calc(40% * (var(--font-saturation) + var(--saturation) - 1)),  0%) clamp(0%,  calc(93% * var(--font-lightness,  1)),  100%));
    --fg-200:  hsl(calc(222deg + var(--hue-rotate)) max(calc(26% * (var(--font-saturation) + var(--saturation) - 1)),  0%) clamp(0%,  calc(89% * var(--font-lightness,  1)),  100%));
    --fg-300:  hsl(calc(224deg + var(--hue-rotate)) max(calc(20% * (var(--font-saturation) + var(--saturation) - 1)),  0%) clamp(0%,  calc(85% * var(--font-lightness,  1)),  100%));
    --fg-400:  hsl(calc(222deg + var(--hue-rotate)) max(calc(18% * (var(--font-saturation) + var(--saturation) - 1)),  0%) clamp(0%,  calc(80.5% * var(--font-lightness,  1)),  100%));
    --fg-500:  hsl(calc(222deg + var(--hue-rotate)) max(calc(18% * (var(--font-saturation) + var(--saturation) - 1)),  0%) clamp(0%,  calc(77% * var(--font-lightness,  1)),  100%));
    --fg-600:  hsl(calc(224deg + var(--hue-rotate)) max(calc(18% * (var(--font-saturation) + var(--saturation) - 1)),  0%) clamp(0%,  calc(71% * var(--font-lightness,  1)),  100%));
    --fg-700:  hsl(calc(224deg + var(--hue-rotate)) max(calc(16% * (var(--font-saturation) + var(--saturation) - 1)),  0%) clamp(0%,  calc(65% * var(--font-lightness,  1)),  100%));
    --fg-800:  hsl(calc(222deg + var(--hue-rotate)) max(calc(12% * (var(--font-saturation) + var(--saturation) - 1)),  0%) clamp(0%,  calc(61% * var(--font-lightness,  1)),  100%));
    --fg-900:  hsl(calc(222deg + var(--hue-rotate)) max(calc(11% * (var(--font-saturation) + var(--saturation) - 1)),  0%) clamp(0%,  calc(54% * var(--font-lightness,  1)),  100%));
    --fg-950:  hsl(calc(222deg + var(--hue-rotate)) max(calc(9% * (var(--font-saturation) + var(--saturation) - 1)),  0%) clamp(0%,  calc(49% * var(--font-lightness,  1)),  100%));
    --fg-tinted:  hsl(calc(224deg + var(--hue-rotate)) max(calc(22% * (var(--font-saturation) + var(--saturation) - 1)),  0%) clamp(0%,  calc(76% * var(--font-lightness,  1)),  100%));
    --fg-inverted:  hsl(calc(222deg + var(--hue-rotate)) max(calc(20% * (var(--font-saturation) + var(--saturation) - 1)),  0%) clamp(0%,  calc(5% * var(--font-lightness,  1)),  100%));
}

/* Links em Modo Escuro */
:root:not([data-mode="light"]) .card__title a,
:root:not([data-mode="light"]) .post-list-item__title,
:root:not([data-mode="light"]) .chapter-group__list-item-link  {
    color: var(--primary-400); /* CORREÇÃO: minúsculas em 'color' */
}
:root:not([data-mode="light"]) .tabs__item._current  {
    background: var(--primary-400);
}


/* =========================================
   MODO CLARO (Overrides)
   ========================================= */
:root[data-mode="light"] {
    --hpt-200: var(--bg-300);
    --hpt-300: var(--bg-400);
    --hpt-400: var(--bg-500);
    --th4: var(--fg-300);
}

:root[data-mode="light"] {
  /* BACKGROUND */
  --bg-50-free:  calc(220deg + var(--hue-rotate)) calc(15% * var(--saturation)) clamp(96%, 98% * var(--darken), 99%);
  --bg-100-free: calc(220deg + var(--hue-rotate)) calc(15% * var(--saturation)) clamp(92%, 96% * var(--darken), 98%);
  --bg-200-free: calc(220deg + var(--hue-rotate)) calc(14% * var(--saturation)) clamp(88%, 94% * var(--darken), 96%);
  --bg-300-free: calc(220deg + var(--hue-rotate)) calc(13% * var(--saturation)) clamp(82%, 90% * var(--darken), 94%);
  --bg-400-free: calc(220deg + var(--hue-rotate)) calc(12% * var(--saturation)) clamp(75%, 85% * var(--darken), 92%);
  --bg-500-free: calc(220deg + var(--hue-rotate)) calc(12% * var(--saturation)) clamp(65%, 78% * var(--darken), 90%);
  --bg-600-free: calc(220deg + var(--hue-rotate)) calc(11% * var(--saturation)) clamp(55%, 68% * var(--darken), 80%);
  --bg-700-free: calc(220deg + var(--hue-rotate)) calc(10% * var(--saturation)) clamp(45%, 58% * var(--darken), 70%);
  --bg-800-free: calc(220deg + var(--hue-rotate)) calc(10% * var(--saturation)) clamp(35%, 48% * var(--darken), 60%);
  --bg-900-free: calc(220deg + var(--hue-rotate)) calc(10% * var(--saturation)) clamp(25%, 38% * var(--darken), 50%);
  --bg-950-free: calc(220deg + var(--hue-rotate)) calc(10% * var(--saturation)) clamp(12%, 28% * var(--darken), 40%);

  --bg-50:  hsl(var(--bg-50-free));
  --bg-100: hsl(var(--bg-100-free));
  --bg-200: hsl(var(--bg-200-free));
  --bg-300: hsl(var(--bg-300-free));
  --bg-400: hsl(var(--bg-400-free));
  --bg-500: hsl(var(--bg-500-free));
  --bg-600: hsl(var(--bg-600-free));
  --bg-700: hsl(var(--bg-700-free));
  --bg-800: hsl(var(--bg-800-free));
  --bg-900: hsl(var(--bg-900-free));
  --bg-950: hsl(var(--bg-950-free));
  --spoiler-background: var(--bg-600);
  --spoiler-color-visible: var(--fg-500);

    --voted: hsla(calc(159deg + var(--hue-rotate)), calc(30% * var(--saturation)), clamp(60%, 70% * var(--darken), 80%), var(--voted-opacity));
    --voted-opacity: 0.7;
    
    --green-400: hsl(calc(120deg + var(--hue-rotate)), calc(60% * var(--saturation)), clamp(40%, 50% * var(--darken), 60%)); /* Green 400 */
    --green-500: hsl(calc(120deg + var(--hue-rotate)), calc(70% * var(--saturation)), clamp(30%, 40% * var(--darken), 50%)); /* Green 500 */
    --green-600: hsl(calc(120deg + var(--hue-rotate)), calc(80% * var(--saturation)), clamp(20%, 30% * var(--darken), 40%)); /* Green 600 */

    --red-400: hsl(calc(0deg + var(--hue-rotate)), calc(80% * var(--saturation)), clamp(60%, 70% * var(--darken), 80%)); /* Red 400 */
    --red-500: hsl(calc(0deg + var(--hue-rotate)), calc(70% * var(--saturation)), clamp(50%, 60% * var(--darken), 70%)); /* Red 500 */
    --red-600: hsl(calc(0deg + var(--hue-rotate)), calc(60% * var(--saturation)), clamp(40%, 50% * var(--darken), 60%)); /* Red 600 */
    --layout-link-color: var(--fg-400);
    
  /* Cores Primárias Modo Claro */
  --primary-400: hsl(calc(240deg + var(--hue-rotate)), calc(60% * var(--saturation)), clamp(30%, 40% * var(--darken), 50%));
  --primary-500: hsl(calc(240deg + var(--hue-rotate)), calc(55% * var(--saturation)), clamp(20%, 30% * var(--darken), 40%));
  --primary-600: hsl(calc(240deg + var(--hue-rotate)), calc(50% * var(--saturation)), clamp(15%, 25% * var(--darken), 35%));

  /* Ajuste a cor do link */
  --layout-link-color: var(--fg-400);
}

:root[data-mode="light"] .custom-logo {
  content: url("/wp-content/uploads/2024/10/illusia_roxo-claro.webp");
}

/* FOREGROUND (Texto) - Modo Claro */
:root[data-mode="light"],
:root[data-mode="light"] .chapter-formatting {
  --fg-100:  hsl(calc(220deg + var(--hue-rotate)) max(calc(80% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(1%, calc(2.5% * var(--font-lightness, 1)), 100%));
  --fg-200:  hsl(calc(220deg + var(--hue-rotate)) max(calc(65% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(3%, calc(5% * var(--font-lightness, 1)), 100%));
  --fg-300:  hsl(calc(220deg + var(--hue-rotate)) max(calc(50% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(5%, calc(9% * var(--font-lightness, 1)), 100%));
  --fg-400:  hsl(calc(220deg + var(--hue-rotate)) max(calc(35% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(8%, calc(13% * var(--font-lightness, 1)), 100%));
  --fg-500:  hsl(calc(220deg + var(--hue-rotate)) max(calc(28% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(12%, calc(18% * var(--font-lightness, 1)), 100%));
  --fg-600:  hsl(calc(220deg + var(--hue-rotate)) max(calc(20% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(20%, calc(27% * var(--font-lightness, 1)), 100%));
  --fg-700:  hsl(calc(220deg + var(--hue-rotate)) max(calc(13% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(32%, calc(39% * var(--font-lightness, 1)), 100%));
  --fg-800:  hsl(calc(220deg + var(--hue-rotate)) max(calc(10% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(42%, calc(46% * var(--font-lightness, 1)), 100%));
  --fg-900:  hsl(calc(220deg + var(--hue-rotate)) max(calc(9%  * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(52%, calc(58% * var(--font-lightness, 1)), 100%));
  --fg-950:  hsl(calc(220deg + var(--hue-rotate)) max(calc(8%  * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(60%, calc(65% * var(--font-lightness, 1)), 100%));
  --fg-tinted: hsl(calc(220deg + var(--hue-rotate)) max(calc(30% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(15%, calc(20% * var(--font-lightness, 1)), 100%));
  --fg-inverted: hsl(calc(220deg + var(--hue-rotate)) max(calc(15% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(95%, calc(99% * var(--font-lightness, 1)), 100%));
}