/*
    Styling for takeover ads
*/

.hifide-takeover-stage,
.hifide-takeover-content {
    display: contents;
}

.hifide-takeover-content::before,
.hifide-takeover-content::after {
    display: none;
}

.hifide-takeover-background {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto;
    background-attachment: scroll;
}

@media (min-width: 1024px) {
    .hifide-takeover--active {
        display: flow-root;
        position: relative;
    }

    .hifide-takeover--active > .hifide-takeover-background:not([hidden]) {
        display: block;
        margin-top: -5px; /* Compensate the header bottom margin */
    }

    .hifide-takeover--active .container {
        margin-left: auto;
        margin-right: auto;
    }

    .hifide-takeover--active > .hifide-takeover-content {
        display: flow-root;
        position: relative;
        z-index: 1;
        padding: 0;
        background-color: #fff;
    }

    .hifide-takeover--active > .ad-header-outer-wrap {
        position: relative;
        z-index: 1;
        margin-left: 0;
        pointer-events: none;
    }

    .hifide-takeover--active > .ad-header-outer-wrap > .container {
        width: auto;
    }

    .hifide-takeover--active > .ad-header-outer-wrap iframe {
        pointer-events: auto;
    }

    .hifide-takeover--active .page-outerwrap.center-content {
        margin-left: 0;
    }

    .hifide-takeover--active ~ .hifide-external-ad {
        display: none !important;
    }
}