/*
 * Header, navigation, breadcrumbs, sections and footer (docs/02 §2.3,
 * §7.1–7.2).
 */

/* ---------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------ */

.ru-header {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid var(--ru-color-border);
    background: var(--ru-color-bg);
}

.ru-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ru-space-2) var(--ru-space-5);
    min-height: var(--ru-header-height);
}

/* Temporary text wordmark until an official one is supplied (D-046, C-02). */
.ru-wordmark {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--ru-font-display);
    font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--ru-color-text);
    text-decoration: none;
    white-space: nowrap;
}

.ru-wordmark:hover {
    color: var(--ru-color-text);
}

/* Menu toggle (below lg): fixed size, so opening never shifts the layout. */
.ru-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--ru-space-3);
    min-width: 44px;
    min-height: 44px;
    padding: 0 0 0 var(--ru-space-2);
    border: 0;
    background: transparent;
    color: var(--ru-color-text);
    font-family: var(--ru-font-text);
    font-size: var(--ru-fs-50);
    font-weight: 600;
    letter-spacing: var(--ru-tracking-label);
    text-transform: uppercase;
}

.ru-nav-toggle__icon {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 7px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}

/* Navigation panel (offcanvas below lg, inline row from lg). */
.ru-nav {
    --bs-offcanvas-width: min(100%, 26rem);
    --bs-offcanvas-bg: var(--ru-color-bg);
    --bs-offcanvas-color: var(--ru-color-text);
    --bs-offcanvas-padding-x: var(--ru-gutter);
    --bs-offcanvas-padding-y: var(--ru-space-4);
    --bs-offcanvas-border-color: var(--ru-color-border);
}

.ru-nav .offcanvas-header {
    justify-content: space-between;
    gap: var(--ru-space-4);
    min-height: var(--ru-header-height);
    border-bottom: 1px solid var(--ru-color-border);
}

.ru-nav__title {
    margin: 0;
    font-family: var(--ru-font-display);
    font-size: 1.3rem;
    font-weight: 500;
}

.ru-nav__close {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ru-color-text);
    font-size: var(--ru-fs-50);
    font-weight: 600;
    letter-spacing: var(--ru-tracking-label);
    text-transform: uppercase;
}

.ru-nav__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ru-nav;
}

.ru-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ru-color-text);
    text-decoration: none;
}

/* Below lg the panel lists the pages large, with a quiet index number. */
@media (max-width: 991.98px) {
    .js .ru-nav__list {
        padding-top: var(--ru-space-5);
    }

    .js .ru-nav__list li {
        counter-increment: ru-nav;
        border-bottom: 1px solid var(--ru-color-border);
    }

    .js .ru-nav__link {
        display: flex;
        align-items: baseline;
        gap: var(--ru-space-4);
        width: 100%;
        padding: var(--ru-space-4) 0;
        font-family: var(--ru-font-display);
        font-size: 2rem;
        font-weight: 400;
        line-height: 1.1;
    }

    .js .ru-nav__link::before {
        content: counter(ru-nav, decimal-leading-zero);
        min-width: 1.75rem;
        font-family: var(--ru-font-text);
        font-size: var(--ru-fs-50);
        font-style: normal;
        font-weight: 600;
        letter-spacing: 0.08em;
        color: var(--ru-color-muted);
    }

    .js .ru-nav__link[aria-current="page"] {
        font-style: italic;
    }

    .js .ru-nav__link[aria-current="page"]::before {
        color: var(--ru-color-text);
    }

    .js .ru-nav__link[aria-current="page"]::after {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        margin-left: auto;
        align-self: center;
        border-radius: 50%;
        background: var(--ru-color-accent);
    }
}

/* From lg: a quiet uppercase row; a thin accent rule marks the current
   page and draws in on hover. */
@media (min-width: 992px) {
    .ru-header__inner {
        flex-wrap: nowrap;
        min-height: 5.5rem;
    }

    .ru-nav__list {
        flex-direction: row;
        gap: clamp(1.25rem, 0.5rem + 1.5vw, 2.5rem);
    }

    .ru-nav__link {
        font-size: var(--ru-fs-50);
        font-weight: 600;
        letter-spacing: var(--ru-tracking-label);
        text-transform: uppercase;
    }

    .ru-nav__link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.7rem;
        height: 1px;
        background: var(--ru-color-accent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 300ms var(--ru-ease);
    }

    .ru-nav__link:hover::after,
    .ru-nav__link[aria-current="page"]::after {
        transform: scaleX(1);
    }
}

/* Without JavaScript the offcanvas cannot open, so below lg the menu
   stays an inline list and the toggle is hidden (progressive enhancement). */
@media (max-width: 991.98px) {
    .no-js .ru-nav-toggle {
        display: none;
    }

    .no-js .ru-nav.offcanvas-lg {
        position: static;
        visibility: visible;
        width: 100%;
        transform: none;
        border: 0;
        background: transparent;
        color: inherit;
    }

    .no-js .ru-nav .offcanvas-header {
        display: none;
    }

    .no-js .ru-nav .offcanvas-body {
        padding: 0 0 var(--ru-space-3);
    }

    .no-js .ru-nav__list {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: var(--ru-space-5);
    }

    .no-js .ru-nav__link {
        font-size: var(--ru-fs-50);
        font-weight: 600;
        letter-spacing: var(--ru-tracking-label);
        text-transform: uppercase;
    }

    .no-js .ru-nav__link[aria-current="page"] {
        text-decoration: underline;
        text-decoration-color: var(--ru-color-accent);
    }
}

/* Homepage: the header sits on the dark hero (ivory on night, 17:1). The
   offcanvas panel keeps its light ground, so only the bar is recoloured. */
.ru-header--overlay {
    position: absolute;
    inset: 0 0 auto;
    border-bottom-color: rgb(247 243 236 / 0.14);
    background: transparent;
}

.ru-header--overlay .ru-wordmark,
.ru-header--overlay .ru-wordmark:hover,
.ru-header--overlay .ru-nav-toggle {
    color: var(--ru-neutral-100);
}

.ru-header--overlay :focus-visible {
    outline-color: var(--ru-color-focus-on-dark);
}

@media (min-width: 992px) {
    .ru-header--overlay .ru-nav__link {
        color: var(--ru-neutral-100);
    }
}

/* Without JavaScript the inline menu can wrap to two rows on phones, so
   the bar takes its own space on the dark ground instead of overlapping
   the hero title. */
@media (max-width: 991.98px) {
    .no-js .ru-header--overlay {
        position: relative;
        background: var(--ru-color-dark);
    }

    .no-js .ru-header--overlay .ru-nav__link {
        color: var(--ru-neutral-100);
    }

    .no-js .ru-header--overlay ~ .ru-main .ru-hero {
        padding-top: clamp(3rem, 2rem + 4vw, 6rem);
    }
}

/* ---------------------------------------------------------------------
 * Main and breadcrumbs
 * ------------------------------------------------------------------ */

.ru-main {
    display: block;
    min-height: 50vh;
}

.ru-breadcrumbs {
    padding-top: var(--ru-space-5);
}

.ru-breadcrumbs .breadcrumb {
    --bs-breadcrumb-divider-color: var(--ru-neutral-400);
    --bs-breadcrumb-item-padding-x: var(--ru-space-3);
    margin: 0;
    font-size: var(--ru-fs-50);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ru-breadcrumbs .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.ru-breadcrumbs a {
    color: var(--ru-color-muted);
    text-decoration: none;
}

.ru-breadcrumbs a:hover {
    color: var(--ru-color-text);
    text-decoration: underline;
    text-decoration-color: var(--ru-color-accent);
}

.ru-breadcrumbs .breadcrumb-item.active {
    color: var(--ru-color-text);
    overflow: hidden;
    max-width: 40ch;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Sections: editorial rhythm (≥ 56 px mobile, ≥ 96 px desktop)
 * ------------------------------------------------------------------ */

.ru-section {
    padding: var(--ru-section-space) 0;
}

.ru-section--alt {
    background: var(--ru-color-surface-alt);
}

.ru-section--dark {
    background: var(--ru-color-dark);
    color: var(--ru-neutral-100);
}

.ru-section__title {
    margin: 0;
}

/* Section head: eyebrow + title on the left, an optional link on the right. */
.ru-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ru-space-4) var(--ru-space-6);
    margin-bottom: clamp(2rem, 1.4rem + 2.5vw, 4rem);
}

.ru-section-head__intro {
    max-width: 40rem;
}

.ru-section-head__intro .ru-lead {
    margin: var(--ru-space-4) 0 0;
}

/* ---------------------------------------------------------------------
 * Footer: dark ground; accents meet AA here (docs/02 §2.1)
 * ------------------------------------------------------------------ */

.ru-footer {
    padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0 var(--ru-space-6);
    background: var(--ru-color-dark);
    color: var(--ru-night-soft);
    font-size: var(--ru-fs-100);
}

.ru-footer a {
    color: var(--ru-neutral-100);
    text-decoration: none;
}

.ru-footer a:hover {
    color: var(--ru-ochre);
}

.ru-footer__top {
    display: grid;
    gap: var(--ru-space-7) var(--ru-space-6);
}

.ru-footer__name {
    margin: 0;
    max-width: 12ch;
    font-family: var(--ru-font-display);
    font-size: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ru-neutral-100);
}

.ru-footer__tagline {
    margin: var(--ru-space-4) 0 0;
    max-width: 32ch;
}

.ru-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--ru-space-6);
}

.ru-footer__heading {
    margin: 0 0 var(--ru-space-3);
    font-size: var(--ru-fs-50);
    font-weight: 600;
    letter-spacing: var(--ru-tracking-label);
    text-transform: uppercase;
    color: var(--ru-night-muted);
}

.ru-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ru-footer__list a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}

.ru-footer__contact {
    margin: 0;
    font-style: normal;
    line-height: 1.9;
}

.ru-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ru-space-3);
    margin-top: clamp(3rem, 2rem + 4vw, 6rem);
    padding-top: var(--ru-space-4);
    border-top: 1px solid rgb(185 174 159 / 0.22);
}

.ru-footer__copyright {
    margin: 0;
    color: var(--ru-night-muted);
}

.ru-footer__totop {
    display: inline-flex;
    align-items: center;
    gap: var(--ru-space-2);
    min-height: 44px;
    font-size: var(--ru-fs-50);
    font-weight: 600;
    letter-spacing: var(--ru-tracking-label);
    text-transform: uppercase;
}

@media (min-width: 992px) {
    .ru-footer__top {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: start;
    }
}