/* Header styles: logo, Explore mega-menu, global search, theme/language toggles,
 * and the auth area (login/signup or an avatar user-menu). Written against the
 * design tokens in /app/core/global.css so it adapts to dark mode automatically. */

/* Eén scheidingslijn, geen slagschaduw erbij: een hairline én een shadow samen
   maken de rand troebel in plaats van strak. */
.header {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1010;
}

/* De bar heeft een vaste hoogte in plaats van "zo hoog als het logo toevallig
   is", zodat elk item er verticaal exact in gecentreerd staat. `gap` is klein
   omdat de links hun eigen horizontale padding al meebrengen — anders tellen
   die twee bij elkaar op en staat de nav veel te ver uit elkaar. */
.navigation_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
    gap: 4px;
}

/* All direct children of .navigation_bar carry an explicit `order` so the
   visual left-to-right sequence (logo, Explore, search, teach/theme/auth/lang)
   is independent of where each piece actually lives in the DOM. That's what
   lets #nav-menu wrap the right-hand items for the mobile drawer (see below)
   without disturbing the desktop layout: on desktop it's `display: contents`,
   so its children join this same ordered row as if #nav-menu didn't exist. */
.nav-hamburger { order: 0; }
.logo { order: 1; }


.nav-menu > a[href="/pages/vakken.html"],
.nav-menu > a[href="/pages/examen.html"],
.nav-menu > a[href="/pages/forum.html"] { order: 2;}

.explore { order: 3; }
.search-toggle { order: 4; }
.search-container { order: 5; }
.teach-nav { order: 6; }
.theme-toggle { order: 7; }
.auth-area { order: 8; }
.lang-toggle { order: 9; }

/* ---- Hamburger (mobile-only) ----------------------------------------------- */
.nav-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--border-radius);
    color: var(--text-color);
    transition: var(--transition);
}
.nav-hamburger i { font-size: 1.5rem; }
.nav-hamburger:hover {
    background-color: rgba(var(--background-rgb), 0.4);
    color: var(--primary-color);
}

/* Op hoogte gezet in plaats van op breedte: de bar heeft een vaste hoogte, dus
   het logo moet zich daaraan verhouden en niet andersom. `display: block` +
   centreren via de flexbar vervangt de oude `margin-top: -8px` correctie. */
.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 8px;
}

.logo-img {
    block-size: 30px;
    inline-size: auto;
    display: block;
    margin-bottom: 8px;
}

/* Als je de logo-afbeelding uit je header.css wilt targeten */
[data-theme="dark"] .logo-img {
  filter: brightness(0) invert(1);

}

/* Navigatie is geen bodytekst: weight 500 en een iets strakkere letterafstand
   laten deze links lezen als knoppen. Eén maat (0.875rem) voor élk item in de
   bar — de oude mix van 14px hier en 0.95rem in de drawer was precies wat de
   header rommelig maakte. */
.nav-link {
    display: inline-flex;
    align-items: center;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    line-height: 1;
    padding: 9px 12px;
    border-radius: var(--border-radius);
    transition: var(--transition);
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--primary-color);
    background-color: rgba(var(--background-rgb), 0.4);
}

.nav-link--muted {
    color: var(--dark_gray);
}

/* Hidden until header.js confirms a session (initAuth) — logged-out visitors
   shouldn't see or reach forum.html, which now requires a session anyway. */
.nav-link--auth-only {
    display: none;
}

/* Teachers get "Nieuwe cursus" here instead of the recruitment link — an action,
   so it reads as one rather than as another muted nav item. */
.nav-link--accent {
    color: var(--primary-color);
    font-weight: 600;
}

/* ---- Explore trigger + mega-menu ----------------------------------------- */
.explore {
    position: static; /* the panel spans the full header width */
}

.explore-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--text-color);
    padding: 9px 12px;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.explore-trigger:hover,
.explore.is-open .explore-trigger {
    color: var(--primary-color);
    background-color: rgba(var(--background-rgb), 0.4);
}

.explore-trigger i {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.explore.is-open .explore-trigger i {
    transform: rotate(180deg);
}

.explore-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
    z-index: 1005;
}

/* Mobile-only close (X): on a full-screen takeover there's no "outside" left
   to click, so Escape/click-away (which still work) need a visible backup. */
.explore-menu__close {
    display: none;
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 1006;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    color: var(--text-color);
}
.explore-menu__close i { font-size: 1.5rem; }
.explore-menu__close:hover {
    background-color: rgba(var(--background-rgb), 0.4);
    color: var(--primary-color);
}

.explore-empty {
    padding: 1.5rem 24px;
    color: var(--gray);
}

.explore-cols {
    display: grid;
    grid-template-columns: 200px 220px 220px minmax(0, 1fr);
    max-width: 1340px;
    margin: 0 auto;
    min-height: 340px;
    max-height: 70vh;
}

.explore-col {
    border-right: 1px solid var(--border-color);
    padding: 1rem 0;
    overflow-y: auto;
}

.explore-col--chapters {
    border-right: none;
}

.explore-col__title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray);
    padding: 0 1.25rem 0.6rem;
}

.explore-hint {
    padding: 0.5rem 1.25rem;
    color: var(--gray);
    font-size: 0.85rem;
}

/* Track subheading in the level column ("VWO", "HAVO"). */
.explore-group {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray);
    padding: 0.75rem 1.25rem 0.25rem;
}

.explore-group:first-of-type {
    padding-top: 0.25rem;
}

.explore-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--text-color);
    text-align: left;
    padding: 0.6rem 1.25rem;
    transition: background 0.12s ease, color 0.12s ease;
}

.explore-item i {
    font-size: 1.1rem;
    color: var(--gray);
}

.explore-item:hover,
.explore-item:focus-visible,
.explore-item.is-active {
    background: var(--light-light-gray);
    color: var(--primary-color);
    outline: none;
}

.explore-item.is-active i {
    color: var(--primary-color);
}

/* Chapters column: each chapter can list several teachers to choose from. */
.explore-chapter {
    padding: 0.5rem 1.5rem 0.9rem;
}

.explore-chapter__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.explore-chapter__badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    background: var(--primary-color);
    color: #fff;
    white-space: nowrap;
}

.explore-teacher {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    text-decoration: none;
    padding: 0.35rem 0.5rem;
    border-radius: var(--border-radius);
    transition: background 0.12s ease;
}

.explore-teacher:hover {
    background: var(--light-light-gray);
}

.explore-teacher__name {
    color: var(--text-color);
    font-size: 0.9rem;
}

.explore-teacher:hover .explore-teacher__name {
    color: var(--primary-color);
}

.explore-teacher__meta {
    color: var(--gray);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ---- Global search -------------------------------------------------------- */
.search-toggle {
    display: none; /* mobile-only trigger; see the responsive block below */
}

.search-close {
    display: none; /* only relevant once the mobile overlay is open */
}

.search-container {
    flex: 1;
    margin: 0 24px;
    position: relative;
    max-width: none;
}

.search-form {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.search-form {
    border-radius: 50px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.search-form:focus-within {
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent),
        0 10px 24px -12px rgba(0, 0, 0, 0.2);
}

.search-input {
    width: 100%;
    padding: 14px 16px 14px 46px;
    border: 1.5px solid var(--border-color);
    border-radius: 50px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    background-color: var(--light-light-gray);
    color: var(--text-color);
}

.search-input:hover {
    border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
}

.search-input:focus {
    background-color: var(--white);
    border-color: var(--primary-color);
    box-shadow: none;
}

.search-btn {
    position: absolute;
    left: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    width: 34px;
    height: 34px;
    cursor: pointer;
    border-radius: 50%;
    color: var(--dark_gray);
    transition: var(--transition);
    z-index: 1;
}

.search-btn:hover {
    background: var(--grad-brand);
    color: #fff;
}

.search-btn i {
    font-size: 1.2rem;
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    padding: 0.5rem 0;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1005;
}

.search-empty {
    padding: 0.9rem 1.1rem;
    color: var(--gray);
    font-size: 0.9rem;
}

.search-section {
    padding: 0.35rem 0;
}

.search-section + .search-section {
    border-top: 1px solid var(--light-light-gray);
}

.search-section__title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray);
    padding: 0.35rem 1.1rem;
}

.search-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 1.1rem;
    text-decoration: none;
    transition: background 0.12s ease;
}

.search-row:hover {
    background: var(--light-light-gray);
}

.search-row__icon {
    font-size: 1.15rem;
    color: var(--primary-color);
    flex: 0 0 auto;
}

.search-row__thumb {
    flex: 0 0 auto;
    width: 54px;
    height: 30px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--light-light-gray);
}

.search-row__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-row__primary {
    color: var(--text-color);
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-row__secondary {
    color: var(--gray);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--light-light-gray);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
}

.search-viewall:hover {
    background: var(--light-light-gray);
}

/* ---- "Teach on D-Academy" nav link + hover popup (Udemy-style teaser) ------ */
.teach-nav {
    position: relative;
}

.teach-nav__popup {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    padding: 1rem;
    z-index: 1005;
    text-align: center;
}

.teach-nav:hover .teach-nav__popup,
.teach-nav:focus-within .teach-nav__popup {
    display: block;
}

.teach-nav__popup p {
    font-size: 0.85rem;
    color: var(--text-color);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.teach-nav__popup-btn {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    background: var(--primary-color);
    color: #fff;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.teach-nav__popup-btn:hover {
    background: #961a94;
}

/* ---- Right side / mobile drawer -------------------------------------------
   On desktop, #nav-menu is `display: contents`: it renders no box of its own,
   so its children (explore, teach-nav, theme-toggle, auth-area, lang-toggle)
   become direct flex items of .navigation_bar and are positioned purely via
   the `order` values set above. On mobile it becomes a real, positioned
   off-canvas drawer (see the responsive block), and the same children go back
   to being laid out by #nav-menu itself instead. */
.nav-menu {
    display: contents;
}

.nav-menu__head {
    display: none; /* only shown once #nav-menu becomes an actual drawer */
}

.nav-menu__item-label {
    display: none; /* icon-only on desktop; labelled rows inside the drawer */
}

/* Bell label + caret: only meaningful once the bell is a full-width accordion
   row in the mobile drawer. On desktop the bell stays an icon button. */
.notif-bell__label,
.notif-bell__caret,
.user-menu__trigger-name {
    display: none;
}

.nav-backdrop {
    display: none;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--border-radius);
    color: var(--text-color);
    transition: var(--transition);
}

.icon-btn i {
    font-size: 1.3rem;
}

.icon-btn:hover {
    background-color: rgba(var(--background-rgb), 0.4);
    color: var(--primary-color);
}

.language-selector {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: var(--transition);
    border: 1px solid var(--primary-color);
    background: none;
    color: var(--text-color);
    font-family: inherit;
    font-size: 13px;
}

.language-selector i {
    font-size: 1.1rem;
}

.lang-toggle__label {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.language-selector:hover {
    background-color: rgba(var(--background-rgb), 0.4);
    color: var(--primary-color);
}

/* De "komt binnenkort"-tooltip (.is-coming-soon, zie global.css) opent
   standaard omhoog. De taalknop zit helemaal boven in de header, dus dan
   valt de tooltip goeddeels buiten beeld — hier laten we hem naar beneden
   opengaan in plaats daarvan. */
.header .is-coming-soon::after {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translateX(-50%) translateY(-4px);
}
.header .is-coming-soon::before {
    bottom: auto;
    top: calc(100% + 5px);
    border-top-color: transparent;
    border-bottom-color: var(--secondary-color);
}
.header .is-coming-soon:hover::after,
.header .is-coming-soon:focus-visible::after {
    transform: translateX(-50%) translateY(0);
}

/* De taalknop is het laatste item, uiterst rechts in de header. Een tooltip
   die op de knop centreert (zoals hierboven) steekt daar met de rechterkant
   voorbij de viewport uit — en ook onzichtbaar (opacity: 0) telt dat mee in
   de scrollbreedte van de pagina, dus dat gaf een permanente horizontale
   scrollbalk over de hele site. Deze knop laten we daarom rechts uitlijnen
   in plaats van centreren. */
.header .lang-toggle.is-coming-soon::after {
    left: auto;
    right: 0;
    transform: translateY(-4px);
}
.header .lang-toggle.is-coming-soon:hover::after,
.header .lang-toggle.is-coming-soon:focus-visible::after {
    transform: translateY(0);
}
.header .lang-toggle.is-coming-soon::before {
    left: auto;
    right: 14px;
    transform: none;
}

.auth-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Set synchronously by header.js when localStorage says the visitor was logged
   in last time, so the "Log in / Sign up" buttons don't flash on screen for a
   split second while /api/auth/me is still confirming the real session. The
   buttons stay in the layout (no width jump) but invisible until resolved. */
.auth-area--pending > * {
    visibility: hidden;
}

.login-btn {
    text-align: center;
    border: 1px solid var(--primary-color);
    font-weight: 600;
    color: var(--primary-color);
    padding: 7px 11px;
}

.login-btn:hover {
    color: var(--primary-color);
}

.signup-btn {
    text-align: center;
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

.signup-btn:hover {
    background-color: #961a94;
    color: #fff;
}

/* ---- Avatar (shared atom) ------------------------------------------------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Notification bell (logged in) ----------------------------------------- */
.notif-bell {
    position: relative;
}
.notif-bell__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: none;
    color: var(--dark_gray);
    cursor: pointer;
    transition: var(--transition);
}
.notif-bell__trigger:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.notif-bell__trigger i { font-size: 1.3rem; }
.notif-bell__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9999px;
    background: var(--grad-brand, var(--primary-color));
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.notif-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 340px;
    max-width: calc(100vw - 32px);
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-lift, var(--shadow));
    z-index: 200;
    overflow: hidden;
}
.notif-dropdown__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.notif-dropdown__title {
    font-weight: 700;
    color: var(--secondary-color);
}
.notif-dropdown__readall {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-color);
    padding: 0;
}
.notif-dropdown__readall:hover { text-decoration: underline; }
.notif-dropdown__list {
    max-height: 360px;
    overflow-y: auto;
}
/* Voet van de dropdown: door naar /overzicht.html, waar de meldingen naast de
   agenda, het nakijkwerk en de rest van je omgeving staan. */
.notif-dropdown__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--primary-color);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}
.notif-dropdown__all:hover {
    background: var(--light-light-gray);
}
.notif-dropdown__empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--gray);
    font-size: 0.9rem;
}
.notif-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 1.75rem 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--light-light-gray);
    transition: background 0.15s ease;
    cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--light-light-gray); }
.notif-item.is-unread { background: rgba(252, 5, 204, 0.05); }
.notif-item__avatar {
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
}
.notif-item__type-icon {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--grad-brand, var(--primary-color));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
}
.notif-item__type-icon i { font-size: 0.62rem; }
.notif-item__dot {
    position: absolute;
    top: 1.1rem;
    right: 0.85rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
}
.notif-item__body { min-width: 0; }
.notif-item__line {
    font-size: 0.88rem;
    color: var(--text-color);
    line-height: 1.4;
}
.notif-item__line strong { color: var(--secondary-color); }
.notif-item__snippet {
    font-size: 0.82rem;
    color: var(--gray);
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-item__time {
    display: block;
    font-size: 0.74rem;
    color: var(--gray);
    margin-top: 0.2rem;
}
@media (max-width: 480px) {
    .notif-dropdown { position: fixed; right: 8px; left: 8px; width: auto; top: 62px; }
}

/* ---- User menu (logged in) ------------------------------------------------ */
.user-menu {
    position: relative;
}

.user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    padding: 3px 8px 3px 3px;
    cursor: pointer;
    transition: var(--transition);
}

.user-menu__trigger:hover {
    border-color: var(--primary-color);
}

.user-menu__caret {
    font-size: 1.1rem;
    color: var(--gray);
}

.user-menu__dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 250px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    padding: 0.5rem;
    z-index: 1005;
}

.user-menu__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem;
    border-bottom: 1px solid var(--light-light-gray);
    margin-bottom: 0.35rem;
}

.user-menu__id {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-menu__name {
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu__handle {
    color: var(--gray);
    font-size: 0.82rem;
}

.user-menu__role {
    align-self: flex-start;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    background: var(--primary-color);
    color: #fff;
}

.user-menu__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-color);
    text-align: left;
    text-decoration: none;
    padding: 0.6rem;
    border-radius: var(--border-radius);
    transition: background 0.12s ease;
}

.user-menu__item i {
    font-size: 1.15rem;
}

.user-menu__item:hover {
    background: var(--light-light-gray);
    color: var(--primary-color);
}

@media (min-width: 1241px) {
    .search-toggle {
        display: none !important;
    }
}

/* ---- Responsive: hamburger + off-canvas drawer + full-screen overlays ----
   Below 900px the bar itself only ever shows three things: the hamburger, the
   logo, and a search icon. Everything else (Explore, Teach, theme, auth,
   language) lives in #nav-menu, which switches from `display: contents`
   (desktop) to a real fixed drawer here — see the .nav-menu rule near the
   top of this file for why that swap doesn't need any JS/DOM changes. */
@media (max-width: 1240px) {
    .nav-hamburger,
    .search-toggle {
        display: inline-flex;
    }

    /* ---- Drawer + backdrop -------------------------------------------------- */
    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1990;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .nav-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Slides via `left`, not `transform`: a `transform` on .nav-menu (even a
       static one) would make it the containing block for its own fixed-position
       descendant — .explore-menu, whose whole "full-screen takeover" trick
       depends on being sized against the real viewport, not this drawer. */
    .nav-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -400px;
        height: 100vh;
        width: min(86vw, 360px);
        background: var(--white);
        box-shadow: 12px 0 32px rgba(0, 0, 0, 0.18);
        overflow-y: auto;
        transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 2000;
    }
    .nav-menu.is-open {
        left: 0;
    }

    /* iOS Safari treats a `position: fixed` descendant of a scrolling container
       as `position: absolute` within that container. That's what breaks the
       Explore takeover: nested in the scrollable drawer, `.explore-menu` (and
       its close button) collapse to the drawer's 360px width instead of filling
       the viewport, leaving the X off-screen. While the takeover is open the
       drawer itself never needs to scroll, so drop its scroll container. */
    .nav-menu--explore-open,
    .nav-menu:has(.explore-menu:not([hidden])) {
        overflow: visible;
    }

    .nav-menu__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border-color);
        position: sticky;
        top: 0;
        background: var(--white);
    }
    .nav-menu__title {
        font-weight: 700;
        color: var(--secondary-color);
    }
    .nav-menu__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        background: none;
        border: none;
        cursor: pointer;
        border-radius: 50%;
        color: var(--text-color);
        transition: var(--transition);
    }
    .nav-menu__close i { font-size: 1.4rem; }
    .nav-menu__close:hover {
        background-color: rgba(var(--background-rgb), 0.4);
        color: var(--primary-color);
    }

    /* Every row in the drawer reads as a full-width tappable item. `.nav-menu >
       .nav-link` hoort hier expliciet bij: Vakken en Forum hielden anders hun
       desktop-padding en kwamen dus op een andere inspring én een andere
       tekstgrootte te staan dan de rijen eromheen. */
    .nav-menu > .nav-link,
    .explore-trigger,
    .teach-nav .nav-link,
    .theme-toggle,
    .lang-toggle {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: flex-start;
        padding: 0.9rem 1.25rem;
        border-radius: 0;
        font-size: 0.9375rem;
    }
    /* De drawer is een aparte lijst, niet de bar: hier mag "Lesgeven op
       D-Academy" — of, voor docenten, "Nieuwe cursus" — niet met een eigen
       kleur en gewicht uit de rij springen. Elke regel leest hetzelfde als
       Forum en Ontdekken eromheen. */
    .teach-nav,
    .teach-nav .nav-link {
        width: 100%;
    }
    .teach-nav .nav-link--muted,
    .teach-nav .nav-link--accent {
        color: var(--text-color);
        font-weight: 500;
    }
    .explore-trigger i {
        margin-left: auto;
    }
    .icon-btn.theme-toggle {
        height: auto;
    }
    .nav-menu__item-label {
        display: inline;
    }

    /* Onderin de drawer, als één blok: eerst je profiel en meldingen, dan
       donkere modus, dan taal. `margin-top: auto` op .auth-area (zie onder)
       duwt dat hele blok naar de voet. */
    .auth-area { order: 7; }
    .theme-toggle { order: 8; }
    .lang-toggle { order: 9; }

    .language-selector.lang-toggle {
        border: none;
        gap: 0.6rem;
    }
    /* The hover teaser popup doesn't make sense in a tap-driven drawer. */
    .teach-nav__popup {
        display: none !important;
    }

    .auth-area {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        padding: 1rem 1.25rem;
        border-top: 1px solid var(--border-color);
        margin-top: auto;
    }
    .auth-area .login-btn,
    .auth-area .signup-btn {
        width: 100%;
        padding: 0.7rem 1rem;
    }
    /* Ingelogd: geen eigen omlijsting meer nodig — de bel en het profielmenu
       zijn nu zelf volle rijen zoals de rest van de drawer. */
    .auth-area--user {
        padding: 0;
        gap: 0;
    }

    /* Logged-in user menu lives at the foot of the drawer. Its dropdown is
       normally an absolutely-positioned card anchored to the trigger — inside
       the narrow drawer that spills past the edge and off the bottom of the
       screen. Flow it inline instead so it expands the drawer like an
       accordion. */
    .nav-menu .user-menu {
        width: 100%;
    }
    .nav-menu .user-menu__trigger {
        width: 100%;
        justify-content: flex-start;
        gap: 0.6rem;
        border: none;
        border-radius: 0;
        padding: 0.9rem 1.25rem;
    }
    .nav-menu .user-menu__trigger-name {
        display: block;
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .nav-menu .user-menu__caret {
        margin-left: auto;
        transition: transform 0.2s ease;
    }
    .nav-menu .user-menu__trigger[aria-expanded="true"] .user-menu__caret {
        transform: rotate(180deg);
    }
    .nav-menu .user-menu__dropdown {
        position: static;
        width: 100%;
        margin-top: 0;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0.25rem 0.75rem 0.5rem;
        background: var(--light-light-gray);
    }

    /* ---- Meldingen: volwaardige accordeon-rij i.p.v. een zwevende kaart ------
       Buiten de drawer is de bel een rond icoonknopje met een kaart eronder;
       op een telefoon viel die kaart half over de pagina en moest je er
       ongemakkelijk in scrollen. Hier is het gewoon een rij zoals Ontdekken,
       die de drawer openvouwt. */
    .nav-menu .notif-bell {
        width: 100%;
        align-self: stretch;
    }
    .nav-menu .notif-bell__trigger {
        width: 100%;
        height: auto;
        justify-content: flex-start;
        gap: 0.6rem;
        border: none;
        border-radius: 0;
        padding: 0.9rem 1.25rem;
        color: var(--text-color);
    }
    .nav-menu .notif-bell__trigger i.bx-bell { font-size: 1.3rem; }
    .nav-menu .notif-bell__label {
        display: inline;
        font-size: 0.9375rem;
        margin-right: auto; /* duwt badge + chevron naar rechts */
    }
    .nav-menu .notif-bell__badge {
        position: static;
    }
    .nav-menu .notif-bell__caret {
        display: inline;
        font-size: 1.1rem;
        color: var(--gray);
        transition: transform 0.2s ease;
    }
    .nav-menu .notif-bell__trigger[aria-expanded="true"] .notif-bell__caret {
        transform: rotate(180deg);
    }
    .nav-menu .notif-dropdown {
        position: static;
        width: 100%;
        max-width: none;
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: var(--light-light-gray);
    }
    .nav-menu .notif-dropdown__list {
        max-height: 320px;
    }

    /* ---- Explore: full-screen takeover once opened -------------------------- */
    .explore-menu {
        position: fixed;
        inset: 0;
        border: none;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 2100;
    }
    /* Only shown while .explore-menu is actually open (not [hidden]) — it's
       `position: fixed`, so unlike a normal descendant it wouldn't otherwise
       inherit "hidden" from a collapsed ancestor. */
    .explore-menu:not([hidden]) ~ .explore-menu__close {
        display: flex;
        /* Match .explore-menu's own fixed/viewport-relative approach and sit
           above it in z-order — both are nested inside #nav-menu's stacking
           context, so this only needs to out-rank .explore-menu (2100) within
           that context, not the page as a whole. */
        position: fixed;
        z-index: 2101;
        background: var(--white);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    }
    .explore-cols {
        grid-template-columns: 1fr;
        min-height: 0;
        max-height: none;
        padding-top: 3.5rem; /* clears the close button */
    }
    .explore-col {
        border-right: none;
        overflow-y: visible;
    }
    .explore-col:not(:last-child) {
        border-bottom: 1px solid var(--border-color);
    }

    /* ---- Search: icon expands into a full-screen overlay -------------------- */
    .search-container {
        display: none;
        margin: 0;
        max-width: none;
        flex: none;
    }
    .search-container.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--white);
        padding: 1rem;
        z-index: 2200;
    }
    .search-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-bottom: 0.5rem;
        background: none;
        border: none;
        cursor: pointer;
        border-radius: 50%;
        color: var(--text-color);
    }
    /* .search-dropdown's `top: calc(100% + 8px)` assumes a container that's
       only as tall as the input — true normally, but .search-container is now
       the full viewport height, so "100%" would push it off-screen. Flow it
       in normally instead, right below the form. */
    .search-container.is-open .search-dropdown {
        position: static;
        margin-top: 0.75rem;
        max-height: calc(100vh - 120px);
    }
    .search-close i { font-size: 1.4rem; }
    .search-close:hover {
        background-color: rgba(var(--background-rgb), 0.4);
        color: var(--primary-color);
    }
}