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

body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #1e2d3a;
    background: #f4f6fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.cat-header {
    background: #1f4464;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 68px;
    gap: 1.5rem;
    flex-shrink: 0;
}

.cat-logo {
    display: flex;
    align-items: center;
    gap: .8rem;
    text-decoration: none;
}

.cat-logo img {
    height: 40px;
    filter: brightness(0) invert(1);
}

.cat-logo-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,.3);
    flex-shrink: 0;
}

.cat-site-title {
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: -.01em;
}

.cat-year-tabs {
    margin-left: auto;
    display: flex;
    gap: .35rem;
    align-items: center;
}

.cat-year-tab {
    padding: .3rem .85rem;
    font-size: .8rem;
    font-family: inherit;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.35);
    color: rgba(255,255,255,.85);
    text-decoration: none;
    transition: all .15s;
}

.cat-year-tab:hover { background: rgba(255,255,255,.12); color: #fff; }
.cat-year-tab.active { background: #e8492c; border-color: #e8492c; color: #fff; }

.cat-header-year-label {
    margin-left: auto;
    font-size: .82rem;
    color: rgba(255,255,255,.6);
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.cat-breadcrumb {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

.cat-breadcrumb-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: .6rem 1.5rem;
    font-size: .82rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem .45rem;
}

.cat-breadcrumb a { color: #1f4464; text-decoration: none; }
.cat-breadcrumb a:hover { text-decoration: underline; }
.cat-breadcrumb-sep { color: #d1d5db; }
.cat-breadcrumb strong { color: #1e2d3a; font-weight: 600; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.cat-hero {
    background: linear-gradient(160deg, #1f4464 0%, #172d38 100%);
    padding: 3rem 1.5rem 3.25rem;
    text-align: center;
    color: #fff;
    flex-shrink: 0;
}

.cat-hero-inner { max-width: 620px; margin: 0 auto; }

.cat-hero-title {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: .4rem;
    letter-spacing: -.025em;
}

.cat-hero-sub {
    color: rgba(255,255,255,.65);
    font-size: .92rem;
    margin-bottom: 1.75rem;
}

.cat-search-form {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.28);
}

.cat-search-input {
    flex: 1;
    padding: .75rem 1.2rem;
    font-size: .95rem;
    font-family: inherit;
    border: none;
    outline: none;
    color: #1e2d3a;
    background: #fff;
}

.cat-search-btn {
    padding: .75rem 1.5rem;
    background: #e8492c;
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

.cat-search-btn:hover { background: #c93e26; }

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.cat-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3rem;
    flex: 1;
}

/* ── Section heading ─────────────────────────────────────────────────────── */
.cat-section-head {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f4464;
    margin-bottom: 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #dde4ee;
}

/* ── Program grid (homepage) ─────────────────────────────────────────────── */
.cat-prog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.1rem;
}

.cat-prog-card {
    background: #fff;
    border-radius: 8px;
    border-top: 4px solid #e8492c;
    box-shadow: 0 1px 5px rgba(31,68,100,.09);
    padding: 1.1rem 1.25rem 1.25rem;
    transition: box-shadow .15s, transform .15s;
}

.cat-prog-card:hover {
    box-shadow: 0 5px 18px rgba(31,68,100,.15);
    transform: translateY(-2px);
}

.cat-prog-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .98rem;
    font-weight: 700;
    color: #1f4464;
    text-decoration: none;
    margin-bottom: .6rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid #f0f4f8;
    gap: .5rem;
}

.cat-prog-card-title:hover { color: #e8492c; }

.cat-prog-arrow { color: #a6768f; font-size: 1rem; flex-shrink: 0; }
.cat-prog-arrow-sm { color: #a6768f; font-size: .8rem; flex-shrink: 0; }

.cat-subprog-list { list-style: none; }

.cat-subprog-list li { padding: .18rem 0; }

.cat-subprog-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .85rem;
    color: #374151;
    text-decoration: none;
    padding: .18rem .3rem;
    border-radius: 4px;
    transition: all .1s;
    gap: .4rem;
}

.cat-subprog-list a:hover {
    color: #e8492c;
    background: #fef6f4;
    padding-left: .6rem;
}

/* ── Results head ────────────────────────────────────────────────────────── */
.cat-results-head {
    font-size: .88rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

.cat-results-head a { color: #1f4464; }

/* ── Course list / rows ──────────────────────────────────────────────────── */
.cat-course-list {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(31,68,100,.08);
    overflow: hidden;
}

.cat-course-row {
    display: grid;
    grid-template-columns: 120px 1fr 58px 24px;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1.25rem;
    border-bottom: 1px solid #f0f4f8;
    text-decoration: none;
    color: #1e2d3a;
    transition: background .1s;
}

.cat-course-row:last-child { border-bottom: none; }
.cat-course-row:hover { background: #f4f6fa; }

.cat-course-code { font-size: .79rem; color: #6b7280; font-weight: 500; }
.cat-course-name { font-weight: 500; font-size: .9rem; }

.cat-course-sem {
    font-size: .72rem;
    background: #eef2f7;
    color: #1f4464;
    padding: 2px 8px;
    border-radius: 10px;
    text-align: center;
    white-space: nowrap;
}

.cat-course-arrow { color: #a6768f; text-align: right; }

/* ── Opleiding page ──────────────────────────────────────────────────────── */
.cat-prog-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: #1f4464;
    margin-bottom: .3rem;
    letter-spacing: -.025em;
}

.cat-prog-subtitle {
    font-size: .88rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
}

.cat-sem-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.75rem;
}

.cat-sem-btn {
    padding: .28rem .85rem;
    font-size: .8rem;
    font-family: inherit;
    border-radius: 999px;
    border: 1px solid #c9d4e0;
    background: #fff;
    color: #1f4464;
    text-decoration: none;
    transition: all .12s;
}

.cat-sem-btn:hover { background: #1f4464; border-color: #1f4464; color: #fff; }
.cat-sem-btn.active { background: #e8492c; border-color: #e8492c; color: #fff; }

.cat-subprog-section { margin-bottom: 1.5rem; }

.cat-subprog-title {
    font-size: .9rem;
    font-weight: 700;
    color: #1f4464;
    padding: .45rem .85rem;
    background: #f4f6fa;
    border-left: 4px solid #a6768f;
    border-radius: 0 5px 5px 0;
    margin-bottom: .5rem;
}

/* ── Course detail ───────────────────────────────────────────────────────── */
.cat-course-page { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 3rem; flex: 1; }

.cat-course-header {
    background: #1f4464;
    color: #fff;
    border-radius: 10px;
    padding: 2rem 2.25rem 1.75rem;
    margin-bottom: 1.75rem;
}

.cat-hdr-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a6768f;
    margin-bottom: .4rem;
}

.cat-hdr-code { font-size: .95rem; font-weight: 600; color: #a6c4df; margin-bottom: .2rem; }

.cat-hdr-name {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    margin-bottom: 1.2rem;
    letter-spacing: -.025em;
}

.cat-hdr-meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }

.cat-hdr-meta-item { font-size: .83rem; color: #c2d8ea; }

.cat-hdr-meta-label { font-weight: 600; color: #a6768f; margin-right: .25rem; }

/* Language toggle */
.cat-lang-bar { display: flex; gap: .5rem; margin-bottom: 1.5rem; }

.cat-lang-btn {
    padding: .28rem .9rem;
    font-size: .8rem;
    font-family: inherit;
    border: 1px solid #c9d4e0;
    border-radius: 999px;
    background: #fff;
    color: #1f4464;
    cursor: pointer;
    transition: all .15s;
}

.cat-lang-btn.active { background: #1f4464; border-color: #1f4464; color: #fff; }
.cat-lang-btn:hover:not(.active) { background: #e8eef5; }

/* Section nav */
.cat-nav { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 2rem; }

.cat-nav a {
    font-size: .8rem;
    padding: .25rem .75rem;
    border-radius: 5px;
    background: #fff;
    color: #1f4464;
    text-decoration: none;
    border: 1px solid #c9d4e0;
    transition: all .12s;
}

.cat-nav a:hover { background: #1f4464; color: #fff; border-color: #1f4464; }

/* Sections */
.cat-section {
    background: #fff;
    border-radius: 8px;
    border-left: 4px solid #e8492c;
    box-shadow: 0 1px 4px rgba(31,68,100,.07);
    padding: 1.75rem 2rem;
    margin-bottom: 1.25rem;
    scroll-margin-top: 1rem;
}

.cat-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f4464;
    border-bottom: 1px solid #e8eef5;
    padding-bottom: .55rem;
    margin-bottom: 1.1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cat-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    background: #e8492c;
    color: #fff;
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.cat-content { line-height: 1.7; }
.cat-content p { margin-bottom: .75rem; }
.cat-content p:last-child { margin-bottom: 0; }
.cat-content ul, .cat-content ol { padding-left: 1.4rem; margin-bottom: .75rem; }
.cat-content li { margin-bottom: .2rem; }
.cat-content h1, .cat-content h2, .cat-content h3 { font-weight: 700; margin: 1rem 0 .4rem; color: #1f4464; }
.cat-content table { border-collapse: collapse; width: 100%; margin-bottom: .75rem; font-size: .9rem; }
.cat-content table th, .cat-content table td { border: 1px solid #d1d5db; padding: .4rem .65rem; }
.cat-content table th { background: #f4f6fa; font-weight: 600; }
.cat-empty { color: #9ca3af; font-style: italic; font-size: .88rem; }

/* Toetsen */
.cat-toetsen-wrap { overflow-x: auto; }
.cat-toetsen { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cat-toetsen th { background: #1f4464; color: #fff; font-weight: 600; padding: .55rem .8rem; text-align: left; }
.cat-toetsen td { padding: .45rem .8rem; border-bottom: 1px solid #e8eef5; vertical-align: top; }
.cat-toetsen tbody tr:last-child td { border-bottom: none; }
.cat-toetsen tbody tr:hover td { background: #f4f6fa; }

.cat-badge-cijfer {
    display: inline-block; background: #1f4464; color: #fff;
    font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 3px;
}
.cat-badge-waardering {
    display: inline-block; background: #a6768f; color: #fff;
    font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 3px;
}
.cat-toetsen-sum { font-size: .82rem; color: #6b7280; margin-top: .6rem; text-align: right; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.cat-footer {
    background: #172d38;
    color: #8eaaba;
    text-align: center;
    font-size: .78rem;
    padding: 1.5rem 1rem;
    flex-shrink: 0;
}

.cat-footer strong { color: #c2d8ea; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .cat-header { padding: 0 1rem; height: 56px; }
    .cat-logo img { height: 30px; }
    .cat-site-title { font-size: .82rem; }
    .cat-hero { padding: 2rem 1rem 2.25rem; }
    .cat-hero-title { font-size: 1.4rem; }
    .cat-page { padding: 1.5rem 1rem 2.5rem; }
    .cat-course-page { padding: 1.25rem .75rem 2.5rem; }
    .cat-prog-grid { grid-template-columns: 1fr; }
    .cat-course-row { grid-template-columns: 88px 1fr 46px 20px; gap: .4rem; padding: .55rem 1rem; }
    .cat-course-code { font-size: .73rem; }
    .cat-course-header { padding: 1.5rem 1.25rem; }
    .cat-hdr-name { font-size: 1.3rem; }
    .cat-section { padding: 1.25rem 1.1rem; }
}