/* Expletus Sans logo fontface */
@font-face {
    font-display: block; 
    font-family: 'Expletus Sans';
    font-style: normal;
    font-weight: 600;
    src: url('expletus-sans-v29-latin-600.woff2') format('woff2');
}

:root {
    --cust-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --pst-font-family-base-system: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--cust-font-family-emoji);
    --pst-font-family-monospace-system: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--cust-font-family-emoji);
    --pst-font-family-heading: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif, var(--cust-font-family-emoji);
    
    --pst-font-weight-heading: 700;

    /* Sizes based on Pico CSS */
    --pst-font-size-h1: 2rem;
    --pst-font-size-h2: 1.75rem;
    --pst-font-size-h3: 1.5rem;
    --pst-font-size-h4: 1.25rem;
    --pst-font-size-h5: 1.125rem;
    --pst-font-size-h6: 1rem;

    --cust-font-family-logo: "Expletus Sans", var(--pst-font-family-heading);
    --cust-font-weight-logo: 600;
}

/* Override the sphinx-book theme overrides */
.bd-article-container h1,
.bd-article-container h2 {
  font-weight: var(--pst-font-weight-heading);
}

.logo-text {
    font-family: var(--cust-font-family-logo);
    font-weight: var(--cust-font-weight-logo);
}

:root {
    /* --q-color-primary: #f1881c; */
    --q-color-primary-hue: 30;
    --q-color-primary-saturation: 88%;
    --q-color-primary-lightness: 53%;
    --q-color-primary: hsl(var(--q-color-primary-hue), var(--q-color-primary-saturation), var(--q-color-primary-lightness));

    /* --q-color-secondary-1: #6c2476; */
    --q-color-secondary-1-hue: 293;
    --q-color-secondary-1-saturation: 53%;
    --q-color-secondary-1-lightness: 30%;
    --q-color-secondary-1: hsl(var(--q-color-secondary-1-hue), var(--q-color-secondary-1-saturation), var(--q-color-secondary-1-lightness));

    /* --q-color-secondary-2: #00add3; */
    --q-color-secondary-2-hue: 191;
    --q-color-secondary-2-saturation: 100%;
    --q-color-secondary-2-lightness: 41%;
    --q-color-secondary-2: hsl(var(--q-color-secondary-2-hue), var(--q-color-secondary-2-saturation), var(--q-color-secondary-2-lightness));
}

html, html[data-theme="light"], html[data-theme="dark"] {
    --pst-color-primary: var(--q-color-secondary-2);
    --pst-color-secondary: var(--q-color-secondary-1);
}

html[data-theme="light"] {
    --q-color-secondary-2-lightness: 25%;
}

html[data-theme="dark"] {
    --q-color-secondary-1-lightness: 61%;
}

.navbar-brand {
    font-size: 1.25rem;
}

a.navbar-brand {
    color: var(--q-color-primary);
    text-decoration: none;
}

    a.navbar-brand:hover {
        color: var(--q-color-primary);
    }

    a.navbar-brand:hover:hover, /* Ugh. Geen idee waarom ze dit in de template doen. */
    a.navbar-brand:visited:hover:hover {
        color: var(--q-color-primary);
    }