/*
 * NexEd-huisstijl voor MkDocs Material.
 * Kleuren, lettertypen en afrondingen komen uit de NexEd-frontend
 * (jarvis: frontend/src/styles/_theme-colors.scss, _theme-typography.scss, _theme-sizing.scss).
 */

/* Merk-lettertype voor koppen. De fontbestanden zijn gelicentieerd (Colophon Foundry) en staan daarom niet in deze
   repository. Zonder de bestanden valt de styling terug op Inter. */
:root {
    --nx-font-brand: "relative-bold-pro", "Inter", sans-serif;

    /* Primitieven */
    --nx-yellow: #FFE500;
    --nx-purple: #6547FF;
    --nx-green: #2BE295;
    --nx-green-dark: #1A8859;
    --nx-pink: #FF4076;
    --nx-orange: #FFAD00;
    --nx-red: #FF4955;

    /* Afrondingen */
    --nx-radius-xs: 12px;
    --nx-radius-s: 16px;
    --nx-radius-m: 24px;
    --nx-radius-pill: 999px;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Kleuren licht
 * ------------------------------------------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
    --nx-bg-1: #F8F6F1;
    --nx-bg-2: #F2EBDD;
    --nx-bg-3: #EDE3D0;
    --nx-bg-card: rgb(255 255 255 / 0.55);
    --nx-secondary: #DAD1BF;
    --nx-text: #0F2027;
    --nx-text-mid: #6B6862;
    --nx-text-disabled: #98938B;
    --nx-border: rgb(0 0 0 / 0.08);
    --nx-link: var(--nx-purple);
    --nx-active-bg: var(--nx-green);
    --nx-active-fg: #0F2027;
    --nx-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
    --nx-signal-info: #6547FF;
    --nx-signal-success: #007C2F;
    --nx-signal-warning: #AA6E00;
    --nx-signal-error: #C5333C;

    --md-default-bg-color: var(--nx-bg-1);
    --md-default-fg-color: var(--nx-text);
    --md-default-fg-color--light: var(--nx-text-mid);
    --md-default-fg-color--lighter: var(--nx-text-disabled);
    --md-default-fg-color--lightest: var(--nx-border);
    --md-primary-fg-color: var(--nx-bg-1);
    --md-primary-fg-color--light: var(--nx-bg-2);
    --md-primary-fg-color--dark: var(--nx-bg-3);
    --md-primary-bg-color: var(--nx-text);
    --md-primary-bg-color--light: var(--nx-text-mid);
    --md-accent-fg-color: var(--nx-purple);
    --md-accent-fg-color--transparent: rgb(101 71 255 / 0.1);
    --md-accent-bg-color: #FFFFFF;
    --md-typeset-color: var(--nx-text);
    --md-typeset-a-color: var(--nx-link);
    --md-code-bg-color: var(--nx-bg-2);
    --md-code-fg-color: var(--nx-text);
    --md-footer-bg-color: var(--nx-bg-2);
    --md-footer-bg-color--dark: var(--nx-bg-3);
    --md-footer-fg-color: var(--nx-text);
    --md-footer-fg-color--light: var(--nx-text-mid);
    --md-footer-fg-color--lighter: var(--nx-text-disabled);
    --md-typeset-table-color: var(--nx-border);
}

/* ---------------------------------------------------------------------------------------------------------------
 * Typografie
 * ------------------------------------------------------------------------------------------------------------- */
.md-typeset {
    font-size: 0.8rem;
    line-height: 1.75;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title,
.md-tabs__link,
.md-nav__title,
.md-typeset .admonition-title,
.md-typeset summary,
.md-button {
    font-family: var(--nx-font-brand);
}

.md-typeset h1 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--nx-text);
    margin-bottom: 1rem;
}

@media screen and (max-width: 44.984375em) {
    .md-typeset h1 {
        font-size: 1.6rem;
    }
}

.md-typeset h2 {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2.4rem;
}

.md-typeset h3 {
    font-size: 1rem;
    font-weight: 700;
}

.md-typeset h4 {
    font-size: 0.85rem;
    font-weight: 700;
}

.md-typeset a {
    font-weight: 500;
    text-decoration: none;
}

.md-typeset a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Inline code zoals in de app: roze tekst op een licht vlak */
.md-typeset :not(pre) > code {
    color: var(--nx-pink);
    background: var(--nx-bg-card);
    border-radius: 6px;
    padding: 0.1em 0.4em;
    font-size: 0.85em;
}

/* Knoppen en UI-labels in backticks lezen als code; houd ze compact */
.md-typeset kbd {
    border-radius: 6px;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Header en tabbladen
 * ------------------------------------------------------------------------------------------------------------- */
.md-header {
    background-color: color-mix(in srgb, var(--nx-bg-1) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--nx-text);
    box-shadow: none;
}

.md-header--shadow {
    box-shadow: 0 1px 0 var(--nx-border);
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 1.4rem;
}

.md-header__title {
    font-size: 0.8rem;
}

.md-header__topic:first-child {
    font-weight: 700;
}

/* Zoekveld als pil */
.md-search__form {
    border-radius: var(--nx-radius-pill);
    background-color: var(--nx-bg-2);
    box-shadow: none;
}

.md-search__form:hover {
    background-color: var(--nx-bg-3);
}

.md-search__input,
.md-search__input::placeholder,
.md-search__icon {
    color: var(--nx-text);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    border-radius: var(--nx-radius-s) var(--nx-radius-s) 0 0;
    background-color: var(--nx-bg-1);
}

.md-search__output {
    border-radius: 0 0 var(--nx-radius-s) var(--nx-radius-s);
}

.md-source {
    color: var(--nx-text);
}

/* Tabbladen als pillen, actief tabblad geel zoals het cursusmenu */
.md-tabs {
    background-color: color-mix(in srgb, var(--nx-bg-1) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--nx-text);
    border-bottom: 1px solid var(--nx-border);
}

.md-tabs__list {
    display: flex;
    gap: 0.2rem;
    align-items: center;
    height: 2.6rem;
}

.md-tabs__item {
    height: auto;
    padding: 0;
}

.md-tabs__link {
    margin: 0;
    padding: 0.35rem 0.8rem;
    border-radius: var(--nx-radius-pill);
    font-size: 0.72rem;
    opacity: 1;
    color: var(--nx-text);
    transition: background-color 150ms;
}

.md-tabs__link:hover {
    color: var(--nx-text);
    background-color: var(--nx-bg-2);
}

.md-tabs__item--active .md-tabs__link {
    background-color: var(--nx-yellow);
    color: #0F2027;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Navigatie links en inhoudsopgave rechts: kaarten zoals de zijmenu's in de app
 * ------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 76.25em) {
    .md-sidebar--primary .md-sidebar__inner,
    .md-sidebar--secondary .md-sidebar__inner {
        background-color: var(--nx-bg-2);
        border-radius: var(--nx-radius-m);
        padding: 0.6rem;
    }

    .md-sidebar__scrollwrap {
        margin: 0.4rem 0 0;
    }

    /* Material's eigen inspringing en marges eruit: alles lijnt uit op de kaartrand */
    [dir] .md-sidebar .md-nav__list {
        padding: 0;
    }

    /* Material compenseert de (hierboven verwijderde) padding onder lijsten met een negatieve marge */
    .md-sidebar .md-nav {
        margin-bottom: 0;
    }

    [dir] .md-sidebar .md-nav__item--section > .md-nav,
    [dir] .md-sidebar .md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav:not(.md-nav--secondary) {
        margin: 0;
    }

    [dir] .md-sidebar .md-nav .md-nav__item > .md-nav__link {
        margin: 0.1rem 0 0;
    }

    /* Diepere niveaus (geen sectie) en subkoppen in de inhoudsopgave springen wel in */
    [dir] .md-nav--primary .md-nav__item--nested:not(.md-nav__item--section) > .md-nav > .md-nav__list,
    [dir] .md-nav--secondary .md-nav__list .md-nav__list {
        padding-left: 0.6rem;
    }

    .md-nav--primary > .md-nav__title {
        display: none;
    }

    .md-nav__item--section > .md-nav__link,
    .md-nav__item--section > label.md-nav__link,
    .md-nav--secondary > .md-nav__title {
        font-family: var(--nx-font-brand);
        font-size: 0.6rem;
        font-weight: 700;
        line-height: 1.4;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--nx-text-mid);
        padding: 0 0.6rem;
        margin: 0 0 0.3rem;
    }

    [dir] .md-sidebar .md-nav .md-nav__item--section > .md-nav__link {
        margin: 0 0 0.3rem;
    }

    [dir] .md-sidebar .md-nav .md-nav__item--section + .md-nav__item--section > .md-nav__link {
        margin-top: 1rem;
    }

    .md-nav--secondary > .md-nav__title {
        position: static;
        height: auto;
    }

    /* Sectiekop met overzichtspagina (navigation.indexes): blijft een kop, geen pil; paars als je op het overzicht bent */
    [dir] .md-sidebar .md-nav__item--section > .md-nav__container > .md-nav__link {
        padding: 0;
        margin: 0;
        background: none;
        color: var(--nx-text-mid);
        font-weight: 700;
    }

    [dir] .md-sidebar .md-nav__item--section > .md-nav__container > a.md-nav__link:hover,
    [dir] .md-sidebar .md-nav__item--section > .md-nav__container > a.md-nav__link--active {
        color: var(--nx-link);
    }

    /* Material geeft sticky sectiekoppen een eigen achtergrond en schaduw; die vallen buiten de kaart */
    .md-sidebar .md-nav__link[for],
    .md-sidebar .md-nav__container,
    .md-sidebar .md-nav__title {
        background-color: var(--nx-bg-2) !important;
        box-shadow: none !important;
    }
}

.md-nav__link {
    border-radius: var(--nx-radius-pill);
    padding: 0.3rem 0.6rem;
    margin-top: 0.1rem;
    font-size: 0.7rem;
    color: var(--nx-text);
}

.md-nav__link:hover,
.md-nav__link:focus {
    color: var(--nx-text);
    background-color: var(--nx-bg-3);
}

.md-nav__link--active,
.md-nav__item .md-nav__link--active {
    background-color: var(--nx-active-bg);
    color: var(--nx-active-fg);
    font-weight: 700;
}

.md-nav__link--active:hover {
    color: var(--nx-active-fg);
    background-color: var(--nx-active-bg);
}

/* In de inhoudsopgave rechts geen groene pil, maar paarse tekst */
.md-nav--secondary .md-nav__link--active,
.md-nav--secondary .md-nav__link--passed.md-nav__link--active {
    background: none;
    color: var(--nx-link);
}

.md-nav--secondary .md-nav__link--passed {
    color: var(--nx-text-mid);
}

/* ---------------------------------------------------------------------------------------------------------------
 * Inhoud
 * ------------------------------------------------------------------------------------------------------------- */
.md-main__inner {
    margin-top: 1.2rem;
}

/* Screenshots: afgeronde hoeken en een zachte schaduw */
.md-typeset img:not(.twemoji):not(.emojione):not([src$=".svg"]) {
    border-radius: var(--nx-radius-s);
    box-shadow: var(--nx-shadow);
}

.md-typeset figure figcaption {
    color: var(--nx-text-mid);
    font-size: 0.65rem;
}

/* Knoppen: pillen zoals in de app */
.md-typeset .md-button {
    border: none;
    border-radius: var(--nx-radius-pill);
    background-color: var(--nx-secondary);
    color: var(--nx-text);
    padding: 0.5em 1.4em;
    font-weight: 400;
    transition: filter 150ms;
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
    background-color: var(--nx-secondary);
    color: var(--nx-text);
    filter: brightness(0.95);
    text-decoration: none;
}

.md-typeset .md-button--primary {
    background-color: var(--nx-green);
    color: #0F2027;
}

.md-typeset .md-button--primary:hover {
    background-color: var(--nx-green);
    color: #0F2027;
}

/* Kaarten (grid cards) */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
    border: none;
    border-radius: var(--nx-radius-m);
    background-color: var(--nx-bg-2);
    padding: 1rem 1.1rem;
    transition: box-shadow 150ms, transform 150ms;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
    border-color: transparent;
    box-shadow: var(--nx-shadow);
    transform: translateY(-1px);
}

.md-typeset .grid.cards > ul > li > hr,
.md-typeset .grid.cards > ul > li > p > hr {
    border-bottom-color: var(--nx-border);
}

/* Tabellen: rijen als lichte kaarten, zoals de tabellen in de app */
.md-typeset__table {
    width: 100%;
}

.md-typeset table:not([class]) {
    border: none;
    border-collapse: separate;
    border-spacing: 0 0.3rem;
    background: none;
    font-size: 0.72rem;
    box-shadow: none;
}

.md-typeset table:not([class]) th {
    background: none;
    border: none;
    color: var(--nx-text-mid);
    font-family: var(--nx-font-brand);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.2rem 0.9rem;
}

.md-typeset table:not([class]) td {
    background-color: var(--nx-bg-card);
    border: none;
    padding: 0.6rem 0.9rem;
}

.md-typeset table:not([class]) tr td:first-child {
    border-radius: var(--nx-radius-xs) 0 0 var(--nx-radius-xs);
}

.md-typeset table:not([class]) tr td:last-child {
    border-radius: 0 var(--nx-radius-xs) var(--nx-radius-xs) 0;
}

.md-typeset table:not([class]) tbody tr:hover {
    background: none;
    box-shadow: none;
}

.md-typeset table:not([class]) tbody tr:hover td {
    background-color: var(--nx-bg-2);
}

/* Codeblokken */
.md-typeset pre > code,
.md-typeset .highlight {
    border-radius: var(--nx-radius-s);
}

.md-typeset .highlight span.filename {
    border-radius: var(--nx-radius-s) var(--nx-radius-s) 0 0;
    background-color: var(--nx-bg-3);
    border: none;
    font-family: var(--nx-font-brand);
}

.md-typeset .highlight span.filename + pre > code {
    border-radius: 0 0 var(--nx-radius-s) var(--nx-radius-s);
}

.md-typeset .md-clipboard {
    color: var(--nx-text-mid);
}

/* Inhoudstabbladen (=== "Tab") */
.md-typeset .tabbed-set {
    border: none;
    border-radius: var(--nx-radius-m);
    background-color: var(--nx-bg-card);
    padding: 0.4rem 0.6rem 0.2rem;
}

.md-typeset .tabbed-labels {
    background: none;
    box-shadow: none;
    gap: 0.25rem;
    padding: 0.2rem 0;
    align-items: center;
}

.md-typeset .tabbed-labels::before,
.js .md-typeset .tabbed-labels::before {
    display: none;
}

.md-typeset .tabbed-labels > label {
    border-radius: var(--nx-radius-pill);
    padding: 0.4rem 0.9rem;
    font-family: var(--nx-font-brand);
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--nx-text);
    border: none;
}

.js .md-typeset .tabbed-labels > label > [href]:first-child {
    margin: 0;
    padding: 0;
}

.md-typeset .tabbed-labels > label:hover {
    color: var(--nx-text);
    background-color: var(--nx-bg-2);
}

.md-typeset .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > :nth-child(1),
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6) {
    background-color: var(--nx-yellow);
    color: #0F2027;
}

.md-typeset .tabbed-content {
    padding: 0.4rem 0.2rem;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Admonitions: kaarten met een gekleurde rand, zoals de "Let op..."-meldingen in de app
 * ------------------------------------------------------------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
    --nx-admonition: var(--nx-signal-info);
    border: 2px solid color-mix(in srgb, var(--nx-admonition) 45%, transparent);
    border-radius: var(--nx-radius-s);
    background-color: var(--nx-bg-card);
    box-shadow: none;
    font-size: 0.72rem;
    padding: 0 0.9rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
    background: none !important;
    border: none;
    font-weight: 700;
    padding-left: 1.9rem;
    margin: 0 -0.9rem 0 -0.9rem;
    padding-top: 0.6rem;
    padding-bottom: 0.2rem;
    padding-right: 2rem;
}

.md-typeset :is(.admonition, details)[class] {
    border-color: color-mix(in srgb, var(--nx-admonition) 45%, transparent);
}

.md-typeset :is(.admonition, details)[class] > :is(.admonition-title, summary)::before {
    background-color: var(--nx-admonition);
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
    left: 0.7rem;
    top: 0.75rem;
}

.md-typeset details[open] > summary::after,
.md-typeset summary::after {
    top: 0.75rem;
    color: var(--nx-text-mid);
}

.md-typeset .admonition > :last-child,
.md-typeset details > :last-child {
    margin-bottom: 0.7rem;
}

.md-typeset :is(.admonition, details):is(.note, .info, .abstract, .summary, .tldr, .todo) {
    --nx-admonition: var(--nx-signal-info);
}

.md-typeset :is(.admonition, details):is(.tip, .hint, .important, .success, .check, .done, .example, .question, .help, .faq) {
    --nx-admonition: var(--nx-signal-success);
}

.md-typeset :is(.admonition, details):is(.warning, .caution, .attention) {
    --nx-admonition: var(--nx-signal-warning);
}

.md-typeset :is(.admonition, details):is(.danger, .error, .failure, .fail, .missing, .bug) {
    --nx-admonition: var(--nx-signal-error);
}

/* Nexy-admonition (FAQ) */
.md-typeset :is(.admonition, details).nexy {
    --nx-admonition: var(--nx-text);
    border-color: var(--nx-border);
    background-color: var(--nx-bg-2);
}

.md-typeset :is(.admonition, details).nexy > :is(.admonition-title, summary)::before {
    background-color: transparent;
    -webkit-mask-image: none;
    mask-image: none;
    background-image: var(--md-admonition-icon--nexy);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.1rem;
    height: 1.1rem;
    top: 0.6rem;
}

/* Annotaties (1) */
.md-typeset .md-annotation__index::after {
    background-color: var(--nx-purple);
}

/* ---------------------------------------------------------------------------------------------------------------
 * Badges voor rol en optionele feature (shortcodes.py) — chips zoals "INSTRUCTEUR" in de app
 * ------------------------------------------------------------------------------------------------------------- */
.md-typeset h1:has(.mdx-badge),
.md-typeset h2:has(.mdx-badge) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4em;
}

.mdx-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    vertical-align: middle;
    border-radius: var(--nx-radius-pill);
    background-color: var(--nx-purple);
    color: #FFFFFF;
    font-family: var(--nx-font-brand);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    padding: 0.35em 0.75em;
    text-transform: uppercase;
}

.mdx-badge .twemoji,
.mdx-badge a {
    color: inherit;
}

.mdx-badge__icon .twemoji {
    height: 1em;
    width: 1em;
}

/* Feature- en experimenteel-badge in beige in plaats van paars */
.mdx-badge--feature,
.mdx-badge--flag {
    background-color: var(--nx-secondary);
    color: var(--nx-text);
}

h1 .mdx-badge {
    font-size: 0.32em;
}

h2 .mdx-badge {
    font-size: 0.48em;
}

.mdx-badge--right {
    float: right;
    margin-left: 0.35em;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------------------------------------------- */
.md-footer {
    border-top: 1px solid var(--nx-border);
}

.md-footer__link {
    color: var(--nx-text);
}

.md-footer-meta {
    background-color: var(--nx-bg-3);
}

.md-footer-meta,
.md-footer-meta a,
.md-copyright {
    color: var(--nx-text-mid);
}

/* ---------------------------------------------------------------------------------------------------------------
 * Mobiel menu (drawer)
 * ------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 76.234375em) {
    .md-nav--primary .md-nav__title {
        background-color: var(--nx-bg-2);
        color: var(--nx-text);
    }

    .md-nav--primary .md-nav__list {
        padding: 0 0.4rem;
    }

    .md-nav--primary .md-nav__item {
        border-top: none;
    }

    .md-nav--primary .md-nav__item--active > .md-nav__link,
    .md-nav--primary .md-nav__item--active > .md-nav__link:hover,
    .md-nav--primary .md-nav__link--active {
        color: var(--nx-active-fg);
    }

    .md-nav--primary .md-nav__item--active > .md-nav__link:not(.md-nav__link--active) {
        color: var(--nx-text);
        background: none;
        font-weight: 700;
    }
}