/*
    WEB:
    banner height on mobile     - 68px
    banner height on desktop    - 72px

    navbar height on mobile     - 64px
    navbar height on desktop    - 56px

    navbar top on mobile        - banner height on mobile   - 68px
    navbar top on desktop       - banner height on desktop  - 72px

    nav-sheet top on desktop    - banner height on desktop + navbar height on desktop   - 72px + 56px = 128px

    header mar-top on mobile    - banner height on mobile + navbar height on mobile     - 68px + 64px = 132px
    header mar-top on desktop   - banner height on desktop + navbar height on desktop   - 72px + 56px = 128px
*/

/*
    WEB-OVERLAY (>= lg):
    banner height on desktop    - 122px
    banner pad-top on desktop   - 50px

    navbar height on desktop    - 56px
    navbar top on desktop       - banner height on desktop  - 122px
    navbar pad-top on desktop   - 0 (reset)

    nav-sheet top on desktop    - banner height on desktop + navbar height on desktop   - 122px + 56px = 178px

    header mar-top on desktop   - banner height on desktop + navbar height on desktop   - 122px + 56px = 178px
*/

:root {
    --detector-banner-height: 0px;
}

@media(max-width: 1023px) {
    body:has(#dv-banner-alert) {
        --detector-banner-height: 68px;
    }
}

@media(min-width: 1024px) {
    body:has(#dv-banner-alert) {
        --detector-banner-height: 72px;
    }
}

@media(min-width: 1024px) and (display-mode: window-controls-overlay) {
    body:has(#dv-banner-alert) {
        --detector-banner-height: 122px;
    }
}

#dv-banner-alert {
    z-index: 1030 !important;
}

@media(max-width: 1023px) {
    #dv-banner-alert {
        height: 68px;
    }
}

@media(min-width: 1024px) {
    #dv-banner-alert {
        height: 72px;
    }
}

@media (display-mode: window-controls-overlay) /*and (min-width: 1024px)*/ {
    #dv-banner-alert {
        height: 122px !important;
        padding-top: 50px !important;
    }
}

/* SPECIAL HANDLING FOR ICON ALIGNMENT */
/* browser version */
@media(min-width: 1024px) {
    .icon-container:has(.icon-browser-version) {
        align-self: start;
    }
}

@media(min-width: 1179px) {
    .icon-container:has(.icon-browser-version) {
        align-self: center;
    }
}

/* timezone and browser */
@media(min-width: 1024px) {
    .icon-container:has(.icon-timezone-browser) {
        align-self: start;
    }
}

@media(min-width: 1392px) {
    .icon-container:has(.icon-timezone-browser) {
        align-self: center;
    }
}

/* timezone and browser version */
@media(min-width: 1024px) {
    .icon-container:has(.icon-timezone-browser-version) {
        align-self: start;
    }
}

@media(min-width: 1504px) {
    .icon-container:has(.icon-timezone-browser-version) {
        align-self: center;
    }
}

/* NAVBAR */
/* sm-md */
@media(max-width: 1023px) {
    body:has(#dv-banner-alert) > .navbar {
        top: 68px;
    }
}

/* >= lg */
@media(min-width: 1024px) {   
    body:has(#dv-banner-alert) > .navbar {
        top: 72px;
    }
}

/* >= lg and window-overlay */
@media (display-mode: window-controls-overlay) and (min-width: 1024px) {
    body:has(#dv-banner-alert) > .navbar {
        height: 56px !important;
        top: 122px !important;
        padding-top: 0 !important;
    }
}

@media (display-mode: window-controls-overlay) and (max-width: 1023px) {
    body:has(#dv-banner-alert) > .navbar {
        height: 64px !important;
        top: 122px !important;
        padding-top: 0 !important;
    }
}

/* NAV SHEET */
/* >= lg */
@media(min-width: 1024px) {
    body:has(#dv-banner-alert) > .nav-sheet {
        top: 128px;
    }
}

/* >= lg and window-overlay */
@media (display-mode: window-controls-overlay) and (min-width: 1024px) {
    body:has(#dv-banner-alert) > .nav-sheet {
        top: 178px !important;
    }
}

/* HEADER */
/* sm-md */
@media(max-width: 1023px) {
    body:has(#dv-banner-alert) > #main-home-start,
    body:has(#dv-banner-alert) > #main-home-user,
    body:has(#dv-banner-alert) > header {
        margin-top: 132px;
    }
}

/* >= lg */
@media(min-width: 1024px) {
    body:has(#dv-banner-alert) > #main-home-start,
    body:has(#dv-banner-alert) > #main-home-user,
    body:has(#dv-banner-alert) > header {
        margin-top: 128px;
    }
}

/* sm-md and window-overlay */
@media (display-mode: window-controls-overlay) and (max-width: 1023px) {
    body:has(#dv-banner-alert) > #main-home-start,
    body:has(#dv-banner-alert) > #main-home-user,
    body:has(#dv-banner-alert) > header {
        margin-top: 186px !important;
    }
}

/* >= lg and window-overlay */
@media (display-mode: window-controls-overlay) and (min-width: 1024px) {
    body:has(#dv-banner-alert) > #main-home-start,
    body:has(#dv-banner-alert) > #main-home-user,
    body:has(#dv-banner-alert) > header {
        margin-top: 178px !important;
    }

    /* HANDLING FOR HOME USER PAGE*/
    body:has(#dv-banner-alert) > #main-home-user > div.mt-9 {
        margin-top: 0 !important;
    }

    body:has(#dv-banner-alert) #art-self-help-card {
        top: 226px !important; /* 178 + 24 (mt) + 24 (pt) */
    }
}