/* ═══════════════════════════════════════════════════════════
   blog.css — Dr. Almir Miguel — Blog de Perícias Médicas
   Identidade visual: deep green + gold, Cormorant Garamond + Source Sans 3
   Compatível com Tailwind CDN (usado no site principal)
   ═══════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
    --deep:         #0E1B17;
    --deep-alt:     #12221C;
    --deep-light:   #14261F;
    --gold:         #C9A46A;
    --gold-dim:     rgba(201,164,106,0.15);
    --gold-hover:   #D4B37A;
    --cream:        #F4EFE6;
    --warm-gray:    #CFC7BB;
    --warm-gray-dim:rgba(207,199,187,0.5);
    --font-serif:   'Cormorant Garamond', Georgia, serif;
    --font-sans:    'Source Sans 3', system-ui, sans-serif;
    --max-content:  1160px;
    --max-prose:    720px;
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: var(--deep); color: var(--cream); font-family: var(--font-sans); line-height: 1.7; }
::selection { background: var(--gold); color: var(--deep); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { background: rgba(201,164,106,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,164,106,0.5); }

/* ── TOPOGRAPHIC TEXTURE ── */
.topo-bg { position: relative; }
.topo-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cpath d='M0 300 Q150 250 300 300 T600 300' fill='none' stroke='%23C9A46A' stroke-width='0.5'/%3E%3Cpath d='M0 320 Q150 270 300 320 T600 320' fill='none' stroke='%23C9A46A' stroke-width='0.5'/%3E%3Cpath d='M0 280 Q150 230 300 280 T600 280' fill='none' stroke='%23C9A46A' stroke-width='0.5'/%3E%3Cpath d='M0 340 Q150 290 300 340 T600 340' fill='none' stroke='%23C9A46A' stroke-width='0.5'/%3E%3Cpath d='M0 260 Q150 210 300 260 T600 260' fill='none' stroke='%23C9A46A' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 600px 600px;
    pointer-events: none;
    z-index: 0;
}
.topo-bg > * { position: relative; z-index: 1; }

/* ── LAYOUT ── */
.container { max-width: var(--max-content); margin: 0 auto; padding: 0 1.5rem; }
.prose-container { max-width: var(--max-prose); margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) {
    .container, .prose-container { padding: 0 2rem; }
}

/* ── GOLD LINE DIVIDER ── */
.gold-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,164,106,0.3), transparent);
    max-width: var(--max-content);
    margin: 0 auto;
}

/* ── MONOGRAM ── */
.monogram {
    font-family: var(--font-serif);
    font-weight: 300;
    letter-spacing: 0.15em;
    color: var(--gold);
}

/* ── HEADER ── */
.blog-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(14,27,23,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(201,164,106,0.08);
}
.blog-header-inner {
    max-width: var(--max-content);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
@media (min-width: 768px) { .blog-header-inner { height: 64px; padding: 0 2rem; } }
.blog-header a { transition: color 0.3s ease; }
.blog-header .logo { display: flex; align-items: center; gap: 0.75rem; }
.blog-header .logo-divider { width: 1px; height: 1.25rem; background: var(--gold); opacity: 0.2; }
.blog-header .logo-text { font-family: var(--font-serif); color: var(--cream); font-size: 1rem; letter-spacing: 0.02em; }
.blog-header nav { display: flex; align-items: center; gap: 1.5rem; }
.blog-header nav a { color: var(--warm-gray); font-size: 0.875rem; }
.blog-header nav a:hover { color: var(--cream); }
.blog-header nav a.active { color: var(--gold); }

/* ── BUTTONS ── */
.btn-gold {
    border: 1px solid rgba(201,164,106,0.5);
    color: var(--gold);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.35s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-gold:hover { background: rgba(201,164,106,0.1); border-color: var(--gold); }
.btn-gold-fill {
    background: var(--gold);
    color: var(--deep);
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.35s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
}
.btn-gold-fill:hover { background: var(--gold-hover); box-shadow: 0 4px 20px rgba(201,164,106,0.25); }

/* ── BREADCRUMB ── */
.breadcrumb {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--warm-gray-dim);
    font-weight: 300;
    padding-top: 5rem;
    padding-bottom: 0.5rem;
}
.breadcrumb a { transition: color 0.2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { margin: 0 0.5rem; opacity: 0.4; }
.breadcrumb .current { color: var(--gold); }

/* ── GLASS CARD ── */
.glass-card {
    background: rgba(18,34,28,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(201,164,106,0.1);
    border-radius: 8px;
    padding: 2rem;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    display: block;
}
.glass-card:hover {
    border-color: rgba(201,164,106,0.25);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

/* ── BADGE ── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 4px 10px;
    border: 1px solid rgba(201,164,106,0.2);
    border-radius: 4px;
    font-family: var(--font-sans);
    background: rgba(201,164,106,0.05);
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0.6; }

/* ── META LINE (date + reading time) ── */
.meta-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--font-sans);
}
.meta-line .date { color: var(--gold); }
.meta-line .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--warm-gray-dim); }
.meta-line .read-time { color: var(--warm-gray-dim); }

/* ── BLOG HUB ── */
.hub-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 300;
    line-height: 1.2;
    color: var(--cream);
    margin-bottom: 1rem;
}
.hub-hero p {
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    color: var(--warm-gray);
    font-weight: 300;
    max-width: 40rem;
}
.hub-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .hub-grid { grid-template-columns: 1fr 1fr; } }

.hub-card { text-decoration: none; }
.hub-card h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 400;
    color: var(--cream);
    line-height: 1.3;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}
.hub-card:hover h2 { color: var(--gold); }
.hub-card p {
    font-size: 0.875rem;
    color: var(--warm-gray);
    font-weight: 300;
    line-height: 1.6;
}
.hub-card .read-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--gold);
    font-weight: 500;
}

/* ── ARTICLE TYPOGRAPHY ── */
.article-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--cream);
}
.article-body h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 400;
    color: var(--cream);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.25;
}
.article-body p {
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    color: var(--warm-gray);
    font-weight: 300;
    line-height: 1.8;
    margin-bottom: 1.25rem;
}
.article-body p:first-of-type {
    color: var(--cream);
    font-weight: 400;
}
.article-body ul, .article-body ol {
    margin: 1rem 0 1.25rem 1.5rem;
    color: var(--warm-gray);
    font-weight: 300;
    line-height: 1.8;
}
.article-body li { margin-bottom: 0.5rem; }

/* ── RELATED LINKS ── */
.related-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--gold-dim); }
.related-section h3 {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    font-family: var(--font-sans);
    font-weight: 500;
    margin-bottom: 1rem;
}
.related-link {
    display: block;
    background: rgba(18,34,28,0.6);
    border: 1px solid rgba(201,164,106,0.1);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--gold);
    font-size: 0.875rem;
    font-weight: 500;
    transition: border-color 0.3s ease;
}
.related-link:hover { border-color: rgba(201,164,106,0.3); }

/* ── AUTHOR BOX ── */
.author-box {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gold-dim);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.author-box .monogram { font-size: 1.5rem; margin-top: 0.15rem; flex-shrink: 0; }
.author-box .name { color: var(--cream); font-weight: 500; font-size: 1rem; }
.author-box .bio { color: var(--warm-gray); font-size: 0.875rem; font-weight: 300; margin-top: 0.25rem; line-height: 1.6; }

/* ── CTA ── */
.cta-block { margin-top: 2rem; }

/* ── FOOTER ── */
.blog-footer {
    border-top: 1px solid var(--gold-dim);
    padding: 2.5rem 0;
    margin-top: 4rem;
}
.blog-footer .footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
@media (min-width: 768px) {
    .blog-footer .footer-top { flex-direction: row; justify-content: space-between; text-align: left; }
}
.blog-footer .footer-id { font-size: 0.875rem; color: var(--warm-gray); font-weight: 300; }
.blog-footer .footer-loc { font-size: 0.875rem; color: var(--warm-gray); font-weight: 300; }
.blog-footer .footer-legal {
    font-size: 0.75rem;
    color: var(--warm-gray-dim);
    text-align: center;
    font-weight: 300;
    line-height: 1.6;
    margin-top: 1.5rem;
}
.blog-footer .footer-legal a { color: var(--gold); opacity: 0.6; transition: opacity 0.2s; }
.blog-footer .footer-legal a:hover { opacity: 1; }

/* ── REVEAL ANIMATION ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── MOBILE MENU ── */
.mobile-menu-btn { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.mobile-menu-btn span { display: block; width: 24px; height: 1px; background: var(--cream); transition: all 0.3s; }
.mobile-menu-btn span:last-child { width: 16px; background: var(--gold); }
@media (min-width: 768px) { .mobile-menu-btn { display: none; } }
@media (max-width: 767px) { .blog-header nav.desktop-nav { display: none; } }

.mobile-nav-overlay {
    position: fixed; inset: 0; z-index: 40;
    background: var(--deep);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
    transform: translateX(100%);
    transition: transform 0.35s ease;
}
.mobile-nav-overlay.open { transform: translateX(0); }
.mobile-nav-overlay a {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--cream);
}