/* === Layout helpers (zonder Tailwind build) === */
.container-page {
    max-width: 1280px;   /* ongeveer max-w-screen-xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;  /* px-4 */
    padding-right: 1rem;
}
.section-pad {
    padding-top: 5rem;   /* py-20 */
    padding-bottom: 5rem;
}

/* === Hero typografie === */
.h1-hero {
    font-family: 'Libre Baskerville', serif;
    font-style: normal;           /* not-italic */
    font-weight: 400;             /* font-normal */
    line-height: 1.1;             /* leading-tight-ish */
    font-size: 1.875rem;          /* ~text-3xl - smaller base */
    margin-bottom: .75rem;        /* mb-3 */
}

/* Default color for h1-hero when no text color is specified */
.h1-hero:not([class*="text-"]) {
    color: rgba(255,255,255,.7);  /* text-white/70 - only when no text- class is present */
}
.h1-hero::first-letter {        /* optische tweak "D" */
    font-size: 98%;
}
@media (min-width: 768px) {     /* md - smaller cascade */
    .h1-hero { font-size: 1.875rem; }
}
@media (min-width: 1024px) {    /* lg - MacBook Pro 14" range */
    .h1-hero { font-size: 2rem; }
}
@media (min-width: 1600px) {    /* xl+ - can be larger on very big screens */
    .h1-hero { font-size: 2.5rem; }
}

.h2-hero {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;             /* font-semibold */
    text-transform: uppercase;
    letter-spacing: .10em;        /* tracking-[0.10em] */
    line-height: 1.1;
    font-size: 1.25rem;           /* text-xl - smaller base */
    margin-bottom: 1.5rem;        /* mb-6 */
}
@media (min-width: 768px) {     /* md - smaller cascade */
    .h2-hero { font-size: 1.375rem; }
}
@media (min-width: 1024px) {    /* lg - MacBook Pro 14" range */
    .h2-hero { font-size: 1.5rem; }
}
@media (min-width: 1600px) {    /* xl+ - can be larger on very big screens */
    .h2-hero { font-size: 1.875rem; }
}

/* === Sectietitels === */
.h2-section {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;             /* font-bold */
    font-size: 2.25rem;           /* text-4xl */
    margin-bottom: 1rem;          /* mb-4 */
}
@media (min-width: 768px) {     /* md:text-5xl */
    .h2-section { font-size: 3rem; }
}

.h3-section {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;             /* font-light */
    font-size: 1.5rem;            /* text-2xl */
    margin-bottom: 1.5rem;        /* mb-6 */
}

/* Default color for h3-section when no text color is specified */
.h3-section:not([class*="text-"]) {
    color: #4b5563;               /* ~text-gray-600 - only when no text- class is present */
}
@media (min-width: 768px) {     /* md:text-3xl */
    .h3-section { font-size: 1.875rem; }
}

/* Alternatieve H1/H2 buiten hero */
.h1-page {
    font-family: 'Libre Baskerville', serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    font-size: 1.875rem;          /* text-3xl */
}

/* Default color for h1-page when no text color is specified */
.h1-page:not([class*="text-"]) {
    color: #8E8E8E;               /* text-draw-darker-gray - only when no text- class is present */
}
@media (min-width: 768px) { .h1-page { font-size: 2.25rem; } }    /* md:text-4xl */
@media (min-width: 1024px){ .h1-page { font-size: 3rem; } }       /* lg:text-5xl */

.h2-caps {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;             /* font-semibold */
    text-transform: uppercase;
    letter-spacing: .08em;        /* tracking-[0.08em] */
    font-size: 1.5rem;            /* text-2xl */
}
@media (min-width: 768px) { .h2-caps { font-size: 1.875rem; } }   /* md:text-3xl */