/*
Theme Name: FolhaOpiniao Lite
Theme URI: https://example.com/folha-opiniao-lite
Author: Edson
Description: Um tema WordPress de alta performance, focado em acessibilidade e SEO, replicando a identidade visual do Opinioes Folha1.
Version: 1.0.0
Text Domain: folha-opiniao-lite
*/

/* ==========================================================================
   1. CSS Variables & Reset
   ========================================================================== */
:root {
    /* Colors */
    --color-primary: #1e73be;
    --color-text-main: #1c1c1b;
    --color-text-meta: #777777;
    --color-text-light: #ffffff;
    --color-bg-body: #ffffff;
    --color-bg-footer-dark: #222222;
    --color-bg-footer-black: #000000;
    --color-border-light: #dddddd;

    /* Typography */
    --font-heading: 'Roboto', sans-serif;
    --font-body: 'Lato', sans-serif;

    /* Layout */
    --container-width: 1200px;
    --header-height: auto;
    --sidebar-width: 300px;
    --gap: 30px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-main);
    background-color: var(--color-bg-body);
    line-height: 1.6;
    font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 0.5em;
    color: var(--color-text-main);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #124d85;
    /* Darker shade of primary */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   2. Layout Utilities
   ========================================================================== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 15px;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ==========================================================================
   3. Main Grid Layout (Desktop)
   ========================================================================== */
@media (min-width: 992px) {
    .site-content {
        display: grid;
        grid-template-columns: 1fr var(--sidebar-width);
        gap: var(--gap);
        margin-top: 40px;
        margin-bottom: 60px;
    }

    .site-main {
        /* Main content area */
        flex: 1;
        /* Ensure it takes available space if needed */
    }

    .site-sidebar {
        /* Sidebar styling */
        position: sticky;
        top: 20px;
        height: fit-content;
    }
}

/* ==========================================================================
   4. Header Styles
   ========================================================================== */
.top-bar {
    background-color: #666666;
    color: #dadada;
    font-size: 0.8rem;
    height: 18px;
    /* Strict height */
    min-height: 0;
    padding: 0;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Ensure content doesn't spill out */
}

.top-bar-inner {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Unified gap */
    height: 100%;
    /* Fill the 18px */
    width: 100%;
    /* Ensure it takes full width */
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Remove top-bar-right as it is no longer used */

.top-col {
    display: flex;
    align-items: center;
    height: 100%;
}

.date-display {
    font-size: 11px;
    font-weight: 400;
    /* Optional: standard weight */
}

.top-socials {
    margin-left: auto;
    /* Push to the right */
    gap: 5px;
}

.link-col a {
    color: #dadada !important;
    text-decoration: none;
    font-size: 11px;
    /* Smaller font to fit 18px */
    line-height: 18px;
    display: block;
}

.link-col a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Updated Top Socials */
.top-socials {
    gap: 5px;
}

.social-icon-top {
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    /* 1px padding handled by flex alignment in 18px container */
}

.social-icon-top::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    /* Smaller inner icon */
    height: 10px;
    background-size: contain;
    background-repeat: no-repeat;
}

.social-icon-top.facebook::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666666"><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.15 5.96C15.21 5.96 16.12 6.04 16.12 6.04V8.51H15.01C13.77 8.51 13.38 9.28 13.38 10.07V12.06H16.16L15.72 14.96H13.38V21.96C18.16 21.21 21.82 17.06 21.82 12.06C21.82 6.53 17.32 2.04 12 2.04Z"/></svg>');
}

.social-icon-top.twitter::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666666"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05a4.28 4.28 0 0 0-7.29 3.9 12.14 12.14 0 0 1-8.81-4.46 4.29 4.29 0 0 0 1.32 5.71c-.7-.02-1.36-.21-1.92-.53v.05c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.57 8.57 0 0 1-5.3 1.83c-.34 0-.68-.02-1.02-.06a12.14 12.14 0 0 0 6.57 1.93c7.88 0 12.2-6.53 12.2-12.2 0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg>');
}

.social-icon-top.instagram::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666666"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/></svg>');
}

.social-icon-top:hover {
    opacity: 0.8;
}

/* ==========================================================================
   Folha 1 Brand Bar
   ========================================================================== */
.folha-brand-bar {
    background-color: #ffffff;
    border-bottom: 1px solid #dddddd;
    padding: 10px 0 2px 0;
    width: 100%;
    display: block;
    position: relative;
    z-index: 20;
    /* Ensure it stays on top */
}

.folha-brand-bar .container {
    display: flex;
    align-items: center;
    max-width: var(--container-width);
    /* Match global container width */
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.folha-logo a {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    color: #000000;
    display: inline-flex;
    align-items: center;
}

.folha-text {
    color: #333;
}

.folha-number {
    color: #ffffff;
    background-color: #f7941d;
    /* Orange distinct color */
    padding: 0 4px;
    margin-left: 2px;
    border-radius: 2px;
    /* Try to match the visual of the logo if text-based */
    background: linear-gradient(to bottom, #f7941d 0%, #f7941d 80%, #ffffff 80%, #ffffff 100%);
    /* The logo seems to have a folded paper effect, keeping it simple for CSS only or just orange */
    background-color: #f7941d;
}

/* If user replaces with image later */
.folha-logo img {
    max-height: 30px;
    width: auto;
}

/* ==========================================================================
   Refactored Header Grid Styles
   ========================================================================== */
.header-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* Align all items to the bottom */

    /* Blue separator line */
    padding-bottom: 0;
    /* Align directly to border */
    position: relative;
    width: 100%;
    margin-top: 0;
    clear: both;
    /* Ensure it clears the brand bar */
    padding: 20px 15px 0 15px;
    /* Remove bottom padding */
    gap: 15px;
}

.header-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 1. Editorial Title */
/* 1. Editorial Title */
.editorial-col h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 55px;
    line-height: 55px;
    color: rgb(80, 81, 83);
    margin: 0;
    /* text-transform removed for Mixed Case */
    letter-spacing: -2px;
}

/* Align columns vertically centered relative to the avatar */
.editorial-col,
.author-text-col,
.network-col {
    align-self: center;
}

/* 2. Avatar */
.avatar-col {
    align-items: center;
    margin-bottom: 0;
    z-index: 10;
    line-height: 0;
    align-self: flex-end;
    /* Ensure avatar sits at the bottom */
}

.profile-avatar {
    /* Dimensions and Border Radius handled by Customizer/Inline CSS */
    object-fit: cover;
    display: block;
    border: none;
}

/* 3. Author Name */
.author-text-col {
    text-align: left;
    margin-left: 10px;
}

.author-by {
    font-size: 0.9rem;
    font-style: italic;
    color: #999;
    display: block;
}

.author-name {
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    color: #aeaeae;
    /* Light grey as per mockup */
    display: block;
}

/* 4. Network & Socials */
.network-col {
    align-items: flex-end;
    /* Align to right on desktop */
    gap: 5px;
    margin-left: auto;
    /* Push to right */
}

.network-logo img {
    height: 30px;
    /* Adjust height */
    width: auto;
    display: block;
    margin-bottom: 5px;
}

.header-socials {
    display: flex;
    gap: 8px;
}

.social-icon-header {
    width: 24px;
    height: 24px;
    background-color: #cccccc;
    /* Placeholder grey styling */
    border-radius: 50%;
    display: inline-block;
    position: relative;
    transition: opacity 0.2s;
}

.social-icon-header:hover {
    opacity: 0.8;
}

/* Desktop specific adjustments */
@media (min-width: 992px) {
    .header-grid {
        flex-wrap: nowrap;
    }

    .editorial-col {
        margin-right: auto;
        /* Push middle elements to center/right */
    }
}

/* Mobile specific */
@media (max-width: 768px) {
    .header-grid {
        flex-direction: column;
        text-align: center;
    }

    .header-col {
        align-items: center;
        width: 100%;
        margin-bottom: 15px;
    }

    .author-text-col {
        text-align: center;
        margin-left: 0;
    }

    .network-col {
        align-items: center;
        margin-left: 0;
    }
}

/* Navigation Menu Styles */
.main-navigation {
    width: 100%;
    background-color: #ffffff;
    /* Border removed */
}

.header-separator {
    display: block;
    height: 6px;
    background-color: #0084ba;
    width: 100%;
    margin-top: 0;
}

/* Default Mobile Styles */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    /* Hidden on mobile until toggled */
}

.main-navigation.toggled ul {
    display: block;
}

.main-navigation li {
    border-top: 1px solid var(--color-border-light);
}

.main-navigation a {
    display: block;
    padding: 15px;
    /* Large touch target */
    color: var(--color-text-main);
    text-decoration: none;
    font-weight: 700;
}

.menu-toggle {
    display: block;
    /* Visible on mobile */
    background-color: transparent;
    border: none;
    padding: 15px;
    width: 100%;
    text-align: left;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-text-main);
}

@media (min-width: 768px) {
    .menu-toggle {
        display: none;
        /* Hide toggle on desktop */
    }

    .main-navigation {
        display: flex;
        justify-content: center;
        border-bottom: none;
        /* Remove border if prefer cleaner look, or keep */
    }

    .main-navigation ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .main-navigation li {
        border-top: none;
    }

    .main-navigation a {
        padding: 10px 15px;
        color: var(--color-text-main);
    }

    .main-navigation a:hover {
        color: var(--color-primary);
        text-decoration: none;
    }


}

/* ==========================================================================
   5. Sidebar / Widget Styles
   ========================================================================== */

/* Widget wrapper */
.site-sidebar .widget {
    background-color: #ffffff;
    margin-bottom: 28px;
}

/* Widget title - faixa azul na parte inferior */
.site-sidebar .widget-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: #1c1c1b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 3px solid var(--color-primary);
}

/* Lista de posts recentes (Recent Posts widget) */
.site-sidebar .widget_recent_entries ul,
.site-sidebar .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Cada item da lista */
.site-sidebar .widget_recent_entries ul li,
.site-sidebar .widget ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #eeeeee;
}

.site-sidebar .widget_recent_entries ul li:last-child,
.site-sidebar .widget ul li:last-child {
    border-bottom: none;
}

/* Thumbnail do post na sidebar */
.site-sidebar .widget ul li img,
.sidebar-post-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

/* Título do post na lista */
.site-sidebar .widget_recent_entries ul li a,
.site-sidebar .widget ul li a {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1b;
    line-height: 1.4;
    text-decoration: none;
    display: block;
}

.site-sidebar .widget_recent_entries ul li a:hover,
.site-sidebar .widget ul li a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* Data do post (oculta por padrão, igual à imagem) */
.site-sidebar .widget_recent_entries ul li .post-date {
    display: none;
}

/* Wrapper de texto do widget personalizado Folha */
.site-sidebar .widget ul li .sidebar-post-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Data opcional do widget personalizado */
.site-sidebar .widget ul li .sidebar-post-date {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-meta);
    margin-top: 4px;
    display: block;
}


/* Links gerais dentro de widgets */
.site-sidebar .widget a {
    color: #1c1c1b;
    text-decoration: none;
}

.site-sidebar .widget a:hover {
    color: var(--color-primary);
}

/* Sidebar oculta em mobile, exibida em desktop */
@media (max-width: 991px) {
    .site-sidebar {
        display: none;
    }
}


/* ==========================================================================
   6. Footer Styles
   ========================================================================== */

.site-footer {
    margin-top: auto;
}

/* ── Seção 1: Links de navegação ── */
.footer-links {
    background-color: #ffffff;
    border-top: 1px solid var(--color-border-light);
    padding: 32px 0;
}

.footer-links__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.footer-links__title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: #1c1c1b;
    margin-bottom: 14px;
}

.footer-links__menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links__menu li {
    margin-bottom: 6px;
}

.footer-links__menu a {
    color: #878786;
    font-size: 0.875rem;
    text-decoration: none;
    line-height: 1.5;
    transition: color 0.2s;
}

.footer-links__menu a:hover {
    color: #878786;
    text-decoration: none;
}

/* ── Seção 2: Barra da marca ── */
.footer-brand-bar {
    background-color: #1a1a1a;
    padding: 18px 0;
}

/* Flex com 3 zonas: espaçador | logo (centro real) | sociais (direita) */
.footer-brand-bar__inner {
    display: flex;
    align-items: center;
    position: relative;
}

/* Coluna esquerda invisível (balanceia o espaço dos ícones) */
.footer-brand-bar__spacer {
    flex: 1;
}

/* Logo sempre no centro absoluto */
.footer-brand-bar__logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-brand-bar__logo-img {
    max-height: 40px;
    width: auto;
}

.footer-brand-bar__logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.footer-brand-bar__social {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: 10px;
}

.footer-brand-bar__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.footer-brand-bar__social-link:hover {
    background-color: rgba(255, 255, 255, 0.30);
    color: #ffffff;
}

/* ── Seção 3: Logos de parceiros ── */
.footer-partners {
    background-color: #2d2d2d;
    padding: 18px 0;
}

.footer-partners__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
}

.footer-partners__item {
    display: flex;
    align-items: center;
}

.footer-partners__logo {
    max-height: 50px;
    width: auto;
    display: block;
    filter: brightness(1);
    transition: filter 0.2s ease;
}

.footer-partners__item a:hover .footer-partners__logo {
    filter: brightness(1.15);
}

/* ── Barra de copyright ── */
.footer-copyright {
    background-color: #111111;
    padding: 12px 0;
    text-align: center;
}

.footer-copyright__text {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #999999;
    margin: 0;
}

/* ── Responsividade do rodapé ── */
@media (max-width: 992px) {
    .footer-links__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .footer-links__inner {
        grid-template-columns: 1fr;
    }

    .footer-brand-bar__inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-partners__inner {
        gap: 16px;
    }

    .footer-partners__logo {
        max-height: 36px;
    }
}

/* ==========================================================================
   Article Typography
   ========================================================================== */
.entry-title {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    /* Bold */
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -1px;
    color: rgb(28, 28, 37);
    margin-bottom: 10px;
}

h1.entry-title {
    font-weight: 400;
    /* Regular (User requested 'Lato Bold 400', interpreting as weight 400) */
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -2px;
    color: rgb(28, 28, 27);
}

.entry-title a {
    color: inherit;
    /* Inherit from parent (h1 or h2) */
    text-decoration: none;
}

.entry-title a:hover {
    color: var(--color-primary);
}

/* Specific override for H1 links to stay dark on hover */
h1.entry-title a,
h1.entry-title a:hover {
    color: rgb(28, 28, 27);
}

/* Article Spacing */
article {
    margin-bottom: 48px;
}

/* ==========================================================================
   8. Single Post Styles
   ========================================================================== */

/* ── Article wrapper ── */
.single-article {
    margin-bottom: 0;
}

/* ── Post Header ── */
.single-post-header {
    margin-bottom: 28px;
}

/* ── Category Badge ── */
.single-category-badge {
    margin-bottom: 14px;
}

.category-badge {
    display: inline-block;
    background-color: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.category-badge:hover {
    background-color: #124d85;
    color: #ffffff;
}

/* ── Single Title ── */
.single-entry-title {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -2px;
    color: rgb(28, 28, 27);
    margin-bottom: 16px;
}

/* ── Meta Bar ── */
.single-entry-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-meta);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border-light);
}

.single-entry-meta .meta-date,
.single-entry-meta .meta-author,
.single-entry-meta .meta-reading-time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.meta-icon {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    flex-shrink: 0;
}

.single-entry-meta a {
    color: var(--color-text-meta);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.single-entry-meta a:hover {
    color: var(--color-primary);
}

.meta-separator {
    color: var(--color-border-light);
    font-weight: 700;
}

/* ── Featured Image ── */
.single-featured-image {
    margin-bottom: 32px;
    border-radius: 2px;
    overflow: hidden;
    background-color: #f5f5f5;
}

.single-featured-image .featured-img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.featured-img-caption {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-meta);
    padding: 8px 10px;
    background-color: #f9f9f9;
    border-top: 1px solid var(--color-border-light);
    font-style: italic;
    text-align: center;
}

/* ── Entry Content (Post Body) ── */
.single-entry-content {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.8;
    color: #333333;
}

.single-entry-content p {
    margin-bottom: 1.4em;
}

.single-entry-content h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-top: 2em;
    margin-bottom: 0.6em;
    line-height: 1.3;
}

.single-entry-content h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-top: 1.8em;
    margin-bottom: 0.5em;
}

.single-entry-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.single-entry-content a:hover {
    color: #124d85;
}

.single-entry-content blockquote {
    border-left: 4px solid var(--color-primary);
    margin: 1.5em 0;
    padding: 12px 20px;
    background-color: #f7faff;
    color: #555555;
    font-style: italic;
    border-radius: 0 2px 2px 0;
}

.single-entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.single-entry-content ul,
.single-entry-content ol {
    margin: 0 0 1.4em 1.6em;
}

.single-entry-content li {
    margin-bottom: 0.4em;
}

.single-entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 2px;
    margin: 1em 0;
}

/* ── Post Footer (tags & categories) ── */
.single-entry-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Tags */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.tags-label,
.cats-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-meta);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-tag {
    display: inline-block;
    padding: 4px 10px;
    background-color: #f0f4f8;
    border: 1px solid var(--color-border-light);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: #555555;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.post-tag:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

/* Categories in footer */
.post-categories-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 13px;
}

.post-categories-footer a {
    color: var(--color-primary);
    text-decoration: none;
}

.post-categories-footer a:hover {
    text-decoration: underline;
}

/* ── Post Navigation (prev/next) ── */
.single-post-navigation {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 3px solid #0084ba;
}

.single-post-navigation .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.single-post-navigation .nav-previous {
    grid-column: 1;
}

.single-post-navigation .nav-next {
    grid-column: 2;
    text-align: right;
}

.single-post-navigation .nav-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    padding: 16px;
    border: 1px solid var(--color-border-light);
    border-radius: 3px;
    transition: border-color 0.2s, background-color 0.2s;
    height: 100%;
}

.single-post-navigation .nav-link:hover {
    border-color: var(--color-primary);
    background-color: #f7faff;
}

.single-post-navigation .nav-next .nav-link {
    align-items: flex-end;
}

.nav-direction {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-primary);
}

.nav-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.4;
}

/* ── Responsividade ── */
@media (max-width: 768px) {
    .single-entry-title {
        font-size: 26px;
        line-height: 34px;
        letter-spacing: -1px;
    }

    .single-entry-meta {
        font-size: 12px;
    }

    .single-entry-content {
        font-size: 16px;
    }

    .single-post-navigation .nav-links {
        grid-template-columns: 1fr;
    }

    .single-post-navigation .nav-next {
        grid-column: 1;
        text-align: left;
    }

    .single-post-navigation .nav-next .nav-link {
        align-items: flex-start;
    }
}