/*
Theme Name:   Aannemerthema
Theme URI:    https://aannemer.essentialswordpress.com/
Author:       Misha Yazdi
Author URI:   https://essentialswordpress.com/
Description:  Blankslate theme for aannemer.essentialswordpress.com. Vanilla JS only (no jQuery), self-hosted fonts, Motion One for choreographed fade-ins. Classic PHP templates. Gutenberg disabled.
Version:      0.1.0
Requires at least: 6.5
Requires PHP: 8.1
License:      Proprietary
Text Domain:  aannemerthema
Tags:         construction, contractor, marketing, light
*/

/* =========================================================================
   1. Design tokens
   ========================================================================= */

:root {
    /* surfaces & text */
    --bg:            #fafafa;
    --surface:       #ffffff;
    --surface-alt:   #f3f3f7;
    --border:        #e8e8ee;
    --border-strong: #d2d4dd;
    --text:          #0f1115;
    --text-muted:    #5b6470;

    /* primary */
    --primary:       #1a3a6e;
    --primary-hover: #142d56;
    --primary-ink:   #ffffff;
    --primary-soft:  #eef2fb;

    /* warm paper palette (Aannemer Bollen) */
    --paper:         #F4F1EA;
    --paper-2:       #EBE6DB;
    --ink:           #1A1C1E;
    --ink-soft:      #54565A;
    --line:          #D9D3C6;

    /* accent */
    --accent:        #B0552F;
    --accent-hover:  #944520;
    --accent-ink:    #ffffff;
    --accent-soft:   #fdf0e3;

    /* utility */
    --danger:        #c0352e;
    --code-bg:       #0f1115;
    --code-ink:      #e8e8ee;

    /* radii */
    --radius-xs:     4px;
    --radius-sm:     6px;
    --radius-md:     8px;
    --radius-lg:     12px;
    --radius-pill:   999px;

    /* spacing scale (rem) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* type */
    --font-display: 'Archivo', 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-body:    'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

    --fs-h1:   clamp(2.25rem, 1.4rem + 3.5vw, 3.75rem);
    --fs-h2:   clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    --fs-h3:   1.5rem;
    --fs-h4:   1.25rem;
    --fs-body: 1rem;
    --fs-sm:   0.875rem;
    --fs-xs:   0.75rem;

    --lh-tight: 1.15;
    --lh-snug:  1.35;
    --lh-body:  1.6;

    /* layout */
    --container-max: 1200px;
    --gutter:        var(--space-5);

    /* shadows */
    --shadow-sm: 0 1px 2px rgba(15, 17, 21, 0.04), 0 1px 1px rgba(15, 17, 21, 0.03);
    --shadow-md: 0 4px 12px rgba(15, 17, 21, 0.06), 0 2px 4px rgba(15, 17, 21, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 17, 21, 0.08), 0 4px 8px rgba(15, 17, 21, 0.05);

    /* motion */
    --ease:           cubic-bezier(.2, .6, .2, 1);
    --duration-fast:  150ms;
    --duration-base:  220ms;
    --duration-slow:  500ms;
}

/* =========================================================================
   2. Modern reset
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    min-height: 100vh;
    line-height: var(--lh-body);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* =========================================================================
   3. Typography
   ========================================================================= */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    color: var(--text);
}
h1, .h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }

p { line-height: var(--lh-body); }
p + p { margin-top: var(--space-4); }

a:not([class]) {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--duration-fast) var(--ease);
}
a:not([class]):hover { color: var(--primary-hover); }

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}
code:not(pre code) {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 0.1em 0.4em;
}
pre {
    background: var(--code-bg);
    color: var(--code-ink);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
    line-height: var(--lh-snug);
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
}

/* =========================================================================
   4. Layout primitives
   ========================================================================= */

.section {
    background: var(--bg);
}
.section--surface  { background: var(--surface); }
.section--alt      { background: var(--surface-alt); }
.section--primary  { background: var(--primary); color: var(--primary-ink); }
.section--dark     { background: var(--code-bg); color: var(--code-ink); }

.row {
    padding-block: var(--space-8);
}
.row--tight { padding-block: var(--space-6); }
.row--loose { padding-block: var(--space-9); }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: 760px; }
.container--wide   { max-width: 1400px; }

/* Shell - design-system container (40px gutter) */
.shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Flex utilities */
.fx  { display: flex; }
.col { flex-direction: column; }
.ac  { align-items: center; }
.jb  { justify-content: space-between; }
.fwrap { flex-wrap: wrap; }
.gap10 { gap: 10px; }
.gap12 { gap: 12px; }
.gap14 { gap: 14px; }
.gap16 { gap: 16px; }
.gap18 { gap: 18px; }
.gap20 { gap: 20px; }
.gap24 { gap: 24px; }
.gap28 { gap: 28px; }
.gap40 { gap: 40px; }

/* =========================================================================
   5. Grid utilities
   ========================================================================= */

.grid {
    display: grid;
    gap: var(--space-5);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (max-width: 860px) {
    .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

/* =========================================================================
   6. Components
   ========================================================================= */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: 1;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.btn--primary {
    background: var(--primary);
    color: var(--primary-ink) !important;
}
.btn--primary:hover { background: var(--primary-hover); }

.btn--accent {
    background: var(--accent);
    color: var(--accent-ink) !important;
}
.btn--accent:hover { background: var(--accent-hover); }

.btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--surface-alt); }

.btn--sm   { font-size: var(--fs-sm); padding: 0.5rem 0.9rem; }
.btn--lg   { font-size: 1.05rem; padding: 0.95rem 1.5rem; }
.btn--pill { border-radius: var(--radius-pill); }

/* Card */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    transition: border-color var(--duration-base) var(--ease),
                box-shadow var(--duration-base) var(--ease),
                transform var(--duration-base) var(--ease);
}
.card--link:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h4);
    line-height: var(--lh-snug);
}
.card__meta {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: var(--space-2);
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--surface-alt);
    color: var(--text);
}
.badge--accent  { background: var(--accent-soft);  color: #8a4200; }
.badge--primary { background: var(--primary-soft); color: var(--primary); }

/* Prose */
.prose {
    max-width: 70ch;
    font-size: 1.05rem;
    line-height: var(--lh-body);
}
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: var(--space-2); }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
    border-left: 3px solid var(--primary);
    padding-left: var(--space-4);
    color: var(--text-muted);
    font-style: italic;
}

/* =========================================================================
   7. Site chrome
   ========================================================================= */

.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    position: fixed;
    left: 1.5rem;
    top: 1.5rem;
    width: auto;
    height: auto;
    background: var(--accent);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    z-index: 100;
}

/* Top accent stripe */
.topbar { height: 5px; background: var(--accent); }

/* Sticky header */
.hdr {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(244, 241, 234, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.hdr-in {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Brand mark */
.brand {
    text-decoration: none;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
/*
    The mark is an <img> (the shipped SVG, or the logo uploaded in the
    customizer). The accent background stays as a same-colour backdrop so a
    slow-loading or failed image never flashes a white square in the header.
*/
.mark {
    width: 40px;
    height: 40px;
    display: block;
    flex-shrink: 0;
    background: var(--accent);
    object-fit: contain;
}
.brand-lines {
    display: block;
}
.brand-name {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--ink);
}
.brand-sub {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 3px;
}

/* Nav */
.hdr-nav {
    display: flex;
    gap: 30px;
}
.hdr-nav a {
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s;
}
.hdr-nav a:hover { border-color: var(--accent); color: var(--ink); }

/* -------------------------------------------------------------------------
   Diensten megamenu (desktop) - hover/click panel under the "Diensten" item
   ------------------------------------------------------------------------- */

.mega-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    padding: 6px 0;
    line-height: 1;
}
.mega-btn:hover,
.mega-btn.open { border-color: var(--accent); }
.mega-car {
    font-size: 9px;
    transition: transform 0.2s ease;
    display: inline-block;
    transform: translateY(1px);
}
.mega-btn.open .mega-car { transform: translateY(1px) rotate(180deg); }

.mega-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 28px 44px -26px rgba(26, 28, 30, 0.4);
    z-index: 40;
    /* Show/hide + subtle fade are driven by Motion One in app.js
       (JS toggles inline display + opacity). */
}
.mega-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 34px 40px 38px;
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 0;
}
.mega-core { padding-right: 52px; }
.mega-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.mega-h {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.mega-all { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--accent); text-decoration: none; }
.mega-all:hover { text-decoration: underline; }

.mrow {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px;
    align-items: start;
    text-decoration: none;
    color: var(--ink);
    padding: 17px 14px;
    border-top: 1px solid var(--line);
    transition: 0.15s;
}
.mrow.last { border-bottom: 1px solid var(--line); }
.mrow:hover { background: #fff; padding-left: 20px; }
.mnum {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 21px;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.02em;
    padding-top: 2px;
}
.mtitle { display: block; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.mdesc { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-top: 5px; }
.mtags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.mtag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    padding: 4px 8px;
}
.marrow { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 19px; align-self: center; }

.mega-side { border-left: 1px solid var(--line); padding-left: 52px; display: flex; flex-direction: column; }
.mega-side .mega-h { margin-bottom: 6px; }
.mextra { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-bottom: 26px; }
.mx {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    transition: 0.15s;
}
.mx:hover { color: var(--accent); }
.mxr { font-family: var(--font-mono); font-size: 12px; color: var(--line); }
.mx:hover .mxr { color: var(--accent); }

.mega-cta {
    margin-top: auto;
    background: var(--accent);
    color: #fff;
    padding: 22px 24px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: 0.15s;
}
.mega-cta:hover { filter: brightness(0.93); }
.mega-cta-t { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: #fff; }
.mega-cta-d { font-size: 13.5px; color: rgba(255, 255, 255, 0.9); line-height: 1.5; }

/* Phone */
.tel {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: var(--ink);
    margin-right: 24px;
}

/* Buttons (design system) */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    padding: 14px 24px;
    border: 2px solid var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition: 0.15s;
    color: var(--ink);
    white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff !important; border-color: var(--accent); }
.btn-primary:hover { filter: brightness(0.92); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--paper) !important; }
.btn-lg { padding: 17px 30px; font-size: 16px; }

/* Footer */
.ftr { background: var(--ink); color: var(--paper); }
.ftr a { text-decoration: none; color: #C2BCAF; transition: color 0.15s; }
.ftr a:hover { color: var(--paper); }
.ftr-link { display: block; font-size: 14.5px; padding: 5px 0; }
.ftr-h {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8C8678;
    margin-bottom: 14px;
}
.rule-dark { height: 1px; background: #33363A; }
.note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #7C7669;
    letter-spacing: 0.03em;
}

/* Search form */
.at-search-form {
    display: flex;
    gap: var(--space-2);
    width: 100%;
}
.at-search-form__input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: var(--fs-body);
    transition: border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
}
.at-search-form__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(176, 85, 47, 0.1);
}

/* Header CTA group */
.hdr-cta {
    display: flex;
    align-items: center;
}

/* -------------------------------------------------------------------------
   Hamburger button
   ------------------------------------------------------------------------- */

.menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 1px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   Mobile nav overlay
   ------------------------------------------------------------------------- */

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 110px 40px 60px;
    gap: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
body.nav-open { overflow: hidden; }
body.nav-open .hdr { background: var(--paper); }

.mobile-nav__link {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(28px, 8vw, 48px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--paper);
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.15s;
}
.mobile-nav__link:hover { color: var(--accent); }

.mobile-nav__footer {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}
.mobile-nav__tel {
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.15s;
}
.mobile-nav__tel:hover { color: #fff; }

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

.ftr-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

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

.search-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin-right: 4px;
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}
.search-btn:hover        { color: var(--accent); background: rgba(176, 85, 47, 0.08); }
.search-btn[aria-expanded="true"] { color: var(--accent); background: rgba(176, 85, 47, 0.12); }

.site-search {
    border-top: 1px solid var(--line);
    background: var(--paper);
    overflow: hidden;
}
.site-search[hidden] { display: none; }
.site-search__form {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 16px 0;
}
.site-search__input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.site-search__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(176, 85, 47, 0.15);
}

.mobile-nav__search {
    display: flex;
    width: 100%;
    gap: 8px;
}
.mobile-nav__search input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--paper);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-sm);
}
.mobile-nav__search input::placeholder { color: rgba(255, 255, 255, 0.45); }
.mobile-nav__search input:focus {
    outline: none;
    border-color: var(--accent);
}
.mobile-nav__search button {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   Breadcrumbs

   Structure only. Every hero stylesheet already colours `.crumbs` for its own
   background (`.at-contact .crumbs`, `.at-diensten .crumbs`, …), and those
   rules keep working because the list inherits from the nav.
   ------------------------------------------------------------------------- */

.crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.crumbs__item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.crumbs__sep { opacity: 0.55; }

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

.ftr-h {
    font-size: 11px;      /* reset the browser's h2 sizing */
    font-weight: 400;
    margin-top: 0;
}
.ftr-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}
.ftr-about {
    color: #A39E91;
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 240px;
    margin: 0;
}
.ftr-marks { display: flex; gap: 10px; }
.ftr-marks .kmk-box {
    background: transparent;
    border-color: #3A3D41;
    color: #A39E91;
    height: 38px;
    padding: 0 14px;
    font-size: 11px;
}
.ftr-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ftr-social__link {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid #3A3D41;
    border-radius: var(--radius-pill);
}
.ftr-social__link:hover { border-color: var(--accent); }
.ftr-note {
    color: #A39E91;
    font-size: 14.5px;
    padding: 5px 0;
    font-style: normal;
    margin: 0;
}
.ftr-sitemap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin-bottom: 22px;
}
.ftr-sitemap__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8C8678;
    width: 100%;
}
.ftr-sitemap__link { font-size: 13.5px; }
.ftr-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.ftr-bottom__links {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.ftr-bottom__links .note { color: #A39E91; }
.ftr-cookie-btn {
    color: #A39E91;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ftr-cookie-btn:hover { color: var(--paper); }

/* -------------------------------------------------------------------------
   Card imagery

   at_project_media() renders a real <img> inside the box the per-page
   stylesheets already size (.pcard-img, .feature-img, …). The image fills that
   box exactly as the old background-image did, but arrives lazily and with
   intrinsic dimensions so nothing shifts while it loads.
   ------------------------------------------------------------------------- */

.card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.has-img { overflow: hidden; }

/* -------------------------------------------------------------------------
   Shared form chrome

   Lives here rather than in one page stylesheet because the consent row and
   the validation summary appear in both the contact form and the offerte
   form, which load different per-page sheets.
   ------------------------------------------------------------------------- */

.field--consent { margin-top: -4px; }
.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    cursor: pointer;
}
.consent input {
    margin: 2px 0 0;
    width: 17px;
    height: 17px;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.consent a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-errors {
    padding: 16px 18px;
    background: var(--accent-soft);
    border-left: 3px solid var(--danger);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink);
}
.form-errors strong { display: block; margin-bottom: 6px; }
.form-errors ul { margin: 0; padding-left: 18px; }

/* -------------------------------------------------------------------------
   Responsive header / shell
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .hdr-nav        { display: none; }
    .mega-panel     { display: none !important; }
    .tel            { display: none; }
    .shell          { padding: 0 24px; }
    .menu-btn       { display: flex; }
    .ftr-cols       { grid-template-columns: 1fr 1fr; }
    /* The mobile nav has its own search field, so the header toggle is noise. */
    .search-btn     { display: none; }
    .site-search    { display: none !important; }
}

@media (max-width: 520px) {
    .hdr-cta__btn   { display: none; }
    .ftr-cols       { grid-template-columns: 1fr; }
}

/*
    Touch targets. WCAG 2.5.8 asks for at least 24x24 CSS px; the checklist
    asks for 44x44, so every tappable element in the chrome is padded out to
    that on coarse pointers.
*/
@media (pointer: coarse) {
    /*
        Breadcrumbs are deliberately left out: they are inline text links in a
        sentence-like trail (exempt under WCAG 2.5.8) and padding them to 44px
        would double the height of every hero on mobile.
    */
    .hdr-nav a,
    .mega-btn,
    .ftr-link,
    .ftr-sitemap__link,
    .mobile-nav__tel {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .ftr-social__link { height: 44px; }
    .menu-btn,
    .search-btn { width: 44px; height: 44px; }
}

/* =========================================================================
   8. Motion baseline
   ========================================================================= */

/*
 * Fade-in baseline.
 *
 * Two kinds of target:
 *   1. [data-motion]        - explicit, for templates that want fine control.
 *   2. the AUTO targets     - every section's inner .shell. The warm design
 *      templates carry no motion attributes, so without this the whole site
 *      animates nothing. Keeping the rule here (rather than annotating 15
 *      templates) means one selector to reason about.
 *
 * THE SELECTOR BELOW MUST STAY IN SYNC WITH `AUTO_SELECTOR` IN inc/js/app.js,
 * CSS hides these, app.js is what reveals them. If the two ever drift, content
 * hidden here is never revealed. The `html.js` + `:not(.motion-fallback)`
 * guards (set by the inline script in header.php) are what make that safe:
 * no JS, or a JS that never boots, means nothing is hidden in the first place.
 */
html.js:not(.motion-fallback) [data-motion],
html.js:not(.motion-fallback) main section > .shell:not([data-motion-skip]),
html.js:not(.motion-fallback) main > .shell:not([data-motion-skip]) {
    opacity: 0;
    transform: translateY(10px);
    will-change: opacity, transform;
}

/* Per-page opt-out (via at_main_class) and the no-JS case. */
.motion-off [data-motion],
.no-js [data-motion] {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    /* Covers the auto targets too - app.js only tags them once it runs, so a
       rule on [data-motion] alone would leave them hidden until then. */
    [data-motion],
    main section > .shell,
    main > .shell {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================================
   9. Utilities
   ========================================================================= */

.sr-only,
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.text-muted  { color: var(--text-muted); }
.text-center { text-align: center; }
.stack > * + * { margin-top: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-6); }