/* ---------------------------------------------------------------------
   Static maintenance page -- shared stylesheet for all brand pages.

   One docroot serves every brand, so the pages differ only in content and
   in the <html data-brand="..."> attribute that selects the palette, the
   type and the logo size below. Everything is self-hosted from /static/,
   so the page needs no external request and works with PHP switched off.
   --------------------------------------------------------------------- */

/* --- Brand type ---------------------------------------------------- */

@font-face {
    font-family: 'MMC';
    src: url('/static/fonts/MMC-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'MMC';
    src: url('/static/fonts/MMC-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'readBeta2';
    src: url('/static/fonts/dacia-read-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'readBeta2';
    src: url('/static/fonts/dacia-read-bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Dacia Block';
    src: url('/static/fonts/DaciaBlock-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Nissan';
    src: url('/static/fonts/Nissan-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Nissan';
    src: url('/static/fonts/Nissan-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'NouvelR';
    src: url('/static/fonts/NouvelR-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NouvelR';
    src: url('/static/fonts/NouvelR-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'NewAlps';
    src: url('/static/fonts/NewAlps-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NewAlps';
    src: url('/static/fonts/NewAlps-Semibold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* --- Palette ------------------------------------------------------- */

:root {
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --body-font: var(--sans);
    --head-font: var(--sans);
    --brand: #1a1a1a;
    --accent: #1a1a1a;
    --tint: #f4f4f5;
    --dark: #1a1a1a;
    --grey: #5b5b60;
    --border: #e3e3e6;
    --radius: 8px;
    /* Renault sets this to its yellow: a highlight instead of coloured
       type, because #EFDF00 is unreadable as text on white. */
    --accent-bg: transparent;
}

[data-brand="mitsubishi"] {
    --body-font: 'MMC', var(--sans);
    --head-font: 'MMC', var(--sans);
    --brand: #ED0000;
    --accent: #D40000;
    --tint: #fdf3f3;
    --border: #f0dede;
}

[data-brand="dacia"] {
    --body-font: 'readBeta2', var(--sans);
    --head-font: 'Dacia Block', var(--sans);
    --brand: #646B52;
    --accent: #4C5240;
    --tint: #f3f4ef;
    --border: #e0e2d8;
    --radius: 0px;
}

[data-brand="nissan"] {
    --body-font: 'Nissan', var(--sans);
    --head-font: 'Nissan', var(--sans);
    --brand: #C3002F;
    --accent: #C3002F;
    --tint: #fdf2f4;
    --border: #f0dbdf;
    --dark: #343434;
}

[data-brand="renault"] {
    --body-font: 'NouvelR', var(--sans);
    --head-font: 'NouvelR', var(--sans);
    --brand: #EFDF00;
    --accent: #000;
    --accent-bg: #EFDF00;
    --tint: #fffdeb;
    --border: #ebe6c4;
    --dark: #000;
}

[data-brand="alpine"] {
    --body-font: 'NewAlps', var(--sans);
    --head-font: 'NewAlps', var(--sans);
    --brand: #0744FD;
    --accent: #0744FD;
    --tint: #f1f4ff;
    --border: #dbe2ff;
}

/* --- Base ---------------------------------------------------------- */

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

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

body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: var(--dark);
    font-family: var(--body-font);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 20px 56px;
}

/* --- Logo ---------------------------------------------------------- */

header { padding: 4px 0 44px; }

.brandmark svg,
.brandmark img {
    display: block;
    height: auto;
}

[data-brand="mitsubishi"] .brandmark img { width: 148px; }
[data-brand="nissan"] .brandmark img { width: 168px; }
[data-brand="dacia"] .brandmark svg { width: 150px; fill: #646B52; }
[data-brand="renault"] .brandmark svg { height: 46px; width: auto; fill: #000; }
[data-brand="alpine"] .brandmark svg { height: 32px; width: auto; fill: #0744FD; }

/* --- Headings and text --------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    padding: 7px 18px 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
}

.badge .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand);
    flex: none;
}

h1 {
    margin: 0 0 24px;
    font-family: var(--head-font);
    font-weight: 700;
    font-size: clamp(1.8rem, 4.6vw, 2.9rem);
    line-height: 1.18;
    /* Wide enough for "Onze website staat even op pauze." to stay on one
       line on a desktop, so the explicit <br> is the only break. */
    max-width: 36ch;
}

h1 .accent {
    color: var(--accent);
    background: var(--accent-bg);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.text { max-width: 64ch; }

.lead {
    margin: 0 0 18px;
    font-size: clamp(1.05rem, 2.1vw, 1.2rem);
    line-height: 1.6;
}

p { margin: 0 0 18px; }

a {
    color: var(--dark);
    text-decoration: none;
    border-bottom: 2px solid var(--brand);
}

a:hover { border-bottom-color: var(--dark); }

h2.section {
    margin: 56px 0 4px;
    font-family: var(--head-font);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.6vw, 1.6rem);
}

.section-intro {
    margin: 0 0 4px;
    color: var(--grey);
    max-width: 64ch;
}

/* --- Notice (used on the Nissan page) ------------------------------ */

.notice {
    margin: 0 0 32px;
    padding: 18px 22px;
    border-left: 4px solid var(--brand);
    background: var(--tint);
    border-radius: var(--radius);
    max-width: 64ch;
}

.notice p:last-child { margin-bottom: 0; }

/* --- Contact cards -------------------------------------------------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 20px;
    margin: 28px 0 0;
    align-items: start;
}

.card {
    padding: 28px;
    border-radius: var(--radius);
    background: var(--tint);
}

.card h3 {
    margin: 0 0 6px;
    font-family: var(--head-font);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.card .what {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--grey);
}

.card dl { margin: 0; }

.card dt {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grey);
}

.card dt:first-child { margin-top: 0; }

.card dd {
    margin: 2px 0 0;
    line-height: 1.45;
}

.card dd.tel {
    font-family: var(--head-font);
    font-size: 1.2rem;
    font-weight: 700;
}

.card .hours {
    margin: 20px 0 0;
    font-size: 14px;
    color: var(--grey);
}

/* --- Footer --------------------------------------------------------- */

footer {
    margin: 48px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--grey);
}

footer p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .wrap { padding: 48px 48px 72px; }
    header { padding-bottom: 56px; }
}