/*
 * Moveoo Beheer, in the house style of moveoorides.be: the website's own tokens and fonts
 * (spec 5.2), fonts hosted here, never fetched from elsewhere (CSP font-src 'self').
 * Rules the spec adds:
 *  - amber only for the one main action and the status Nieuw, as a surface with dark text;
 *    amber as text colour on light only as --amber-ink;
 *  - body text 16 px or more, line height 1.5, tap targets 44 x 44 px, no decoration (5.3).
 * Contrast (WCAG 2.2 AA): ink on stone-50 ~16:1, ink-soft ~8:1, amber-ink ~6:1, error ~6.5:1,
 * white on coal-900 ~7.5:1, ink on amber ~8:1. coal-600 and coal-400 are not for text.
 */

/* As the website (global.css): Archivo for headings, with its width axis for the wide labels;
   Atkinson Hyperlegible Next for running text. Variable, OFL-1.1 (assets/fonts/LICENSE-*), from
   Fontsource 5.3.0. Latin always, Latin Extended only when a page needs it. */
@font-face {
    font-family: 'Archivo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
    src: url("../fonts/archivo-latin-standard-normal-Wa7z_Iw.woff2") format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Archivo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
    src: url("../fonts/archivo-latin-ext-standard-normal-iEdfVTB.woff2") format('woff2-variations');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next Variable'; font-style: normal; font-display: swap; font-weight: 200 800;
    src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal-ZUt_gPN.woff2") format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next Variable'; font-style: normal; font-display: swap; font-weight: 200 800;
    src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal-CjTIXDc.woff2") format('woff2-variations');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next Variable'; font-style: italic; font-display: swap; font-weight: 200 800;
    src: url("../fonts/atkinson-hyperlegible-next-latin-wght-italic-r46935n.woff2") format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    /* The website's tokens, under their own names. */
    --coal-950: #3d3d3d;
    --coal-900: #545454;        /* the logo's grey */
    --coal-800: #606060;
    --coal-600: #767676;
    --coal-400: #a3a19d;
    --stone-200: #e2dfd9;
    --stone-100: #ecebe7;
    --stone-50: #f7f6f3;
    --ink: #1f1f1f;
    --ink-soft: #4d4b47;
    --on-dark: #ffffff;
    --amber: #f2a541;           /* the route */
    --amber-hover: #f7bd6b;
    --amber-ink: #8a4f00;       /* amber as text colour on light */
    --error: #a3261b;
    --error-on-dark: #ffb4a8;
    --success: #2f6b3a;

    /* How this app uses them. */
    --grey: var(--coal-900);
    --line: var(--stone-200);
    --paper: var(--stone-50);
    --field: #ffffff;
    --font-body: 'Atkinson Hyperlegible Next Variable', 'Atkinson Hyperlegible Next', Verdana, sans-serif;
    --font-heading: 'Archivo Variable', 'Arial Narrow', Arial, sans-serif;
    --radius-control: 0.5rem;
    --radius-pill: 999px;
}

html { font-size: 100%; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--font-body);
    font-size: 1.125rem;        /* 18px, as the website: older readers first */
    line-height: 1.6;
    font-variant-numeric: lining-nums;
}

main { padding: 1.5rem 1rem 3rem; max-width: 46rem; margin: 0 auto; }

h1, h2 { font-family: var(--font-heading); font-weight: 700; font-stretch: 100%; letter-spacing: -0.015em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: 2rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 .75rem; }

a { color: var(--ink); text-underline-offset: .15em; }

.skip-link { position: absolute; left: -10000px; }
.skip-link:focus { position: static; display: inline-block; padding: .5rem 1rem; background: var(--paper); }

:focus-visible { outline: 3px solid var(--amber-ink); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--amber); color: var(--coal-950); }

/* Header: like the site. The wordmark echoes the logo: MOVEOO spaced, BEHEER where it says RIDES. */
.site-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
    padding: .75rem 1rem;
    background: var(--grey);
    color: var(--on-dark);
}
.site-header a, .site-header button { color: var(--on-dark); }
.site-header :focus-visible { outline-color: var(--amber); }
.brand { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; text-decoration: none; margin-right: auto; }
.brand-name { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--font-heading); font-stretch: 125%; text-transform: uppercase; letter-spacing: .3em; font-weight: 600; font-size: 1rem; }
.brand-sub { letter-spacing: .3em; font-size: .6rem; font-weight: 500; text-align: center; }
.monogram { flex: none; }
.site-header nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; padding: 0; margin: 0; }
.site-header nav a { display: inline-block; min-height: 44px; line-height: 44px; font-weight: 600; text-decoration: none; }
.site-header nav a[aria-current=page] { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 3px; text-underline-offset: .4em; }
.site-header form { margin: 0; }

/* Buttons: pills like the site. Amber for the one main action only (5.1). */
button, a.button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 3.5rem; padding: .875rem 1.75rem;
    border: 2px solid currentColor; border-radius: var(--radius-pill);
    background: transparent; color: inherit;
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
button.primary, a.button.primary { background: var(--amber); border-color: var(--amber); color: var(--coal-950); }
button.primary:hover, a.button.primary:hover { background: var(--amber-hover); border-color: var(--amber-hover); }
.site-header button { border-color: var(--on-dark); }

/* Forms */
label { display: block; margin-top: 1.25rem; font-weight: 700; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=time] {
    display: block; width: 100%; box-sizing: border-box; min-height: 3.5rem; margin-top: .35rem;
    padding: .75rem 1rem; font: inherit; line-height: 1.4; caret-color: var(--amber-ink);
    border: 2px solid var(--ink); border-radius: var(--radius-control); background: var(--field); color: var(--ink);
}
[aria-invalid=true] { border-color: var(--error) !important; border-width: 3px !important; }
form > button, form > p > button { margin-top: 1.5rem; }
label.inline { display: inline; margin: 0 0 0 .5rem; }
input[type=checkbox] { width: 24px; height: 24px; vertical-align: middle; accent-color: var(--grey); }
.help, .form-help, [id$=_help] { font-size: 1rem; color: var(--ink-soft); margin: .25rem 0 0; }
fieldset { border: 0; padding: 0; margin: 1.5rem 0; }
/* The website's .label: wide Archivo, spaced capitals ("VAN", "NAAR"). */
legend { font-family: var(--font-heading); font-stretch: 125%; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: .8125rem; }

/* Messages: always words, never colour alone (5.1). */
[role=alert] { border-left: 4px solid var(--error); padding: .5rem 1rem; color: var(--error); font-weight: 600; }
.notice { border-left: 4px solid var(--amber); padding: .5rem 1rem; }

/* Lists */
.steps { padding-left: 1.25rem; }
.steps [aria-current=step] { font-weight: 700; }
.devices, .team { list-style: none; padding: 0; }
.devices li, .team li { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.devices form { margin-top: .5rem; }
.tag { margin-left: .5rem; padding: 0 .5rem; border: 1px solid currentColor; border-radius: var(--radius-pill); font-size: .8rem; }
.actions li { margin: .5rem 0; }

/* 2FA */
.qr { display: block; background: #ffffff; padding: 8px; }
.secret, .recovery-codes code { font-size: 1.125rem; letter-spacing: .05em; }
.recovery-codes { columns: 2; padding-left: 1.75rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Enquiries */
.badge { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: var(--radius-pill); background: var(--amber); color: var(--ink); font-size: .85rem; text-align: center; line-height: 1.4; }
.status { font-weight: 700; }
.status-new { padding: 0 .5rem; border-radius: var(--radius-pill); background: var(--amber); color: var(--ink); }
.enquiries, .attention, .history { list-style: none; padding: 0; }
.enquiries li, .attention li { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.enquiries li.unread strong { font-weight: 800; }
.enquiries a, .attention a { font-size: 1.05rem; }
.history li { padding: .25rem 0; }
.filters { margin-bottom: 1.5rem; }
.filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 1rem; }
select, textarea, input[type=datetime-local] {
    display: block; width: 100%; box-sizing: border-box; min-height: 48px; margin-top: .35rem;
    padding: .5rem .75rem; font: inherit; border: 2px solid var(--grey); border-radius: 8px; background: var(--paper); color: var(--ink);
}
.call-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 1.5rem; }
.call-actions .button { min-height: 52px; font-size: 1.1rem; }
.highlight { border-left: 6px solid var(--amber); padding: .25rem 0 .25rem 1rem; }
dl { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .4rem 1rem; margin: 0; }
dt { font-weight: 600; }
dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 30rem) { dl { grid-template-columns: 1fr; } dd { margin-bottom: .5rem; } }
.inline-form { margin-top: 1rem; }
.note { border-bottom: 1px solid var(--line); padding: .5rem 0; }
.note-body { margin: 0; overflow-wrap: anywhere; }
.empty { padding: 1rem 0; }