/* ================================================================
   web-dark.css — tema ESCURO (navy + esmeralda) para as páginas do
   layout _theme.php: blog, blog-post, termos, sobre, ajuda.

   Carregado DEPOIS de style.css (ver _theme.php), então sobrescreve a
   antiga paleta verde/teal clara. A paleta é a MESMA da landing
   (landing.css): fundo navy #050b1a, acento esmeralda #34d399/#10b981,
   textos em branco com opacidades. Só cores/tipografia — o layout
   (grid, espaçamentos) continua vindo do style.css.
   ================================================================ */

:root {
    --navy-950: #050b1a;
    --navy-900: #0a1428;
    --navy-800: #0f1e3d;
    --navy-700: #142a52;
    --green-400: #34d399;
    --green-500: #10b981;
    --green-600: #059669;
    --w90: rgba(255, 255, 255, 0.9);
    --w70: rgba(255, 255, 255, 0.7);
    --w60: rgba(255, 255, 255, 0.6);
    --w40: rgba(255, 255, 255, 0.4);
    --w10: rgba(255, 255, 255, 0.1);
    --w05: rgba(255, 255, 255, 0.05);

    /* sobrescreve as vars antigas que o style.css consome p/ acentos */
    --color-green: #34d399;
    --hover-color-green: #10b981;
    --gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --color-default: rgba(255, 255, 255, 0.9);
}

/* fundo do gradiente navy usado nos banners internos */
:root {
    --gradient-banner: linear-gradient(180deg, #0f1e3d 0%, #0a1428 100%);
}

/* ---------- base ---------- */
html, body {
    background: var(--navy-950);
    color: var(--w90);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* headings de destaque em serifa (igual à landing) */
.blog_page_header h1,
.post_page_header h1,
.terms_page_header h1,
.footer_optout h2 {
    font-family: 'Instrument Serif', 'Inter', serif;
    font-weight: 400;
}

/* ---------- header topo (sticky navy translúcido, como a landing) ---------- */
.main_header {
    background: rgba(5, 11, 26, 0.7) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--w05);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 60;
}
.main_header_logo h1 a {
    color: #fff;
    text-shadow: none;
}
.main_header_nav_links .link {
    color: var(--w70);
}
.main_header_nav_links .link:hover {
    background: var(--w05);
    color: #fff;
}
.main_header_nav_links .login {
    background: var(--gradient-green);
    color: #fff;
    border-radius: 999px;
}

/* drawer mobile → fundo navy (o style.css deixa branco em <=62em) */
@media (max-width: 62em) {
    .main_header_nav_links {
        background: var(--navy-900);
        border-left: 1px solid var(--w10);
    }
    .main_header_nav_links .login,
    .main_header_nav_links .link {
        color: var(--w90);
    }
    .main_header_nav_links .link:hover {
        background: var(--w05);
        background-image: none;
        color: #fff;
    }
}

/* ---------- banner do blog ---------- */
.blog_page_header {
    background: var(--gradient-banner);
    border-bottom: 1px solid var(--w05);
}
.blog_page_header h1 {
    color: #fff;
    -webkit-text-stroke-width: 0;
}
.blog_page_header p {
    color: var(--w70);
}
.blog_page_header form label {
    background: #fff;
}

/* ---------- cards de artigo ---------- */
.blog_article {
    color: var(--w70);
}
.blog_article a {
    color: var(--w90);
}
.blog_article h2 a {
    color: #fff;
}
.blog_article a:hover {
    color: var(--green-400);
}
.blog_article img {
    border-bottom: 3px solid var(--w10);
}
.blog_article:hover img {
    border-color: var(--green-400);
}

/* ---------- post individual ---------- */
.post_page_header h1 {
    color: #fff;
    text-shadow: none;
}
.post_page_header:after {
    background: var(--gradient-banner);
}
.post_page_cover {
    border-bottom: 3px solid var(--green-500);
}
.post_page_meta,
.post_page_related_header {
    color: var(--w60);
}
.post_page_related header h4 {
    color: #fff;
}

/* ---------- corpo de texto (blog-post + termos) ---------- */
.htmlchars {
    color: var(--w90);
}
.htmlchars a {
    color: var(--green-400);
}
.htmlchars pre {
    background: var(--navy-800);
    color: var(--w90);
    border: 1px solid var(--w10);
}
.htmlchars h2,
.htmlchars h3,
.htmlchars h4,
.htmlchars h5 {
    color: #fff;
}

/* ---------- página Sobre (/sobre) ---------- */
.about_header {
    color: var(--w70);
}
.about_header h1 {
    color: #fff;
}
.about_page_steps article {
    color: var(--w70);
}
.about_page_steps article h3 {
    color: #fff;
}

/* ---------- termos ---------- */
.terms_page_header {
    background: var(--gradient-banner);
    color: #fff;
    border-bottom: 1px solid var(--w05);
}
.terms_page_header p {
    color: var(--w70);
}

/* ---------- estados vazios / paginação ---------- */
.empty_content {
    color: var(--w70);
}
.empty_content_title {
    color: #fff;
}
.paginator a,
.paginator span {
    border-color: var(--w10);
    color: var(--w70);
}
.paginator a:last-of-type {
    border-right-color: var(--w10);
}
.paginator span {
    background: var(--w10);
    color: #fff;
}
.paginator a:hover {
    color: #fff;
}

/* ---------- mensagens ---------- */
.message {
    border-color: var(--w10);
    background: var(--w05);
}

/* ---------- CTA opt-out (antes usava imagem clara) ---------- */
.footer_optout {
    background: var(--gradient-banner) !important;
    border-top: 1px solid var(--w05);
}
.footer_optout .icon,
.footer_optout h2 {
    color: #fff;
}
.footer_optout p {
    color: var(--w70);
}

/* ---------- rodapé ---------- */
.main_footer {
    background: var(--navy-900);
    border-top: 1px solid var(--w05);
}
.main_footer_content article {
    background: transparent;
    color: var(--w60);
}
.main_footer_content article h2 {
    color: #fff;
    border-bottom: 1px solid var(--w10);
}
.main_footer_content article a {
    color: var(--w70);
}
.main_footer_content article a:hover {
    color: var(--green-400);
}