/*
 Theme Name:   GeneratePress Shield
 Description:  Child theme do GeneratePress. Mobile-first, header/footer customizáveis.
 Template:     generatepress
 Version:      2.0.0
 Text Domain:  generatepress-shield
*/

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
    /* Cores padrão — substituídas pelo Customizer via inline CSS */
    --shield-header-bg:    #000000;
    --shield-header-text:  #ffffff;
    --shield-burger-color: #ffffff;
    --shield-submenu-bg:   #111111;
    --shield-submenu-text: #cccccc;
    --shield-footer-bg:    #000000;
    --shield-footer-text:  #ffffff;

    /* Paleta de conteúdo */
    --shield-accent:      #4361ee;
    --shield-accent-h:    #2f4bd1;
    --shield-text-1:      #111118;
    --shield-text-2:      #52525e;
    --shield-text-3:      #9ca3af;
    --shield-bg-1:        #ffffff;
    --shield-bg-2:        #f5f5f7;
    --shield-border:      #e5e7eb;

    /* Espaços */
    --sp-xs:  0.25rem;
    --sp-sm:  0.5rem;
    --sp-md:  1rem;
    --sp-lg:  1.5rem;
    --sp-xl:  2rem;
    --sp-2xl: 3rem;

    /* Tipografia */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;

    /* Misc */
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 8px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html { overflow-x: hidden; }

body {
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--shield-text-1);
    background: var(--shield-bg-1);
    -webkit-font-smoothing: antialiased;
}

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

/* Padding horizontal global — garante que nada grude nas bordas no mobile */
.grid-container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.inside-article {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .grid-container,
    .inside-article {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ==========================================================================
   HEADER
   =========================================================================
   Estrutura com nav-float-right (forçado via PHP):
   .site-header
     .inside-header                     ← flex row
       .site-logo | .site-branding      ← logo/nome à esquerda
       .mobile-menu-control-wrapper     ← toggle mobile (antes da nav)
       .main-navigation.nav-float-right ← nav à direita
         .inside-navigation
           button.menu-toggle           ← toggle interno (escondido)
           .main-nav > ul               ← links do menu
   ========================================================================== */

:root { --hdr-h: 75px; }

/* --------------------------------------------------------------------------
   Shell do header
   -------------------------------------------------------------------------- */
.site-header {
    background: var(--shield-header-bg) !important;
    position: relative;
    overflow: visible;
    height: var(--hdr-h);
}

.site-header.is-scrolled {
    box-shadow: 0 1px 16px rgba(0,0,0,.3);
}

.inside-header {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    height: 100%;
    padding: 0 2.5rem;
    overflow: visible;
    gap: 0;
}

@media (max-width: 767px) {
    .inside-header { padding: 0 1rem; }
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.site-logo,
.site-branding-container {
    flex-shrink: 0;
    line-height: 0;
}

.site-logo a,
.site-branding-container a {
    display: flex;
    align-items: center;
    height: var(--hdr-h);
}

.site-logo img,
.site-branding-container img,
.header-image {
    display: block !important;
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain;
}

.site-branding {
    flex-shrink: 0;
    margin: 0;
}

.site-branding .main-title,
.site-branding .site-title {
    margin: 0;
    line-height: 1;
}

.site-branding .main-title a,
.site-branding .site-title a {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--shield-header-text) !important;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s;
}

.site-branding .main-title a:hover { opacity: .75; }

/* --------------------------------------------------------------------------
   Navegação (float-right — dentro do header)
   -------------------------------------------------------------------------- */
.main-navigation {
    background: transparent !important;
    margin-left: auto;
}

.main-navigation .inside-navigation {
    background: transparent !important;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Links desktop */
.main-navigation .main-nav {
    display: block;
}

.main-navigation .main-nav > ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.main-navigation .main-nav ul li a {
    display: flex;
    align-items: center;
    height: var(--hdr-h);
    padding: 0 .8rem;
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    white-space: nowrap;
    min-height: unset;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus {
    color: #fff;
}

.main-navigation .main-nav ul li.current-menu-item > a {
    color: #fff;
    font-weight: 600;
    border-bottom-color: #fff;
}

/* --------------------------------------------------------------------------
   Botão hamburguer
   O .mobile-menu-control-wrapper fica entre o logo e a nav no DOM.
   No desktop: escondido. No mobile: visível.
   O GP renderiza um SVG dentro do botão — basta colorir e dimensionar.
   -------------------------------------------------------------------------- */
.mobile-menu-control-wrapper { display: none; }

.mobile-menu-control-wrapper .menu-toggle,
.main-navigation .menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--shield-header-text);
}

/* Esconde o texto "Menu" — mantém só o SVG */
.mobile-menu-control-wrapper .menu-toggle .mobile-menu,
.mobile-menu-control-wrapper .menu-toggle .screen-reader-text,
.main-navigation .menu-toggle .mobile-menu,
.main-navigation .menu-toggle .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

/* SVG do ícone hamburguer */
.mobile-menu-control-wrapper .menu-toggle svg,
.main-navigation .menu-toggle svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: var(--shield-header-text);
    stroke: var(--shield-header-text);
    color: var(--shield-header-text);
}

/* --------------------------------------------------------------------------
   Mobile (< 768px) — burger e drawer 100% próprios (injetados via JS)
   -------------------------------------------------------------------------- */

/* Burger button */
.shield-burger {
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--shield-burger-color);
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: background .15s;
}

.shield-burger:hover { background: rgba(128,128,128,.2); }

.shield-burger svg {
    display: block;
    stroke: var(--shield-burger-color);
    transition: transform .2s;
}

/* X quando aberto */
.shield-burger.is-active svg { transform: rotate(90deg); }

/* Drawer */
.shield-drawer {
    display: none;
    position: fixed;
    top: calc(var(--hdr-h) + 30px);
    left: 1rem;
    right: 1rem;
    background: var(--shield-submenu-bg);
    border: 1px solid rgba(128,128,128,.2);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
    z-index: 9998;
    padding: 4px;
    max-height: calc(100vh - var(--hdr-h) - 1rem);
    overflow-y: auto;
}

.shield-drawer.is-open { display: block; }

.shield-drawer .main-nav > ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.shield-drawer .main-nav ul li a {
    display: block;
    padding: .6rem .875rem;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--shield-submenu-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(128,128,128,.15);
    border-left: none !important;
    min-height: unset;
    height: auto;
    white-space: normal;
    transition: background .15s, color .15s;
}

.shield-drawer .main-nav ul li:last-child a { border-bottom: none; }

.shield-drawer .main-nav ul li a:hover {
    background: rgba(128,128,128,.15);
    color: #fff;
}

@media (max-width: 767px) {
    .shield-burger { display: flex; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    background: var(--shield-footer-bg);
    color: var(--shield-footer-text);
    padding: var(--sp-xl) 0;
    margin-top: var(--sp-2xl);
}

.site-footer a {
    color: rgba(255,255,255,.6);
    text-decoration: none;
    transition: color .2s;
}

.site-footer a:hover {
    color: #fff;
}

.site-footer .copyright {
    font-size: var(--text-sm);
    color: rgba(255,255,255,.45);
    text-align: center;
}

/* Menu do rodapé */
.shield-footer-nav {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-lg);
}

.shield-footer-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-xs) var(--sp-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.shield-footer-nav__list li a {
    font-size: var(--text-sm);
    color: rgba(255,255,255,.55);
    text-decoration: none;
    transition: color .2s;
}

.shield-footer-nav__list li a:hover {
    color: #fff;
}

/* ==========================================================================
   BARRA DE PROGRESSO (single)
   ========================================================================== */
#shield-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--shield-accent);
    z-index: 9999;
    transition: width .1s linear;
    pointer-events: none;
}

/* ==========================================================================
   HOME — Hero + Grid
   ========================================================================== */
.shield-home {
    padding: var(--sp-xl) 0 var(--sp-2xl);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.shield-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
    margin-bottom: var(--sp-2xl);
    padding-bottom: var(--sp-2xl);
    border-bottom: 1px solid var(--shield-border);
}

.shield-hero__media {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--shield-bg-2);
}

.shield-hero__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: transform .5s ease;
}

.shield-hero__media:hover img {
    transform: scale(1.03);
}

.shield-hero__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    justify-content: center;
}

.shield-cat {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 3px 11px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--shield-accent) 10%, transparent);
    color: var(--shield-accent);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, color .2s;
    margin: 10px;
}

.shield-cat:hover {
    background: var(--shield-accent);
    color: #fff;
}

.shield-hero__title {
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em;
    margin: 0;
    color: var(--shield-text-1);
}

.shield-hero__title a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

.shield-hero__title a:hover {
    color: var(--shield-accent);
}

.shield-hero__excerpt {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--shield-text-2);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shield-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: .55rem 1.2rem;
    background: var(--shield-accent);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background .2s, transform .15s;
}

.shield-btn:hover {
    background: var(--shield-accent-h);
    transform: translateY(-1px);
    color: #fff;
}

.shield-btn svg {
    transition: transform .2s;
    flex-shrink: 0;
}

.shield-btn:hover svg { transform: translateX(3px); }

.shield-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-xs) var(--sp-sm);
    font-size: var(--text-sm);
    color: var(--shield-text-3);
    padding-top: var(--sp-sm);
    border-top: 1px solid var(--shield-border);
}

.shield-hero__meta a {
    color: var(--shield-text-2);
    text-decoration: none;
    font-weight: 500;
    transition: color .2s;
}

.shield-hero__meta a:hover { color: var(--shield-accent); }

/* Tablet */
@media (min-width: 768px) {
    .shield-hero {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--sp-2xl);
    }
    .shield-hero__title { font-size: var(--text-3xl); }
    .shield-hero__excerpt { font-size: var(--text-lg); -webkit-line-clamp: 4; }
}

/* Desktop */
@media (min-width: 1024px) {
    .shield-hero { grid-template-columns: 58fr 42fr; }
    .shield-hero__title { font-size: 2.4rem; }
}

/* --------------------------------------------------------------------------
   Separador de seção
   -------------------------------------------------------------------------- */
.shield-section {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    margin-bottom: var(--sp-xl);
}

.shield-section__label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--shield-text-3);
    white-space: nowrap;
    margin: 0;
}

.shield-section__line {
    flex: 1;
    height: 1px;
    background: var(--shield-border);
}

/* --------------------------------------------------------------------------
   Grid de cards
   -------------------------------------------------------------------------- */
.shield-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
}

@media (min-width: 480px) {
    .shield-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }
}

@media (min-width: 768px) {
    .shield-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .shield-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Card */
.shield-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    border: 1px solid var(--shield-border);
    overflow: hidden;
    background: var(--shield-bg-1);
    transition: transform .25s ease, box-shadow .25s ease;
}

.shield-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.shield-card__media {
    display: block;
    overflow: hidden;
    background: var(--shield-bg-2);
    position: relative;
}

.shield-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: transform .4s ease;
}

.shield-card__media:hover img { transform: scale(1.05); }

.shield-card__media .shield-cat {
    position: absolute;
    top: var(--sp-sm);
    left: var(--sp-sm);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(4px);
}

.shield-card__no-img {
    aspect-ratio: 16/9;
    background: var(--shield-bg-2);
}

.shield-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    padding: var(--sp-md);
    flex: 1;
}

.shield-card__title {
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--shield-text-1);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shield-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

.shield-card__title a:hover { color: var(--shield-accent); }

.shield-card__excerpt {
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--shield-text-3);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shield-card__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    color: var(--shield-text-3);
    margin-top: auto;
    padding-top: var(--sp-sm);
    border-top: 1px solid var(--shield-border);
}

/* ==========================================================================
   SINGLE POST
   ========================================================================== */
.single .inside-article {
    padding-top: var(--sp-xl);
    padding-bottom: var(--sp-2xl);
}

/* Header do post */
.single .entry-header {
    margin-bottom: var(--sp-xl);
    padding-bottom: var(--sp-lg);
    border-bottom: 1px solid var(--shield-border);
}

.single .entry-header::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--shield-accent);
    margin-bottom: var(--sp-md);
}

.single .entry-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--shield-text-1);
    margin-bottom: var(--sp-md);
    word-break: break-word;
}

.single .entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-xs) var(--sp-md);
    font-size: var(--text-sm);
    color: var(--shield-text-3);
}

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

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

/* Conteúdo */
.single .entry-content {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--shield-text-1);
}

.single .entry-content p { margin-bottom: var(--sp-lg); }

.single .entry-content h2 {
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-top: var(--sp-2xl);
    margin-bottom: var(--sp-md);
    padding-bottom: var(--sp-sm);
    border-bottom: 2px solid var(--shield-border);
}

.single .entry-content h3 {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
    margin-top: var(--sp-xl);
    margin-bottom: var(--sp-sm);
}

.single .entry-content a {
    color: var(--shield-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .2s;
}

.single .entry-content a:hover { color: var(--shield-accent-h); }

.single .entry-content ul,
.single .entry-content ol {
    padding-left: var(--sp-lg);
    margin-bottom: var(--sp-lg);
}

.single .entry-content li { margin-bottom: var(--sp-sm); }

.single .entry-content blockquote {
    margin: var(--sp-xl) 0;
    padding: var(--sp-lg);
    padding-left: calc(var(--sp-lg) + 4px);
    border-left: 4px solid var(--shield-accent);
    background: color-mix(in srgb, var(--shield-accent) 5%, var(--shield-bg-2));
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.single .entry-content blockquote p {
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--shield-text-2);
    margin: 0;
}

.single .entry-content img {
    border-radius: var(--radius-md);
    max-width: 100%;
    height: auto;
}

.single .entry-content figure { margin: var(--sp-xl) 0; }

.single .entry-content figcaption {
    font-size: var(--text-xs);
    color: var(--shield-text-3);
    text-align: center;
    margin-top: var(--sp-xs);
    font-style: italic;
}

.single .entry-content pre {
    background: #0f0f14;
    color: #c9d1e8;
    padding: var(--sp-lg);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-size: var(--text-sm);
    line-height: 1.65;
    margin: var(--sp-xl) 0;
}

.single .entry-content code {
    font-size: var(--text-sm);
    background: color-mix(in srgb, var(--shield-accent) 8%, var(--shield-bg-2));
    color: var(--shield-accent);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.single .entry-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* Feature image no final */
.single .featured-image.page-header-image-single { display: none !important; }

.shield-featured-bottom {
    margin-top: var(--sp-xl);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.shield-featured-bottom img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Footer meta */
.single footer.entry-meta {
    margin-top: var(--sp-xl);
    padding-top: var(--sp-lg);
    border-top: 1px solid var(--shield-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    font-size: var(--text-sm);
}

.single .cat-links a,
.single .tags-links a {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    background: var(--shield-bg-2);
    border-radius: 20px;
    font-size: var(--text-xs);
    color: var(--shield-text-2);
    text-decoration: none;
    transition: background .2s, color .2s;
    min-height: 32px;
}

.single .cat-links a:hover,
.single .tags-links a:hover {
    background: var(--shield-accent);
    color: #fff;
}

/* Navegação entre posts */
.single .post-navigation {
    margin-top: var(--sp-xl);
    padding-top: var(--sp-lg);
    border-top: 1px solid var(--shield-border);
}

.single .nav-previous a,
.single .nav-next a {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-md);
    background: var(--shield-bg-2);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--shield-text-1);
    font-size: var(--text-sm);
    transition: box-shadow .2s;
}

.single .nav-previous a:hover,
.single .nav-next a:hover {
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   BREAKPOINTS — Single
   ========================================================================== */
@media (min-width: 768px) {
    .single .entry-title { font-size: var(--text-3xl); }
    .single .entry-content { font-size: var(--text-lg); }
    .single .entry-content h2 { font-size: var(--text-2xl); }
    .single .post-navigation { display: flex; gap: var(--sp-md); }
    .single .nav-previous,
    .single .nav-next { flex: 1; }
}

@media (min-width: 1024px) {
    .single .entry-title { font-size: 2.5rem; }

    .single .entry-header,
    .single .entry-content,
    .single footer.entry-meta,
    .single .post-navigation {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .shield-featured-bottom {
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   UTILITÁRIOS
   ========================================================================== */
*:focus-visible {
    outline: 2px solid var(--shield-accent);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

@media (max-width: 768px) {
    .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header {
        padding: 10px!important;
    }
}

.site-footer .site-info {
    background-color: #000000;
}

/* ==========================================================================
   ARCHIVE & SEARCH
   ========================================================================== */
.shield-archive {
    padding: var(--sp-xl) 0 var(--sp-2xl);
}

.shield-archive__header {
    margin-bottom: var(--sp-2xl);
    padding-bottom: var(--sp-lg);
    border-bottom: 1px solid var(--shield-border);
}

.shield-archive__header::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--shield-accent);
    margin-bottom: var(--sp-md);
}

.shield-archive__title {
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--shield-text-1);
    margin: 0 0 var(--sp-sm);
}

.shield-archive__title em {
    font-style: normal;
    color: var(--shield-accent);
}

.shield-archive__desc {
    font-size: var(--text-base);
    color: var(--shield-text-2);
    margin: var(--sp-sm) 0 0;
    line-height: 1.6;
}

.shield-archive__count {
    display: inline-block;
    margin-top: var(--sp-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--shield-text-3);
}

/* Paginação */
.shield-pagination {
    margin-top: var(--sp-2xl);
    display: flex;
    justify-content: center;
}

.shield-pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.shield-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--shield-text-2);
    text-decoration: none;
    border: 1px solid var(--shield-border);
    transition: background .15s, color .15s, border-color .15s;
}

.shield-pagination .page-numbers:hover {
    background: var(--shield-accent);
    color: #fff;
    border-color: var(--shield-accent);
}

.shield-pagination .page-numbers.current {
    background: var(--shield-accent);
    color: #fff;
    border-color: var(--shield-accent);
}

.shield-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

/* Sem resultados (search) */
.shield-empty {
    text-align: center;
    padding: var(--sp-2xl) 0;
}

.shield-empty__msg {
    font-size: var(--text-lg);
    color: var(--shield-text-2);
    margin-bottom: var(--sp-xl);
}

/* ==========================================================================
   404
   ========================================================================== */
.shield-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-2xl) 1rem;
    max-width: 520px;
    margin: 0 auto;
}

.shield-404__code {
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--shield-border);
    display: block;
    margin-bottom: var(--sp-md);
}

.shield-404__title {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--shield-text-1);
    margin: 0 0 var(--sp-md);
}

.shield-404__desc {
    font-size: var(--text-base);
    color: var(--shield-text-2);
    margin: 0 0 var(--sp-xl);
    line-height: 1.6;
}

.shield-404__actions {
    margin-bottom: var(--sp-xl);
}

.shield-404__search {
    width: 100%;
}

.shield-404__search p {
    font-size: var(--text-sm);
    color: var(--shield-text-3);
    margin-bottom: var(--sp-sm);
}

.shield-404__search .search-form {
    display: flex;
    gap: var(--sp-sm);
}

.shield-404__search .search-field {
    flex: 1;
    padding: .55rem .875rem;
    border: 1px solid var(--shield-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--shield-text-1);
    background: var(--shield-bg-1);
    outline: none;
    transition: border-color .15s;
}

.shield-404__search .search-field:focus {
    border-color: var(--shield-accent);
}

.shield-404__search .search-submit {
    padding: .55rem 1.1rem;
    background: var(--shield-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.shield-404__search .search-submit:hover {
    background: var(--shield-accent-h);
}