/* Layout fixes kept separate so structural regressions are easy to isolate. */

html, body { max-width: none !important; }

body.sf-front-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

/* Escape any global content wrapper around the classic PHP front page. */
body.sf-front-page main {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* All homepage sections are full-bleed; .sf-container controls inner content width. */
body.sf-front-page main > .sf-hero,
body.sf-front-page main > .sf-section,
body.sf-front-page main > .sf-cta {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
}

body.sf-front-page main > .sf-hero {
    position: relative !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Keep the actual content centered inside each full-width section. */
body.sf-front-page main > .sf-hero .sf-container,
body.sf-front-page main > .sf-section .sf-container,
body.sf-front-page main > .sf-cta .sf-container {
    width: min(calc(100% - 64px), var(--sf-container)) !important;
    max-width: var(--sf-container) !important;
    margin-inline: auto !important;
}

/* Inner pages use a normal, visible header instead of the hero overlay header. */
.sf-header--inner {
    position: relative;
    background: #171218;
    color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
}

.sf-header--inner .sf-brand__name,
.sf-header--inner .sf-brand__tagline,
.sf-header--inner .sf-menu a { color: #fff; }

.sf-header--inner .sf-menu-toggle span:not(.screen-reader-text) { background: #fff; }

@media (max-width: 960px) {
    .sf-header--inner { padding-top: 12px; padding-bottom: 8px; }
    body.sf-front-page main > .sf-hero .sf-container,
    body.sf-front-page main > .sf-section .sf-container,
    body.sf-front-page main > .sf-cta .sf-container {
        width: min(calc(100% - 32px), var(--sf-container)) !important;
    }
}