/*
 * Wide layout for the common navigation and footer.
 * Articles keep their existing narrow reading column.
 * All wide editorial elements share a maximum width of 1160px.
 */
:root {
    --wj-site-wide-width: 1160px;
    --wj-site-wide-gutter: clamp(1.15rem, 3.4vw, 2.25rem);
}

.site-header > .site-header__inner.site-shell,
.site-header .site-nav-panel > .site-shell,
.site-footer > .site-footer__inner.site-shell {
    width: 100%;
    max-width: var(--wj-site-wide-width);
    margin-inline: auto;
    padding-inline: var(--wj-site-wide-gutter);
}

.site-header::after {
    width: min(var(--wj-site-wide-width), 100%);
    max-width: none;
}

@media (min-width: 48rem) {
    .site-header__inner > .site-nav {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    .site-header .site-nav__list {
        max-width: 100%;
        margin-inline: auto;
        justify-content: center;
    }
}

@media (max-width: 47.99rem) {
    .site-header > .site-header__inner.site-shell,
    .site-header .site-nav-panel > .site-shell,
    .site-footer > .site-footer__inner.site-shell {
        padding-inline: max(
            1.15rem,
            env(safe-area-inset-left)
        ) max(
            1.15rem,
            env(safe-area-inset-right)
        );
    }
}