/* ==========================================================================
   NGC DESIGN BOOST — NewGearCars v2.0.0
   Adaptado al tema NewGearCars (single-content, single-title, site-header)
   
   1. Espaciado entre bloques
   2. Badges de categoría + EN DIRECTO
   3. Imágenes editoriales (bordes + pie de foto)
   4. Tipografía Barlow Condensed (H1-H6)
   5. Dark mode con toggle persistente
   6. Smart UX (navbar inteligente, progreso, tiempo de lectura)
   ========================================================================== */

/* --------------------------------------------------------------------------
   VARIABLES POR DEFECTO (se sobreescriben desde el plugin)
   -------------------------------------------------------------------------- */
:root {
    --ngc-block-spacing: 40px;
    --ngc-badge-bg: #E10600;
    --ngc-badge-text: #FFFFFF;
    --ngc-img-radius: 8px;
    --ngc-caption-color: #8A8A8A;
    --ngc-caption-font: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
}


/* ==========================================================================
   1. ESPACIADO ENTRE BLOQUES — Respiración y jerarquía
   ========================================================================== */

/* Bloques de Gutenberg dentro del contenido */
.entry-content > *,
.post-content > *,
.single-content > * {
    margin-bottom: var(--ngc-block-spacing);
}

/* Headings: más espacio arriba, menos abajo */
.entry-content h2, .single-content h2,
.entry-content h3, .single-content h3,
.entry-content h4, .single-content h4 {
    margin-top: calc(var(--ngc-block-spacing) * 1.4);
    margin-bottom: calc(var(--ngc-block-spacing) * 0.4);
}

/* Primer heading: sin exceso de margen superior */
.entry-content > h2:first-child,
.entry-content > h3:first-child,
.single-content > h2:first-child,
.single-content > h3:first-child {
    margin-top: 0;
}

/* Párrafos consecutivos: más juntos */
.entry-content p + p,
.single-content p + p {
    margin-top: 0;
    margin-bottom: calc(var(--ngc-block-spacing) * 0.5);
}

/* Tablas y figuras: más respiro */
.entry-content .wp-block-table, .single-content .wp-block-table,
.entry-content figure, .single-content figure,
.entry-content .wp-block-image, .single-content .wp-block-image {
    margin-top: var(--ngc-block-spacing);
    margin-bottom: var(--ngc-block-spacing);
}

/* Separación extra entre bloques distintos */
.entry-content p + .wp-block-table, .single-content p + .wp-block-table,
.entry-content p + .wp-block-image, .single-content p + .wp-block-image,
.entry-content p + figure, .single-content p + figure {
    margin-top: calc(var(--ngc-block-spacing) * 1.1);
}

/* Mobile */
@media screen and (max-width: 480px) {
    :root {
        --ngc-block-spacing: 32px;
    }
}


/* ==========================================================================
   2. BADGES DE CATEGORÍA
   ========================================================================== */

/* Badge genérico para categorías */
.entry-meta .cat-links a,
.post-meta .cat-links a,
.entry-categories a,
span.cat-links a,
.entry-header .cat-links a,
a[rel="category tag"],
a[rel="category"],
.post-category-badge,
.category-badge {
    display: inline-block;
    background: var(--ngc-badge-bg);
    color: var(--ngc-badge-text) !important;
    font-family: var(--ngc-caption-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none !important;
    line-height: 1.3;
    transition: all 0.2s ease;
    margin-right: 6px;
    margin-bottom: 8px;
}

/* Hover */
.entry-meta .cat-links a:hover,
span.cat-links a:hover,
a[rel="category tag"]:hover,
a[rel="category"]:hover {
    background: #C00500;
    color: var(--ngc-badge-text) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(225, 6, 0, 0.25);
}

/* Contenedor de categorías */
.cat-links,
.entry-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

/* Ocultar prefijo "Categorías:" */
.cat-links > .screen-reader-text,
.entry-categories > .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
}

/* Badges más pequeños en listados */
.archive .cat-links a,
.blog .cat-links a,
.home .cat-links a {
    font-size: 10px;
    padding: 3px 8px;
}

/* Badge "EN DIRECTO" */
.ngc-live,
.ngc-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ngc-badge-bg);
    color: var(--ngc-badge-text) !important;
    font-family: var(--ngc-caption-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
    animation: ngc-pulse 2s ease-in-out infinite;
}

.ngc-live::before,
.ngc-badge-live::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--ngc-badge-text);
    border-radius: 50%;
    animation: ngc-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes ngc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

@keyframes ngc-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.75); }
}

/* Banner EN DIRECTO */
.ngc-live-banner {
    margin-bottom: 12px;
}


/* ==========================================================================
   3. IMÁGENES EDITORIALES
   ========================================================================== */

/* Todas las imágenes del contenido */
.entry-content img,
.single-content img,
article img {
    border-radius: var(--ngc-img-radius);
    transition: border-radius 0.3s ease;
}

/* Imágenes sueltas a 16:9 con recorte automático */
.entry-content .wp-block-image img,
.single-content .wp-block-image img,
.ngc-single-content .wp-block-image img {
    border-radius: var(--ngc-img-radius);
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

/* Imagen destacada del post también 16:9 */
.post-thumbnail img,
.wp-post-image,
.ngc-featured-image img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

/* EXCLUIR galerías del recorte 16:9 */
.wp-block-gallery .wp-block-image img,
.gallery-item img,
.wp-block-gallery img {
    aspect-ratio: unset !important;
    object-fit: unset !important;
    height: auto !important;
}

/* Figure containers */
.entry-content figure,
.single-content figure,
.wp-block-image {
    position: relative;
    overflow: hidden;
}

/* FIGCAPTION — Pie de foto editorial */
.entry-content figcaption,
.single-content figcaption,
.wp-block-image figcaption,
figure figcaption {
    font-family: var(--ngc-caption-font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ngc-caption-color);
    margin-top: 10px;
    padding: 0 4px;
    line-height: 1.4;
    text-align: left;
    letter-spacing: 0.01em;
    border-left: 3px solid var(--ngc-badge-bg);
    padding-left: 10px;
}

/* Galería — bordes suaves */
.wp-block-gallery .wp-block-image img,
.gallery-item img {
    border-radius: calc(var(--ngc-img-radius) * 0.75);
}

/* Mobile */
@media screen and (max-width: 480px) {
    .entry-content figcaption,
    .single-content figcaption,
    figure figcaption {
        font-size: 11.5px;
        margin-top: 8px;
        padding-left: 8px;
    }
}


/* ==========================================================================
   4. TIPOGRAFÍA — Barlow Condensed para subtítulos
   Selectores reforzados para sobreescribir el tema NewGearCars
   (que usa Playfair Display por defecto)
   ========================================================================== */

/* --------------------------------------------------------------------------
   TÍTULO PRINCIPAL — El H1 del artículo
   -------------------------------------------------------------------------- */
.entry-title,
.single-title,
h1.entry-title,
h1.single-title,
.single-article .single-title,
.single-header .single-title,
article .single-title,
article h1 {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    line-height: 1.08 !important;
    font-size: clamp(28px, 5vw, 42px) !important;
}

/* --------------------------------------------------------------------------
   H2 — Subtítulo de sección + línea roja inferior
   -------------------------------------------------------------------------- */
.entry-content h2,
.single-content h2 {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.12 !important;
    font-size: clamp(22px, 3.5vw, 30px) !important;
    color: #1A1A1A;
    border-bottom: 3px solid var(--ngc-badge-bg, #E10600);
    padding-bottom: 8px;
    display: inline-block;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   H3 — Barra roja lateral
   -------------------------------------------------------------------------- */
.entry-content h3,
.single-content h3 {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    font-size: clamp(18px, 2.8vw, 24px) !important;
    color: #1A1A1A;
    padding-left: 12px;
    border-left: 4px solid var(--ngc-badge-bg, #E10600);
}

/* --------------------------------------------------------------------------
   H4 — Uppercase, tipo etiqueta
   -------------------------------------------------------------------------- */
.entry-content h4,
.single-content h4 {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(14px, 2vw, 17px) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
    color: var(--ngc-badge-bg, #E10600);
}

/* --------------------------------------------------------------------------
   H5/H6
   -------------------------------------------------------------------------- */
.entry-content h5, .entry-content h6,
.single-content h5, .single-content h6 {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    color: #555;
    line-height: 1.3 !important;
}

/* --------------------------------------------------------------------------
   Títulos en HOME / ARCHIVO / LISTADOS
   (Tu tema usa .entry-title para las cards de archivo)
   -------------------------------------------------------------------------- */
.blog .entry-title,
.blog .entry-title a,
.archive .entry-title,
.archive .entry-title a,
.home .entry-title,
.home .entry-title a,
.search .entry-title,
.search .entry-title a,
.category .entry-title,
.category .entry-title a {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
    font-size: clamp(18px, 3vw, 24px) !important;
}

/* Hover en títulos de listado */
.blog .entry-title a:hover,
.archive .entry-title a:hover,
.home .entry-title a:hover {
    color: var(--ngc-badge-bg, #E10600) !important;
}

/* MOBILE */
@media screen and (max-width: 480px) {
    .entry-content h2, .single-content h2 {
        font-size: 22px !important;
        padding-bottom: 6px;
        border-bottom-width: 2px;
    }
    .entry-content h3, .single-content h3 {
        font-size: 18px !important;
        padding-left: 10px;
        border-left-width: 3px;
    }
    .entry-content h4, .single-content h4 {
        font-size: 14px !important;
    }
}


/* ==========================================================================
   5. DARK MODE
   ========================================================================== */

/* Botón toggle flotante */
#ngc-dark-toggle {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 9998;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #E0E0E0;
    background: #FFFFFF;
    color: #1A1A1A;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding: 0;
}

#ngc-dark-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.ngc-dark #ngc-dark-toggle {
    background: #2A2A2A;
    color: #F0F0F0;
    border-color: #444;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   DARK MODE: Transiciones suaves (solo después del primer paint)
   -------------------------------------------------------------------------- */
.ngc-transitions-ready body,
.ngc-transitions-ready .site-header,
.ngc-transitions-ready .site-main,
.ngc-transitions-ready main,
.ngc-transitions-ready article,
.ngc-transitions-ready .entry-content,
.ngc-transitions-ready .single-content,
.ngc-transitions-ready .single-article,
.ngc-transitions-ready footer,
.ngc-transitions-ready .site-footer,
.ngc-transitions-ready .widget,
.ngc-transitions-ready aside {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* --------------------------------------------------------------------------
   DARK MODE: Variables
   -------------------------------------------------------------------------- */
.ngc-dark {
    --ngc-dm-bg: #121212;
    --ngc-dm-surface: #1E1E1E;
    --ngc-dm-surface-2: #252525;
    --ngc-dm-text: #E8E8E8;
    --ngc-dm-text-secondary: #999;
    --ngc-dm-border: #333;
}

/* Body */
.ngc-dark body {
    background-color: var(--ngc-dm-bg) !important;
    color: var(--ngc-dm-text) !important;
}

/* Proteger admin bar de WP */
.ngc-dark #wpadminbar input,
.ngc-dark #wpadminbar select {
    background-color: initial !important;
    color: initial !important;
    border-color: initial !important;
}

/* --------------------------------------------------------------------------
   DARK: Header / Navbar
   -------------------------------------------------------------------------- */
.ngc-dark .site-header {
    background-color: var(--ngc-dm-surface) !important;
    border-color: var(--ngc-dm-border) !important;
}

/* LOGO — Invertir partes negras a blanco en dark mode */
.ngc-dark .site-logo img,
.ngc-dark .site-logo .custom-logo,
.ngc-dark .custom-logo-link img {
    filter: brightness(0) invert(1) !important;
}

/* Logo texto fallback: New[Gear]Cars */
.ngc-dark .site-logo span,
.ngc-dark .site-logo .logo-text {
    color: var(--ngc-dm-text) !important;
}
.ngc-dark .site-logo .accent {
    color: #E10600 !important;
}

/* Hamburger menu — líneas blancas en dark mode */
.ngc-dark .menu-toggle span {
    background-color: var(--ngc-dm-text) !important;
}

/* Hamburger abierto (X) — sin cuadrado rojo, X blanca */
.ngc-dark .menu-toggle[aria-expanded="true"],
.ngc-dark .menu-toggle.active,
.ngc-dark .menu-toggle.is-active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.ngc-dark .menu-toggle[aria-expanded="true"] span,
.ngc-dark .menu-toggle.active span,
.ngc-dark .menu-toggle.is-active span {
    background-color: var(--ngc-dm-text) !important;
}
.ngc-dark .main-nav a,
.ngc-dark .main-nav li a,
.ngc-dark .menu-item a {
    color: var(--ngc-dm-text) !important;
}

.ngc-dark .main-nav a:hover,
.ngc-dark .menu-item a:hover {
    color: #FF4136 !important;
}

.ngc-dark .main-nav a.current,
.ngc-dark .main-nav .current-menu-item > a {
    color: #FF4136 !important;
}

/* Hamburger menu */
.ngc-dark .menu-toggle span {
    background-color: var(--ngc-dm-text) !important;
}

/* --------------------------------------------------------------------------
   DARK: Contenido
   -------------------------------------------------------------------------- */
.ngc-dark .entry-content,
.ngc-dark .single-content,
.ngc-dark .single-article,
.ngc-dark article,
.ngc-dark main,
.ngc-dark .site-main {
    color: var(--ngc-dm-text) !important;
}

.ngc-dark .entry-content p,
.ngc-dark .single-content p,
.ngc-dark article p {
    color: var(--ngc-dm-text) !important;
}

/* Títulos */
.ngc-dark .single-title,
.ngc-dark .entry-title,
.ngc-dark .entry-title a,
.ngc-dark h1, .ngc-dark h2, .ngc-dark h3,
.ngc-dark h4, .ngc-dark h5, .ngc-dark h6,
.ngc-dark .entry-content h2, .ngc-dark .single-content h2,
.ngc-dark .entry-content h3, .ngc-dark .single-content h3 {
    color: var(--ngc-dm-text) !important;
}

/* H4 mantiene rojo en dark mode */
.ngc-dark .entry-content h4,
.ngc-dark .single-content h4 {
    color: #FF4136 !important;
}

/* Links — scoped al contenido, no al admin bar */
.ngc-dark .entry-content a,
.ngc-dark .single-content a,
.ngc-dark .single-article a,
.ngc-dark main a,
.ngc-dark footer a {
    color: #FF4136;
}
.ngc-dark .entry-content a:hover,
.ngc-dark .single-content a:hover,
.ngc-dark main a:hover,
.ngc-dark footer a:hover {
    color: #FF6B63;
}
/* Badges mantienen su color */
.ngc-dark .cat-links a,
.ngc-dark a[rel="category tag"],
.ngc-dark a[rel="category"] {
    color: var(--ngc-badge-text) !important;
}

/* --------------------------------------------------------------------------
   DARK: Tablas (compatibilidad con NGC Table Styler)
   -------------------------------------------------------------------------- */

/* ==========================================================================
   TABLE STYLER — Modo claro
   ========================================================================== */

.entry-content table,
.single-content table,
.wp-block-table table,
.ngc-single-content table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: var(--ngc-caption-font, 'Outfit', sans-serif);
    font-size: 15px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.entry-content table th,
.single-content table th,
.wp-block-table table th,
.ngc-single-content table th {
    background: #E10600 !important;
    color: #fff !important;
    font-family: var(--ngc-caption-font, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 16px;
    text-align: center;
}

.entry-content table td,
.single-content table td,
.wp-block-table table td,
.ngc-single-content table td {
    padding: 12px 16px;
    border-bottom: 1px solid #F0F0F0;
    text-align: left;
    vertical-align: middle;
    color: #333;
}

/* Primera columna — centrada, roja, negrita */
.entry-content table td:first-child,
.single-content table td:first-child,
.wp-block-table table td:first-child,
.ngc-single-content table td:first-child {
    text-align: center;
    font-weight: 800;
    color: #E10600;
    font-family: var(--ngc-caption-font, 'Barlow Condensed', sans-serif);
}

/* Primera columna header también centrada */
.entry-content table th:first-child,
.single-content table th:first-child,
.wp-block-table table th:first-child,
.ngc-single-content table th:first-child {
    text-align: center;
}

/* Filas alternas */
.entry-content table tbody tr:nth-child(even),
.single-content table tbody tr:nth-child(even),
.wp-block-table table tbody tr:nth-child(even),
.ngc-single-content table tbody tr:nth-child(even) {
    background: #FAFAFA;
}

/* Hover */
.entry-content table tbody tr:hover,
.single-content table tbody tr:hover,
.wp-block-table table tbody tr:hover,
.ngc-single-content table tbody tr:hover {
    background: #F5F5F5;
}

/* Responsive wrapper */
.ngc-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 1em;
}

@media screen and (max-width: 600px) {
    .entry-content table td,
    .single-content table td,
    .ngc-single-content table td {
        padding: 10px 10px;
        font-size: 13px;
    }
    .entry-content table th,
    .single-content table th,
    .ngc-single-content table th {
        padding: 10px 10px;
        font-size: 11px;
    }
}

/* ==========================================================================
   TABLE STYLER — Modo oscuro
   ========================================================================== */
.ngc-dark .entry-content table,
.ngc-dark .single-content table,
.ngc-dark .wp-block-table table,
.ngc-dark article table {
    background: var(--ngc-dm-surface) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ngc-dark .entry-content table td,
.ngc-dark .single-content table td,
.ngc-dark .wp-block-table table td,
.ngc-dark article table td {
    color: var(--ngc-dm-text) !important;
    border-bottom-color: var(--ngc-dm-border) !important;
}

.ngc-dark .entry-content table td:first-child,
.ngc-dark .single-content table td:first-child,
.ngc-dark article table td:first-child {
    color: #FF4136 !important;
}

.ngc-dark .entry-content table tbody tr:nth-child(even),
.ngc-dark .single-content table tbody tr:nth-child(even),
.ngc-dark .wp-block-table.is-style-stripes table tbody tr:nth-child(even) {
    background-color: var(--ngc-dm-surface-2) !important;
}

.ngc-dark .entry-content table tbody tr:hover,
.ngc-dark .single-content table tbody tr:hover,
.ngc-dark article table tbody tr:hover {
    background-color: #2A2A2A !important;
}

/* Cabeceras de tabla */
.ngc-dark .entry-content table th,
.ngc-dark .single-content table th,
.ngc-dark .wp-block-table table th,
.ngc-dark article table th {
    background: #C00500 !important;
}

/* Figcaption */
.ngc-dark figcaption,
.ngc-dark .wp-block-image figcaption {
    color: var(--ngc-dm-text-secondary) !important;
}

/* --------------------------------------------------------------------------
   DARK: Sidebar, widgets, footer
   -------------------------------------------------------------------------- */
.ngc-dark .widget,
.ngc-dark .sidebar,
.ngc-dark aside {
    background-color: var(--ngc-dm-surface) !important;
    color: var(--ngc-dm-text) !important;
}

.ngc-dark footer,
.ngc-dark .site-footer {
    background-color: var(--ngc-dm-surface) !important;
    color: var(--ngc-dm-text) !important;
    border-color: var(--ngc-dm-border) !important;
}

/* Inputs — solo dentro del site */
.ngc-dark main input,
.ngc-dark main textarea,
.ngc-dark main select,
.ngc-dark footer input,
.ngc-dark footer select {
    background-color: var(--ngc-dm-surface-2) !important;
    color: var(--ngc-dm-text) !important;
    border-color: var(--ngc-dm-border) !important;
}

/* Badge live en dark */
.ngc-dark .ngc-badge-live {
    background: #CC0500 !important;
}

/* Scroll wrapper sombra */
.ngc-dark .ngc-table-wrapper.has-scroll::after {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
}

/* Meta info */
.ngc-dark .entry-meta,
.ngc-dark .post-meta,
.ngc-dark .entry-meta a,
.ngc-dark .post-meta a {
    color: var(--ngc-dm-text-secondary) !important;
}

/* Bloques con fondo */
.ngc-dark .wp-block-group,
.ngc-dark .wp-block-cover,
.ngc-dark blockquote {
    background-color: var(--ngc-dm-surface-2) !important;
    color: var(--ngc-dm-text) !important;
    border-color: var(--ngc-dm-border) !important;
}

/* Imágenes: evitar que el border-radius deje ver fondo blanco/gris */
.ngc-dark figure,
.ngc-dark .wp-block-image,
.ngc-dark .ngc-auto-figure,
.ngc-dark .post-thumbnail,
.ngc-dark .article-card .post-thumbnail,
.ngc-dark article figure {
    background: transparent !important;
}

/* Contenedor de imagen en cards: overflow hidden para que las esquinas no muestren nada */
.ngc-dark .post-thumbnail,
.ngc-dark .article-card .post-thumbnail,
.ngc-dark .card-image,
.ngc-dark .article-card a:first-child {
    overflow: hidden;
    border-radius: var(--ngc-img-radius);
    background: transparent !important;
}

.ngc-dark .entry-content img,
.ngc-dark .single-content img,
.ngc-dark article img,
.ngc-dark .post-thumbnail img,
.ngc-dark .article-card img {
    background: transparent !important;
}

/* --------------------------------------------------------------------------
   DARK: Cards de artículos en home/archive
   (Tu tema usa .article-card, .card-content, etc.)
   -------------------------------------------------------------------------- */
.ngc-dark .article-card,
.ngc-dark .card-content,
.ngc-dark .post-card {
    background-color: transparent !important;
    border-color: var(--ngc-dm-border) !important;
}

.ngc-dark .article-card:hover,
.ngc-dark .post-card:hover {
    background-color: transparent !important;
}

/* Grid container / wrapper de artículos */
.ngc-dark .container,
.ngc-dark .site-main,
.ngc-dark .posts-grid,
.ngc-dark .articles-grid {
    background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   DARK: Menú móvil abierto
   -------------------------------------------------------------------------- */
.ngc-dark .main-nav {
    background-color: var(--ngc-dm-surface) !important;
}

/* Mobile toggle */
@media screen and (max-width: 480px) {
    #ngc-dark-toggle {
        width: 40px;
        height: 40px;
        bottom: 20px;
        left: 16px;
    }
}


/* ==========================================================================
   6. TIEMPO DE LECTURA
   ========================================================================== */

.ngc-reading-time {
    font-family: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #8A8A8A;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.ngc-reading-time svg {
    opacity: 0.6;
}

.ngc-dark .ngc-reading-time {
    color: #999 !important;
}

.ngc-meta-sep {
    color: #CCC;
    font-size: 13px;
}

.ngc-dark .ngc-meta-sep {
    color: #555 !important;
}

/* Fallback standalone */
.ngc-reading-time-standalone {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #F0F0F0;
}

.ngc-dark .ngc-reading-time-standalone {
    border-bottom-color: #333 !important;
}


/* ==========================================================================
   7. NAVBAR INTELIGENTE
   Tu tema usa .site-header con position: fixed, así que solo 
   controlamos la visibilidad con transform
   ========================================================================== */

.ngc-smart-header {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s ease !important;
    will-change: transform;
}

.ngc-smart-header.ngc-header-hidden {
    transform: translateY(-100%) !important;
    box-shadow: none !important;
}

.ngc-smart-header:not(.ngc-header-hidden) {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.ngc-dark .ngc-smart-header:not(.ngc-header-hidden) {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}


/* ==========================================================================
   8. COMPATIBILIDAD CON TEMA NEWGEARCARS v1.0
   Reglas dark mode para las clases del tema nuevo (.ngc-header, .ngc-grid, etc.)
   ========================================================================== */

/* Header — ya es oscuro siempre, no necesita cambio de fondo */
.ngc-dark .ngc-header.scrolled {
    background: rgba(10, 10, 10, 0.98) !important;
}

/* Hero overlay más oscuro en dark mode */
.ngc-dark .ngc-hero-overlay {
    background: linear-gradient(
        0deg,
        rgba(10, 10, 10, 0.9) 0%,
        rgba(10, 10, 10, 0.3) 50%,
        rgba(10, 10, 10, 0.2) 100%
    ) !important;
}

/* Grid cards */
.ngc-dark .ngc-card-title a {
    color: var(--ngc-dm-text, #E8E8E8) !important;
}
.ngc-dark .ngc-card-title a:hover {
    color: #FF4136 !important;
}
.ngc-dark .ngc-card-date {
    color: var(--ngc-dm-text-secondary, #666) !important;
}

/* Section headers */
.ngc-dark .ngc-section-title {
    color: var(--ngc-dm-text, #E8E8E8) !important;
    border-bottom-color: var(--ngc-dm-text, #E8E8E8) !important;
}

/* Single post */
.ngc-dark .ngc-single-title {
    color: var(--ngc-dm-text, #E8E8E8) !important;
}
.ngc-dark .ngc-single-meta {
    color: var(--ngc-dm-text-secondary, #999) !important;
}
.ngc-dark .ngc-single-meta .author {
    color: var(--ngc-dm-text, #CCC) !important;
}
.ngc-dark .ngc-single-content p {
    color: var(--ngc-dm-text, #CCC) !important;
}
.ngc-dark .ngc-single-content blockquote {
    background: var(--ngc-dm-surface, #1E1E1E) !important;
    color: var(--ngc-dm-text-secondary, #999) !important;
}

/* Archive */
.ngc-dark .ngc-archive-title {
    color: var(--ngc-dm-text, #E8E8E8) !important;
}

/* Pagination */
.ngc-dark .ngc-pagination a {
    background: var(--ngc-dm-surface, #1E1E1E) !important;
    color: var(--ngc-dm-text, #CCC) !important;
}

/* Footer — ya es oscuro por defecto, sin cambios necesarios */

/* 404 */
.ngc-dark .ngc-404-code {
    color: #151515 !important;
}

/* Tags en single */
.ngc-dark .ngc-single-tags a {
    background: var(--ngc-dm-surface, #1E1E1E) !important;
    color: var(--ngc-dm-text-secondary, #999) !important;
}

/* Mobile menu overlay — ya es oscuro */

/* Relaciones entre artículos */
.ngc-dark .ngc-articles-section {
    border-top-color: var(--ngc-dm-border, #333) !important;
}

/* Fix: No forzar color blanco en el header del tema nuevo */
.ngc-dark .ngc-header-nav .menu-item a {
    color: rgba(255,255,255,0.75) !important;
}
.ngc-dark .ngc-header-nav .menu-item a:hover,
.ngc-dark .ngc-header-nav .current-menu-item > a {
    color: #FFFFFF !important;
}

/* Fix: No forzar color en links del header social */
.ngc-dark .ngc-header-social a {
    color: rgba(255,255,255,0.5) !important;
}
.ngc-dark .ngc-header-social a:hover {
    color: #FFFFFF !important;
}