:root {
    /* Licht & rustig thema */
    --bg-page: #dfe7f1;
    --bg-tint: #e5edf7;
    --bg-card: #ffffff;

    --primary: #2563eb;          /* blauw (knoppen) */
    --primary-hover: #1d4ed8;
    --primary-soft: rgba(37,99,235,0.08);

    --accent: #fbbf24;           /* goud accent */
    --accent-soft: rgba(251,191,36,0.12);

    --text-main: #0f172a;        /* bijna zwart */
    --text-mid: #1f2937;
    --text-sub: #64748b;

    --border-soft: rgba(148,163,184,0.45);
    --shadow-soft: 0 18px 45px rgba(15,23,42,0.18);

    --success: #16a34a;
    --success-bg: #dcfce7;
    --success-border: #86efac;

    --danger: #dc2626;
    --danger-bg: #fee2e2;
    --danger-border: #fecaca;

    --radius-card: 18px;
    --radius-pill: 999px;
}

/* ---------- Global ---------- */

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

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    background:
        radial-gradient(circle at top, rgba(129,199,245,0.22) 0%, transparent 50%),
        linear-gradient(to bottom, #f3f6fb 0%, #dfe7f1 60%, #d9e2ee 100%);
    color: var(--text-main);
}

a {
    color: var(--primary);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.page-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.8rem 1rem 3rem;
}

/* ---------- HEADER ---------- */

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.1rem;
    margin-bottom: 1.7rem;

    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 16px;
    border: 1px solid rgba(148,163,184,0.35);
    box-shadow: 0 10px 30px rgba(15,23,42,0.12);
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-logo img {
    height: 54px;
    width: auto;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(15,23,42,0.35);
    border: 1px solid rgba(148,163,184,0.4);
}

.site-logo-title {
    font-size: 1.15rem;
    color: var(--text-main);
    font-weight: 700;
}
.site-logo-sub {
    font-size: 0.8rem;
    color: var(--text-sub);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.site-nav a {
    color: var(--text-mid);
    font-size: 0.9rem;
}
.site-nav a:hover {
    color: var(--primary);
}

.site-nav .nav-cta {
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(148,163,184,0.8);
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15,23,42,0.12);
}
.site-nav .nav-cta:hover {
    background: #f9fafb;
}

/* ---------- Hero ---------- */

.hero-banner {
    border-radius: 26px;
    padding: 1.6rem 1.7rem 1.8rem;
    margin-bottom: 1.4rem;
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at top left, rgba(251,191,36,0.26) 0%, transparent 55%),
        radial-gradient(circle at top right, rgba(96,165,250,0.32) 0%, transparent 60%),
        linear-gradient(to bottom right, #ffffff, #e5edf7);
    border: 1px solid rgba(148,163,184,0.4);
    box-shadow: 0 18px 45px rgba(15,23,42,0.18);
}

.hero-banner-inner {
    position: relative;
    z-index: 1;
}

.hero-top {
    display: grid;
    grid-template-columns: minmax(0,1.7fr) minmax(0,1.2fr);
    gap: 1.8rem;
    align-items: center;
}

.hero-title {
    font-size: 1.9rem;
    margin: 0 0 0.5rem;
    color: var(--text-main);
}

.hero-lead {
    margin: 0 0 0.6rem;
    font-size: 0.98rem;
    color: var(--text-mid);
}

.hero-text {
    margin: 0 0 1.0rem;
    font-size: 0.95rem;
    color: var(--text-sub);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.hero-note {
    font-size: 0.82rem;
    color: var(--text-sub);
    max-width: 32rem;
}

/* Rechterkaart met bijbeltekst */

.hero-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 1.0rem 1.2rem 1.1rem;
    border: 1px solid rgba(148,163,184,0.4);
    box-shadow: 0 12px 32px rgba(15,23,42,0.12);
}

.verse-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 0.35rem;
}

.verse-ref {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.4rem;
}

.verse-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #111827;
    margin: 0 0 0.55rem;
}

.verse-expl {
    font-size: 0.86rem;
    color: #4b5563;
    margin: 0 0 0.5rem;
}

.verse-note {
    font-size: 0.8rem;
    color: #9ca3af;
}

/* ---------- Cards ---------- */

.card {
    background: #ffffff;
    border-radius: var(--radius-card);
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(148,163,184,0.4);
    box-shadow: var(--shadow-soft);
}

.card-soft {
    background: #ffffff;
    border-radius: var(--radius-card);
    padding: 1.0rem 1.25rem;
    border: 1px solid rgba(148,163,184,0.35);
    box-shadow: 0 12px 32px rgba(15,23,42,0.12);
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.55rem 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    font-size: 0.93rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(37,99,235,0.35);
}
.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: rgba(255,255,255,0.0);
    border: 1px solid rgba(15,23,42,0.2);
    color: var(--text-main);
}
.btn-secondary:hover {
    background: rgba(15,23,42,0.03);
}

.btn-full {
    width: 100%;
    text-align: center;
}

/* ---------- Stats pills ---------- */

.stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.stat-pill {
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* ---------- Feature blokken ---------- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.6rem;
}

.feature-card {
    background: #f9fbff;
    color: var(--text-main);
    border-radius: 18px;
    padding: 1rem 1.1rem 1.1rem;
    box-shadow: 0 12px 30px rgba(15,23,42,0.12);
    border: 1px solid rgba(148,163,184,0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 210px;
}

.feature-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    margin-bottom: 0.6rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #e0edff;
    border: 1px solid rgba(148,163,184,0.6);
}

.feature-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}

/* subtiel kleurverschil per icon */
.feature-icon--read {
    background: #fef9c3;
}
.feature-icon--understand {
    background: #e0f2fe;
}
.feature-icon--remember {
    background: #eef2ff;
}
.feature-icon--grow {
    background: #dcfce7;
}

.feature-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 0.3rem;
}
.feature-desc {
    font-size: 0.9rem;
    color: #334155;
    margin: 0 0 0.7rem;
}

.feature-btn {
    margin-top: 0.2rem;
}

/* ---------- Study / forms / quiz (andere pagina's) ---------- */

.study-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.3rem;
}
.study-card-desc {
    font-size: 0.9rem;
    color: var(--text-sub);
    margin-bottom: 0.6rem;
}

.form-field {
    margin-bottom: 0.9rem;
}
.form-field label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-sub);
    margin-bottom: 0.25rem;
}
.form-field input,
.form-field textarea,
.form-field select {
    background: #ffffff;
    border: 1px solid rgba(148,163,184,0.9);
    color: var(--text-main);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    width: 100%;
    font-size: 0.9rem;
    font-family: inherit;
}

.alert-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
}
.alert-ok {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
}

.quiz-question {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(148,163,184,0.5);
    box-shadow: 0 8px 20px rgba(148,163,184,0.25);
}

.quiz-title {
    font-size: 1rem;
    margin-bottom: 0.35rem;
    color: var(--text-main);
}

.quiz-options label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-main);
}

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

.site-footer {
    font-size: 0.8rem;
    color: var(--text-sub);
    margin-top: 1.8rem;
    text-align: left;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    .hero-top {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .site-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .site-nav {
        justify-content: flex-start;
    }
}
/* Hero rechterkaart (Bijbeltekst) */
.hero-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 1.0rem 1.25rem;
    border: 1px solid rgba(148,163,184,0.4);
    box-shadow: 0 12px 32px rgba(15,23,42,0.12);
}

.verse-ref {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4b5563;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.verse-text {
    font-size: 0.96rem;
    color: #111827;
    margin: 0 0 0.45rem;
}

.verse-note {
    font-size: 0.88rem;
    color: #4b5563;
    margin: 0 0 0.55rem;
}

.verse-footnote {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0;
}
/* -----------------------------------------
   ADMIN LAYOUT
------------------------------------------ */

.admin-body {
    /* zelfde achtergrond als de site, dus niks bijzonders nodig,
       maar je kunt hem hier los tweaken als je wilt */
}

/* container hergebruikt page-shell */

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 0.8rem 1rem;
    margin-bottom: 1.4rem;

    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,0.5);
    box-shadow: 0 10px 28px rgba(15,23,42,0.15);
}

.admin-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-logo img {
    height: 42px;          /* FIX: logo niet meer giga groot */
    width: auto;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(15,23,42,0.25);
}

.admin-logo-title {
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--text-main);
}
.admin-logo-sub {
    font-size: 0.8rem;
    color: var(--text-sub);
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.88rem;
}

.admin-nav a {
    color: var(--text-mid);
    text-decoration: none;
}
.admin-nav a:hover {
    color: var(--primary);
}

.admin-nav-cta {
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(239,68,68,0.6);
    color: #b91c1c;
    background: #fef2f2;
}
.admin-nav-cta:hover {
    background: #fee2e2;
}

/* hoofdvlak voor admin-pagina-inhoud */
.admin-main {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.45);
    box-shadow: 0 16px 40px rgba(15,23,42,0.15);
    padding: 1.2rem 1.3rem 1.4rem;
    min-height: 400px;
}

/* footer admin */
.admin-footer {
    font-size: 0.78rem;
    color: var(--text-sub);
    margin-top: 1rem;
}

/* simpele tabel-styling voor admin-lijsten */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.8rem;
    font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(148,163,184,0.4);
    text-align: left;
}

.admin-table th {
    background: #eff6ff;
    color: #1e293b;
    font-weight: 600;
}

.admin-table tr:nth-child(even) td {
    background: #f9fafb;
}

.admin-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.admin-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.78rem;
}

/* responsive */
@media (max-width: 768px) {
    .admin-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .admin-nav {
        justify-content: flex-start;
    }
}
/* -----------------------------------------
   ADMIN PAGES
------------------------------------------ */

.admin-main {
    margin-top: 0.5rem;
}

.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.admin-title {
    font-size: 1.2rem;
    margin: 0 0 0.25rem;
    color: var(--text-main);
}

.admin-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-sub);
}

.admin-muted {
    color: var(--text-sub);
    font-size: 0.85rem;
}

/* Tabellen in admin */

.table-wrapper {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.table-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.table-list thead {
    background: #eff4ff;
}

.table-list th,
.table-list td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid rgba(148,163,184,0.4);
    text-align: left;
    vertical-align: top;
}

.table-list th {
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}

.table-list tr:nth-child(even) td {
    background: #f9fbff;
}

.table-list-actions {
    white-space: nowrap;
    font-size: 0.85rem;
}

.link-inline {
    color: var(--primary);
    text-decoration: none;
}
.link-inline:hover {
    text-decoration: underline;
}
/* -----------------------------------------
   ADMIN STYLING
------------------------------------------ */

.admin-main {
    margin-top: 0.4rem;
}

/* Titel + knop bovenaan admin-pagina's */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}
.section-title {
    font-size: 1.1rem;
    margin: 0 0 0.25rem;
    color: var(--text-main);
}
.section-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-sub);
}

/* Klein onderscheid admin-header (mag verder gewoon zelfde stijl houden) */
.admin-header .site-logo-sub {
    color: var(--text-sub);
}
.admin-header {
    margin-bottom: 1.4rem;
}

/* Tabel-styling voor admin-lijsten */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.table-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,0.5);
}

.table-list thead {
    background: #e5edf7;
}

.table-list th,
.table-list td {
    padding: 0.5rem 0.7rem;
    text-align: left;
    border-bottom: 1px solid rgba(226,232,240,0.9);
}

.table-list th {
    font-weight: 600;
    color: var(--text-sub);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.table-list tbody tr:nth-child(even) {
    background: #f9fbff;
}

.table-list tbody tr:hover {
    background: #eff6ff;
}

.table-actions {
    white-space: nowrap;
}

/* Kleine tekst */
.text-muted {
    font-size: 0.9rem;
    color: var(--text-sub);
}

/* Links in admin-tabellen */
.link-inline {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.87rem;
}
.link-inline:hover {
    text-decoration: underline;
}
.logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    display: block;
}
/* --- FRONT PAGE ROUND LOGO --- */
/* ==============================

/* ===============================
   ROND LOGO – ALLEEN OP HOMEPAGE
   =============================== */

/* Klein beetje extra ruimte bovenaan zodat het logo nooit wordt afgesneden */
body.home {
    padding-top: 32px;
}

/* Alleen op de homepage (header heeft daar class="site-header site-header--home") */
.site-header--home {
    position: relative;
    overflow: visible;  /* logo mag buiten de header vallen */
}

/* Logo-blok binnen de header – we geven wat ruimte links voor de cirkel */
.site-header--home .site-logo {
    position: relative;
    padding-left: 80px;   /* afstand tussen cirkel en tekst */
}

/* De ronde cirkel zelf */
.home-logo-circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 165px;
    height: 165px;
    transform: translate(-30%, -35%);   /* hangt deels boven én links van de header */
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
    z-index: 5;
    background: #0f172a;
}

/* Het logo in de cirkel */
.home-logo-circle img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Mobiel / smalle schermen ---------- */
@media (max-width: 640px) {
    /* iets minder ruimte bovenaan op mobiel */
    body.home {
        padding-top: 24px;
    }

    /* Logo en tekst netjes gecentreerd onder elkaar */
    .site-header--home .site-logo {
        padding-left: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Cirkel niet meer zwevend maar gewoon boven de tekst */
    .home-logo-circle {
        position: static;
        transform: none;
        width: 120px;
        height: 120px;
        margin-bottom: 0.4rem;
    }
}
/* =========================================
   DEFINITIEVE RONDE LOGO-STIJL HOMEPAGE
   (overrulet alle eerdere logo-css)
   ========================================= */

body.home {
    /* genoeg ruimte zodat het logo nooit wordt afgesneden */
    padding-top: 32px;
}

/* Header zelf boven de hero laten zweven */
.site-header--home {
    position: relative;
    z-index: 20;
    overflow: visible; /* logo mag buiten de header vallen */
}

/* Logo-container in de header */
.site-header--home .site-logo {
    position: relative;
    padding-left: 120px;      /* ruimte voor de badge links */
}

/* Ronde badge (desktop / tablet) */
.home-logo-circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 165px;
    height: 165px;
    transform: translate(-35%, -35%); /* half buiten de header */
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
    background: transparent;
    z-index: 30;
}

/* Afbeelding in de badge */
.site-header--home .home-logo-circle img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #ffffff;
}

/* BELANGRIJK: standaard logo-regel overschrijven op de homepage,
   zodat hij niet probeert het rondje op 54px te dwingen */
.site-header--home .site-logo img {
    height: auto;
    width: 100%;
    box-shadow: none;
    border: none;
}

/* ---------- Mobiel / smalle schermen ---------- */
@media (max-width: 768px) {
    body.home {
        padding-top: 24px;
    }

    .site-header--home .site-logo {
        padding-left: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .home-logo-circle {
        position: static;     /* niet meer zwevend */
        transform: none;
        width: 120px;
        height: 120px;
        margin-bottom: 0.5rem;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.35);
    }

    .site-header--home .home-logo-circle img {
        width: 120px;
        height: 120px;
    }
}

        trans
/* ========= Studie-uitleg layout ========= */

.study-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 0.9fr);
    gap: 1.4rem;
    margin-top: 1.4rem;
}

.study-main {
    background: #ffffff;
    border-radius: 18px;
    padding: 1.3rem 1.4rem 1.5rem;
    border: 1px solid rgba(148,163,184,0.4);
    box-shadow: 0 16px 40px rgba(15,23,42,0.18);
}

.study-title {
    margin: 0 0 0.2rem;
    font-size: 1.4rem;
    color: var(--text-main);
}
.study-subtitle {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--text-sub);
}

.study-block {
    margin-bottom: 1.2rem;
}
.study-block-title {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    color: var(--text-main);
}
.study-block-text {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-sub);
    line-height: 1.6;
}

.study-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1.0rem;
    align-items: flex-start;
}

.study-section h3 {
    margin: 0 0 0.2rem;
    font-size: 0.98rem;
    color: var(--text-main);
}
.study-section p {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
    color: #334155;
}

.study-highlight {
    background: #f9fbff;
    border-radius: 16px;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(148,163,184,0.5);
    font-size: 0.9rem;
    color: #1f2937;
}
.study-highlight h3 {
    margin-top: 0;
    margin-bottom: 0.35rem;
    font-size: 0.96rem;
}
.study-highlight p {
    margin: 0 0 0.5rem;
}
.study-ref {
    font-size: 0.85rem;
    color: var(--text-sub);
}

.study-application {
    padding: 0.7rem 0.9rem;
    background: #ecfeff;
    border-radius: 12px;
    border: 1px solid #a5f3fc;
    font-size: 0.9rem;
    color: #0f172a;
}

/* Zijbalk */
.study-side {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.study-steps {
    padding: 1rem 1rem 1.1rem;
}
.study-side-title {
    margin: 0 0 0.4rem;
    font-size: 1rem;
}
.study-steps-list {
    margin: 0 0 0.9rem;
    padding-left: 1.1rem;
    font-size: 0.86rem;
    color: var(--text-sub);
}
.study-steps-list li {
    margin-bottom: 0.15rem;
}

.study-tip {
    font-size: 0.82rem;
    color: var(--text-sub);
}

/* Mobiel */
@media (max-width: 768px) {
    .study-layout {
        grid-template-columns: 1fr;
    }
}
body {
    background-color: #F3F4F6;
    color: #0B1E3B;
}

.clip-skew {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
}

.clip-skew-reverse {
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%);
}

.text-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #F3F4F6;
}
::-webkit-scrollbar-thumb {
    background: #0B1E3B;
    border-radius: 4px;
}
/* =========================================================
   FIX: STUDY TEKST NIET MEER TE SMAL (geen container-in-container)
   Plak dit ONDERAAN je huidige style.css
   ========================================================= */

/* 1) Wrapper (.study-main) knijpt niet meer links/rechts */
.study-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2) Zet de ademruimte op de inhoudsblokken i.p.v. wrapper */
.study-title,
.study-subtitle,
.study-block,
.study-grid-2,
.study-section,
.study-highlight,
.study-application {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

/* 3) Mobiel: iets kleinere binnenruimte, maar nog steeds breed */
@media (max-width: 768px) {

    .study-title,
    .study-subtitle,
    .study-block,
    .study-grid-2,
    .study-section,
    .study-highlight,
    .study-application {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}