/* ==========================================
   JRN AI MAGAZINE
   WORDPRESS.COM - TEMA DYAD 2
   CSS EDITORIAL UNIFICADO
   OCTUBRE 2026
   ========================================== */


/* 01. IDENTIDAD CROMATICA */

:root {
    --jrn-petroleo: #24556B;
    --jrn-menu: #24566A;
    --jrn-hover: #32718B;
    --jrn-blanco: #FFFFFF;
    --jrn-titulo: #263B46;
    --jrn-texto: #34454F;
    --jrn-extracto: #46545D;
    --jrn-metadatos: #71818A;
    --jrn-borde: #B8C8CF;
}


/* 02. FONDO GENERAL */

html,
body,
#page,
.site {
    background-color: var(--jrn-petroleo) !important;
}


/* 03. CABECERA */

.site-header {
    background: var(--jrn-petroleo) !important;
    background-image: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 10px !important;
    overflow: visible !important;
}

.site-header::before,
.site-header::after {
    background: transparent !important;
    box-shadow: none !important;
}

.site-header a {
    color: var(--jrn-blanco) !important;
}


/* 04. LOGOTIPO */

.site-header .site-logo,
.site-header .custom-logo-link {
    display: block;
    width: 68px !important;
    max-width: none !important;
    min-width: 68px;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.site-header .site-logo img,
.site-header .custom-logo,
.site-header .custom-logo-link img {
    display: block !important;
    width: 68px !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

.site-branding {
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 05. TITULO DE LA REVISTA */

.site-header .site-title {
    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.site-header .site-title a {
    color: var(--jrn-blanco) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}


/* 06. NAVEGACION PRINCIPAL */

.main-navigation {
    background: transparent !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.main-navigation a {
    color: var(--jrn-blanco) !important;
    font-weight: 400 !important;
}

.main-navigation .dropdown-toggle {
    color: var(--jrn-blanco) !important;
}


/* 07. MENU HORIZONTAL DE ESCRITORIO */

@media screen and (min-width: 1025px) {

    .main-navigation > div > ul,
    .main-navigation > ul,
    .main-navigation .menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 18px !important;
    }

    .main-navigation .menu > li,
    .main-navigation > ul > li {
        display: block !important;
        position: relative;
        float: none !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    .main-navigation .menu > li > a,
    .main-navigation > ul > li > a {
        display: inline-block;
        font-size: 13px !important;
        line-height: 1.3 !important;
        letter-spacing: 0.03em !important;
        padding: 9px 0 !important;
        white-space: nowrap !important;
    }

}


/* 08. SUBMENUS */

.main-navigation ul ul,
.site-header .main-navigation ul ul {
    background: var(--jrn-menu) !important;
    background-image: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    min-width: 220px;
    z-index: 9999 !important;
}

.main-navigation ul ul li,
.main-navigation ul ul a {
    background-color: var(--jrn-menu) !important;
    background-image: none !important;
    color: var(--jrn-blanco) !important;
}

.main-navigation ul ul li {
    display: block !important;
    float: none !important;
    white-space: normal !important;
}

.main-navigation ul ul a {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding: 9px 14px !important;
    transition: background-color 0.25s ease;
}

.main-navigation ul ul a:hover,
.main-navigation ul ul li:hover > a,
.main-navigation ul ul li:focus-within > a,
.main-navigation ul ul .focus > a {
    background-color: var(--jrn-hover) !important;
    color: var(--jrn-blanco) !important;
}


/* 09. ELIMINAR TRIANGULOS OSCUROS
   DE LOS SUBMENUS */

.main-navigation ul ul::before,
.main-navigation ul ul::after,
.main-navigation .sub-menu::before,
.main-navigation .sub-menu::after,
.main-navigation ul ul li::before,
.main-navigation ul ul li::after {
    content: none !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* 10. DESCRIPCION DE CABECERA */

.site-description {
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    max-width: 900px !important;
    margin: 6px auto 0 !important;
    color: var(--jrn-blanco) !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}


/* 11. TITULOS EDITORIALES */

.entry-title,
.entry-title a,
.posts .entry-title,
.posts .entry-title a,
.single-post .entry-title,
.single-post .entry-header .entry-title {
    font-weight: 400 !important;
}

.single-post .entry-content h1,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-content h5,
.single-post .entry-content h6 {
    font-weight: 400 !important;
}

.entry-title strong,
.entry-title b,
.single-post .entry-content h1 strong,
.single-post .entry-content h2 strong,
.single-post .entry-content h3 strong,
.single-post .entry-content h4 strong,
.single-post .entry-content h5 strong,
.single-post .entry-content h6 strong {
    font-weight: 400 !important;
}


/* 12. PORTADA EDITORIAL */

.posts .entry-title,
.posts .entry-title a {
    color: var(--jrn-titulo) !important;
}

.posts .entry-summary,
.posts .entry-summary p {
    color: var(--jrn-extracto) !important;
}

.posts .entry-meta,
.posts .entry-meta a {
    color: var(--jrn-metadatos) !important;
}

@media (hover: hover) {

    .posts .entry-title a:hover {
        color: var(--jrn-petroleo) !important;
    }

}


/* 13. ARTICULOS COMPLETOS */

.single-post .site-content,
.single-post .content-area,
.single-post .site-main,
.single-post article,
.single-post .entry-header,
.single-post .entry-content {
    background-color: var(--jrn-blanco) !important;
}


/* 14. COMENTARIOS */

body.single-post #comments,
body.single-post .comments-area,
body.single-post .comments-wrapper,
body.single-post .comments-area-wrapper,
body.single-post .comments-container,
body.single-post .comment-respond,
body.single-post #respond,
.single-post .comments-area .comment-list,
.single-post .comments-area .comment-body,
.single-post .comment-form {
    background: var(--jrn-blanco) !important;
    background-image: none !important;
    color: var(--jrn-texto) !important;
}

body.single-post .site-content:has(#comments) {
    background-color: var(--jrn-blanco) !important;
}

.single-post .comments-area::before,
.single-post .comments-area::after {
    background: var(--jrn-blanco) !important;
}


/* 15. TEXTOS DE COMENTARIOS */

.single-post .comments-title,
.single-post .comment-reply-title,
.single-post .comments-area h2,
.single-post .comments-area h3 {
    color: var(--jrn-petroleo) !important;
    font-weight: 400 !important;
}

.single-post .comment-content,
.single-post .comment-content p,
.single-post .logged-in-as,
.single-post .comments-area p,
.single-post .comments-area label {
    color: var(--jrn-texto) !important;
}


/* 16. FORMULARIO DE COMENTARIOS */

.single-post .comment-form textarea,
.single-post .comment-form input[type="text"],
.single-post .comment-form input[type="email"] {
    background: var(--jrn-blanco) !important;
    color: var(--jrn-texto) !important;
    border: 1px solid var(--jrn-borde) !important;
}


/* 17. BOTONES DE COMENTARIOS */

.single-post .comment-form input[type="submit"],
.single-post #respond input[type="submit"],
.single-post .comment-form button[type="submit"] {
    background: var(--jrn-petroleo) !important;
    background-image: none !important;
    color: var(--jrn-blanco) !important;
    border: 1px solid var(--jrn-petroleo) !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    transition: background-color 0.25s ease;
}

.single-post .comment-form input[type="submit"]:hover,
.single-post #respond input[type="submit"]:hover,
.single-post .comment-form button[type="submit"]:hover {
    background: var(--jrn-hover) !important;
    border-color: var(--jrn-hover) !important;
    color: var(--jrn-blanco) !important;
}

.single-post .comment-form input[type="submit"]:focus-visible,
.single-post .comment-form button[type="submit"]:focus-visible {
    outline: 2px solid var(--jrn-petroleo);
    outline-offset: 3px;
}


/* 18. PAGINACION Y MAS ENTRADAS */

.posts-navigation,
.navigation.posts-navigation,
.navigation.pagination,
.pagination,
.infinite-wrap,
.infinite-loader,
#infinite-handle,
.site-content > .navigation,
.site-main > .navigation,
.site-content > .pagination,
.site-main > .pagination {
    background-color: var(--jrn-petroleo) !important;
}


/* 19. IMAGENES DE PORTADA */

.posts .entry-thumbnail,
.posts .post-thumbnail,
.posts .entry-media,
.posts .featured-image,
.posts .post-image,
.posts .entry-thumbnail img,
.posts .post-thumbnail img,
.posts .entry-media img,
.posts .featured-image img,
.posts .post-image img,
.posts .entry-thumbnail a,
.posts .post-thumbnail a {
    background-color: var(--jrn-blanco) !important;
}


/* 20. IMAGENES DE ARTICULOS */

.single-post .entry-content figure,
.single-post .entry-content .wp-block-image,
.single-post .entry-content .wp-caption,
.single-post .entry-content .wp-block-gallery,
.single-post .entry-content img,
.single-post .entry-content figure img,
.single-post .entry-content .wp-block-image img,
.single-post .entry-content a:has(> img) {
    background-color: var(--jrn-blanco) !important;
}

.single-post .entry-content figure::before,
.single-post .entry-content figure::after {
    background-color: transparent !important;
}


/* 21. BLOQUES DE IMAGEN CON FONDO */

.single-post .entry-content .wp-block-cover {
    background-color: var(--jrn-blanco);
}


/* 22. CARGA DE MAS ENTRADAS */

.posts .post,
.posts article,
.infinite-wrap .post,
.infinite-wrap article,
.infinite-posts .post {
    background-color: var(--jrn-blanco) !important;
}

.infinite-wrap .post-thumbnail,
.infinite-wrap .entry-thumbnail,
.infinite-wrap .featured-image,
.infinite-wrap .entry-media,
.posts img,
.infinite-wrap img,
.infinite-posts img,
.posts a:has(> img),
.infinite-wrap a:has(> img) {
    background-color: var(--jrn-blanco) !important;
}


/* 23. PIE DE PAGINA */

.site-footer,
.site-footer .widget-area,
.footer-bottom-info,
.site-info {
    background-color: var(--jrn-petroleo) !important;
    color: var(--jrn-blanco) !important;
}

.site-footer a,
.footer-bottom-info a {
    color: var(--jrn-blanco) !important;
}

.site-footer,
.footer-bottom-info {
    border-color: transparent !important;
    box-shadow: none !important;
}

.site-footer .widget-area {
    padding-bottom: 30px !important;
    margin-bottom: 0 !important;
}

.site-footer .widget {
    margin-bottom: 0 !important;
}


/* 24. BARRA INFERIOR */

.footer-bottom-info {
    padding: 2px 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.footer-bottom-info .site-info {
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 16px !important;
}


/* 25. EDITOR DE WORDPRESS */

.editor-styles-wrapper,
.block-editor-writing-flow,
.block-editor-block-list__layout,
.is-root-container {
    background-color: var(--jrn-blanco) !important;
}

.editor-styles-wrapper .wp-block-post-content,
.editor-styles-wrapper .block-editor-block-list__layout {
    background-color: var(--jrn-blanco) !important;
}

.editor-styles-wrapper {
    color: var(--jrn-texto) !important;
}


/* 26. TABLETAS Y PANTALLAS MEDIANAS */

@media screen and (min-width: 768px)
and (max-width: 1199px) {

    .site-header .site-title {
        font-size: 21px !important;
    }

    .main-navigation .menu > li > a,
    .main-navigation > ul > li > a {
        font-size: 12px !important;
    }

    .main-navigation > div > ul,
    .main-navigation > ul,
    .main-navigation .menu {
        gap: 10px !important;
    }

}


/* 27. MOVILES Y TABLETAS */

@media screen and (max-width: 1024px) {

    .site-header {
        background: var(--jrn-petroleo) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .site-header .site-title {
        font-size: 20px !important;
        text-align: left !important;
    }

    .site-header .site-logo,
    .site-header .custom-logo-link {
        width: 60px !important;
        min-width: 60px;
        max-width: none !important;
    }

    .site-header .site-logo img,
    .site-header .custom-logo,
    .site-header .custom-logo-link img {
        width: 60px !important;
        max-width: none !important;
        height: auto !important;
    }

    .main-navigation,
    .main-navigation.toggled,
    .main-navigation .menu,
    .main-navigation ul,
    .main-navigation ul ul,
    .main-navigation .sub-menu {
        background-color: var(--jrn-petroleo) !important;
    }

    .main-navigation > div > ul,
    .main-navigation > ul,
    .main-navigation .menu {
        display: block !important;
    }

    .main-navigation li {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-height: 0 !important;
        border-color: rgba(255,255,255,0.12) !important;
    }

    .main-navigation li > a {
        padding: 12px 15px !important;
        min-height: 0 !important;
        line-height: 1.4 !important;
        color: var(--jrn-blanco) !important;
        border-color: rgba(255,255,255,0.12) !important;
    }

    .main-navigation .sub-menu li > a,
    .main-navigation ul ul li > a {
        padding: 10px 15px !important;
        line-height: 1.35 !important;
        color: var(--jrn-blanco) !important;
    }

    .main-navigation .dropdown-toggle,
    .main-navigation .menu-item-has-children > button {
        color: var(--jrn-blanco) !important;
    }

    .main-navigation li:hover,
    .main-navigation li:focus-within {
        background-color: var(--jrn-hover) !important;
    }

    .site-description {
        font-size: 13px !important;
    }

}


/* 28. AJUSTES PARA MOVILES PEQUEÑOS */

@media screen and (max-width: 767px) {

    .site-header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .site-header .site-title {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    .site-footer .widget-area {
        padding-bottom: 25px !important;
    }

    .footer-bottom-info {
        height: 20px !important;
        padding: 2px 0 !important;
    }

}


/* ==========================================
   FIN DEL CSS UNIFICADO
   JRN AI MAGAZINE
   ========================================== */