/*
 * DailyEdge.ie Static Archive — Responsive Overrides
 *
 * Injected into every archived page alongside:
 *   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 *
 * Purpose:
 *   1. Make the fixed 970px desktop layout fluid on all screen sizes
 *   2. Hide elements that don't function in a static archive
 */

/* Logo — force visible (legacy-common.css hides .color_logo, JS shows it but unreliable in archive) */
.masthead .publications li.main .color_logo {
    display: inline !important;
}

/* ==========================================================================
   1. DESKTOP — Full-width layout overrides
   ========================================================================== */

.postMain img,
.postMain img.inline-image {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* Constrain images that might overflow, but respect inline dimensions on river articles */
img {
    max-width: 100%;
}

.responsive-article .article .image {
    flex-shrink: 0 !important;
    width: 230px !important;
    height: 150px !important;
    overflow: hidden !important;
}

.responsive-article .article .image img {
    width: 230px !important;
    height: 150px !important;
    object-fit: cover !important;
}

div[style*="width: 970px"] {
    width: auto !important;
    max-width: 970px !important;
}

/* --- Fill available width within the 1010px container --- */

/* Logo item — stretch across the masthead bar now that sibling links are hidden */
.masthead .publications li.main {
    width: 100% !important;
}

/* Sidebar — show only the ad unit, hide everything else */
.sidebar.span-4 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    margin: 20px 0 !important;
    text-align: center !important;
}
.sidebar.span-4 > * {
    display: none !important;
}
.sidebar.span-4 > .advert.adserverad {
    display: block !important;
}

/* Main content column — expand to fill full container width */
.river.span-8 {
    width: 100% !important;
    max-width: 100% !important;
}

/* Top stories section — fill container */
.mainStory,
.mainStoryLeft,
.mainStory .primary,
.mainStory .primary.span-8 {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================================
   2. HIDE — Elements that don't belong in a static archive
   ========================================================================== */

/* Ads — kept for revenue. Only hide native ad sponsorbar (non-functional) */
#nativeads-sponsorbar {
    display: none !important;
}

/* Write a comment button + comments policy (non-functional in archive) */
a.big-button[href="#respond"],
#comments .policy {
    display: none !important;
}

/* Cookie / consent banners — hide leftover third-party CMP widgets only.
   #notify-container is intentionally NOT hidden: it is the archive's own
   functional cookie-consent notice (shown/hidden by archive-stubs.js). */
#onetrust-banner-sdk,
#onetrust-consent-sdk,
.cookie-consent,
#ot-sdk-btn-floating {
    display: none !important;
}

/* Email article / alert author forms + email share button */
#EmailArticle,
#AlertAuthor,
a.share-email {
    display: none !important;
}

/* App download widget */
.widget:has(.single_app_link) {
    display: none !important;
}
.single_app_link {
    display: none !important;
}

/* Contribution / membership prompts */
#contribution-prompt-overlay,
#contribution-prompt-article,
#become-member-prompt-overlay,
.contribution-prompt,
.become-member-prompt,
.contribution-prompt-wrapper-redesign {
    display: none !important;
}

/* Firebase auth UI */
#firebase-login,
.firebaseui-container {
    display: none !important;
}

/* Loading spinners */
img.loading {
    display: none !important;
}

/* Weather widget (live data, won't work in archive) */
.weather {
    display: none !important;
}

/* Embed textarea widgets */
#embedWide600,
#embedWide400,
#embedWide300,
.embed-codes {
    display: none !important;
}

/* Corrections / contribute to story section (including parent heading) */
.corrections,
.story_contribution,
.post_info {
    display: none !important;
}

/* Keep author block for SEO/EEAT, only hide correction/contribution links */
.articleExtraDetails .corrections,
.articleExtraDetails .story_contribution,
.articleExtraDetails .lightboxTrigger[href="#ReportContent"] {
    display: none !important;
}

/* Read next blocks (JS-populated, won't work in static archive) */
.read_next_block {
    display: none !important;
}

/* More stories wrapper (JS-populated) */
.more-stories-wrapper-csp {
    display: none !important;
}

/* --- NEW: Elements the client requested removed --- */

/* Journal / The 42 sidebar widgets */
.widgetFromOtherPublication,
.widgetTheJournal,
.widgetTheScore {
    display: none !important;
}

/* Search box (non-functional in static archive) */
.search,
#searchForm {
    display: none !important;
}

/* Trending tags bar */
.navigationTrendingTags {
    display: none !important;
}

/* Date display */
span.date {
    display: none !important;
}

/* --- Footer minimisation --- */

/* Server identifier */
#server_identifier {
    display: none !important;
}

/* Hide ALL footer columns (About Us, Follow Us, Corrections, Policies) */
#scroll-footer .span-2 {
    display: none !important;
}

/* Hide Legal / Press Council section */
.legal {
    display: none !important;
}

/* Copyright line — keep visible, full-width, centered */
#scroll-footer .copyright {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    float: none !important;
}

/* Hide footer sites bar and mobile switcher */
.footer-line {
    display: none !important;
}

/* Hide related publications bar (footer only, not masthead logo) */
#scroll-footer .publications,
.footer-line .publications {
    display: none !important;
}

/* Hide other publication links in masthead, keep only the main logo */
.masthead .publications li:not(.main) {
    display: none !important;
}

/* Hide comments block entirely */
#comments {
    display: none !important;
}

/* ==========================================================================
   3. MOBILE — Responsive layout at 700px breakpoint
   ========================================================================== */

@media (max-width: 700px) {

    html, body {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Body text */
    body {
        font-size: 18px !important;
        line-height: 1.6 !important;
    }

    /* Article content */
    .postMain,
    .postMain p,
    .postMain div {
        font-size: 18px !important;
        line-height: 1.6 !important;
    }

    /* Headings — scaled down from desktop sizes */
    .postMain h1,
    .postMainStoryPrimary h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .postMain h2 {
        font-size: 20px !important;
    }

    .postMain h3 {
        font-size: 18px !important;
    }

    /* Meta, tags, navigation text */
    .meta,
    .tags,
    .sectionSeparator {
        font-size: 14px !important;
    }

    /* Main layout containers → full width */
    .page-section,
    .masthead,
    .legal,
    .container,
    .mainContainer,
    .mainContent,
    .content,
    .river,
    .comments-side-panel,
    .postMain,
    .span-12,
    .today,
    .expandable {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* Content + sidebar columns → stack vertically */
    .span-8,
    .span-4 {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    .sidebar.span-4 {
        margin-top: 20px;
        clear: both;
    }

    /* Navigation — stack items */
    .navigation {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    .menu.tablecell {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    /* Category links (Celebs / Ireland / Skin Deep / Chats) — slightly
       smaller on mobile so they read better and fit the bar. */
    .navigation .menu a {
        font-size: 15px !important;
    }

    /* Article tags bar.
       The theme paints the "Tags" heading and the tag links white on a
       red gradient strip that is a fixed 30px tall (repeat-x only). On
       mobile the tags wrap onto extra rows, so the strip no longer covers
       them and the white text landed on the white page (unreadable, box
       overflowing). Force the bar to a solid brand-red background that
       grows with its content, and let the heading + tags wrap cleanly. */
    .sectionSeparator.dropdown,
    .dropdownTags {
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .sectionSeparator.dropdown.dropdownTags {
        background-color: #b8111a !important; /* theme red — matches border-color */
        background-image: none !important;    /* drop the fixed-height gradient strip; solid fills the wrapped bar */
        min-height: 30px !important;
        padding: 4px 10px 8px !important;
    }
    .dropdownTags > h3 {
        float: none !important;
        display: block !important;
        height: auto !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .dropdownTags .tags,
    .tags.tablecell {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px 8px !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
    }
    .tags.tablecell li {
        display: inline-block !important;
        white-space: nowrap !important;
        padding: 0 !important;
    }

    /* Top stories grid → stack vertically on mobile */
    .one-four {
        flex-direction: column !important;
    }
    .one-four .article {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    .mainStoryLeft .primary {
        width: 100% !important;
    }

    /* Article page — images fill width on mobile */
    .postMain img,
    .postMain img.inline-image,
    .postMain .photo img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* River article cards */
    .river .post {
        box-sizing: border-box !important;
    }
    .river .post img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* River article list — stack image above text on mobile */
    .responsive-article .article {
        flex-direction: column !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .responsive-article .article .image {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 8px !important;
    }
    .responsive-article .article .image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    .responsive-article .article .article-details {
        padding-left: 0 !important;
    }

    /* Inline style overrides */
    div[style*="width: 970px"],
    div[style*="width: 950px"],
    div[style*="width: 1010px"],
    center[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Footer copyright — smaller text on mobile */
    #scroll-footer .copyright {
        font-size: 12px !important;
        line-height: 1.4 !important;
        padding: 10px !important;
    }

    /* Author section — fit links within screen */
    .articleExtraDetails .author_details,
    .articleExtraDetails .contact_box {
        font-size: 13px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    .articleExtraDetails .contact_box a {
        font-size: 13px !important;
    }

}