/*
 * Page container: applies the responsive Margin/body-lr of the maquettes
 * (24 / 40 / 64 / 120 px) and caps the content at the widest maquette.
 */

.mo-container {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: var(--mo-margin-body-lr);
}

/* Vertical rhythm between the sections of a page. */
.mo-stack {
    display: flex;
    flex-direction: column;
    gap: var(--mo-spacing-md);
}

/*
 * Keyboard shortcut past the chrome, to the content (WCAG 2.1 SC 2.4.1). Off-screen until focused.
 * Shared: the portal jumps past the header and the menu, the back office past the navigation rail.
 */
.mo-skip-link {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 50%;
    padding: var(--mo-spacing-xs) var(--mo-spacing-sm);
    border-radius: 0 0 var(--mo-radius-md) var(--mo-radius-md);
    background-color: var(--mo-surface-action-dark);
    color: var(--mo-text-default-light);
    font-size: var(--mo-font-size-btn);
    font-weight: var(--mo-font-weight-bold);
    text-decoration: none;
    transform: translate(-50%, -150%);
}

.mo-skip-link:focus-visible {
    transform: translate(-50%, 0);
}

/* Hides an element visually while keeping it available to screen readers. */
.mo-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}