/*
Theme Name: ESG Guatemala
Author: Prensa Libre
Description: A custom theme for the ESG Guatemala landing page.
Version: 1.0
Text Domain: esg-guatemala
*/

@import url('https://fonts.googleapis.com/css?family=DM+Sans');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');


body {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 1rem;
    --ratio: 9 / 16;
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

h1, h2, h3, h4, h5, h6, p {
    font-family: "Montserrat", sans-serif;
}

/* //Walmart primera sección  */
#section_1_w, #section_2_w , #section_3_w{
    background: linear-gradient(#676767, transparent)
}

#mainNav.navbar-shrink {
    background-color: #0C1C0F;
    font-family: 'DM Sans', sans-serif !important;
    text-transform: none !important;
}

@media (max-width: 2000px) {
    #mainNav {
        background-color: #0C1C0F !important;
        padding-top: 2px;
        padding-bottom: 2px;
        text-transform: none !important;
    }
}

.logo_pl {
    height:2rem;
    width:auto;
    padding-right:2rem;
}

.logo_esg {
    height:2.8rem;
    width:auto;
    padding-left:2rem;
}

.content-section {
    padding-top: 1rem !important;
    padding-bottom: 1rem;
}

.criterios_css {
    background: #239F4D;
    width: 100%;
}

.metodologia_css {
    background: #0C1C0F;
    width: 100%;
}

.masthead .intro-body .brand-heading {
    height: 150px;
    margin-top: 20px;
}

.masthead .intro-body {
    text-shadow: 2px 2px 10px rgba(0,0,0,0.6);
    font-weight: 600;
}

.single {
    background-color: white !important;
    color: black;
}

#mainNav.single {
    background: rgb(0,148,229) !important;
}

.btn.btn-guate {
    border-color: white;
    color: white;
}

#presentacion:after {
    content: '';
    background: white;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

#presentacion {
    position: relative;
}

#criterios_2 {
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: left;
    background-size: 100%;
    background-color: #000000;
}

#criterios_2_1 {
    padding-top: 8rem;
}

#criterios_2_1_2 {
    background-color: #FFFFFF;
}

.masthead {
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: left;
    background-size: 100%;
    background-color: white;
}

.img-portada-desktop {
    display:initial;
}

.img-portada-mobile {
    display:none;
}

/* Hero background images */
.head {
    min-height: 100vh;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 601px) {
    .head {
        background-image: url('assets/img/section_1_portada_esg_guatemala_v2.webp');
    }
}
@media (max-width: 600px) {
    .head {
        background-image: url('assets/img/section_1_portada_esg_guatemala_v2_mobile.webp');
    }
}

/* Other styles from the user */
.card-nota-s4 {
    background-image: url('assets/img/section_3_esg_01.png');
}

.bar_s8 {
    position: relative;
    margin-left: -7vw;
    margin-top: -10vw;
    width: 100vw;
    background-color: #000000;
    padding-top: 6rem !important;
}

#criterios_2 {
    background-image: url('assets/img/section_6_esg_01_mobile.png') !important;
}
.masthead {
    background-image: url('assets/img/section_1_portada_esg_guatemala_mobile.png') !important;
}
.head {
    background-image: url('assets/img/section_1_portada_esg_guatemala_v2.webp');
}
@media screen and (max-width: 600px) {
    .head {
        background-image: url('assets/img/section_1_portada_esg_guatemala_v2_mobile.webp');
    }
}
.image-box {
    background-image: url('assets/img/Home_seccion.webp');
}
.metodologia-bg {
    background-image: url('assets/img/Back.webp');
}

.hover-image:hover {
    transform: scale(1.2); /* Increase size to 120% */
}

/* --- THE ONLY ADDED CODE: Desktop Navigation Display Fix --- */
@media (min-width: 992px) {
    /*
     * This is the key part. We take the mobile panel container...
     */
    #navbarResponsive {
        /* ...and make it behave like a normal, transparent part of the navbar on desktop. */
        display: flex !important; /* Forces it to be visible and behave as a flex container */
        justify-content: flex-end; /* Pushes the content (the menu) to the right */
        background-color: transparent !important; /* Removes the green background */
        position: static !important; /* Removes the absolute positioning */
        width: auto !important; /* Resets the fixed width */
        padding: 0 !important; /* Removes the panel padding */
        z-index: auto !important; /* Resets the z-index */
    }

    /* Make the list of links horizontal */
    #navbarResponsive .navbar-nav {
        flex-direction: row;
    }

    /* Style the desktop links */
    #navbarResponsive .nav-link {
        color: gray !important; /* Initial color for desktop links */
        margin-bottom: 0 !important; /* Remove mobile margin */
        padding: 0.5rem 1rem;
    }

    #navbarResponsive .nav-link:hover {
        color: white !important; /* Hover color */
    }
}

/* ==========================================================================
   Single Post Styles (single.php)
   ========================================================================== */

.single-post-layout .entry-header {
    background-size: cover;
    background-position: center center;
    position: relative;
}

/* Adds a dark overlay to the header for better text readability */
.single-post-layout .entry-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.single-post-layout .entry-header .container {
    position: relative;
    z-index: 2;
}

.single-post-layout .entry-meta-categories a {
    color: #fff;
    text-decoration: none;
}

.single-post-layout .entry-title {
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

.single-post-layout .entry-meta-details a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.single-post-layout .entry-meta-details a:hover {
    text-decoration: underline;
}

.single-post-layout .entry-content {
    line-height: 1.8;
    font-size: 1.1rem;
    color: #343a40;
}

.single-post-layout .entry-content p {
    margin-bottom: 1.5rem;
}

.single-post-layout .entry-content h2,
.single-post-layout .entry-content h3,
.single-post-layout .entry-content h4 {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
}

.single-post-layout .entry-content a {
    color: #28a745;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid rgba(40, 167, 69, 0.2);
    transition: all 0.2s ease-in-out;
}

.single-post-layout .entry-content a:hover {
    background-color: rgba(40, 167, 69, 0.1);
    border-bottom-color: #28a745;
}

.single-post-layout .entry-content blockquote {
    border-left: 4px solid #28a745;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #6c757d;
}

.single-post-layout .post-tags .badge {
    font-size: 0.9em;
    padding: 0.5em 0.8em;
}

/* Comments Section Styling */
.comments-area {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
}


/* ==========================================================================
   Comments Section Styles (comments.php)
   ========================================================================== */

.comments-area {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
}

.comments-area .comments-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

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

.comment-list .comment {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e9ecef;
}

.comment-list .children {
    list-style: none;
    padding-left: 2rem; /* Indent replies */
    margin-top: 2rem;
}

.comment-author .avatar {
    float: left;
    margin-right: 1rem;
    border-radius: 50%;
}

.comment-author .fn {
    font-weight: bold;
    font-style: normal;
}

.comment-metadata {
    font-size: 0.85em;
    color: #6c757d;
}

.comment-metadata a {
    color: #6c757d;
    text-decoration: none;
}

.comment-metadata a:hover {
    text-decoration: underline;
}

.reply .comment-reply-link {
    font-size: 0.85em;
    font-weight: bold;
    color: #28a745;
    text-decoration: none;
    border: 1px solid #28a745;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
}

.reply .comment-reply-link:hover {
    background-color: #28a745;
    color: #fff;
}

/* Comment Form Styling */
.comment-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.comment-form .form-submit .submit {
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.comment-form .form-submit .submit:hover {
    background-color: #218838;
}

/* ===================================================================
   Custom Styles for Single Company Page
   =================================================================== */

/* --- Professional Page Header --- */
.company-page-header {
    background-color: #f8f9fa; /* A light, clean background color */
    padding: 3rem 0;
    border-bottom: 1px solid #dee2e6; /* A subtle separator line */
}

.company-logo-header img {
    max-width: 180px;  /* Control the max size of the logo */
    height: auto;
    border-radius: 8px; /* Slightly rounded corners for a modern look */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.company-header-pre-title {
    font-size: 1rem;
    font-weight: 400;
    color: #6c757d; /* Muted text color */
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.company-header-title {
    font-size: 2.8rem; /* Large, impactful title */
    font-weight: 700;
    margin-bottom: 0;
    color: #212529;
}

/* --- Blog Post Card Grid --- */
.company-post-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.company-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.company-post-card .card-img-top {
    height: 200px;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.company-post-card .card-body {
    padding: 1.5rem;
}

.company-post-card .card-title a {
    text-decoration: none;
    color: #212529;
    transition: color 0.2s;
}

.company-post-card .card-title a:hover {
    color: #0d6efd; /* Your primary Bootstrap color */
}

.company-post-card .btn-primary {
    background-color: #0d6efd; /* Example color, adjust to your theme's primary color */
    border-color: #0d6efd;
    font-weight: 600;
}

/* ==========================================================================
   BREADCROM Styles
   ========================================================================== */


.title-general-container-variation {
    overflow-x: auto;
    width: 100%;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    margin: 0px 0px 18px 0px
}

@media(min-width: 360px) {
    .title-general-container-variation {
        margin: 32px 0px 18px 0px
    }
}

@media(min-width: 768px) {
    .title-general-container-variation {
        margin: 32px 0px 18px 0px
    }
}

.title-general-container-variation {
    border-bottom: 1px solid #e3e3e3;
    margin: 32px 0px 18px 0px;
    padding-top: 12px
}


@media(min-width: 1280px) {
    .title-general-container-variation {
        margin: 32px 0px 18px 0px
    }
}

@media(min-width: 1360px) {
    .title-general-container-variation {
        margin: 32px 0px 18px 0px;
    }
}

.general-padding-lateral {
    padding: 0 8px
}

@media(min-width: 360px) {
    .general-padding-lateral {
        padding: 0 14px
    }
}

@media(min-width: 768px) {
    .general-padding-lateral {
        padding: 0 16px
    }
}

@media(min-width: 1024px) {
    .general-padding-lateral {
        padding: 0 18px
    }
}

@media(min-width: 1280px) {
    .general-padding-lateral {
        padding: 0 24px
    }
}

@media(min-width: 1360px) {
    .general-padding-lateral {
        padding: 0 30px;
        max-width: 1360px;
        margin: 0 auto
    }
}





.title-general-container-variation-header {
    display: flex;
    gap: 8px;
    cursor: pointer
}

.cover-general__border-bottom-scrolled {
    border-bottom: 3px solid #00b9f2
}

.title-general-container__title {
    font-size: 20px;
    line-height: 24px;
    margin: 0
}

@media(min-width: 768px) {
    .title-general-container__title {
        font-size: 24px
    }
}

.title-general-container-variation__title {
    font-size: 24px
}

@media(min-width: 768px) {
    .title-general-container-variation__title {
        font-size: 32px
    }
}

.title-general-container-variation__item-two-text {
    flex: 0 0 auto;
    padding-right: 32px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
    padding-top: 8px;
    padding-bottom: 8px
}

.title-general-container-variation__item-two-text.active~.title-general-container-variation__chevron {
    display: inline-block;
    border-bottom: 3px solid #00b9f2
}

@media(min-width: 1024px) {
    .title-general-container-variation__item-two-text {
        padding: 0
    }
}

.title-general-container-variation__item-two-text.active {
    color: #00b9f2
}

.title-general-container-variation__item-two-text:hover {
    color: #00b9f2
}

@media(min-width: 768px) {
    .cover-animation-header__title {
        font-size: 32px;
        line-height: 38px
    }
}

.cover-animation-header__title {
    display: flex;
    gap: 8px;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: #000;
    font-size: 20px;
    line-height: 24px;
    font-size: 24px
}

@media(min-width: 768px) {
    .cover-animation-header__title {
        font-size: 32px;
        line-height: 38px
    }
}

.text-uppercase {
    text-transform: uppercase !important
}


.cover-general__option-visible-on-scroll {
    display: none
}