/* ============================================================
   Fanfic Connection — star.css
   Tema: Categoria STAR | Dourado/Champagne Luxo
   Uso: adicionar após o style3.css nas histórias STAR
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

/* --- Variáveis STAR (sobrescrevem as do style3.css) --- */
:root {
    --star-ouro:        #b8860b;
    --star-ouro-claro:  #d4a843;
    --star-champagne:   #f5e6c8;
    --star-champagne2:  #fdf6e8;
    --star-borda:       #d4a843;
    --star-escuro:      #7a5800;
    --star-texto:       #3a2a00;
    --star-sombra:      rgba(180, 134, 11, 0.18);

    /* Sobrescreve variáveis do style3.css */
    --verde-escuro:     #b8860b;
    --verde-medio:      #d4a843;
    --verde-claro:      #fdf6e8;
    --verde-borda:      #d4a843;
    --fonte-titulo:     'Cormorant Garamond', Georgia, serif;
}

/* ============================================================
   HEADER STAR
   ============================================================ */
.main-header {
    background: linear-gradient(135deg, #1a1200 0%, #2d1f00 60%, #1a1200 100%);
    border-bottom: 2px solid var(--star-ouro);
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* Linhas decorativas de fundo */
.main-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 60px,
        rgba(212, 168, 67, 0.04) 60px,
        rgba(212, 168, 67, 0.04) 61px
    );
    pointer-events: none;
}

/* Badge "Categoria Star" */
.main-header::after {
    content: '★ ★ ★  CATEGORIA STAR  ★ ★ ★';
    display: block;
    padding: 9px 28px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--star-ouro-claro);
    background: rgba(212, 168, 67, 0.07);
    border-bottom: 1px solid rgba(212, 168, 67, 0.2);
}

.main-header nav {
    padding: 14px 28px 0;
}

.site-link {
    color: rgba(212, 168, 67, 0.6);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    border-bottom-color: transparent;
}

.site-link:hover {
    color: var(--star-ouro-claro);
    border-bottom-color: var(--star-borda);
}

.story-branding {
    padding: 20px 28px 28px;
    position: relative;
}

/* Estrelas animadas no canto do header */
.story-branding::after {
    content: '★  ✦  ★  ✦';
    position: absolute;
    top: 14px;
    right: 28px;
    font-size: 17px;
    color: var(--star-ouro-claro);
    opacity: 0.55;
    letter-spacing: 6px;
    animation: star-twinkle 3s ease-in-out infinite;
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.55; }
    50%       { opacity: 1;    }
}

/* Linha dourada ao final do header */
.main-header .story-branding {
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, transparent, var(--star-ouro), transparent) 1;
}

h1 {
    color: var(--star-champagne);
    text-shadow: 0 2px 20px rgba(212, 168, 67, 0.3);
}

.author-name {
    color: rgba(212, 168, 67, 0.75);
}

.author-name strong {
    color: var(--star-ouro-claro);
}

/* ============================================================
   META-DATA
   ============================================================ */
.meta-data {
    background: var(--star-champagne2);
    border-color: var(--star-borda);
    border-left-color: var(--star-ouro);
}

.meta-data li {
    color: #7a6030;
}

.meta-data li a {
    color: var(--star-escuro);
}

/* ============================================================
   MENU DE CAPÍTULOS — STAR
   ============================================================ */
.chapter-nav {
    background: rgba(212, 168, 67, 0.07);
    border-color: rgba(212, 168, 67, 0.3);
    border-left-color: var(--star-ouro);
}

.chapter-nav-label {
    color: var(--star-ouro-claro);
}

.chapter-nav-list a {
    background: rgba(212, 168, 67, 0.06);
    border-color: rgba(212, 168, 67, 0.3);
    color: var(--star-ouro-claro);
}

.chapter-nav-list a:hover,
.chapter-nav-list a.ativo {
    background: var(--star-ouro);
    color: #1a1200;
    border-color: var(--star-ouro);
}

/* ============================================================
   TÍTULO DE CAPÍTULO
   ============================================================ */
.chapter-title::after {
    background: var(--star-ouro);
    width: 40px;
    height: 2px;
}

/* ============================================================
   CORREÇÃO CAPITULAR - CATEGORIA STAR
   ============================================================ */

/* Altera a cor da primeira letra para o dourado Star */
.story-text p:first-child::first-letter {
    color: var(--star-ouro);
}

/* Ajuste opcional para o Modo Escuro da categoria Star */
body.modo-escuro .story-text p:first-child::first-letter {
    color: var(--star-ouro-claro);
}

/* ============================================================
   CAPA DA FIC — STAR
   ============================================================ */
.fic-cover img {
    box-shadow: 0 4px 24px rgba(180, 134, 11, 0.25);
}

/* ============================================================
   NOTA DA AUTORA
   ============================================================ */
.author-note {
    background: linear-gradient(135deg, var(--star-champagne2), #fff9ee);
    border-left-color: var(--star-ouro);
    position: relative;
}

.author-note::before {
    content: '★';
    position: absolute;
    top: -11px;
    left: 14px;
    font-size: 18px;
    color: var(--star-ouro);
    background: #fff9ee;
    padding: 0 4px;
    line-height: 1;
}

.author-note strong {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--star-escuro);
}

/* ============================================================
   BOTÕES SOCIAIS
   ============================================================ */
.social-btn {
    background: linear-gradient(135deg, var(--star-ouro) 0%, var(--star-ouro-claro) 100%);
    color: #1a1200 !important;
    border-color: var(--star-ouro);
    box-shadow: 0 2px 10px var(--star-sombra);
    letter-spacing: 0.1em;
}

.social-btn::before {
    content: '★ ';
    font-size: 11px;
}

.social-btn:hover {
    background: transparent;
    color: var(--star-escuro) !important;
}

/* ============================================================
   BOTÃO TOPO
   ============================================================ */
#divfix a {
    background: linear-gradient(135deg, var(--star-ouro), var(--star-ouro-claro));
    color: #1a1200;
    box-shadow: 0 3px 14px var(--star-sombra);
}

#divfix a:hover {
    background: var(--star-escuro);
    color: var(--star-champagne);
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.story-footer {
    border-top-color: var(--star-borda);
}

.error-report a {
    color: var(--star-escuro);
}

.copyright {
    color: #b8a070;
}

/* ============================================================
   MEDIA QUERIES
   ============================================================ */
@media screen and (max-width: 600px) {
    .main-header::after {
        font-size: 10px;
        letter-spacing: 0.15em;
        padding: 8px 16px;
    }

    .story-branding::after {
        font-size: 14px;
        right: 16px;
        letter-spacing: 4px;
    }
}