/* Mobiel (tot 576px) */
@media (max-width: 576px) {
    .card {
        width: 100%; /* volle breedte */
    }

    .brand-title {
        font-size: 1.2rem; /* iets kleiner */
    }
}

/* Tablet (577px – 992px) */
@media (min-width: 577px) and (max-width: 992px) {
    .card {
        width: 80%; /* centreren met marge */
        margin: 0 auto;
    }
}

/* Desktop (vanaf 993px) */
@media (min-width: 993px) {
    .card {
        width: 60%; /* smaller blok in brede layout */
        margin: 0 auto;
    }
}

nav {
    display: flex;
    flex-wrap: wrap; /* breekt automatisch op kleine schermen */
    gap: 1rem;
}

@media (max-width: 576px) {
    nav {
        flex-direction: column; /* onder elkaar op gsm */
        align-items: flex-start;
    }
}


:root {
    --base: 30, 100, 200; /* rgb(30,100,200) */
    --base-hex: #1e64c8;
    --base-10: rgba(var(--base), 0.10);
    --base-15: rgba(var(--base), 0.15);
    --base-60: rgba(var(--base), 0.60);
}

html, body {
    height: 100%;
}

/* Sticky footer layout */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8fafc; /* subtiel licht */
}

main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
    border-top: 1px solid #e6eef7;
    background: #ffffff;
}

/* Header */
.site-header {
    background: rgba(255, 250, 0, 0.07);

    border-bottom: 1px solid #e6eef7;
}

.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
}


.brand-title {
    color: rgb(30, 100, 200); /* UGent blauw */
    font-weight: 600;
    margin-left: 1rem; /* extra spatie naast logo */
}


/* Base color accents */
.accent-bar {
    height: 4px;
    background: var(--base-hex);
}

.btn-base {
    --bs-btn-bg: var(--base-hex);
    --bs-btn-border-color: var(--base-hex);
    --bs-btn-hover-bg: rgb(var(--base));
    --bs-btn-hover-border-color: rgb(var(--base));
    --bs-btn-color: #fff;
}

.card {
    border-color: var(--base-10);
    box-shadow: 0 2px 6px var(--base-10);
}

.link-base {
    color: var(--base-hex);
    text-decoration: none;
}

.link-base:hover {
    color: rgb(var(--base));
    text-decoration: underline;
}

/* UGent logo placeholder (replace src with actual path) */
.ugent-logo {
    width: 100px;
    height: auto;
    filter: drop-shadow(0 0 0 transparent);
}

/* Subtiele hover */
.hover-soft:hover {
    background: var(--base-10);
    transition: background .2s ease;
}