/* ── Breadcrumb contrast fix (WCAG 2.1 AA: min 4.5:1) ──────────────────────── */
/* Original #DD3333 on #fff gives ~4.29:1 (fails AA).
   #D32F2F gives 4.68:1 on white — minimal change, passes AA. */
#breadcrumbs span,
#breadcrumbs span a {
    color: #D32F2F;
}
#breadcrumbs span a:hover {
    color: #B71C1C;
}

/* ── Font Awesome font-display: swap ─────────────────────────────────────────
   Prevents invisible-text flash while the icon font loads.
   Overrides the @font-face from cdnjs.cloudflare.com. */
@font-face {
    font-family: FontAwesome;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ── Ad banner containers — reserve space to prevent CLS ────────────────────
   Heights below match the actual creatives served by ABNS for each zone,
   measured 2026-05-13. Reserving exact height stops the SDK injection from
   pushing surrounding content (the main driver of the 0.663 field CLS). */

/* lcn_banner_top — under-nav leaderboard.  Desktop 970×90 / mobile 320×100 */
.lcn-banner-top .d-none.d-md-block > div { min-height: 90px; }
.lcn-banner-top .d-md-none        > div { min-height: 100px; }

/* lcn_banner_728_first / _second — mid-content.  Desktop 728×90 / mobile 320×160 */
.lcn-banner-728 .d-none.d-md-block > div { min-height: 90px; }
.lcn-banner-728 .d-md-none        > div { min-height: 160px; }

/* lcn_banner_sidebar — half-page on category/single pages.  Desktop 300×600 */
.lcn-banner-sidebar > div { min-height: 600px; }

/* ── Slick carousels — prevent pre-init CLS ─────────────────────────────────
   Slick is initialised on first user interaction (custom-script.js), so
   between page render and interaction every slide is stacked vertically at
   full size (e.g. 4 × 340 px on .carousel_latest).  When Slick boots it
   collapses the row to a single-slide height, yanking everything below up
   by ~1000 px → CLS ≈ 1.0.  Hiding non-initialised siblings keeps the
   pre-init footprint equal to the post-init footprint. */
.carousel_latest:not(.slick-initialized) > *:not(:first-child),
.carousel_cards_wraps:not(.slick-initialized) > *:not(:first-child) {
    display: none;
}

/* ── Ad images inserted by SDK: prevent CLS from missing height attribute ────
   The SDK outputs <img width="970"> without height. height:auto lets the
   browser compute it from the intrinsic ratio instead of collapsing to 0. */
.lcn-banner a > img {
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ── Img — enforce explicit aspect-ratio where width+height missing ──────── */
.catMainInner .latest_slide_wrap > img,
.slick-slide .latest_slide_wrap img.img-fluid,
.sidebarMain .sidebarCatTop img,
.sidbar_interested_img_col img {
    aspect-ratio: attr(width) / attr(height);
}

/* ── H1–H6 hierarchy fix: class-based visual styles for replaced heading tags ─
   All heading elements outside of semantic content areas have been replaced with
   <p> tags carrying these classes. The rules below reproduce the visual output
   that was previously achieved via the heading tag selectors in update.css.
   Key: <p> lacks the default font-weight:bold that h1–h6 have, so every rule
   must explicitly include it.                                              */

/* Home banner — first (large) slide title  (was h1 inside .first_slide) */
.top_slide_wrap.first_slide .slide_title .home-banner-main-title {
    font-size: 2.125rem !important;
    font-weight: bold;
    line-height: 1.1;
    margin-top: .5rem;
}
.top_slide_wrap.first_slide .slide_title .home-banner-main-title a { color: #fff !important; }

/* Home banner — secondary slides title  (was h2 inside .top_slide_wrap) */
.top_slide_wrap .slide_title .home-banner-title {
    font-size: 2.25rem;
    font-weight: bold;
    line-height: 1.1;
    margin-top: .5rem;
}
.top_slide_wrap .slide_title .home-banner-title a { color: #fff !important; }

/* Carousel section heading  (was h2 inside .latest_section_title) */
.latest_section_title .section-heading {
    font-size: 2rem;
    font-weight: bold;
    color: #DD3333;
}

/* ── "Ver todo" link contrast fix (WCAG 2.1 AA: min 4.5:1) ───────────────── */
/* #dd3333 on #f4f4f4 = 4.15:1 (fails). #bf1f1f on #f4f4f4 = 5.1:1 (passes). */
.latest_section_title a.font-inter {
    color: #bf1f1f;
}

/* Article card titles in carousels  (was h2 inside .latest_slide_title) */
.latest_slide_title .article-card-title {
    font-size: 1.375rem !important;
    font-weight: bold;
    margin-bottom: .25rem;
}
.latest_slide_title .article-card-title a { color: #000; text-decoration: none; }

/* Archive listing card titles  (was h2 inside .catMainInner .latest_slide_title) */
.catMainInner .latest_slide_title .article-card-title {
    font-size: 18px !important;
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 10px;
}

/* Featured article title in post_slider / game_in_focus  (was h2 inside .world_cup_content_wrap) */
.world_cup_content_wrap .featured-article-title {
    font-size: 2.7rem !important;
    font-weight: bold;
    line-height: 1.1;
}
.world_cup_content_wrap .featured-article-title + p {
    font-size: 1.225rem;
    line-height: 1.5;
}

/* Carousel sidebar items in post_slider  (was h5 inside .carousel_item_content) */
.carousel_item_content .carousel-post-title { font-weight: bold; }
.carousel_item_content .carousel-post-title,
.carousel_item_content p {
    font-family: "Inter", sans-serif;
    color: var(--clr-white);
    font-size: 0.938rem !important;
}

/* Bottom trend posts card title  (was h2.last_sec_card_title — class kept, tag changed to p) */
p.last_sec_card_title {
    font-size: 3.125rem;
    font-weight: bold;
    line-height: 1.05;
}
p.last_sec_card_title a { color: #000; text-decoration: none; }

/* Trending block heading  (was h3 inside .trending_news_title) */
.trending_news_title .trending-heading {
    font-size: 2rem !important;
    font-weight: bold;
    border-bottom: 4px solid var(--clr-red);
    margin-bottom: 1.5rem;
    padding-bottom: .5rem;
}

/* game_in_focus team names  (was h4 inside .world_cup_team) */
.world_cup_team .team-name {
    font-size: 1.375rem !important;
    font-weight: bold;
    margin-top: 0.75rem;
}

/* game_in_focus match card title  (was h3 inside .world_cup_match_wrap) */
.world_cup_match_wrap .world_match_card_title {
    font-weight: bold;
}

/* game_in_focus match place  (was h4.world_match_place — now p) */
.world_cup_match_wrap .world_match_place {
    font-weight: bold;
}

/* Sidebar block titles "Últimas noticias" / "Te interesa"  (was h2 inside .sidebarMain) */
.sidebarMain .sidebar-heading {
    font-size: 23px !important;
    font-weight: bold;
    color: #DD3333;
    border-bottom: 4px solid #DD3333;
    margin-bottom: 20px;
}

/* Sidebar post titles in CatTop  (was h3 inside .sidebarCatTop) */
.sidebarMain .sidebar-post-title {
    font-size: 20px !important;
    font-weight: bold;
    margin-top: 12px;
}

/* Sidebar post titles in CatBttm "Te interesa"  (was h3 inside .sidebarCatBttm) */
.sidebarMain .sidebarCatBttm .sidebar-bttm-title {
    font-size: 18px !important;
    font-weight: bold;
    color: #000;
    margin: 0;
}

/* Comments "Deja una respuesta" title  (was h3#reply-title — now p#reply-title) */
.single_main_comnt_form p#reply-title {
    color: var(--clr-red);
    font-weight: bold;
    margin-bottom: 0;
}

/* ── Responsive overrides (mirrors the @media blocks in update.css) ───────── */
@media (max-width: 1200px) {
    .top_slide_wrap.first_slide .slide_title .home-banner-main-title { font-size: 1.4rem !important; }
    .top_slide_wrap .slide_title .home-banner-title { font-size: 1.75rem; }
    .world_cup_content_wrap .featured-article-title { font-size: 3rem !important; }
    .world_cup_title_badge { font-size: 1.25rem; }
    .world_match_card_title { font-size: 1.625rem; }
    .world_match_place { font-size: 1rem; }
    p.last_sec_card_title { font-size: 2.25rem !important; }
    .latest_section_title .section-heading { font-size: 1.225rem !important; }
    .trending_news_title .trending-heading { font-size: 1.5rem !important; }
}
@media (max-width: 600px) {
    .world_cup_team .team-name { font-size: 1.25rem !important; }
}

/* ── Article page: "Lo más leído" block overrides ──────────────────────────── */
/* Title red + bigger; card titles, author, date smaller per SEO reviewer.    */
.single_wrap .section-heading {
    font-size: 2rem !important;
    color: #DD3333;
}
.single_wrap .last_sec_card_title {
    font-size: 1.5rem !important;
}
.single_wrap .last_sec_card_text,
.single_wrap .last_sec_card_date {
    font-size: 1rem !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   TASK 17 — Mobile UX & responsive layout fixes
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Global horizontal overflow prevention (fallback) ─────────────────── */
/* Primary fix: constrain individual elements below.
   html/body overflow-x:hidden acts only as a safety net per task spec. */
html {
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ── 2. Ad banner containers — contain injected creatives ────────────────── */
/* Banners from the ABNS SDK can inject fixed-pixel-width content.
   These rules contain them inside the wrapper without clipping important UI. */
.lcn-banner {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Each banner variant wrapper (desktop d-md-block / mobile d-md-none) */
.lcn-banner > div {
    overflow: hidden;
    max-width: 100%;
}

/* Center creative when it is narrower than the wrapper */
.lcn-banner > div > div {
    display: flex;
    justify-content: center;
    overflow: hidden;
    max-width: 100%;
}

/* Constrain any element the ad SDK injects */
.lcn-banner iframe,
.lcn-banner ins,
.lcn-banner > div > div > * {
    max-width: 100% !important;
}

/* Sidebar banner — always inside its column */
.lcn-banner-sidebar {
    max-width: 100%;
    overflow: hidden;
}
.lcn-banner-sidebar > div {
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.lcn-banner-sidebar iframe,
.lcn-banner-sidebar ins {
    max-width: 100% !important;
}

/* ── 3. Sidebar on tablets: force single-column until 1400 px ────────────── */
/* At the Bootstrap lg breakpoint (992 px) the container on single/archive
   pages is capped at 80 % of the viewport, so the col-lg-3 sidebar receives
   only ~200–280 px — too narrow for the 300 × 250 ABNS unit.
   Below 1400 px we revert to single-column (sidebar moves under content). */
@media (min-width: 992px) and (max-width: 1399px) {
    .single_wrap > .col-lg-9,
    .catMainInner > .col-lg-9 {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important; /* remove pe-lg-3 gap */
    }
    .single_wrap > .sidebarMain,
    .catMainInner > .sidebarMain {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-left: none !important;
        padding-left: 0 !important;
        margin-top: 2.5rem !important;
    }
}

/* At 1400 px+ the sidebar is wide enough (≥ 280 px) to hold the banner.
   Add an extra safety so the banner never pushes past its column edge. */
@media (min-width: 1400px) {
    .single_wrap > .sidebarMain,
    .catMainInner > .sidebarMain {
        overflow: hidden;
    }
}

/* ── 4. Category-page thumbnails — unified 16:9 aspect ratio ─────────────── */
/* Archive card structure:  .latest_slide_wrap > a > picture > img
   We set the <a> as a fixed-ratio box and make the image fill it via
   object-fit: cover so every card has identical image height. */
.catMainInner .latest_slide_wrap > a {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    width: 100%;
}
.catMainInner .latest_slide_wrap > a > picture {
    display: block;
    width: 100%;
    height: 100%;
}
.catMainInner .latest_slide_wrap > a > picture > img,
.catMainInner .latest_slide_wrap > a > img.img-fluid {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* override parent theme's fixed height rule */
    max-height: none !important;
}

/* ── 5. Lo más leído block thumbnails — unified 16:9 aspect ratio ────────── */
/* The bottom interlink block (formerly Te interesa, now Lo más leído) uses
   .last_sec_img > a > img.  Without a fixed ratio each card row changes
   height depending on the uploaded image proportions. */
.last_sec_img {
    overflow: hidden;
    width: 100%;
}
.last_sec_img > a {
    display: block !important; /* override Bootstrap d-flex on the element */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    width: 100%;
}
.last_sec_img > a > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ── General responsive image safety net ─────────────────────────────────── */
/* Catch any image not wrapped in Bootstrap's img-fluid that might overflow. */
.single_main_content img,
.single_main_content figure,
.single_main_content figure img {
    max-width: 100%;
    height: auto;
}
.single_main_content figure {
    overflow: hidden;
}

/* iframes in post content — reinforce max-width from parent theme */
.single_main_content iframe,
.single_main_content embed,
.single_main_content object {
    max-width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   TASK 18 — Manager review follow-ups (mobile pass 2)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Pagination overflow on narrow mobile viewports ───────────────────────
   .pagination items are 40×40 with 10 px gap (parent theme update.css:130-131).
   With prev + 5 numerics + dots + last + next ≈ 8 boxes → ~390 px, which
   overflows below ~400 px viewports. Allow wrap + shrink items at <480 px,
   and make the outer flex stack vertically so "Página X de Y" doesn't share
   the row at narrow widths. */
.paginationOuter {
    max-width: 100%;
    overflow: hidden;
}
.pagination {
    flex-wrap: wrap;
    row-gap: 8px;
    max-width: 100%;
}
@media (max-width: 575px) {
    .paginationOuter {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }
    .pagination {
        gap: 6px;
    }
    .pagination a,
    .pagination span {
        width: 34px !important;
        height: 34px !important;
        font-size: 16px !important;
    }
    .pagination span.page-numbers.dots {
        width: 16px !important;
        height: 30px !important;
    }
}
@media (max-width: 380px) {
    .pagination a,
    .pagination span {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }
}

/* ── 2. Home top banner: prevent first-slide title overflowing picture ───────
   On <450 px viewports the absolutely-positioned .slide_content_wrap pushes
   below the image when titles run long (manager-reported on top_home_banner
   first_slide). Two fixes:
   • Cap the first-slide title font and tighten line-height + padding.
   • At extra-narrow widths, drop position:absolute so the caption flows
     under the image on its own dark background (image stays clean). */
@media (max-width: 575px) {
    .top_slide_wrap.first_slide .slide_title .home-banner-main-title {
        font-size: 1.125rem !important;
        line-height: 1.15;
        margin-top: .25rem;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .top_slide_wrap .slide_title .home-banner-title {
        font-size: 1.25rem;
        line-height: 1.15;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .top_slide_wrap.first_slide .slide_content_wrap {
        padding: .75rem 1rem !important;
    }
    .top_slide_wrap .slide_content_wrap {
        padding: .75rem 1rem;
    }
}
@media (max-width: 450px) {
    /* Keep parent theme's absolute-over-image layout (position:static breaks
       first_slide h-100 stretching). Just tighten the caption further so a
       long title still fits inside the picture. */
    .top_slide_wrap {
        overflow: hidden; /* clip caption if a worst-case title still spills */
    }
    .top_slide_wrap.first_slide .slide_content_wrap,
    .top_slide_wrap .slide_content_wrap {
        padding: .625rem .875rem !important;
    }
    .top_slide_wrap.first_slide .slide_title .home-banner-main-title {
        font-size: 1.05rem !important;
    }
    .top_slide_wrap .slide_title .home-banner-title {
        font-size: 1.1rem !important;
    }
    .top_slide_wrap.first_slide .slide_info p,
    .top_slide_wrap .slide_info p {
        font-size: .8125rem !important;
    }
    .top_slide_wrap .slide_title .title_badge,
    .top_slide_wrap.first_slide .slide_title .title_badge {
        font-size: .875rem !important;
    }
}

/* ── 3. Comment submit button overflow on narrow viewports ───────────────────
   Parent theme sets input#submit { padding: 7px 20px; font-size: 20px } with
   no width constraint, so on ~360 px viewports the button can sit wider than
   the form column. Cap it to the column and allow it to shrink. */
.single_main_comnt_form .form-submit {
    max-width: 100%;
    overflow: hidden;
}
.single_main_comnt_form .form-submit input#submit {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
}
@media (max-width: 480px) {
    .single_main_comnt_form .form-submit input#submit {
        width: 100%;
        font-size: 17px !important;
        padding: 10px 14px !important;
    }
}

/* ── 4. Category-page banners: align horizontal & vertical widths ────────────
   Manager: on category pages at mobile/tablet, the in-content 728 banner
   (320 × 160 on mobile) and the sidebar 300 × 600 banner sit at very
   different widths once the sidebar drops below the content column. Cap
   both to a shared max-width (320 px) and centre them so they read as a
   matched pair. Only applies on category/archive pages (.catMainInner). */
@media (max-width: 991px) {
    .catMainInner .lcn-banner-728,
    .catMainInner .lcn-banner-sidebar {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    .catMainInner .lcn-banner-728 > div,
    .catMainInner .lcn-banner-sidebar > div {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}
/* When sidebar is forced below content at 992–1399 px (rule in §3 above) the
   same alignment applies — keep both ad units in a consistent column. */
@media (min-width: 992px) and (max-width: 1399px) {
    .catMainInner .lcn-banner-728,
    .catMainInner .lcn-banner-sidebar {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}