/* ==========================================================================
   Renvooiservice — huisstijl Elk Solutions

   Dezelfde tweedeling als op elk.solutions: donker is besturing, papier is
   lezen. Hier valt dat samen met wat de dienst doet — je stelt bovenin een
   vergelijking in, en leest daaronder wat er veranderd is. De tokens komen
   uit elk-it__elk.solutions__Webiste/src/style.css.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --site-night: #07111f;
    --site-night-soft: #0d1a2a;
    --site-panel: #112338;
    --site-paper: #f5f2ea;
    --site-paper-deep: #ece7dc;
    --site-white: #fbfcfe;
    --site-ink: #101a2a;
    --site-muted: #607086;
    --site-muted-light: #9eacbd;
    --site-line: rgba(157, 177, 201, 0.22);
    --site-line-dark: rgba(16, 26, 42, 0.14);
    --site-orange: #ff681d;
    --site-orange-soft: #ff9c69;
    --site-orange-ink: #994516;
    --site-blue: #bfe1f1;
    --site-green: #43d3a0;
    --site-red: #d7263d;
    --site-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --site-mono: ui-monospace, 'SF Mono', 'Roboto Mono', monospace;
    --site-mast-height: 86px;
    --site-gutter: clamp(1.25rem, 4vw, 4rem);
    --site-content: 1080px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    /* De liniatuur van 48px komt van de site terug: het maakt van het vlak
       papier in plaats van een leeg scherm. */
    background:
        linear-gradient(rgba(16, 26, 42, 0.028) 1px, transparent 1px),
        var(--site-paper);
    background-size: 100% 48px;
    color: var(--site-ink);
    font-family: var(--site-sans);
    font-size: 1rem;
    line-height: 1.6;
    font-synthesis-weight: none;
}

/* --------------------------------------------------------------- mast --- */

.mast {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: var(--site-mast-height);
    border-top: 2px solid var(--site-orange);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(7, 17, 31, 0.97);
    color: var(--site-white);
    backdrop-filter: blur(18px);
}

.mast__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: min(var(--site-content), calc(100% - 2 * var(--site-gutter)));
    min-height: var(--site-mast-height);
    margin-inline: auto;
}

.mast__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--site-white);
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.mast__brand img {
    width: 38px;
    height: 38px;
}

.mast__brand em {
    color: var(--site-orange);
    font-style: normal;
}

.mast__dienst {
    padding-left: 1.25rem;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--site-muted-light);
    font-size: 0.95rem;
    font-weight: 500;
}

.mast__omgeving {
    margin-left: auto;
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: var(--site-muted-light);
    font-family: var(--site-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------- voet --- */

.voet {
    margin-top: 4rem;
    border-top: 1px solid var(--site-line-dark);
}

.voet__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
    width: min(var(--site-content), calc(100% - 2 * var(--site-gutter)));
    margin-inline: auto;
    padding-block: 1.75rem 2.5rem;
    color: var(--site-muted);
    font-size: 0.85rem;
}

.voet a {
    color: var(--site-muted);
}

.voet__versie {
    margin-left: auto;
    font-family: var(--site-mono);
    font-size: 0.75rem;
}

/* ------------------------------------------------------- toegankelijk --- */

.enkel-voorlezer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.overslaan {
    position: absolute;
    top: -3rem;
    left: var(--site-gutter);
    z-index: 30;
    padding: 0.5rem 1rem;
    background: var(--site-orange);
    color: var(--site-white);
    text-decoration: none;
    transition: top 0.15s;
}

.overslaan:focus {
    top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}