/**
 * Compatibility layer between IMH critical.css and Cachet 3 / Tailwind.
 * Prevents unscoped IMH .container rules from breaking the status page layout.
 */

/* IMH header is not position:sticky here — kill legacy sticky-nav body offsets */
body:not(.no-sticky),
body.no-sticky,
body {
    padding-top: 0 !important;
}

@media screen and (min-width: 1200px) {
    body:not(.no-sticky),
    body.no-sticky,
    body {
        padding-top: 0 !important;
    }
}

html {
    color-scheme: light only;
}

main.status-page.container,
main.container.mx-auto {
    display: flex !important;
    height: auto !important;
    max-width: 64rem !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    flex-direction: column !important;
    position: relative !important;
    grid-template-columns: none !important;
}

@media (min-width: 640px) {
    main.status-page.container,
    main.container.mx-auto {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    main.status-page.container,
    main.container.mx-auto {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Ensure IMH chrome sits above Cachet content stacking context when needed */
#imh-main-menu {
    position: relative;
    z-index: 50;
    width: 100%;
}

#imh-footer-navigation,
#imh-bottom-footer {
    width: 100%;
}

/* Hero banner used on the status index */
.imh-hero {
    width: 100%;
}

/*
 * IMH critical/imh-styles.css target bare h1–h4, p, and hyphens globally.
 * Those rules beat Tailwind's layered utilities. Revert typography inside
 * Cachet content so status/incident styles apply; leave header/hero/footer alone.
 */
@layer utilities {
    :where(body.status-page main, body.status-page .container.mx-auto) {
        hyphens: manual;
        overflow-wrap: break-word;
    }

    :where(body.status-page main, body.status-page .container.mx-auto) :where(h1, h2, h3, h4, h5, h6) {
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        color: inherit;
        text-align: inherit;
        margin-top: 0;
        margin-bottom: 0;
        hyphens: manual;
    }

    :where(body.status-page main, body.status-page .container.mx-auto) :where(p, a, li, ul, ol) {
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        hyphens: manual;
        text-align: inherit;
    }
}