/* ==========================================================================
   Components — the pieces every surface shares
   Buttons, the site header and navigation, the site footer, section headings,
   statistics and the status page. A module never restyles these; if a button
   is wrong, it is wrong here.
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.9375rem 1.875rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
        background-color var(--transition-fast), color var(--transition-fast);
}

.button:hover {
    transform: translateY(-3px);
}

.button--sm {
    padding: 0.6875rem 1.375rem;
    font-size: var(--text-sm);
}

/* A button with only its icon, square and as tall as a .button--sm beside it (38px). */
.button--icon {
    flex: none;
    width: 2.375rem;
    height: 2.375rem;
    padding: 0;
    gap: 0;
    justify-content: center;
}

/* The design's accent pill is #B07C57, which gives cream label text only
   3.30:1. The same hue one step darker reaches 4.85:1 and keeps the pill. */
.button--primary {
    background: var(--color-accent-text);
    color: var(--color-ink-inverse);
}

.button--primary:hover {
    background: var(--color-accent-strong);
    color: var(--color-ink-inverse);
    box-shadow: var(--shadow-raise);
}

.button--ink {
    background: var(--color-ink);
    color: var(--color-ink-inverse);
}

.button--ink:hover {
    color: var(--color-ink-inverse);
    box-shadow: var(--shadow-raise);
}

.button--ghost {
    border-color: var(--color-border-strong);
    color: var(--color-ink);
}

.button--ghost:hover {
    background: var(--color-surface-warm);
    color: var(--color-ink);
}

.button--accent-light {
    background: var(--color-accent-light);
    color: var(--color-ink);
    font-weight: var(--weight-bold);
}

.button--accent-light:hover {
    color: var(--color-ink);
    box-shadow: var(--shadow-badge);
}

.button--outline-dark {
    border-color: var(--color-border-dark-strong);
    color: var(--color-ink-inverse);
    font-weight: var(--weight-bold);
}

.button--outline-dark:hover {
    background: #3A342E;
    color: var(--color-ink-inverse);
}

/* --- Form fields -------------------------------------------------------- */
/* From the design's newsletter input: a white pill with a warm border.
   Labels are always visible — the design relied on the placeholder alone,
   which disappears the moment someone starts typing. */

.field {
    display: grid;
    gap: var(--space-2);
}

.field__label {
    color: var(--color-ink);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.input {
    width: 100%;
    padding: 0.9375rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    font-size: var(--text-sm);
    line-height: 1.2;
}

.input::placeholder {
    color: var(--color-placeholder);
    opacity: 1;
}

.input:focus-visible {
    border-color: var(--color-accent-strong);
    border-radius: var(--radius-pill);
}

.input[aria-invalid="true"] {
    border-color: var(--color-danger);
}

/* --- Icons ---------------------------------------------------------------- */
/* Shared here (not in portal.css) so a public-site dropdown (see .select
   below) can carry the exact same chevron as the portal's own. */

.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon--sm {
    width: 1rem;
    height: 1rem;
}

/* The icon set (partials/portal-icons.php), drawn once per page and never shown itself. */
.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* The browser's own arrow sits hard against the edge and cannot turn. A script
   wraps each dropdown in .select and lays the chevron on it, in the colour and
   stroke of every other icon, turning it up while the list is open (portal.js
   for the portal, site.js's own copy of the same behaviour for the public
   site). Without the script the browser's arrow stays. */
.select {
    position: relative;
    display: block;
}

.select > select.input {
    appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
}

.select__icon {
    position: absolute;
    top: 50%;
    right: 0.875rem;
    margin-top: -0.5rem;
    color: var(--color-ink);
    transition: transform var(--transition-fast);
    pointer-events: none;
}

.select--open .select__icon {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .select__icon {
        transition: none;
    }
}

/* --- Alerts ------------------------------------------------------------- */

.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    font-size: var(--text-sm);
}

.alert--error {
    background: var(--color-danger-surface);
    border-left: 3px solid var(--color-danger);
}

/* Not in the design either; the Travel green's family, kept quiet. */
.alert--success {
    background: #E3ECDD;
    border-left: 3px solid var(--color-travel);
}

/* --- Site header -------------------------------------------------------- */

.site-header {
    position: relative;
    z-index: 50;
    background: var(--color-canvas);
    border-bottom: 1px solid var(--color-border);
    transition: padding var(--transition), box-shadow 0.25s ease,
        border-color var(--transition);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: var(--space-5) var(--shell-gutter);
}

.site-header__brand {
    display: flex;
    align-items: center;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-brand);
    font-weight: var(--weight-medium);
    letter-spacing: 0.02em;
}

.site-header__brand:hover {
    color: var(--color-accent-strong);
}

.site-header__logo {
    display: block;
    height: 2.25rem;
    width: auto;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.site-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
}

.site-nav__icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--color-ink);
}

.site-nav__badge {
    position: absolute;
    top: -0.5rem;
    right: -0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-ink-inverse);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    line-height: 1;
}

.site-nav__link {
    display: inline-block;
    padding-block: var(--space-1);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.site-nav__link:hover {
    color: var(--color-accent-strong);
}

.site-nav__link--current {
    color: var(--color-accent-text);
}

/* --- The account menu in the header (partials/account-menu.php) ---------- */
/* A plain person icon, read like one of the navigation's links; once signed
   in the first name and a chevron follow it. A native <details> opening a
   small panel under it. After the navigation in the markup, 24px from it and
   12px left of the donate button (.site-header__cta); on a phone it moves
   before the menu button, so it stays in view with the navigation folded. */

.account-menu {
    position: relative;
}

.account-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 1.5rem;
    min-height: 2.75rem;
    color: var(--color-ink);
    list-style: none;
    cursor: pointer;
    transition: color var(--transition);
}

/* Signed out: the icon alone, centred in a target large enough to tap. */
.account-menu__trigger--link {
    justify-content: center;
}

.account-menu__trigger::-webkit-details-marker {
    display: none;
}

.account-menu__trigger:hover,
.account-menu[open] > .account-menu__trigger {
    color: var(--color-accent-strong);
}

.account-menu__icon {
    flex: none;
}

.account-menu__name {
    max-width: 9rem;
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu__chevron {
    color: var(--color-text-muted);
    transition: transform var(--transition);
}

.account-menu[open] .account-menu__chevron {
    transform: rotate(180deg);
}

.account-menu__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 60;
    width: 15rem;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-header);
}

.account-menu__list {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-menu__divided {
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px solid var(--color-border);
}

.account-menu__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}

.account-menu__link:hover,
.account-menu__link[aria-current="page"] {
    background: var(--color-surface-warm);
    color: var(--color-accent-text);
}

.account-menu__link .icon {
    color: var(--color-text-muted);
}

.account-menu__link:hover .icon,
.account-menu__link[aria-current="page"] .icon {
    color: inherit;
}

/* Shown from 48rem; below it the donate button is the one in the navigation. */
.site-header__cta {
    display: none;
}

/* On a phone only the icon, before the menu button, in a target large enough
   to tap: the name would crowd the row. */
@media (max-width: 47.99rem) {
    .account-menu__trigger {
        justify-content: center;
        min-width: 2.75rem;
    }

    .account-menu__name,
    .account-menu__chevron {
        display: none;
    }

    /* Close to the menu button: the row's 16px gap would leave a wide hole
       between two icons that each sit in a 44px target. */
    .site-header__inner > .account-menu,
    .site-header__inner > .account-menu__trigger {
        order: 1;
        margin-right: calc(-1 * var(--space-3));
    }

    .site-header__inner > .site-header__toggle {
        order: 2;
    }

    .site-header__inner > .site-nav {
        order: 3;
    }
}

@media (min-width: 48rem) {
    .site-header__inner > .site-nav {
        margin-left: auto;
    }

    /* With the row's own 16px gap: 24px from the navigation, 12px from the donate button. */
    .site-header__inner > .account-menu,
    .site-header__inner > .account-menu__trigger {
        margin-right: calc(var(--space-3) - var(--space-4));
        margin-left: var(--space-2);
    }

    .site-nav__cta {
        display: none;
    }

    .site-header__cta {
        display: inline-flex;
    }
}

/* The menu button exists only once site.js has added it (so without JavaScript
   the navigation simply wraps) and only on narrow screens. */
.site-header__toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
}

.site-header__toggle-bar {
    display: block;
    width: 1.25rem;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header--open .site-header__toggle-bar:nth-child(1) {
    transform: translateY(calc(0.3rem + 2px)) rotate(45deg);
}

.site-header--open .site-header__toggle-bar:nth-child(2) {
    opacity: 0;
}

.site-header--open .site-header__toggle-bar:nth-child(3) {
    transform: translateY(calc(-0.3rem - 2px)) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .site-header__toggle-bar {
        transition: none;
    }
}

@media (max-width: 47.99rem) {
    /* Once site.js has folded the navigation behind its button the header is one
       short row, so it can stay in view here too. Without the script the list
       wraps over several rows and stays in the page instead. */
    .site-header--collapsible {
        position: sticky;
        top: 0;
    }

    /* An open menu never reaches past the screen: taller, it scrolls inside. */
    .site-header--collapsible.site-header--open {
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .site-header--collapsible.site-header--scrolled {
        border-color: transparent;
        box-shadow: var(--shadow-header);
    }

    /* A jump to an anchor lands below the header rather than under it. */
    html {
        scroll-padding-top: 5rem;
    }

    .site-header--collapsible .site-header__toggle {
        display: inline-flex;
    }

    .site-header--collapsible .site-header__inner {
        padding-block: var(--space-3);
    }

    /* The name may wrap rather than push the button onto a second row. */
    .site-header--collapsible .site-header__brand {
        flex: 1 1 0;
        min-width: 0;
    }

    .site-header--collapsible .site-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: var(--space-4);
        padding-bottom: var(--space-3);
    }

    .site-header--collapsible.site-header--open .site-nav {
        display: flex;
    }

    .site-header--collapsible .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-header--collapsible .site-nav__link {
        display: block;
        padding-block: var(--space-3);
        font-size: var(--text-base, 1rem);
    }

    .site-header--collapsible .site-nav__icon-link {
        align-self: flex-start;
    }

    .site-header--collapsible .site-nav__cta {
        align-self: flex-start;
    }
}

/* --- Site footer -------------------------------------------------------- */

.site-footer {
    background: var(--color-surface-dark);
    color: var(--color-ink-inverse);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10) var(--space-6);
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: var(--space-14) var(--shell-gutter) var(--space-10);
}

.site-footer__brand-column {
    grid-column: 1 / -1;
}

.site-footer__brand {
    display: inline-block;
    color: var(--color-ink-inverse);
    font-family: var(--font-display);
    font-size: var(--text-brand);
    line-height: 1.15;
}

.site-footer__brand:hover {
    color: var(--color-accent-light);
}

.site-footer__logo {
    display: block;
    width: auto;
    height: 2.5rem;
    max-width: 100%;
}

.site-footer__tagline {
    max-width: 19rem;
    margin-top: var(--space-2);
    color: var(--color-text-on-dark-muted);
    font-size: var(--text-xs);
    line-height: 1.65;
}

.site-footer__heading {
    margin-bottom: var(--space-3);
    color: var(--color-meta-on-dark);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-xs);
}

.site-footer__link {
    color: var(--color-link-on-dark);
}

.site-footer__link:hover {
    color: var(--color-accent-light);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.site-footer__social {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.site-footer__social-link {
    display: inline-flex;
    color: var(--color-link-on-dark);
}

.site-footer__social-link:hover {
    color: var(--color-accent-light);
}

/* The rule spans the whole footer; only its content is held to the shell width. */
.site-footer__bar {
    border-top: 1px solid var(--color-border-dark);
}

.site-footer__bar-inner {
    display: grid;
    justify-items: start;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: var(--space-5) var(--shell-gutter);
}

/* The language menu, in the middle of the bottom bar (first in it on a phone):
   a native <details> whose panel opens upwards, since it sits at the very
   bottom of the page. The button is as quiet as the text beside it; the panel a
   plain, tight list in the footer's own dark tones. Only while more than one
   language is public. */
.language-menu {
    position: relative;
    display: inline-block;
}

/* On a phone the bar is one left-aligned column: the language first, where it
   is found without reading past the small print, then the copyright and host. */
.site-footer__bar-inner .language-menu {
    order: -1;
}

.language-menu__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    color: var(--color-meta-on-dark);
    font-size: var(--text-2xs);
    cursor: pointer;
    list-style: none;
    transition: color 0.15s ease;
}

.language-menu__button::-webkit-details-marker {
    display: none;
}

.language-menu__button:hover,
.language-menu[open] .language-menu__button {
    color: var(--color-ink-inverse);
}

.language-menu__button:focus-visible {
    outline: 2px solid var(--color-accent-light);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.language-menu__icon,
.language-menu__chevron {
    flex: none;
}

.language-menu__chevron {
    transform: rotate(180deg);
    transition: transform 0.15s ease;
}

.language-menu[open] .language-menu__chevron {
    transform: none;
}

.language-menu__list {
    position: absolute;
    bottom: calc(100% + var(--space-2));
    left: 0;
    z-index: 5;
    min-width: 10rem;
    margin: 0;
    padding: var(--space-1) 0;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-xs);
    background: var(--color-surface-dark-raised);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
    list-style: none;
}

.language-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    color: var(--color-text-on-dark-muted);
    font-size: var(--text-2xs);
}

.language-menu__link:hover,
.language-menu__link:focus-visible {
    background: rgba(250, 245, 239, 0.06);
    color: var(--color-ink-inverse);
}

.language-menu__link--current {
    color: var(--color-ink-inverse);
}

.language-menu__check {
    flex: none;
    color: var(--color-accent-light);
}

@media (prefers-reduced-motion: reduce) {
    .language-menu__button,
    .language-menu__chevron {
        transition: none;
    }
}

.site-footer__meta {
    color: var(--color-meta-on-dark);
    font-size: var(--text-2xs);
}

.site-footer__hosting-link {
    color: var(--color-accent-light);
    font-weight: var(--weight-semibold);
}

.site-footer__hosting-link:hover {
    color: var(--color-ink-inverse);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* --- Section heading ---------------------------------------------------- */

.section-head {
    margin-bottom: var(--space-8);
}

.section-head__title {
    font-size: var(--text-section);
}

.section-head__rule {
    display: block;
    width: 3.5rem;
    height: 2px;
    margin-top: var(--space-4);
    background: var(--color-accent-light);
}

/* --- Statistic ---------------------------------------------------------- */

.stat {
    padding: var(--space-8) var(--space-5);
    background: var(--color-canvas);
    border-radius: var(--radius-md);
    text-align: center;
    transition: transform var(--transition);
}

.stat:hover {
    transform: translateY(-5px);
}

.stat__value {
    display: block;
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--text-display);
    line-height: 1;
}

.stat__value--word {
    font-size: var(--text-section);
    line-height: 1.3;
}

.stat__label {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

/* --- Status page -------------------------------------------------------- */

.status__inner {
    padding-block: var(--section-gap);
    text-align: center;
}

.status__title {
    font-size: var(--text-display);
}

.status__body {
    max-width: 34rem;
    margin: var(--space-4) auto var(--space-8);
    font-size: var(--text-lead);
}

/* --- Cookie consent ------------------------------------------------------ */
/* The cookie notice (partials/cookie-consent.php) and the standing /cookies/
   preferences page share the category fieldset from
   partials/cookie-consent-fields.php, so its rules serve both. The notice is a
   floating card centred at the bottom: the buttons below the text on a phone and
   a tablet, beside it from 64rem, so the text keeps to two lines. Refusing
   and accepting are two filled buttons of the same size. */

.cookie-consent {
    position: fixed;
    left: 50%;
    bottom: var(--space-4);
    z-index: 30;
    width: calc(100vw - (2 * var(--space-4)));
    max-width: 62rem;
    transform: translateX(-50%);
    background: var(--color-surface);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
}

.cookie-consent__form {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    max-height: calc(100vh - (4 * var(--space-4)));
    overflow-y: auto;
}

.cookie-consent__text {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.cookie-consent__title {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: var(--weight-regular);
}

.cookie-consent__body {
    color: var(--color-text);
    font-size: var(--text-xs);
    line-height: 1.55;
}

.cookie-consent__legal {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.cookie-consent__legal-link {
    color: var(--color-ink);
    font-weight: var(--weight-bold);
    text-decoration: none;
}

.cookie-consent__legal-link:hover,
.cookie-consent__legal-link:focus-visible {
    color: var(--color-accent-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.cookie-consent__categories {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-3) 0 0;
    padding: 0;
    border: 0;
}

.cookie-consent__category {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.cookie-consent__category:first-child {
    padding-top: 0;
    border-top: 0;
}

.cookie-consent__category-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.cookie-consent__checkbox {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    accent-color: var(--color-accent);
}

.cookie-consent__category-description {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* Refuse and accept equally wide and equally styled: one above the other on a
   narrow phone, where "Alleen noodzakelijk" would otherwise break over two
   lines, side by side from 30rem. */
.cookie-consent__actions {
    display: grid;
    gap: var(--space-2);
}

@media (min-width: 30rem) {
    .cookie-consent__actions {
        grid-template-columns: 1fr 1fr;
    }
}

.cookie-consent__actions .button {
    width: 100%;
}

/* "Opslaan" on the /cookies/ page, where the categories are shown one by one,
   on a row of its own below the two choices. */
.cookie-consent__save {
    grid-column: 1 / -1;
}

/* Text and buttons side by side only once the notice has its full width, where
   the text still fits on two lines. */
@media (min-width: 64rem) {
    .cookie-consent__form {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-6);
    }

    .cookie-consent__actions .button {
        min-width: 9.5rem;
        padding-inline: var(--space-5);
    }
}

.cookie-preferences {
    padding-block: var(--section-gap);
    max-width: 40rem;
}

.cookie-preferences__title {
    font-size: var(--text-title);
}

.cookie-preferences__intro {
    margin-top: var(--space-3);
    color: var(--color-text);
}

.cookie-preferences form {
    margin-top: var(--space-8);
}

.cookie-preferences .cookie-consent__actions {
    margin-top: var(--space-6);
}

/* ==========================================================================
   Wider viewports
   ========================================================================== */

@media (min-width: 48rem) {
    /* Always sticky from here, where the navigation is one row. On a narrow
       screen it is sticky once site.js has folded it (above). */
    .site-header {
        position: sticky;
        top: 0;
        background: rgba(250, 245, 239, 0.92);
        -webkit-backdrop-filter: saturate(1.2) blur(8px);
        backdrop-filter: saturate(1.2) blur(8px);
    }

    /* Condensing the header must not move the page under it: a shorter header would
       pull the content up, change the scroll position and, near the threshold, flip the
       header back and forth. The margin keeps the space it takes in the page the same,
       the padding it gave up (twice the difference, top and bottom). */
    .site-header--scrolled {
        margin-bottom: calc(2 * (var(--space-5) - var(--space-3)));
        border-color: transparent;
        box-shadow: var(--shadow-header);
    }

    .site-header--scrolled .site-header__inner {
        padding-block: var(--space-3);
    }

    .site-footer__inner {
        grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
    }

    .site-footer__brand-column {
        grid-column: auto;
    }

    .site-footer__bar-inner {
        grid-template-columns: 1fr auto 1fr;
    }

    .site-footer__bar-inner .language-menu {
        order: 0;
    }

    /* Centred under its button once the menu sits in the middle of the bar. */
    .site-footer__bar-inner .language-menu__list {
        left: 50%;
        transform: translateX(-50%);
    }

    .site-footer__bar-inner > :first-child {
        justify-self: start;
    }

    .site-footer__bar-inner > :last-child {
        grid-column: 3;
        justify-self: end;
        text-align: right;
    }

    .cookie-preferences .cookie-consent__actions {
        flex-direction: row;
    }

    .cookie-preferences .cookie-consent__actions .button {
        width: auto;
    }
}

@media (min-width: 64rem) {
    .site-header__inner {
        padding-block: 1.625rem;
    }

    .site-header--scrolled {
        margin-bottom: calc(2 * (1.625rem - var(--space-3)));
    }

    .site-nav {
        gap: var(--space-7);
    }

    .site-nav__list {
        gap: 1.875rem;
    }
}

/* --- Popups (modal dialogs) ----------------------------------------------- */
/* Opened by linking to their id; CSS :target shows them, so they work without
   JavaScript. portal.js adds Escape to close and moves focus inside, on
   portal pages; a public page gets the same open/close behaviour from plain
   anchor navigation, just without that polish. Shared here (not in
   portal.css) because both the admin and the public site use modals now. */

.modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh var(--space-4) var(--space-4);
    overflow-y: auto;
}

.modal:target {
    display: flex;
}

/* Forces a modal open without a URL hash — a direct re-render (not a
   redirect) with nothing to put in the address bar for :target to match. */
.modal--open {
    display: flex;
}

.modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(42, 37, 33, 0.5);
}

.modal__dialog {
    position: relative;
    width: min(32rem, 100%);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
}

.modal__dialog--wide {
    width: min(44rem, 100%);
}

.modal__dialog--xwide {
    width: min(64rem, 100%);
}

.modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) 0;
}

.modal__title {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--weight-medium);
    line-height: 1.2;
}

.modal__body {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5) var(--space-5);
    font-size: var(--text-sm);
}

.modal__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--color-canvas);
    border-top: 1px solid var(--color-border-card);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* --- Breadcrumb --------------------------------------------------------------- */
/* Where a page sits: the shop's product pages and the blog's trips and posts. */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

.breadcrumb a {
    color: var(--color-text-subtle);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--color-accent-text);
    text-decoration: underline;
}

.breadcrumb span:last-child {
    color: var(--color-text-strong);
}

/* --- Newsletter sign-up --------------------------------------------------- */
/* Shared here (not in home.css) because the home_newsletter block is reused
   on content pages (e.g. travel-with-us), which never load home.css. */

.newsletter {
    padding-block: var(--section-gap);
    text-align: center;
}

.newsletter__inner {
    max-width: 48rem;
    margin-inline: auto;
    padding-inline: var(--shell-gutter);
}

.newsletter__title {
    font-size: var(--text-section);
}

.newsletter__text {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
}

.newsletter__form {
    max-width: 36rem;
    margin: var(--space-6) auto 0;
}

.newsletter__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.newsletter__row .input {
    width: 100%;
}

@media (min-width: 34rem) {
    .newsletter__row {
        flex-direction: row;
    }

    .newsletter__row .input {
        flex: 1;
    }
}

/* The "panel" shape: a dark card, the words on the left and the form on the right (the blog). */
.newsletter--panel {
    text-align: left;
}

.newsletter-panel {
    display: grid;
    gap: var(--space-8);
    align-items: center;
    padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5vw, 3.25rem);
    border-radius: var(--radius-xl);
    background: var(--color-surface-dark);
    color: var(--color-ink-inverse);
}

.newsletter-panel__title {
    color: var(--color-ink-inverse);
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 3vw, 1.875rem);
    font-weight: var(--weight-regular);
    line-height: 1.2;
}

.newsletter-panel__intro {
    max-width: 32.5rem;
    margin-top: var(--space-3);
    color: var(--color-text-on-dark);
    font-size: var(--text-base);
    line-height: 1.7;
}

.newsletter-panel__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.newsletter-panel__label {
    color: var(--color-link-on-dark);
    font-size: 0.8125rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
}

.newsletter-panel__form .input {
    width: 100%;
    background: var(--color-surface);
}

.newsletter-panel__form .button {
    width: 100%;
}

.newsletter-panel__done {
    color: var(--color-link-on-dark);
    line-height: 1.6;
}

@media (min-width: 48rem) {
    .newsletter-panel {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--space-10);
    }
}

/* The full-size viewer assets/js/lightbox.js builds around a gallery (home, page_photos). */
.lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-ink-inverse);
}

.lightbox::backdrop {
    background: rgba(20, 16, 12, 0.92);
}

.lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    height: 100%;
    margin: 0;
    padding: 4rem var(--space-4) var(--space-5);
}

.lightbox__image {
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.lightbox__caption {
    font-size: var(--text-sm);
    text-align: center;
}

.lightbox__button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(20, 16, 12, 0.6);
    color: inherit;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox__button:hover {
    background: rgba(255, 255, 255, 0.18);
}

.lightbox__button--close {
    top: var(--space-4);
    right: var(--space-4);
}

.lightbox__button--prev,
.lightbox__button--next {
    top: 50%;
    transform: translateY(-50%);
}

.lightbox__button--prev {
    left: var(--space-3);
}

.lightbox__button--next {
    right: var(--space-3);
}

/* A PDF in a popup as tall as the screen allows: a book's look inside, a story on a page. */
.modal__dialog--document {
    display: flex;
    flex-direction: column;
    width: min(64rem, calc(100vw - 2rem));
    max-width: none;
    height: calc(100vh - 4rem);
}

.document-frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: var(--color-surface-warm);
}

.document-link {
    margin: 0;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
}

/* --- Thank-you pages (the shop's and the donations') ------------------------------ */
/* Deliberately quiet: one centred column with an icon, a heading and a line of
   text, the order as a few label and value rows, a short list of what happens
   next, and one button with a text link beside it. .thanks-page is the page
   around it where no other wrapper gives it room (the donations' page). */

.thanks-page {
    padding: var(--space-12) var(--shell-gutter) var(--space-16);
    background: var(--color-canvas);
}

.thanks {
    max-width: 32rem;
    margin: var(--space-6) auto var(--space-4);
    text-align: center;
}

.thanks__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-surface-warm);
    color: var(--color-accent-text);
}

.thanks__icon--failed {
    color: var(--color-danger);
}

.thanks__title {
    margin: var(--space-5) 0 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-title);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
}

.thanks__lead {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
}

.thanks__facts {
    margin: var(--space-8) 0 0;
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-align: left;
}

.thanks__facts > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}

.thanks__facts > div + div {
    border-top: 1px solid var(--color-border-card);
}

.thanks__facts dt {
    flex: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.thanks__facts dd {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-base);
    text-align: right;
}

.thanks__next {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.thanks__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    margin-top: var(--space-8);
}

.thanks__link {
    color: var(--color-accent-text);
    font-weight: var(--weight-semibold);
}

/* ==========================================================================
   Language suggestion (partials/language-hint.php)
   A slim bar above the header, in the language it offers. Dark like the
   footer so it reads as a notice about the site, not part of the page.
   ========================================================================== */

.language-hint {
    background: var(--color-surface-dark);
    color: var(--color-canvas);
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.4;
}

.language-hint__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: var(--space-2) var(--shell-gutter);
}

.language-hint__icon {
    flex: none;
    opacity: 0.8;
}

.language-hint__text {
    flex: 1 1 14rem;
    margin: 0;
}

.language-hint__go {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--color-canvas);
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition);
}

.language-hint__go:hover {
    background: #FFFFFF;
}

.language-hint__close-form {
    display: contents;
}

.language-hint__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background var(--transition);
}

.language-hint__close:hover {
    background: var(--color-surface-dark-raised);
}

.language-hint :focus-visible {
    outline: 2px solid var(--color-canvas);
    outline-offset: 2px;
}

/* On a phone the text takes the first line, the two actions the second. */
@media (max-width: 30rem) {
    .language-hint__text {
        flex-basis: calc(100% - 2.5rem);
    }

    .language-hint__go {
        margin-left: calc(18px + var(--space-3));
        margin-right: auto;
    }
}