/*
 * HikeLoad — het ontwerpsysteem.
 *
 * Eén plek voor kleuren, lettergroottes, hoeken en bouwstenen. Templates
 * gebruiken de tokens (var(--green), var(--r), ...) in plaats van losse
 * waarden; wie het uiterlijk wil bijsturen doet dat hier.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
    /* Donker */
    --ink: #0d1b2a;
    --forest: #15301f;
    --forest-2: #2a5139;
    --hero-bg: #0d1b2a;
    /* Eén sluier over elke foto-kop, zodat ze allemaal dezelfde toon hebben. */
    --photo-overlay: linear-gradient(180deg, rgba(13, 27, 42, .82) 0%, rgba(13, 27, 42, .68) 100%);

    /* Groen */
    --green: #2f6f46;
    --green-dark: #245a38;
    /* Fris groen dat op wit én op donker leesbaar blijft; op donkere vlakken
       (menu, paginakop, voettekst) schuift het een tint lichter. */
    --green-bright: #3aa565;
    --green-tint: #eef5f0;
    --green-line: #cfe3d6;

    /* Tekst */
    --text: #1b2426;
    --text-2: #3a4547;
    --muted: #5f6a6c;
    --faint: #879193;

    /* Vlakken en lijnen */
    --bg: #f5f4ef;
    --surface: #ffffff;
    --chip: #edece6;
    --line: #e4e2da;
    --line-strong: #cfcdc4;

    /* Accenten. Blauw was de kleur van de gear-pagina's; de planner heeft nu
       één merkkleur, dus blauw volgt het groen. Amber blijft voor waarschuwing
       en voeding, rood voor fouten en verwijderen. */
    --blue: var(--green);
    --blue-bright: var(--green-bright);
    --blue-tint: var(--green-tint);
    --amber: #a8741a;
    --amber-dark: #8f5f10;
    --amber-tint: #f9f2e2;
    --amber-line: #ecd9a8;
    --red: #b3372d;
    --red-tint: #fbefed;
    --red-line: #efccc7;

    /* Vorm */
    --r-sm: 6px;
    --r: 8px;
    --r-lg: 12px;
    --r-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(13, 27, 42, .06);
    --shadow: 0 2px 6px rgba(13, 27, 42, .05), 0 12px 28px rgba(13, 27, 42, .07);

    /* Maat */
    --container: 1100px;
    --measure: 68ch;
    --gap-section: clamp(48px, 6.5vw, 80px);

    /* Bootstrap volgt mee */
    --bs-primary: var(--green);
    --bs-primary-rgb: 47, 111, 70;
    --bs-success: var(--green);
    --bs-success-rgb: 47, 111, 70;
    --bs-secondary: var(--muted);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--r);
    --bs-link-color: var(--green);
    --bs-link-color-rgb: 47, 111, 70;
    --bs-link-hover-color: var(--green-dark);
    --bs-link-hover-color-rgb: 36, 90, 56;
}

/* Donkere vlakken: het accentgroen een tint lichter. */
.hl-nav, .hl-footer, .hl-hero, .hl-section--dark, .hero-topo, .on-dark { --green-bright: #6fd197; }

/* ── 2. Basis ──────────────────────────────────────────────────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, .font-display {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    letter-spacing: -.02em;
}
h1 { line-height: 1.06; }
h2 { line-height: 1.15; }
h3, h4 { letter-spacing: -.01em; }
a { text-underline-offset: .18em; }
::selection { background: var(--green-line); color: var(--ink); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.container { max-width: var(--container); }
img { max-width: 100%; }

.text-success { color: var(--green) !important; }
.text-muted { color: var(--muted) !important; }
.bg-success { background-color: var(--green) !important; }

/* Topografisch hoogtelijnen-motief: class="hero-topo" op de hero-container
   en <x-topo-lines /> als eerste kind. */
.hero-topo { position: relative; overflow: hidden; }
.hero-topo .topo-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .05;
    pointer-events: none;
}
.hero-topo > .container { position: relative; z-index: 1; }

/* Iconen: vaste afmetingen vóór het font laadt, dus geen verspringen. */
.material-icons {
    font-family: 'Material Icons', sans-serif;
    vertical-align: middle;
    font-size: 18px;
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: hidden;
}
.icon-sm { font-size: 18px; }
.icon-md { font-size: 24px; }
.icon-lg { font-size: 32px; }
.icon-xl { font-size: 40px; }

/* ── 3. Bootstrap-onderdelen in huisstijl ──────────────────────────────── */
.card {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: none;
    background: var(--surface);
}
.card-body { padding: 1.5rem; }

.btn {
    border-radius: var(--r);
    font-weight: 600;
    padding: 10px 16px;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn-sm { padding: 7px 12px; font-size: .875rem; }
.btn-lg { padding: 13px 22px; font-size: 1rem; }
.btn-primary, .btn-success {
    --bs-btn-bg: var(--green);
    --bs-btn-border-color: var(--green);
    --bs-btn-hover-bg: var(--green-dark);
    --bs-btn-hover-border-color: var(--green-dark);
    --bs-btn-active-bg: var(--green-dark);
    --bs-btn-active-border-color: var(--green-dark);
    --bs-btn-disabled-bg: var(--green);
    --bs-btn-disabled-border-color: var(--green);
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus-visible, .btn-success:focus-visible {
    background: var(--green-dark);
    border-color: var(--green-dark);
    color: #fff;
}
.btn-outline-primary, .btn-outline-success {
    --bs-btn-color: var(--green);
    --bs-btn-border-color: var(--green);
    --bs-btn-hover-bg: var(--green);
    --bs-btn-hover-border-color: var(--green);
    --bs-btn-active-bg: var(--green);
    --bs-btn-active-border-color: var(--green);
}
.btn-outline-secondary {
    --bs-btn-color: var(--text-2);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--chip);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-border-color: var(--line-strong);
    --bs-btn-active-bg: var(--chip);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-border-color: var(--line-strong);
}

.table { --bs-table-bg: transparent; border-radius: var(--r); overflow: hidden; }
.table thead {
    background: var(--chip);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Labels boven hun veld; selects even hoog als een form-control. */
.form-label { display: block; margin-bottom: .4rem; }
.form-control { border-color: var(--line-strong); border-radius: var(--r); background-color: #fff; }
.form-control:disabled, .form-control[readonly] { background-color: var(--bg); }
.dropdown-menu, .modal-content, .list-group-item, .accordion-item, .offcanvas, .popover { --bs-body-bg: #fff; }
.form-control:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(47, 111, 70, .15);
}
select, .form-select, .form-select-sm {
    display: block;
    width: 100%;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    padding-left: .75rem !important;
    padding-right: 2.25rem !important;
    min-height: 38px;
    font-size: .9rem !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: var(--r);
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235f6a6c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .6rem center !important;
    background-size: 14px 10px !important;
}
select:focus, .form-select:focus, .form-select-sm:focus {
    border-color: var(--green) !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(47, 111, 70, .15);
}

/* Meldingen — de gebundelde bootstrap.min.css bevat geen .alert-stijlen. */
.alert {
    padding: 12px 16px;
    border-radius: var(--r);
    font-size: .9rem;
    line-height: 1.5;
}
.alert-success {
    background: var(--green-tint);
    border: 1px solid var(--green-line);
    color: var(--green-dark);
}
.alert-danger {
    background: var(--red-tint);
    border: 1px solid var(--red-line);
    color: var(--red);
}

/* Eenhedenschakelaar: toon alleen de actieve eenheid (data-units op <html>). */
[data-units="imperial"] .u-met { display: none; }
[data-units="metric"] .u-imp { display: none; }
.units-toggle {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--r-sm);
    overflow: hidden;
    vertical-align: middle;
}
.units-toggle button {
    background: transparent;
    color: rgba(255, 255, 255, .8);
    border: 0;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.6;
    white-space: nowrap;
}
.units-toggle button + button { border-left: 1px solid rgba(255, 255, 255, .28); }
[data-units="imperial"] .units-toggle .ut-imp,
[data-units="metric"] .units-toggle .ut-met { background: #fff; color: var(--ink); }

/* ── 4. Bouwstenen ─────────────────────────────────────────────────────── */

/* Knoppen */
.hl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: var(--r);
    font: 600 .95rem/1.2 'Inter', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.hl-btn .material-icons { font-size: 18px; }
.hl-btn--primary { background: var(--green); border-color: var(--green); color: #fff; }
.hl-btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.hl-btn--quiet { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.hl-btn--quiet:hover { background: var(--chip); color: var(--text); }
.hl-btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.hl-btn--light:hover { background: var(--green-tint); border-color: var(--green-tint); color: var(--ink); }
.hl-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.hl-btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); color: #fff; }
.hl-btn--lg { padding: 15px 26px; font-size: 1rem; }
.hl-btn--sm { padding: 8px 14px; font-size: .875rem; }
.hl-btn--block { display: flex; width: 100%; }

/* Tekstlink met pijl */
.hl-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: .925rem;
    color: var(--green);
    text-decoration: none;
}
.hl-link:hover { color: var(--green-dark); text-decoration: underline; }
.hl-link .material-icons { font-size: 16px; }

/* Secties */
.hl-section { padding: var(--gap-section) 0; }
.hl-section--surface { background: var(--surface); border-block: 1px solid var(--line); }
.hl-section--dark { background: var(--ink); color: rgba(255, 255, 255, .78); }
.hl-eyebrow {
    display: block;
    margin: 0 0 12px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--green);
}
.hl-section--dark .hl-eyebrow, .hl-hero .hl-eyebrow { color: var(--green-bright); }
.hl-h2 {
    margin: 0 0 14px;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 700;
    color: var(--ink);
}
.hl-section--dark .hl-h2 { color: #fff; }
.hl-lead {
    margin: 0;
    max-width: 60ch;
    font-size: 1.075rem;
    line-height: 1.65;
    color: var(--muted);
}
.hl-section--dark .hl-lead { color: rgba(255, 255, 255, .72); }
.hl-head { margin-bottom: clamp(28px, 4vw, 44px); }
.hl-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* Kaarten */
.hl-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
a.hl-card:hover, button.hl-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); color: inherit; }
.hl-card__body { padding: 22px; }
.hl-card__media { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.hl-card__kicker {
    display: block;
    margin-bottom: 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--green);
}
.hl-card__title {
    margin: 0 0 8px;
    font: 700 1.125rem/1.3 'Inter', sans-serif;
    letter-spacing: -.01em;
    color: var(--ink);
}
.hl-card__text { margin: 0; font-size: .925rem; line-height: 1.6; color: var(--muted); }

/* Labels en chips */
.hl-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--r-sm);
    background: var(--chip);
    color: var(--text-2);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
}
.hl-chip .material-icons { font-size: 14px; }
.hl-chip--green { background: var(--green-tint); color: var(--green-dark); }
.hl-chip--onDark { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); }
a.hl-chip:hover { background: var(--line); color: var(--text); }

/* Meta-regel: kleine gegevens gescheiden door ruimte */
.hl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: .875rem;
    color: var(--muted);
}
.hl-meta > * { display: inline-flex; align-items: center; gap: 6px; }
.hl-meta .material-icons { font-size: 16px; color: var(--faint); }

/* Kruimelpad */
.hl-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .825rem;
    color: var(--muted);
}
.hl-crumbs a { color: inherit; text-decoration: none; }
.hl-crumbs a:hover { color: var(--green); text-decoration: underline; }
.hl-crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--line-strong); }
.hl-crumbs [aria-current] { color: var(--text); font-weight: 500; }
.hl-crumbs--onDark { color: rgba(255, 255, 255, .6); }
.hl-crumbs--onDark a:hover { color: #fff; }
.hl-crumbs--onDark li + li::before { color: rgba(255, 255, 255, .3); }
.hl-crumbs--onDark [aria-current] { color: rgba(255, 255, 255, .9); }

/* Donkere paginakop */
.hl-hero {
    position: relative;
    overflow: hidden;
    background: var(--hero-bg);
    color: rgba(255, 255, 255, .78);
    padding: clamp(40px, 6vw, 72px) 0;
}
.hl-hero > .container { position: relative; z-index: 1; }
.hl-hero h1 {
    margin: 0 0 14px;
    max-width: 22ch;
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    font-weight: 700;
    color: #fff;
}
.hl-hero .hl-lead { color: rgba(255, 255, 255, .74); }
.hl-hero--photo { background-size: cover; background-position: center; }
.hl-hero--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--photo-overlay);
}

/* Getallenrij */
.hl-stats { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 0; }
.hl-stat__value {
    display: block;
    font: 700 1.6rem/1.1 'Bricolage Grotesque', 'Inter', sans-serif;
    letter-spacing: -.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.hl-stat__unit { margin-left: 3px; font: 600 .8rem/1 'Inter', sans-serif; letter-spacing: 0; color: var(--muted); }
.hl-stat__label {
    display: block;
    margin-top: 6px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
}
.hl-hero .hl-stat__value { color: #fff; }
.hl-hero .hl-stat__unit { color: var(--green-bright); }
.hl-hero .hl-stat__label { color: rgba(255, 255, 255, .55); }

/* Leestekst */
.hl-prose { max-width: var(--measure); font-size: 1.075rem; line-height: 1.75; color: var(--text-2); }
.hl-prose h2 { margin: 2.2em 0 .6em; font-size: 1.6rem; color: var(--ink); }
.hl-prose h3 { margin: 1.8em 0 .5em; font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.hl-prose a { color: var(--green); }
.hl-prose img { border-radius: var(--r); }

/* ── 5. Navigatie ──────────────────────────────────────────────────────── */
.hl-nav {
    background: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-top: 6px;
    padding-bottom: 6px;
}
.hl-nav .navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -.02em;
    color: #fff;
}
.hl-nav .navbar-brand .material-icons { font-size: 24px; color: var(--green-bright); }
.hl-nav .navbar-brand:hover { opacity: .88; }
.hl-nav .nav-link {
    padding: 8px 12px;
    border-radius: var(--r-sm);
    color: rgba(255, 255, 255, .72);
    font-size: .925rem;
    font-weight: 500;
    transition: color .15s, background-color .15s;
}
.hl-nav .nav-link:hover, .hl-nav .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .07); }
.hl-nav .nav-link.active { color: #fff; box-shadow: inset 0 -2px 0 var(--green-bright); border-radius: 0; }
.hl-nav .nav-link .material-icons { font-size: 20px; }
.hl-nav .dropdown-menu {
    background: #13273a;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r);
    padding: 6px;
}
.hl-nav .dropdown-item {
    color: rgba(255, 255, 255, .8);
    font-size: .9rem;
    border-radius: var(--r-sm);
}
.hl-nav .dropdown-item:hover, .hl-nav .dropdown-item.active { background: rgba(255, 255, 255, .08); color: #fff; }
.hl-nav .dropdown-item.text-danger { color: #f1a199 !important; }
.hl-nav .dropdown-item.text-danger:hover { background: rgba(179, 55, 45, .25); }
.hl-nav .dropdown-divider { border-color: rgba(255, 255, 255, .1); }
.hl-nav .hl-btn--primary { background: var(--green); border-color: var(--green); }
.hl-nav .hl-btn--primary:hover { background: #38825a; border-color: #38825a; }
@media (max-width: 991.98px) {
    .hl-nav .navbar-collapse { padding: 10px 0 14px; }
    .hl-nav .nav-link { padding: 11px 4px; font-size: 1rem; }
    .hl-nav .nav-link.active { box-shadow: inset 2px 0 0 var(--green-bright); padding-left: 12px; }
    .hl-nav .navbar-nav + .navbar-nav { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); align-items: stretch !important; }
}

/* ── 6. Voettekst ──────────────────────────────────────────────────────── */
.hl-footer { background: var(--ink); color: rgba(255, 255, 255, .7); font-size: .9rem; }
.hl-footer__top { padding: clamp(40px, 6vw, 64px) 0 36px; }
.hl-footer__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font: 700 1.25rem/1 'Bricolage Grotesque', 'Inter', sans-serif;
    letter-spacing: -.02em;
    color: #fff;
}
.hl-footer__brand .material-icons { font-size: 24px; color: var(--green-bright); }
.hl-footer__title {
    margin: 0 0 14px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.hl-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.hl-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.hl-footer a:hover { color: #fff; text-decoration: underline; }
.hl-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 22px 0 28px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .825rem;
    color: rgba(255, 255, 255, .55);
}

/* ── 7. Gelijktrekken van pagina-eigen onderdelen ──────────────────────────
   Veel pagina's hebben een eigen <style>-blok met dezelfde namen (.page-hero,
   .hero-badge, .btn-create, ...). Deze regels houden die onderdelen overal
   gelijk; `body` ervoor wint het van het blok in de pagina zelf. */

/* Koppen van de planner: geen gloed, geen icoontegel, één soort bovenregel. */
body .page-hero { --green-bright: #6fd197; }
body .page-hero::after,
body .blog-hero::before { display: none; }
body .hero-icon-bg { display: none; }
body .page-hero h1 { font-weight: 700; letter-spacing: -.02em; }
body .page-hero .sub { color: rgba(255, 255, 255, .72); }
body .hero-badge,
body .count-badge {
    display: block;
    width: fit-content;
    margin-bottom: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--green-bright);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
body .hero-badge .material-icons,
body .count-badge .material-icons { display: none; }

/* Eén kleur voor de hoofdactie, op elke plannerpagina. */
body .btn-create {
    background: var(--green);
    border: 1px solid var(--green);
    border-radius: var(--r);
    box-shadow: none;
    font-weight: 600;
    transition: background-color .15s, border-color .15s;
}
body .btn-create:hover { background: var(--green-dark); border-color: var(--green-dark); transform: none; box-shadow: none; }
body .page-hero .btn-create { background: #fff; border-color: #fff; color: var(--ink); }
body .page-hero .btn-create:hover { background: var(--green-tint); border-color: var(--green-tint); color: var(--ink); }
body .filter-pill { border-width: 1px; border-radius: var(--r-sm); }
body .filter-pill:hover { background: var(--chip); border-color: var(--line-strong); color: var(--text); }
body .filter-pill.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Kaarten bewegen niet bij aanwijzen; een rand en zachte schaduw volstaan. */
body .trail-card:hover,
body .hike-card:hover,
body .feature-card:hover,
body .blog-card:hover,
body .related-card:hover,
body .dash-card:hover,
body .tool-card:hover,
body .calc-card:hover { transform: none; }

/* Getallen in de kop van een lijst. */
body .stat-pill { border-radius: var(--r); }

/* Paginering in Bootstrap-opmaak. */
body .page-link { color: var(--text-2); border-color: var(--line); }
body .page-item.active .page-link { background: var(--ink); border-color: var(--ink); color: #fff; }
body .page-link:hover { background: var(--chip); color: var(--text); border-color: var(--line-strong); }

.form-check-input { background-color: #fff; border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.input-group-text { background-color: var(--chip); border-color: var(--line-strong); color: var(--muted); }

/* Een icoon dat als blok in een gecentreerd vak staat hoort ook in het midden. */
[style*="text-align:center"] > .material-icons[style*="display:block"],
.text-center > .material-icons[style*="display:block"] { margin-left: auto; margin-right: auto; }

/* Paginakoppen, waar ze ook staan: één gewicht, geen gekleurd woord in de titel,
   en het lichte accentgroen op de donkere achtergrond. */
h1, h2 { font-weight: 700 !important; }
h1 span[style*="color"] { color: inherit !important; }
[class*="hero"] { --green-bright: #6fd197; }
[class*="hero"] .hl-eyebrow { color: var(--green-bright); }

/* Categorie-filters en -labels: één vorm en één kleur. */
body .cat-pill { border-radius: var(--r-sm); border-color: var(--line); box-shadow: none; }
body .cat-pill .material-icons { display: none; }
body .cat-pill:hover { background: var(--chip); border-color: var(--line-strong); color: var(--text); }
body .cat-pill.active { background: var(--ink); border-color: var(--ink); color: #fff; }
body .blog-cat-badge[class],
body .cat-badge[class],
body .category-badge[class],
body .product-cat-badge[class] { background: var(--green-tint); color: var(--green-dark); border-radius: var(--r-sm); }

/* ── 8. Aanvullingen op de uitgedunde Bootstrap-bundel ─────────────────────
   public/css/bootstrap.min.css bevat alleen de klassen die ooit in gebruik
   waren. Deze ontbraken terwijl templates ze wel gebruiken. */
.btn-outline-light { border: 1px solid rgba(255, 255, 255, .4); color: #fff; background: transparent; }
.btn-outline-light:hover, .btn-outline-light:focus-visible { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .7); color: #fff; }
@media (min-width: 576px) {
    .flex-sm-row { flex-direction: row !important; }
    .align-items-sm-start { align-items: flex-start !important; }
}
@media (min-width: 992px) {
    .g-lg-5 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }
    .ms-lg-3 { margin-left: 1rem !important; }
    .gap-lg-1 { gap: .25rem !important; }
    .align-items-lg-center { align-items: center !important; }
}