/* ============================================
   NOMALIE CENTRALE CSS v1.0
   Wijzig hier voor globale styling updates
   
   Inhoud:
   1. CSS Variables
   2. Base Styles
   3. Paper Texture
   4. Navigation
   5. Mobile Menu
   6. Modals
   7. Cards & Shadows
   8. Form Elements
   9. Buttons
   10. Animations
   11. Utilities
   12. Print Styles
   
   Laatste update: Januari 2025
   ============================================ */

/* ===========================================
   1. CSS VARIABLES
   =========================================== */
:root {
    /* Kleuren */
    --nomalie-bg: #F7F4EF;
    --nomalie-card: #FFFCF9;
    --nomalie-text: #46352D;
    --nomalie-copper: #A67C52;
    --nomalie-copper-dark: #8B5A2B; /* Donkerder voor tekst (4.5:1 contrast op wit) */
    --nomalie-muted: #9C948F;
    --nomalie-soft: #FFF8F2;
    
    /* Fonts */
    --font-sans: 'Manrope', sans-serif;
    --font-serif: 'Lora', serif;
    
    /* Shadows */
    --shadow-soft: 0 20px 40px -10px rgba(166, 124, 82, 0.08);
    --shadow-card: 0 4px 20px -2px rgba(70, 53, 45, 0.03);
    --shadow-lift: 0 10px 30px -5px rgba(166, 124, 82, 0.12);

    /* Border Radius - Zachte, afgeronde hoeken */
    --radius-button: 10px;
    --radius-card: 8px;
    --radius-input: 6px;
    --radius-small: 4px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ===========================================
   2. BASE STYLES
   =========================================== */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--nomalie-bg);
    color: var(--nomalie-text);
    font-family: var(--font-sans);
}

/* ===========================================
   HERO SECTION (centraal)
   Gebruik: <header class="hero">
   =========================================== */
.hero {
    position: relative;
    width: 100%;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .hero {
        min-height: 700px;
    }
}

.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    filter: saturate(0.75) brightness(0.92) contrast(0.90);
    opacity: 0.80;
    transition: transform 20s ease-in-out;
}

.hero:hover .hero__image {
    transform: scale(1.03);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.18) 0%,
        rgba(0, 0, 0, 0.30) 50%,
        rgba(0, 0, 0, 0.18) 100%
    );
}

.hero__content {
    position: relative;
    z-index: 10;
}

.hero h1 {
    font-size: 1.875rem; /* text-3xl */
    line-height: 1.1;
    font-weight: 400;
    color: #fff;
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
    .hero h1 {
        font-size: 3rem;
    }
}

.hero .hero-intro {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
    max-width: 36rem;
    margin: 0 auto;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
    .hero .hero-intro {
        font-size: 1.125rem; /* md:text-lg */
    }
}

/* ==========================================
   UNIFORME PAGE CONTAINER
   Gebruik voor alle hoofdcontent secties
   ========================================== */
.page-container,
.container-uniform {
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

::selection {
    background-color: var(--nomalie-copper);
    color: white;
}

/* ===========================================
   2b. PAGE HEADER TYPOGRAFIE
   Centraal: H1 headline + subtekst optimalisatie
   Specificity moet hoger dan Tailwind utilities
   =========================================== */
main > header.text-center h1 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2;
}

main > header.text-center > p {
    line-height: 1.5;
    font-weight: 400;
}

/* ===========================================
   3. PAPER TEXTURE
   =========================================== */
.paper-texture {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--nomalie-bg);
    pointer-events: none;
}

.paper-texture::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ===========================================
   4. NAVIGATION
   =========================================== */
.logo-blend {
    mix-blend-mode: multiply;
}

/* Nav Item Active State */
.nav-item {
    position: relative;
    transition: color var(--transition-fast);
}

.nav-item.active {
    color: var(--nomalie-copper);
}

.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--nomalie-copper);
    border-radius: var(--radius-small);
}

/* ===========================================
   5. MOBILE MENU
   =========================================== */
/* Slide-in panel van rechts — vervangt oude fullscreen overlay */
#mobile-menu {
    position: fixed !important;
    inset: 0 !important;
    z-index: 55;
    pointer-events: none;
    background: transparent !important;
    backdrop-filter: none !important;
    display: block !important;
}

#mobile-menu .menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 20, 17, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
}

#mobile-menu .menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    max-width: 100%;
    background: #F7F4EF;
    box-shadow: -12px 0 32px rgba(26, 20, 17, 0.08);
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: 1.75rem 2rem 2.5rem;
    overflow-y: auto;
}

@media (max-width: 640px) {
    #mobile-menu .menu-panel {
        width: 100%;
        padding: 1.5rem 1.5rem 2.5rem;
    }
}

#mobile-menu.hidden-menu .menu-backdrop {
    opacity: 0;
    pointer-events: none;
}
#mobile-menu.hidden-menu .menu-panel {
    transform: translateX(100%);
}

#mobile-menu.visible-menu {
    pointer-events: auto;
}
#mobile-menu.visible-menu .menu-backdrop {
    opacity: 1;
    pointer-events: auto;
}
#mobile-menu.visible-menu .menu-panel {
    transform: translateX(0);
}

.menu-close {
    align-self: flex-end;
    padding: 0.5rem 0.25rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(70, 53, 45, 0.5);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--transition-fast);
    margin-bottom: 1rem;
}
.menu-close:hover { color: var(--nomalie-copper); }

.menu-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.menu-item {
    display: block;
    padding: 0.5rem 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--nomalie-text);
    transition: color var(--transition-fast);
    text-decoration: none;
}
.menu-item:hover { color: var(--nomalie-copper); }
.menu-item--current {
    color: rgba(70, 53, 45, 0.35);
    cursor: default;
    pointer-events: none;
}

.menu-group {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0 0.5rem;
    margin-top: 0.75rem;
    border-top: 1px solid rgba(70, 53, 45, 0.08);
}
.menu-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(70, 53, 45, 0.4);
    margin-bottom: 0.5rem;
}

.menu-auth-wrapper {
    margin-top: auto;
    padding-top: 1.5rem;
}
.menu-auth-btn {
    display: block;
    width: 100%;
    padding: 0.75rem 1.5rem;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--nomalie-copper);
    border: 2px solid var(--nomalie-copper);
    border-radius: var(--radius-button);
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}
.menu-auth-btn:hover {
    background: var(--nomalie-copper);
    color: white;
}
.menu-auth-btn--neutral {
    color: rgba(70, 53, 45, 0.6);
    border-color: rgba(70, 53, 45, 0.15);
}
.menu-auth-btn--neutral:hover {
    background: rgba(70, 53, 45, 0.05);
    color: var(--nomalie-text);
    border-color: rgba(70, 53, 45, 0.25);
}

/* ===========================================
   6. MODALS
   =========================================== */
.modal-overlay {
    transition: opacity var(--transition-normal);
}

.modal-content {
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* ===========================================
   7. CARDS & SHADOWS
   =========================================== */
.shadow-soft {
    box-shadow: var(--shadow-soft);
}

.shadow-card {
    box-shadow: var(--shadow-card);
}

.shadow-lift {
    box-shadow: var(--shadow-lift);
}

/* ===========================================
   8. FORM ELEMENTS
   =========================================== */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    font-family: var(--font-sans);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--nomalie-copper);
}

/* Minimalist Input Style (gebruikt door login, signup, contact) */
.input-minimalist {
    width: 100%;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid rgba(70, 53, 45, 0.2);
    background: transparent;
    font-size: 0.95rem;
    color: #46352D;
    border-radius: 0;
    transition: all 0.3s ease;
}

.input-minimalist:focus {
    outline: none;
    border-bottom-color: #A67C52;
    box-shadow: 0 1px 0 #A67C52;
}

.input-minimalist::placeholder {
    color: #9C948F !important;
    font-style: normal !important;
    font-size: 0.9rem !important;
    opacity: 1 !important;
}

.input-minimalist:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #FFFCF9 inset;
    -webkit-text-fill-color: #46352D;
}

/* ===========================================
   9. BUTTONS
   =========================================== */
.btn-primary {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: var(--nomalie-copper);
    color: white;
    border: 2px solid var(--nomalie-copper);
    border-radius: var(--radius-button);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.20em;
    text-decoration: none;
    text-align: center;
    transition: all var(--transition-fast);
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-secondary {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: transparent;
    border: 1px solid rgba(70, 53, 45, 0.12);
    border-radius: var(--radius-button);
    color: rgba(70, 53, 45, 0.7);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    border-color: rgba(166, 124, 82, 0.4);
    color: var(--nomalie-copper);
    background: rgba(166, 124, 82, 0.03);
}

.btn-copper-outline {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: transparent;
    border: 2px solid var(--nomalie-copper);
    border-radius: var(--radius-button);
    color: var(--nomalie-copper);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.20em;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-copper-outline:hover {
    background: var(--nomalie-copper);
    color: white;
    transform: translateY(-2px);
}

/* ===========================================
   10. ANIMATIONS
   =========================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes subtleFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* ===========================================
   11. UTILITIES
   =========================================== */
/* Copper filter - zeer zachte, dienende look - foto's als sfeeraccent, niet als hoofdrol */
.copper-filter {
    transition: transform var(--transition-slow), filter var(--transition-slow), opacity var(--transition-slow);
    filter: saturate(0.75) brightness(0.92) contrast(0.90);
    opacity: 0.80;
}

.group:hover .copper-filter {
    transform: scale(1.02);
    filter: saturate(0.82) brightness(0.95) contrast(0.93);
    opacity: 0.88;
}

/* Accordion */
.accordion-content {
    transition: all var(--transition-normal);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.accordion-open {
    max-height: 1000px;
    opacity: 1;
    margin-top: 0.5rem;
}

.rotate-icon {
    transform: rotate(180deg);
}

/* Micro-disclaimer - subtiel, onder content, voor footer */
.micro-disclaimer {
    font-size: 0.85rem;
    color: #6E6E6E;
    margin-top: 40px;
}

/* ===========================================
   ZO WERKT HET SECTIE (Homepage + andere pagina's)
   Centrale styling voor uniformiteit
   =========================================== */

/* Step circles - robuuster en groter */
.step-circle {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid rgba(70, 53, 45, 0.12);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-normal);
}

.step-circle:hover {
    border-color: var(--nomalie-copper);
    box-shadow: var(--shadow-soft);
    transform: scale(1.05);
}

@media (min-width: 768px) {
    .step-circle {
        width: 5rem;
        height: 5rem;
        font-size: 1.75rem;
    }
}

/* Step containers - meer ruimte */
#hoe-werkt-het .group,
.how-it-works-section .step-container {
    padding: 1.25rem;
}

@media (min-width: 768px) {
    #hoe-werkt-het .group,
    .how-it-works-section .step-container {
        padding: 1.5rem 1.25rem;
    }
}

/* Step titels - grotere tekst met meer gewicht */
#hoe-werkt-het .text-2xl,
.how-it-works-section .step-title {
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    line-height: 1.3;
    color: var(--nomalie-text);
}

@media (min-width: 768px) {
    #hoe-werkt-het .text-2xl,
    .how-it-works-section .step-title {
        font-size: 1.5rem;
    }
}

/* Step beschrijvingen - beter contrast en grotere tekst */
#hoe-werkt-het .text-nomalie-text\/60,
.how-it-works-section .step-description {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(70, 53, 45, 0.75);
}

@media (min-width: 768px) {
    #hoe-werkt-het .text-nomalie-text\/60,
    .how-it-works-section .step-description {
        font-size: 1.0625rem;
    }
}

/* Section header - robuuster */
#hoe-werkt-het h2,
.how-it-works-section h2 {
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    #hoe-werkt-het h2,
    .how-it-works-section h2 {
        font-size: 2.75rem;
        margin-bottom: 1.75rem;
    }
}

/* Section intro tekst */
#hoe-werkt-het .text-center > p,
.how-it-works-section .section-intro {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgba(70, 53, 45, 0.75);
}

@media (min-width: 768px) {
    #hoe-werkt-het .text-center > p,
    .how-it-works-section .section-intro {
        font-size: 1.125rem;
    }
}

/* LEGACY CLASSES - VERWIJDERD
   Gebruik .page-container in plaats hiervan
   =========================================== */

/* Dashboard kaartjes 2x2 grid */
.steps-grid-wide {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .steps-grid-wide { grid-template-columns: 1fr; }
}

.steps-grid-wide > a {
    min-height: 180px;
}

/* ===========================================
   12. PRINT STYLES
   =========================================== */
@media print {
    .paper-texture,
    #mobile-menu,
    nav,
    footer,
    .no-print {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-size: 12pt;
        line-height: 1.5;
    }

    a {
        text-decoration: underline;
    }

    /* Voorkom dat secties of vraag-blokken halverwege afbreken */
    section,
    .question-block,
    .basis-vraag,
    .form-step,
    article {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Kop blijft bij volgende paragraaf */
    h1, h2, h3 {
        page-break-after: avoid;
        break-after: avoid-page;
    }

    h2 { font-size: 16pt; }
    h3 { font-size: 13pt; }

    /* Paginafooter met datum + paginanummer */
    @page {
        margin: 2cm;
        @bottom-center {
            content: "Nomalie \2014 pagina " counter(page) " / " counter(pages);
            font-family: sans-serif;
            font-size: 9pt;
            color: #888;
        }
    }
}

/* ===========================================
   13. FORM INPUTS (Privacy & Formulier)
   =========================================== */
.field-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    color: rgba(70, 53, 45, 0.7);
    margin-bottom: 6px;
}

/* Underline inputs */
.input-underline,
.input-underline[type="text"],
.input-underline[type="email"],
.input-underline[type="date"],
select.input-underline {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid rgba(70, 53, 45, 0.2);
    background: transparent;
    font-size: 0.95rem;
    color: var(--nomalie-text);
    border-radius: 0;
    transition: all var(--transition-fast);
}

.input-underline:focus,
select.input-underline:focus {
    outline: none;
    border-bottom-color: var(--nomalie-copper);
    box-shadow: 0 1px 0 var(--nomalie-copper);
}

/* Radio cards */
.radio-card input:checked + div {
    border-color: var(--nomalie-copper);
    background-color: #FFFBF6;
}

.radio-card input:checked + div .indicator {
    background-color: var(--nomalie-copper);
    border-color: var(--nomalie-copper);
}

/* ===========================================
   14. PROGRESS BAR (Wensenkluis)
   =========================================== */
.progress-fill {
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card number watermark */
.card-number {
    position: absolute;
    top: -10px;
    right: 10px;
    font-family: var(--font-serif);
    font-size: 80px;
    font-weight: 400;
    color: var(--nomalie-copper);
    opacity: 0.08;
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    font-style: italic;
}

/* ===========================================
   15. SCAN PAGE STYLES
   =========================================== */
.scan-option {
    transition: all var(--transition-fast);
}

.scan-option:hover {
    border-color: var(--nomalie-copper);
}

.scan-option.selected {
    border-color: var(--nomalie-copper);
    background-color: var(--nomalie-soft);
}

.scan-result-card {
    animation: fadeIn 0.5s ease forwards;
}

/* ===========================================
   16. WENSENKLUIS PRINT STYLES
   =========================================== */
@media print {
    #print-header {
        display: block !important;
        text-align: center;
        margin-bottom: 30px;
        border-bottom: 2px solid var(--nomalie-copper);
        padding-bottom: 20px;
    }
    
    #print-wensen {
        display: block !important;
    }
    
    .print-chapter {
        page-break-inside: avoid;
        margin-bottom: 25px;
        border: 1px solid #eee;
        padding: 15px;
        border-radius: var(--radius-small);
    }
    
    .print-chapter h2 {
        color: var(--nomalie-copper);
        font-size: 14px;
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
        margin-bottom: 10px;
        text-transform: uppercase;
    }
    
    .print-field {
        margin-bottom: 8px;
    }
    
    .print-label {
        font-size: 10px;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
    
    .print-value {
        font-size: 12px;
        color: #333;
    }
    
    @page {
        margin: 20mm;
    }
    
    #guest-banner,
    #sync-toast {
        display: none !important;
    }
}

#print-header,
#print-wensen {
    display: none;
}

/* ===========================================
   17. FOOTER (Centraal)
   =========================================== */

.nomalie-footer {
    background-color: #FAF8F5;
    border-top: 1px solid rgba(70, 53, 45, 0.05);
    padding: 3rem 0;
}

.nomalie-footer .footer-container {
    max-width: 72rem; /* max-w-6xl */
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .nomalie-footer .footer-container {
        flex-direction: row;
        gap: 0;
        position: relative;
    }
}

.nomalie-footer .footer-logo {
    width: 100%;
    display: flex;
    justify-content: center;
}

@media (min-width: 768px) {
    .nomalie-footer .footer-logo {
        width: 25%;
        justify-content: flex-start;
    }
}

.nomalie-footer .footer-logo img {
    height: 2.5rem;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    opacity: 0.7;
    transition: opacity var(--transition-normal);
}

@media (min-width: 768px) {
    .nomalie-footer .footer-logo img {
        height: 3rem;
    }
}

.nomalie-footer .footer-logo img:hover {
    opacity: 1;
}

.nomalie-footer .footer-nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .nomalie-footer .footer-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

.nomalie-footer .footer-nav a {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(70, 53, 45, 0.6);
    font-weight: 600;
    transition: color var(--transition-fast);
}

.nomalie-footer .footer-nav a:hover {
    color: var(--nomalie-copper);
}

.nomalie-footer .footer-social {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .nomalie-footer .footer-social {
        width: 25%;
        justify-content: flex-end;
        padding-right: 0;
        margin-right: 0;
    }
}

.nomalie-footer .footer-social a {
    color: rgba(70, 53, 45, 0.4);
    transition: color var(--transition-fast);
}

.nomalie-footer .footer-social a:hover {
    color: var(--nomalie-copper);
}

.nomalie-footer .footer-social svg {
    height: 1.25rem;
    width: 1.25rem;
}

.nomalie-footer .footer-copyright {
    text-align: center;
    margin-top: 1.5rem;
}

.nomalie-footer .footer-copyright p {
    font-size: 11px;
    color: rgba(70, 53, 45, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* Footer links (nieuw design) */
.footer-link {
    font-size: 14px;
    color: rgba(70, 53, 45, 0.55);
    text-decoration: none;
    transition: color 0.2s ease;
    line-height: 1.4;
}

.footer-link:hover {
    color: var(--nomalie-copper);
}

/* ===========================================
   18. TESTIMONIAL QUOTE CARDS
   Herbruikbaar component voor quotes met sfeerbeeld
   Gebruik: <div class="quote-card"> met achtergrondafbeelding
   =========================================== */

.quote-card {
    position: relative;
    width: 100%;
    min-height: 180px;
    border-radius: var(--radius-button);
    overflow: hidden;
    background-color: var(--nomalie-copper);
}

@media (min-width: 768px) {
    .quote-card {
        min-height: 220px;
        border-radius: var(--radius-button);
    }
}

/* Achtergrondafbeelding */
.quote-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Copper filter is now baked into images, no CSS filter needed */
    transition: transform 20s ease-in-out;
}

.quote-card:hover .quote-card__image {
    transform: scale(1.05);
}

/* Overlay voor betere leesbaarheid - GEEN BLUR */
.quote-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.08) 0%,
        rgba(0, 0, 0, 0.15) 50%,
        rgba(0, 0, 0, 0.08) 100%
    );
}

/* Content container — relative zodat de kaart meegroeit met lange quotes */
.quote-card__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem 0.75rem;
    min-height: 180px;
    z-index: 10;
}

@media (min-width: 768px) {
    .quote-card__content {
        min-height: 220px;
        padding: 2rem 0.75rem;
    }
}

/* Quote box met decoratieve hoeken */
.quote-card__box {
    position: relative;
    max-width: 46rem;
    padding: 2rem 2.5rem;
    background: rgba(70, 53, 45, 0.22);
    border-radius: var(--radius-card);
}

@media (min-width: 768px) {
    .quote-card__box {
        padding: 2.5rem 3.5rem;
    }
}

/* Decoratieve hoeken - L-vormige haakjes BINNEN de box */
.quote-card__box::before,
.quote-card__box::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    border-color: var(--nomalie-copper);
    border-style: solid;
    border-width: 0;
    opacity: 1;
}

.quote-card__box::before {
    top: 14px;
    left: 14px;
    border-top-width: 3px;
    border-left-width: 3px;
}

.quote-card__box::after {
    bottom: 14px;
    right: 14px;
    border-bottom-width: 3px;
    border-right-width: 3px;
}

@media (min-width: 768px) {
    .quote-card__box::before,
    .quote-card__box::after {
        width: 44px;
        height: 44px;
    }

    .quote-card__box::before {
        top: 18px;
        left: 18px;
    }

    .quote-card__box::after {
        bottom: 18px;
        right: 18px;
    }
}

/* Quote tekst */
.quote-card__text {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 1.0625rem;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.6);
    margin: 0;
}

@media (min-width: 768px) {
    .quote-card__text {
        font-size: 1.1875rem;
        line-height: 1.75;
    }
}

/* Auteur/naam */
.quote-card__author {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    margin-top: 0.75rem;
}

@media (min-width: 768px) {
    .quote-card__author {
        font-size: 0.875rem;
        margin-top: 1rem;
    }
}

/* ===========================================
   19. INLINE QUOTE (voor binnen artikelen)
   Simpele quote met koperen lijn links
   =========================================== */

.quote-inline {
    position: relative;
    margin: 2rem 0;
    padding-left: 1.5rem;
}

@media (min-width: 768px) {
    .quote-inline {
        padding-left: 2rem;
        margin: 3rem 0;
    }
}

.quote-inline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--nomalie-copper);
    opacity: 0.4;
    border-radius: var(--radius-small);
}

.quote-inline__text {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgba(70, 53, 45, 0.85);
    margin: 0;
}

@media (min-width: 768px) {
    .quote-inline__text {
        font-size: 1.5rem;
    }
}

.quote-inline__author {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--nomalie-copper);
    margin-top: 0.75rem;
}

/* ===========================================
   20. TYPOGRAPHY SYSTEM
   Consistente tekst-opmaak voor de hele site
   =========================================== */

/* --- Uitspraak: korte statement met SVG aanhalingstekens --- */
.uitspraak {
    position: relative;
    padding: 1.75rem 2rem 1.75rem 4.5rem;
    margin: 1.25rem 0;
    background: rgba(166, 124, 82, 0.06);
    border-radius: 0.75rem;
}

.uitspraak::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: 1.25rem;
    width: 2rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23a67c52'%3E%3Cpath d='M6 4C2.7 4 0 6.7 0 10v4c0 3.3 2.7 6 6 6 0 4.4-2.2 7.2-2.3 7.3-.4.5-.3 1.1.1 1.5.2.2.5.2.7.2.1 0 .2 0 .3-.1C5.2 28.7 12 24.4 12 18v-8c0-3.3-2.7-6-6-6z'/%3E%3Cpath d='M26 4c-3.3 0-6 2.7-6 6v4c0 3.3 2.7 6 6 6 0 4.4-2.2 7.2-2.3 7.3-.4.5-.3 1.1.1 1.5.2.2.5.2.7.2.1 0 .2 0 .3-.1C25.2 28.7 32 24.4 32 18v-8c0-3.3-2.7-6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.45;
}

.uitspraak p {
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(70, 53, 45, 0.8);
    margin: 0;
}

@media (min-width: 768px) {
    .uitspraak {
        padding: 2rem 2.5rem 2rem 5.5rem;
    }
    .uitspraak::before {
        top: 1.75rem;
        left: 1.5rem;
        width: 2.5rem;
        height: 2.5rem;
    }
    .uitspraak p {
        font-size: 1rem;
    }
}

/* --- Intro tekst (onder page headers) --- */
.text-intro {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(70, 53, 45, 0.88);
}

@media (min-width: 768px) {
    .text-intro {
        font-size: 1.125rem;
    }
}

/* Variant: gecursiveerd met border (voor artikelen/partners) */
.text-intro--accent {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(70, 53, 45, 0.82);
    padding-left: 1.5rem;
    border-left: 2px solid rgba(166, 124, 82, 0.4);
}

@media (min-width: 768px) {
    .text-intro--accent {
        font-size: 1.25rem;
    }
}

/* --- Body tekst (standaard alinea's) --- */
.text-body {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(70, 53, 45, 0.92);
}

.text-body + .text-body {
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .text-body {
        font-size: 1rem;
    }
}

/* --- Kleine tekst (bijschriften, meta-info) --- */
.text-small {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(70, 53, 45, 0.85);
}

@media (min-width: 768px) {
    .text-small {
        font-size: 0.9375rem;
    }
}

/* --- Labels (uppercase tracking) --- */
.text-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--nomalie-copper);
}

@media (min-width: 768px) {
    .text-label {
        font-size: 0.8125rem;
    }
}

/* ===========================================
   LEESBAARHEIDS-OVERRIDES (2026-05-16)
   Forceer minimumcontrast en minimumfont voor
   site-brede leesbaarheid. Tailwind opacity-classes
   onder 70% en font-sizes onder 12px worden hier
   opgekrikt zodat ook 60+ lezers op matige schermen
   alles kunnen lezen.
   =========================================== */

/* Lage opacity op nomalie-text: minimaal 80% */
.text-nomalie-text\/40,
.text-nomalie-text\/45,
.text-nomalie-text\/50,
.text-nomalie-text\/55 {
    color: rgba(70, 53, 45, 0.80) !important;
}

.text-nomalie-text\/60,
.text-nomalie-text\/65 {
    color: rgba(70, 53, 45, 0.85) !important;
}

.text-nomalie-text\/70 {
    color: rgba(70, 53, 45, 0.88) !important;
}

/* Mini-fonts: minimaal 12px (text-xs) */
.text-\[9px\],
.text-\[10px\] {
    font-size: 0.75rem !important;
}

.text-\[11px\] {
    font-size: 0.8125rem !important;
}

/* nomalie-muted (#9C948F) was te licht voor body-tekst */
.text-nomalie-muted {
    color: #7a716c !important;
}

/* --- Section headers --- */
.text-section-title {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--nomalie-text);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .text-section-title {
        font-size: 1.5rem;
    }
}

/* --- Prose container (voor artikel-content) --- */
.prose {
    color: rgba(70, 53, 45, 0.8);
    line-height: 1.7;
}

.prose p {
    margin-bottom: 1.5rem;
}

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

.prose h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--nomalie-text);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.prose h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--nomalie-text);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.prose ul,
.prose ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.5rem;
}

.prose a {
    color: var(--nomalie-copper);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.prose a:hover {
    color: var(--nomalie-text);
}

.prose strong {
    font-weight: 600;
    color: var(--nomalie-text);
}

.prose em {
    font-style: italic;
}

/* Afbeeldingen en containers in prose: nooit breder dan tekst */
.prose img,
.prose section img,
.prose .not-prose img,
article .prose img {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Foto containers in prose: blijven binnen tekstbreedte */
.prose section.not-prose,
.prose > section,
article .prose section,
article .prose .not-prose {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Specifiek voor div containers met w-full class binnen prose */
.prose .w-full,
article .prose .w-full {
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .prose {
        font-size: 1rem;
    }

    .prose h2 {
        font-size: 1.75rem;
    }

    .prose h3 {
        font-size: 1.375rem;
    }
}

/* --- Blog / Artikel Typography --- */

/* Content container - bredere tekstbreedte voor artikelen/blogs */
.article-content {
    max-width: 53rem; /* ~850px - 25-30% minder scrollen */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Lead paragraph (cursief met border) */
.article-lead {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.7;
    color: rgba(70, 53, 45, 0.6);
    border-left: 2px solid rgba(166, 124, 82, 0.3);
    padding-left: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .article-lead {
        font-size: 1.125rem;
    }
}

/* Artikel body container */
.article-body {
    color: rgba(70, 53, 45, 0.8);
    line-height: 1.8;
}

.article-body p {
    margin-bottom: 1.5rem;
}

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

@media (min-width: 768px) {
    .article-body {
        font-size: 1rem;
    }
}

/* Artikel headings */
.article-body h2,
.article-h2 {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--nomalie-text);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.article-body h3,
.article-h3 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--nomalie-text);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .article-body h2,
    .article-h2 {
        font-size: 1.5rem;
    }

    .article-body h3,
    .article-h3 {
        font-size: 1.25rem;
    }
}

/* Artikel links */
.article-body a {
    color: var(--nomalie-copper);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.article-body a:hover {
    color: var(--nomalie-text);
}

/* Artikel lijsten */
.article-body ul,
.article-body ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.article-body li {
    margin-bottom: 0.5rem;
}

/* Artikel blockquote */
.article-blockquote {
    position: relative;
    margin: 2.5rem 0;
    padding-left: 1.5rem;
}

.article-blockquote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(166, 124, 82, 0.3);
    border-radius: var(--radius-small);
}

.article-blockquote p {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    line-height: 1.5;
    color: rgba(70, 53, 45, 0.8);
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .article-blockquote {
        padding-left: 2rem;
    }

    .article-blockquote p {
        font-size: 1.625rem;
    }
}

/* Artikel highlight box */
.article-highlight {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(70, 53, 45, 0.05);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    margin: 2rem 0;
}

.article-highlight p {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: rgba(70, 53, 45, 0.9);
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .article-highlight {
        padding: 2rem;
    }

    .article-highlight p {
        font-size: 1.125rem;
    }
}

/* Artikel slotopmerking */
.article-closing {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(70, 53, 45, 0.6);
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(70, 53, 45, 0.1);
}

@media (min-width: 768px) {
    .article-closing {
        font-size: 1.25rem;
    }
}

/* ===========================================
   20a. HOMEPAGE USP CARDS
   Robuste kaarten op homepage hero - 4 features grid
   =========================================== */

/* Homepage feature kaarten - meer gewicht en body */
.hero .grid .bg-nomalie-card {
    padding: 2rem;
    min-height: 180px;
}

@media (min-width: 768px) {
    .hero .grid .bg-nomalie-card {
        padding: 2.25rem 2rem;
        min-height: 200px;
    }
}

/* Grotere titels in homepage kaarten */
.hero .grid .bg-nomalie-card p.text-lg {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .hero .grid .bg-nomalie-card p.text-lg {
        font-size: 1.25rem;
    }
}

/* Grotere beschrijvingstekst in homepage kaarten */
.hero .grid .bg-nomalie-card p.text-base {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(70, 53, 45, 0.75);
}

@media (min-width: 768px) {
    .hero .grid .bg-nomalie-card p.text-base {
        font-size: 1rem;
    }
}

/* Betere shadows voor homepage kaarten */
.hero .grid .bg-nomalie-card {
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(70, 53, 45, 0.06);
    transition: all var(--transition-normal);
}

.hero .grid .bg-nomalie-card:hover {
    box-shadow: var(--shadow-lift);
    border-color: rgba(166, 124, 82, 0.15);
    transform: translateY(-2px);
}

/* ===========================================
   20b. INSPIRATIE THEMA CARDS (alleen hoofdpagina)
   Minimale aanpassing - alleen grotere foto's
   =========================================== */

/* Grotere afbeeldingen in thema kaarten op inspiratie hoofdpagina */
#themas .inspiratie-card .w-24 {
    width: 7.5rem !important;
    height: 7.5rem !important;
}

@media (min-width: 768px) {
    #themas .inspiratie-card .w-24 {
        width: 8.5rem !important;
        height: 8.5rem !important;
    }
}

/* Minimaal meer hoogte voor thema kaarten */
#themas .inspiratie-card {
    min-height: 110px;
}

/* Carousel items - uniforme typografie zonder dikke font-serif */
.carousel-item h3 {
    font-family: var(--font-sans) !important;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .carousel-item h3 {
        font-size: 1.0625rem;
    }
}

/* Partner cards - consistente styling */
.partner-card h3 {
    font-family: var(--font-sans) !important;
    font-weight: 600;
    font-size: 1.0625rem;
}

@media (min-width: 768px) {
    .partner-card h3 {
        font-size: 1.125rem;
    }
}

/* ===========================================
   21. HEARTS FEATURE (Inspiratie Moodboard)
   Voor het opslaan van inspiratie-items
   =========================================== */

/* Heart button - 44x44px klikgebied voor touch accessibility */
.heart-button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 20;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.heart-button:hover {
    transform: scale(1.08);
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.heart-button:focus {
    outline: 2px solid var(--nomalie-copper);
    outline-offset: 2px;
}

.heart-button:active {
    transform: scale(0.95);
}

/* Heart SVG icon */
.heart-button svg {
    width: 22px;
    height: 22px;
    transition: all 0.25s ease;
    stroke: var(--nomalie-muted);
    stroke-width: 1.5;
    fill: none;
}

.heart-button:hover svg {
    stroke: var(--nomalie-copper);
}

/* Saved state */
.heart-button.saved svg {
    fill: var(--nomalie-copper);
    stroke: var(--nomalie-copper);
}

/* Pulse animation on save */
@keyframes heartPulse {
    0% { transform: scale(1); }
    25% { transform: scale(1.25); }
    50% { transform: scale(1); }
    75% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.heart-button.pulse svg {
    animation: heartPulse 0.4s ease;
}

/* Heart positioning variants */

/* Horizontale kaarten (thema's, voorbeelden) - rechtsmidden */
.inspiratie-card .heart-button {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.inspiratie-card .heart-button:hover {
    transform: translateY(-50%) scale(1.08);
}

/* Verticale kaarten met afbeelding bovenaan */
.card-vertical .heart-button {
    top: 12px;
    right: 12px;
    transform: none;
}

.card-vertical .heart-button:hover {
    transform: scale(1.08);
}

/* Partner kaarten - linksboven naast logo */
.partner-card .heart-button {
    top: 16px;
    right: auto;
    left: 16px;
    transform: none;
}

.partner-card .heart-button:hover {
    transform: scale(1.08);
}

/* Grid kaarten (verhalen) */
.verhaal-card .heart-button {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.verhaal-card .heart-button:hover {
    transform: translateY(-50%) scale(1.08);
}

/* Toast notification */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--nomalie-text);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-button);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 1000;
    max-width: 90%;
    text-align: center;
    font-size: 0.9375rem;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast.first-save {
    background: var(--nomalie-copper);
}

/* Toast with link */
.toast-link {
    display: inline-block;
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.toast-link:hover {
    color: white;
    text-decoration: underline;
}

/* Moodboard page styles */
.moodboard-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: var(--radius-card);
    border: 1px dashed rgba(70, 53, 45, 0.2);
}

.moodboard-empty svg {
    width: 48px;
    height: 48px;
    color: var(--nomalie-muted);
    margin-bottom: 1rem;
}

.moodboard-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}

@media (min-width: 640px) {
    .moodboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .moodboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.moodboard-item {
    position: relative;
    background: white;
    border-radius: var(--radius-card);
    border: 1px solid rgba(70, 53, 45, 0.08);
    padding: 1rem;
    transition: all var(--transition-fast);
}

.moodboard-item:hover {
    border-color: rgba(166, 124, 82, 0.3);
    box-shadow: var(--shadow-soft);
}

.moodboard-item .heart-button {
    top: 12px;
    right: 12px;
    transform: none;
}

.moodboard-item .heart-button:hover {
    transform: scale(1.08);
}

/* Filter tabs voor moodboard */
.moodboard-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.moodboard-filter {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    border-radius: 20px;
    background: rgba(166, 124, 82, 0.08);
    color: var(--nomalie-text);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.moodboard-filter:hover {
    background: rgba(166, 124, 82, 0.15);
}

.moodboard-filter.active {
    background: var(--nomalie-copper);
    color: white;
}

/* ===========================================
   21b. HEART ICONS (Artikel detail pagina's)
   Voor opslaan van quotes, passages en afbeeldingen in artikelen
   =========================================== */

/* Saveable items container - voor quotes, images, passages */
.saveable-item {
    position: relative;
}

/* Heart icon styling voor artikel content */
.heart-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 20;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.heart-icon:hover {
    transform: scale(1.1);
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Heart icon SVG */
.heart-icon svg {
    width: 18px;
    height: 18px;
    transition: all 0.25s ease;
    stroke: var(--nomalie-muted);
    stroke-width: 1.5;
    fill: none;
}

.heart-icon:hover svg {
    stroke: var(--nomalie-copper);
}

/* Saved state voor heart-icon */
.heart-icon.saved svg {
    fill: var(--nomalie-copper);
    stroke: var(--nomalie-copper);
}

/* Positionering varianten voor verschillende content types */

/* Quote blocks - rechtsboven */
.saveable-quote .heart-icon {
    top: 0;
    right: 0;
}

/* Image grids - rechtsboven in container */
.saveable-item:not(.saveable-quote):not(.saveable-passage) .heart-icon {
    top: 8px;
    right: 8px;
}

/* Passage/key takeaway - hartje naast tekst */
.saveable-passage {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.saveable-passage .heart-icon {
    position: static;
    flex-shrink: 0;
    order: 2;
    margin-top: 2px;
}

.saveable-passage > p {
    flex: 1;
    order: 1;
}

/* Mobile aanpassingen */
@media (max-width: 640px) {
    .heart-icon {
        width: 32px;
        height: 32px;
    }

    .heart-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* ===========================================
   22. HERO IMAGE SECTION
   Voor artikel/voorbeeld pagina's met grote hero afbeelding
   =========================================== */

.hero-section {
    width: 100%;
    margin-bottom: 4rem;
}

.hero-image-container {
    width: 100%;
    height: 50vh;
    min-height: 400px;
    max-height: 600px;
    position: relative;
    overflow: hidden;
}

.hero-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--nomalie-bg), transparent, transparent);
}

/* ===========================================
   23. BACK LINK (Terug navigatie)
   Consistente styling voor terug-links met pijl
   =========================================== */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(70, 53, 45, 0.6);
    transition: color var(--transition-fast);
    margin-bottom: 1rem;
}

.back-link:hover {
    color: var(--nomalie-copper);
}

.back-link svg {
    width: 1rem;
    height: 1rem;
}

/* ===========================================
   24. ARTICLE TAGS
   Tags/labels boven artikelen
   =========================================== */

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.tag {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 9999px;
}

.tag--primary {
    background-color: rgba(166, 124, 82, 0.1);
    color: var(--nomalie-copper);
}

.tag--secondary {
    background-color: var(--nomalie-soft);
    color: rgba(70, 53, 45, 0.6);
}

/* ===========================================
   25. ARTICLE FOOTER NAVIGATION
   Navigatie onderaan artikelen
   =========================================== */

.article-footer-nav {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(70, 53, 45, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    .article-footer-nav {
        flex-direction: row;
    }
}

.article-footer-nav a {
    flex: 1;
    text-align: center;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 1rem;
    border-radius: var(--radius-card);
    transition: all var(--transition-fast);
}

.article-footer-nav .btn-outline {
    color: rgba(70, 53, 45, 0.5);
    border: 1px solid rgba(70, 53, 45, 0.1);
}

.article-footer-nav .btn-outline:hover {
    color: var(--nomalie-copper);
    border-color: var(--nomalie-copper);
}

.article-footer-nav .btn-filled {
    background-color: var(--nomalie-copper);
    color: white;
    border-radius: var(--radius-button);
}

.article-footer-nav .btn-filled:hover {
    background-color: rgba(166, 124, 82, 0.9);
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */

/* Skip to content link (voor keyboard users) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--nomalie-text);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-button);
    z-index: 9999;
    text-decoration: none;
    font-size: 0.875rem;
}

.skip-link:focus {
    top: 1rem;
}

/* Focus-visible voor alle interactieve elementen */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--nomalie-copper);
    outline-offset: 2px;
}

/* Verwijder default outline als focus-visible supported is */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* Heart icon focus state (voor artikelpagina's) */
.heart-icon:focus-visible {
    outline: 2px solid var(--nomalie-copper);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Links met betere contrast (gebruik voor kleine tekst) */
.link-accessible {
    color: var(--nomalie-copper-dark);
}

.link-accessible:hover {
    color: var(--nomalie-text);
}

/* Screen reader only - verberg visueel maar houd toegankelijk */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduced motion - respecteer gebruikersvoorkeur */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --nomalie-copper: #7A4A1C;
        --nomalie-muted: #5A524D;
    }

    .heart-button svg,
    .heart-icon svg {
        stroke-width: 2;
    }
}

/* ===========================================
   26. GROOT LETTERTYPE MODE
   Toggle via body.groot-lettertype class
   Vergroot alle tekst voor oudere gebruikers
   =========================================== */

body.groot-lettertype {
    font-size: 1.125rem;
}

/* Headings */
body.groot-lettertype .hero h1 {
    font-size: 2.25rem;
}
@media (min-width: 768px) {
    body.groot-lettertype .hero h1 {
        font-size: 3.5rem;
    }
}

body.groot-lettertype .hero .hero-intro {
    font-size: 1.125rem;
}
@media (min-width: 768px) {
    body.groot-lettertype .hero .hero-intro {
        font-size: 1.25rem;
    }
}

/* Form elements */
body.groot-lettertype input,
body.groot-lettertype textarea,
body.groot-lettertype select {
    font-size: 1.0625rem !important;
}

body.groot-lettertype input::placeholder,
body.groot-lettertype textarea::placeholder,
body.groot-lettertype select::placeholder {
    font-size: 1rem !important;
}

body.groot-lettertype .field-label {
    font-size: 13px !important;
}

body.groot-lettertype .section-header {
    font-size: 1.25rem;
}

body.groot-lettertype .step-btn {
    font-size: 15px;
}

body.groot-lettertype .badge-soft {
    font-size: 15px;
    min-height: 44px;
}

body.groot-lettertype .action-link {
    font-size: 12px;
}

body.groot-lettertype .nvt-btn {
    font-size: 12px;
}

body.groot-lettertype .info-uitklap {
    font-size: 15px;
}

/* Buttons */
body.groot-lettertype .btn-primary {
    font-size: 0.875rem;
    padding: 0.875rem 2.25rem;
}

body.groot-lettertype .btn-secondary {
    font-size: 0.875rem;
    padding: 0.875rem 2.25rem;
}

body.groot-lettertype .btn-copper-outline {
    font-size: 0.875rem;
    padding: 0.875rem 2.25rem;
}

/* Typography classes */
body.groot-lettertype .text-body {
    font-size: 1.0625rem;
}
@media (min-width: 768px) {
    body.groot-lettertype .text-body {
        font-size: 1.125rem;
    }
}

body.groot-lettertype .text-small {
    font-size: 0.9375rem;
}

body.groot-lettertype .text-intro {
    font-size: 1.125rem;
}
@media (min-width: 768px) {
    body.groot-lettertype .text-intro {
        font-size: 1.25rem;
    }
}

body.groot-lettertype .text-label {
    font-size: 0.8125rem;
}

/* Prose / article content */
body.groot-lettertype .prose {
    font-size: 1.0625rem;
}
@media (min-width: 768px) {
    body.groot-lettertype .prose {
        font-size: 1.125rem;
    }
}

body.groot-lettertype .prose h2 {
    font-size: 1.75rem;
}
@media (min-width: 768px) {
    body.groot-lettertype .prose h2 {
        font-size: 2rem;
    }
}

body.groot-lettertype .article-body {
    font-size: 1.0625rem;
}
@media (min-width: 768px) {
    body.groot-lettertype .article-body {
        font-size: 1.125rem;
    }
}

/* Navigation & footer */
body.groot-lettertype .nomalie-footer .footer-nav a {
    font-size: 13px;
}

body.groot-lettertype .back-link {
    font-size: 0.875rem;
}

body.groot-lettertype .tag {
    font-size: 0.8125rem;
}

/* Accordion / FAQ */
body.groot-lettertype .accordion-content {
    font-size: 1rem;
}

/* Quote cards */
body.groot-lettertype .quote-card__text {
    font-size: 1.1875rem;
}
@media (min-width: 768px) {
    body.groot-lettertype .quote-card__text {
        font-size: 1.375rem;
    }
}

/* Micro disclaimer */
body.groot-lettertype .micro-disclaimer {
    font-size: 0.95rem;
}

/* Wensenkluis/Wegwijzer specifiek */
body.groot-lettertype .blok-titel {
    font-size: 15px;
}

body.groot-lettertype .basis-vraag-tekst {
    font-size: 1.2rem;
}

body.groot-lettertype .samenvatting-tekst {
    font-size: 1.0625rem;
}

body.groot-lettertype .samenvatting-intro {
    font-size: 1.0625rem;
}

/* Step circles */
body.groot-lettertype .step-circle {
    font-size: 1.75rem;
}
@media (min-width: 768px) {
    body.groot-lettertype .step-circle {
        font-size: 2rem;
    }
}

/* A+ safety net — voorkom dat tekst wegvalt door vaste heights
   Regel: tekstcontainers mogen groeien, beeldcontainers behouden hun crop.
   Voeg hier containers toe als je ontdekt dat er tekst wegvalt bij A+. */
body.groot-lettertype .hero,
body.groot-lettertype .quote-card,
body.groot-lettertype .quote-card__content {
    height: auto !important;
    min-height: 0 !important;
}
body.groot-lettertype .accordion-content.accordion-open {
    max-height: none !important;
}

/* Tailwind utility classes — pagina's zonder semantische classes (wensenkluis, wegwijzer, voor-nabestaanden, formulieren, login, etc.) */
body.groot-lettertype .text-\[9px\] { font-size: 0.8125rem !important; }
body.groot-lettertype .text-\[10px\] { font-size: 0.875rem !important; }
body.groot-lettertype .text-\[11px\] { font-size: 0.9375rem !important; }
body.groot-lettertype .text-xs { font-size: 0.875rem !important; }
body.groot-lettertype .text-sm { font-size: 1.0625rem !important; }
body.groot-lettertype .text-base { font-size: 1.1875rem !important; }
body.groot-lettertype .text-lg { font-size: 1.3125rem !important; }
body.groot-lettertype .text-xl { font-size: 1.5rem !important; }
body.groot-lettertype .text-2xl { font-size: 1.75rem !important; }
body.groot-lettertype .text-3xl { font-size: 2.125rem !important; }
body.groot-lettertype .text-4xl { font-size: 2.5rem !important; }
body.groot-lettertype .text-5xl { font-size: 3.25rem !important; }
body.groot-lettertype .text-6xl { font-size: 4rem !important; }

@media (min-width: 768px) {
    body.groot-lettertype .md\:text-sm { font-size: 1.0625rem !important; }
    body.groot-lettertype .md\:text-base { font-size: 1.1875rem !important; }
    body.groot-lettertype .md\:text-lg { font-size: 1.3125rem !important; }
    body.groot-lettertype .md\:text-xl { font-size: 1.5rem !important; }
    body.groot-lettertype .md\:text-2xl { font-size: 1.75rem !important; }
    body.groot-lettertype .md\:text-3xl { font-size: 2.125rem !important; }
    body.groot-lettertype .md\:text-4xl { font-size: 2.75rem !important; }
    body.groot-lettertype .md\:text-5xl { font-size: 3.5rem !important; }
    body.groot-lettertype .md\:text-6xl { font-size: 4.25rem !important; }
}

/* Voorbeeld-foto (voorbeelden-persoonlijke-omgeving cards) */
.voorbeeld-foto {
    display: block;
    width: 140px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    float: left;
    margin: 0 1.25rem 0.75rem 0;
    border-radius: var(--radius-card);
    box-shadow: 0 2px 8px rgba(26, 20, 17, 0.08);
}

@media (min-width: 768px) {
    .voorbeeld-foto {
        width: 180px;
        margin-right: 1.75rem;
    }
}

.voorbeeld-foto--top { object-position: top; }
.voorbeeld-foto--upper { object-position: center 30%; }

.voorbeeld-clear { clear: both; }

/* Nomalie zoekbalk — warmere, ruimere styling.
   Gebruik:
   <div class="nomalie-search-wrap">
       <input class="nomalie-search" type="search" placeholder="...">
       <svg class="nomalie-search-icon">...</svg>
       <button class="nomalie-search-clear hidden">...</button>
   </div>
*/
.nomalie-search-wrap {
    position: relative;
}
.nomalie-search {
    width: 100%;
    padding: 20px 58px 20px 58px;
    background: #ffffff;
    border: 1px solid rgba(166, 124, 82, 0.35);
    border-radius: 18px;
    font-size: 16px;
    color: #46352D;
    outline: none;
    outline-offset: 0;
    font-family: 'Lora', serif;
    font-style: italic;
    transition: border-color 0.25s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.nomalie-search:focus,
.nomalie-search:focus-visible {
    border-color: #A67C52;
    outline: none;
    box-shadow: none;
}
.nomalie-search::placeholder {
    color: rgba(70, 53, 45, 0.42);
    font-style: italic;
}
/* Verberg browser-default clear-kruisje (Chrome/Safari + Edge/IE) */
.nomalie-search::-webkit-search-cancel-button,
.nomalie-search::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.nomalie-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #A67C52;
    opacity: 0.65;
    transition: opacity 0.25s ease;
}
.nomalie-search:focus + .nomalie-search-icon,
.nomalie-search-wrap:focus-within .nomalie-search-icon {
    opacity: 1;
}
.nomalie-search-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(70, 53, 45, 0.45);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.nomalie-search-clear:hover {
    background: rgba(166, 124, 82, 0.12);
    color: #A67C52;
}
.nomalie-search-clear.hidden {
    display: none;
}
.nomalie-search-result {
    font-size: 13px;
    color: rgba(70, 53, 45, 0.58);
    margin-top: 14px;
    text-align: center;
    font-family: 'Lora', serif;
    font-style: italic;
    min-height: 1.25em;
}

/* Suggestie-chips onder de zoekbalk */
.nomalie-search-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.nomalie-search-suggestions-label {
    font-size: 12px;
    color: rgba(70, 53, 45, 0.5);
    font-family: 'Lora', serif;
    font-style: italic;
    margin-right: 4px;
}
.nomalie-search-chip {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(70, 53, 45, 0.75);
    background: transparent;
    border: 1px solid rgba(70, 53, 45, 0.2);
    border-radius: 999px;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
    line-height: 1;
}
.nomalie-search-chip:hover {
    color: var(--nomalie-copper);
    border-color: var(--nomalie-copper);
    background-color: rgba(166, 124, 82, 0.06);
}
.nomalie-search-chip:focus-visible {
    outline: 2px solid var(--nomalie-copper);
    outline-offset: 2px;
}

/* Centrale prijsblok-styling. Gebruik:
   <div class="price-panel">
       <p class="price-panel__old">Normaal <del>&euro;49</del></p>
       <div class="price-panel__amount">
           <span class="price-panel__amount-big">&euro;35</span>
           <span class="price-panel__amount-label">eenmalig</span>
       </div>
       <p class="price-panel__note">Tijdelijke prijs voor de eerste gebruikers.</p>
   </div>
*/
.price-panel {
    background: var(--nomalie-card, #FBF9F5);
    border: 1px solid rgba(166, 124, 82, 0.2);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    text-align: center;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}
.price-panel--compact {
    padding: 1rem 1.25rem;
    max-width: 22rem;
}
.price-panel__old {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(70, 53, 45, 0.5);
    margin-bottom: 0.5rem;
}
.price-panel__old del {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(70, 53, 45, 0.5);
}
.price-panel__amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
}
.price-panel__amount-big {
    font-size: 3rem;
    font-weight: 300;
    color: var(--nomalie-copper);
    line-height: 1;
}
.price-panel--compact .price-panel__amount-big {
    font-size: 2.25rem;
}
.price-panel__amount-label {
    font-size: 1rem;
    color: rgba(70, 53, 45, 0.6);
}
.price-panel__note {
    font-size: 0.875rem;
    color: rgba(70, 53, 45, 0.55);
    margin-top: 0.75rem;
    line-height: 1.5;
}

/* Nomalie ornament: subtiel Nomalie-merkmoment vóór eind-CTA's.
   Gebruik: <div class="nomalie-ornament"></div> vóór de CTA op key-pages. */
.nomalie-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: 0.25rem auto 0.25rem;
    opacity: 0.7;
}
.nomalie-ornament::before,
.nomalie-ornament::after {
    content: "";
    flex: 0 1 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(166, 124, 82, 0.4), transparent);
}
.nomalie-ornament img {
    height: 56px;
    width: auto;
    filter: grayscale(0.1);
}

/* Toggle button styling - met Aa-icoon en outline voor herkenbaarheid */
.font-size-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(70, 53, 45, 0.6);
    border: 1px solid rgba(70, 53, 45, 0.25);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
    white-space: nowrap;
}

.font-size-toggle:hover {
    color: var(--nomalie-copper);
    border-color: var(--nomalie-copper);
}

.font-size-toggle:focus-visible {
    outline: 2px solid var(--nomalie-copper);
    outline-offset: 2px;
}

.font-size-toggle .font-size-icon {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 16px;
    line-height: 1;
    color: currentColor;
}

body.groot-lettertype .font-size-toggle {
    color: var(--nomalie-copper);
    border-color: var(--nomalie-copper);
    background-color: rgba(176, 122, 88, 0.06);
}

body.groot-lettertype {
    --nomalie-copper: #8B5A2B;
}

/* ===========================================
   TOUCH TARGETS — WCAG 2.5.5 (Target Size)
   Mobile: alle interactieve elementen minimaal 44×44.
   Desktop blijven we ongewijzigd om visuele dichtheid te behouden.
   =========================================== */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
    button,
    [role="button"],
    a.btn-primary,
    a.btn-secondary,
    a.btn-copper-outline,
    .menu-close,
    .font-size-toggle {
        min-height: 44px;
    }

    /* Compacte iconknopjes (hamburger, sluit, taal) krijgen padding ipv min-height */
    .menu-toggle,
    .menu-close,
    .font-size-toggle,
    nav button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Footer-links */
    footer a,
    .footer-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 6px 4px;
    }

    /* Menu-items in mobile drawer */
    .menu-panel a,
    .menu-panel button {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* "Lees meer →" en kleine inline-links binnen content */
    a.text-nomalie-copper.hover\:underline,
    .text-intro a,
    .text-body a {
        padding: 4px 0;
        display: inline-block;
        min-height: 32px;
    }

    /* Form labels die als knop fungeren (badge-soft etc.) */
    label.badge-soft,
    label.option-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ===========================================
   BREADCRUMBS — kleine trail boven hero/content
   =========================================== */
.breadcrumbs {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem 0;
    font-size: 0.8125rem;
    color: rgba(70, 53, 45, 0.6);
}

.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
}

.breadcrumbs li + li::before {
    content: "›";
    color: rgba(166, 124, 82, 0.5);
    margin-right: 0.4rem;
}

.breadcrumbs a {
    color: var(--nomalie-copper);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
    color: rgba(70, 53, 45, 0.85);
    text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
    color: rgba(70, 53, 45, 0.75);
    font-weight: 500;
}

@media (max-width: 640px) {
    .breadcrumbs {
        font-size: 0.75rem;
        padding-top: 0.5rem;
    }
}