/* ═══════════════════════════════════════════════════════
   GLOBAL VARIABLES & RESET
═══════════════════════════════════════════════════════ */
:root { 
    --ink: #18181b; 
    --sub: #52525b; 
    --line: #e4e4e7; 
    --link: #1d4ed8; 
    --brand-maastricht: #8B1E3F; /* Maastricht University Maroon */
}
*, *::before, *::after { 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent; 
}
html { 
    font-size: 16px; 
    scroll-padding-top: 80px; 
}
body { 
    font-family: 'DM Sans', sans-serif; 
    color: var(--ink); 
    -webkit-font-smoothing: antialiased; 
}
h1, h2, h3, .font-display { 
    font-family: 'Sora', sans-serif; 
}

/* ═══════════════════════════════════════════════════════
   LAYOUT & GRID
═══════════════════════════════════════════════════════ */
.grid-shell { 
    display: grid; 
    grid-template-columns: minmax(0,160px) minmax(0,1fr) minmax(0,160px); 
    gap: 0; 
    max-width: 1440px; 
    margin: 0 auto; 
}
@media (max-width: 1279px) { 
    .grid-shell { grid-template-columns: 1fr; } 
}

.ad-slot { display: none; }
@media (min-width: 1280px) {
    .ad-slot { display: block; }
    .ad-rail { position: sticky; top: 100px; width: 160px; min-height: 60px; }
}

.content-col { padding: 0 1.25rem; }
@media (min-width: 640px) { .content-col { padding: 0 2rem; } }

.layout { display: flex; gap: 3rem; max-width: 920px; margin: 0 auto; }
.layout-side { display: none; }
@media (min-width: 1024px) {
    .layout { max-width: 1040px; }
    .layout-side { display: block; width: 220px; flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR TOC & LINKS
═══════════════════════════════════════════════════════ */
#toc-side { position: sticky; top: 96px; }

.side-link { 
    display: block; 
    font-size: 13px; 
    line-height: 1.5; 
    color: var(--sub); 
    padding: .5rem 0; 
    border-bottom: 1px solid var(--line); 
    text-decoration: none; 
}
.side-link:hover { color: var(--link); }
.side-link:last-child { border-bottom: none; }

.toc-link { 
    display: block; 
    font-size: 13px; 
    color: var(--sub); 
    padding: .35rem 0; 
    text-decoration: none; 
    border-left: 2px solid transparent; 
    padding-left: .75rem; 
}
.toc-link:hover, .toc-link.active { 
    color: var(--ink); 
    border-left-color: var(--ink); 
    font-weight: 500; 
}

/* ═══════════════════════════════════════════════════════
   ARTICLE PROSE & TYPOGRAPHY
═══════════════════════════════════════════════════════ */
.prose-article { max-width: 680px; }
.prose-article h2 { 
    font-size: 1.5rem; 
    font-weight: 700; 
    color: var(--ink); 
    margin-top: 3rem; 
    margin-bottom: 1rem; 
    letter-spacing: -.01em; 
    line-height: 1.3; 
    border-top: 1px solid var(--line); 
    padding-top: 2.25rem; 
}
.prose-article > h2:first-child { 
    border-top: none; 
    padding-top: 0; 
    margin-top: 0; 
}
.prose-article h3 { 
    font-size: 1.1rem; 
    font-weight: 600; 
    color: var(--ink); 
    margin-top: 2rem; 
    margin-bottom: .75rem; 
}
.prose-article p { 
    font-size: 16px; 
    line-height: 1.8; 
    color: #3f3f46; 
    margin-bottom: 1.25rem; 
}
.prose-article ul, .prose-article ol { 
    margin: 0 0 1.25rem 0; 
    padding-left: 1.25rem; 
}
.prose-article ul { list-style: disc; }
.prose-article ol { list-style: decimal; }
.prose-article li { 
    font-size: 16px; 
    line-height: 1.75; 
    color: #3f3f46; 
    margin-bottom: .5rem; 
    padding-left: .25rem; 
}
.prose-article a { 
    color: var(--link); 
    text-decoration: underline; 
    text-underline-offset: 2px; 
}
.prose-article strong { 
    color: var(--ink); 
    font-weight: 600; 
}

/* ═══════════════════════════════════════════════════════
   COMPONENTS (TABLES, FAQ, BOXES)
═══════════════════════════════════════════════════════ */
table.data-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 14px; 
    margin: 1.5rem 0 2rem 0; 
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
}
table.data-table caption { 
    text-align: left; 
    font-size: 13px; 
    font-weight: 600; 
    color: var(--ink); 
    margin-bottom: .5rem; 
}
table.data-table th { 
    text-align: left; 
    font-weight: 600; 
    color: var(--ink); 
    background: #F9FAFB;
    padding: .85rem .75rem; 
    border-bottom: 2px solid var(--line); 
}
table.data-table td { 
    padding: .85rem .75rem; 
    border-bottom: 1px solid var(--line); 
    color: #3f3f46; 
    vertical-align: top; 
}
table.data-table tr:last-child td { border-bottom: none; }

details.faq-item { 
    border-bottom: 1px solid var(--line); 
    padding: 1rem 0; 
}
details.faq-item summary { 
    cursor: pointer; 
    list-style: none; 
    font-weight: 600; 
    font-size: 15px; 
    color: var(--ink); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 1rem; 
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { 
    content: '+'; 
    font-size: 20px; 
    font-weight: 400; 
    color: var(--sub); 
    flex-shrink: 0; 
}
details.faq-item[open] summary::after { content: '–'; }
details.faq-item p { 
    margin-top: .75rem; 
    font-size: 14.5px; 
    line-height: 1.75; 
    color: var(--sub); 
}

.resource-box { 
    background: #F9FAFB; 
    border: 1px solid var(--line); 
    border-radius: .6rem; 
    padding: 1.25rem 1.5rem; 
    margin: 1.75rem 0; 
}
.resource-box p.resource-title { 
    font-size: 12px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: .08em; 
    color: var(--sub); 
    margin-bottom: .75rem; 
}
.resource-box ul { margin: 0; padding-left: 1.1rem; }
.resource-box li { font-size: 14.5px; margin-bottom: .4rem; }
.resource-box li:last-child { margin-bottom: 0; }

.warn-box { 
    background: #FFFBEB; 
    border: 1px solid #FDE68A; 
    border-radius: .6rem; 
    padding: 1.1rem 1.4rem; 
    margin: 1.5rem 0; 
}
.warn-box p { 
    font-size: 14.5px; 
    margin-bottom: 0; 
    color: #78350F; 
}
.warn-box p strong { color: #92400E; }

.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--ink);
    color: #fff;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    margin-right: 8px;
}