/**
 * Overwrites the original theme CSS for this project.
 */
/* Inter for text and Lexend for titles, variable fonts served from the theme (webfonts/OFL-*.txt).
   The Latin Extended files only load for pages that use those characters. */
@font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    src: url('../webfonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    src: url('../webfonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lexend';
    font-weight: 100 900;
    font-display: swap;
    src: url('../webfonts/lexend-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lexend';
    font-weight: 100 900;
    font-display: swap;
    src: url('../webfonts/lexend-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* CSS Variables generated from Kigen.design */
:root {
    --awesomemb-colour-background: #f5f5f5;
    --awesomemb-colour-1: #cbb8d4;
    --awesomemb-colour-2: #b69ac2;
    --awesomemb-colour-3: #a37fb2;
    --awesomemb-colour-4: #8d689c;    /* Primary colour */
    --awesomemb-colour-5: #765783;
    --awesomemb-colour-6: #583f62;
    --awesomemb-colour-6-rgb: 88, 63, 98;
    --awesomemb-colour-7: #423149;
    --awesomemb-colour-7-rgb: 55, 39, 62;
}

/* What each part of the page uses, so dark mode only has to change these */
:root {
    --awesomemb-page-bg: var(--awesomemb-colour-background);
    --awesomemb-content-bg: #ffffff;
    --awesomemb-rule: var(--awesomemb-colour-1);
    --awesomemb-link: var(--awesomemb-colour-4);
    --awesomemb-link-hover: var(--awesomemb-colour-6);
    --awesomemb-toc-link: var(--awesomemb-colour-5);
    --awesomemb-toc-link-hover: var(--awesomemb-colour-7);
    --awesomemb-toc-hover-bg: color-mix(in srgb, var(--awesomemb-colour-4) 15%, transparent);
    --awesomemb-footer-text: var(--awesomemb-colour-7);
    --awesomemb-h1-start: var(--awesomemb-colour-7);
    --awesomemb-text-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --awesomemb-title-font: 'Lexend', var(--awesomemb-text-font);
}

/* Purple-tinted darks: the content a step above the page, and the cards (awesome-microbit.css) above that */
[data-bs-theme="dark"] {
    --awesomemb-page-bg: #110e13;
    --awesomemb-content-bg: #18141b;
    --awesomemb-rule: #3a2f40;
    --awesomemb-link: var(--awesomemb-colour-2);
    --awesomemb-link-hover: var(--awesomemb-colour-1);
    --awesomemb-toc-link: #b3a4ba;
    --awesomemb-toc-link-hover: #ece3f0;
    --awesomemb-toc-hover-bg: color-mix(in srgb, var(--awesomemb-colour-2) 16%, transparent);
    --awesomemb-footer-text: #a59dab;
    --awesomemb-h1-start: #f3e9f7;
    /* Bootstrap's own surfaces (menus, dialogs, inline code) and text, in the same tones */
    --bs-body-bg: var(--awesomemb-content-bg);
    --bs-body-bg-rgb: 24, 20, 27;
    --bs-body-color: #ddd6e0;
    --bs-body-color-rgb: 221, 214, 224;
    --bs-border-color: var(--awesomemb-rule);
}

/* Set by js/darkmode.js while it switches theme */
.theme-switching,
.theme-switching * {
    transition: none !important;
}

/*****************************************************************************/
/* Default HTML elements                                                     */
/*****************************************************************************/
body {
    background-color: var(--awesomemb-page-bg);
    font-family: var(--awesomemb-text-font);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    background: none;
}

img {
    margin: 0 !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
}

/* Pictures on their own, like the README logo, are white, so round and soften them like the cards */
[data-bs-theme="dark"] .main-content p > a:only-child > img:only-child:not([src$=".svg"]) {
    border-radius: 14px;
    filter: brightness(0.92);
}

p {
    margin: 0px 0px 16px 0px;
}

a,
a code {
    color: var(--awesomemb-link) !important;
    transition: color 0.2s ease;
}

/* Clear of descenders, rather than touching them */
a {
    text-underline-offset: 0.18em;
}

::selection {
    background-color: color-mix(in srgb, var(--awesomemb-colour-3) 40%, transparent);
}

a:hover,
a:focus {
    color: var(--awesomemb-link-hover) !important;
}

.main-content li a {
    font-weight: bold;
}

/* Out of sight until keyboard focus, then over the fixed navbar */
.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1040;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--awesomemb-content-bg);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(calc(-100% - 16px));
}

.skip-link:focus {
    transform: none;
    outline: 2px solid var(--awesomemb-colour-4);
    outline-offset: 2px;
}

/* The skip link's target, which takes focus only so the next Tab starts there */
#main-content:focus {
    outline: none;
}

/* Small enough below 992px for the site name to fit on one line */
h1 {
    font-size: clamp(2.25rem, 9vw, 3.25rem);
    font-weight: 700;
    background: linear-gradient(303deg, var(--awesomemb-h1-start), #c187d9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 12px;
    margin-top: 32px;
    margin-bottom: 12px;
    text-align: center;
}

h1::after {
    content: '';
    display: block;
    height: 1px;
    background: radial-gradient(ellipse at center, var(--awesomemb-colour-3) 0%, transparent 80%);
    margin-top: 6px;
}

@media (min-width: 992px) {
    h1 {
        font-size: 4rem;
    }
}

/* Keeps headings off the navbar when jumping to them */
h1, h2, h3 {
    font-family: var(--awesomemb-title-font);
    letter-spacing: -0.03em;
    scroll-margin-top: 24px;
}

/* Lexend's space after a heading's emoji is narrow */
:is(h1, h2, h3) > .heading-emoji {
    margin-right: 0.15em;
}

/* A new section gets clearly more space than a subsection (h3) */
h2 {
    font-weight: 500;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, var(--awesomemb-colour-2) 0%, transparent 80%) 1;
    padding-bottom: 10px;
    margin-top: 52px;
    margin-bottom: 20px;
}

h3 {
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    font-weight: 400;
    margin-top: 32px;
    margin-bottom: 12px;
}

h2 + h3 {
    margin-top: 0;
}

@media (max-width: 767.98px) {
    h2 {
        margin-top: 48px;
    }
}

code {
    border-radius: 4px;
}

h5 {
    font-size: 19px;
}

/*****************************************************************************/
/* Top Navigation bar                                                        */
/*****************************************************************************/
.navbar {
    color: #fff;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
}

.navbar.bg-primary {
    background-image: none !important;
    background-color: rgba(49, 38, 74, 0.75) !important;
}

ul.navbar-nav {
    line-height: 2.5;
}

/* Stays white on hover too, the dark link hover colour is unreadable here */
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
    color: #fff !important;
    font-family: var(--awesomemb-title-font);
    font-weight: 700;
    letter-spacing: -0.03em;
    transition: text-shadow 0.25s ease;
}

/* The glow matches the menu hover, keyboard focus gets the outline below instead */
.navbar-brand:hover {
    text-shadow: 0 0 6px var(--awesomemb-colour-4), 0 0 14px var(--awesomemb-colour-4);
}

.navbar .navbar-nav>li>a,
.navbar .navbar-nav>li>.active>a,
.navbar .navbar-nav>li>.active>a:hover,
.navbar .navbar-nav>li>.active>a:focus {
    color: #fff !important;
}

.navbar .navbar-nav>li>.active>a,
.navbar .navbar-nav>li>.active>a:hover,
.navbar .navbar-nav>li>.active>a:focus {
    color: #fff !important;
}

.navbar .navbar-nav>li>a:hover,
.navbar .navbar-nav>li>a:focus {
    color: #fff !important;
    background-color: var(--awesomemb-colour-4) !important;
}

.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
    background-color: var(--awesomemb-colour-4);
}

.navbar .dropdown-item:focus,
.navbar .dropdown-item:hover {
    background-color: var(--awesomemb-colour-4);
    color: #fff !important;
}

/* Keyboard focus as a white outline, Bootstrap's faint glow barely shows on the purple */
.navbar :is(.navbar-brand, .nav-link, .navbar-toggler):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 6px;
    box-shadow: none;
}

.navbar .dropdown-item:focus-visible {
    outline: 2px solid var(--awesomemb-colour-4);
    outline-offset: -2px;
}

.navbar .navbar-collapse,
.navbar .navbar-form {
    border-color: var(--awesomemb-colour-4);
}

/* The table of contents in the menu, on phones instead of the sidebar */
.navbar-toc {
    margin-top: 4px;
    padding: 8px 0 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.navbar-toc-title {
    margin: 4px 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

/* Wrapped titles stay together, with the rows as tall as the other menu items */
.navbar-toc .nav-link {
    padding: 9px 0;
    line-height: 1.35;
}

/* The current section and subsection (js/base.js), tinted in their colour */
.navbar-toc .nav-link.active {
    border-radius: 8px;
    background-color: oklch(0.62 0.15 var(--awesome-section-hue) / 0.35);
}

/* Around the section's text */
.navbar-toc li[data-bs-level="2"] > .nav-link.active {
    margin: 0 -10px;
    padding: 9px 10px;
}

/* The current section's subsections (hidden with the sidebar's, below) */
.navbar-toc-subs {
    margin: 2px 0 8px 12px;
}

.navbar-toc .navbar-toc-subs .nav-link {
    padding: 7px 10px;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
}

.navbar-toc .navbar-toc-subs .nav-link.active {
    border-radius: 0 8px 8px 0;
    border-left-color: oklch(0.8 0.12 var(--awesome-section-hue));
}

/* Room for that tint, which the open menu would clip as it scrolls */
@media (max-width: 991.98px) {
    .navbar .navbar-collapse {
        margin: 0 -10px;
        padding: 0 10px;
    }
}

/*****************************************************************************/
/* ToC Sidebar                                                               */
/*****************************************************************************/
/* The sidebar (.bs-sidebar) draws the background and border */
#toc-collapse {
    position: relative;
    background-color: transparent !important;
    border: none;
    border-radius: 0;
    padding-top: 0;
}

#toc-collapse>.nav {
    padding-top: 15px;
}

/* Tighter lines than the body text, so wrapped items read as one. No borders in any state, the
   current section's bar replaces them, so the text never moves. */
#toc-collapse .nav>li>a {
    position: relative;
    margin-right: 10px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--awesomemb-toc-link) !important;
    transition: background-color 0.15s ease, color 0.3s ease;
}

/* A background rather than bold, which re-wraps long items */
#toc-collapse .nav>li>a:hover,
#toc-collapse .nav>li>a:focus-visible {
    background-color: var(--awesomemb-toc-hover-bg);
    color: var(--awesomemb-toc-link-hover) !important;
}

#toc-collapse .nav>li>a:focus-visible {
    outline: 2px solid oklch(0.6 0.12 var(--awesome-section-hue));
    outline-offset: -2px;
    box-shadow: none;
}

[data-bs-theme="dark"] #toc-collapse .nav>li>a:focus-visible {
    outline-color: oklch(0.75 0.12 var(--awesome-section-hue));
}

/* The current section in its colour (js/awesome-microbit.js), or the site's purple */
#toc-collapse .nav>li>a.active {
    color: oklch(0.45 0.13 var(--awesome-section-hue)) !important;
}

/* A bar over the sidebar's border, for the section rather than its current subsection */
#toc-collapse li:not([data-bs-level="3"]) > a.active::after {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: -10px;
    width: 4px;
    border-radius: 4px 0 0 4px;
    background: oklch(0.62 0.15 var(--awesome-section-hue));
}

[data-bs-theme="dark"] #toc-collapse .nav>li>a.active {
    color: oklch(0.87 0.08 var(--awesome-section-hue)) !important;
}

[data-bs-theme="dark"] #toc-collapse li:not([data-bs-level="3"]) > a.active::after {
    background: oklch(0.72 0.15 var(--awesome-section-hue));
}

/* The current section's subsections, here and in the phone menu (js/base.js marks the section too),
   smaller and on a line in its colour, which the current one darkens */
:is(#toc-collapse, .navbar-toc) li[data-bs-level="2"]:not(:has(> .nav-link.active)) > .nav {
    display: none;
}

#toc-collapse li[data-bs-level="2"] > .nav {
    margin: 2px 0 8px 22px;
}

#toc-collapse li[data-bs-level="3"] > a {
    padding: 4px 10px;
    border-left: 2px solid oklch(0.88 0.04 var(--awesome-section-hue));
    border-radius: 0 6px 6px 0;
    font-size: 0.86rem;
}

#toc-collapse li[data-bs-level="3"] > a.active {
    border-left-color: oklch(0.62 0.15 var(--awesome-section-hue));
    background-color: oklch(0.96 0.025 var(--awesome-section-hue));
}

[data-bs-theme="dark"] #toc-collapse li[data-bs-level="3"] > a {
    border-left-color: oklch(0.38 0.05 var(--awesome-section-hue));
}

[data-bs-theme="dark"] #toc-collapse li[data-bs-level="3"] > a.active {
    border-left-color: oklch(0.72 0.15 var(--awesome-section-hue));
    background-color: oklch(0.27 0.04 var(--awesome-section-hue));
}

/* Without anchor positioning, the entry keeps its own bar */
.toc-current-bg,
.toc-current-bar {
    display: none;
}

/* A background and bar (toc.html) glide to the current entry, in its hue (js/base.js). Elements
   rather than pseudo-elements, as Safari stops animating those when the hue changes. Firefox moves
   them without the animation. */
@supports (anchor-name: --toc-current) {
    #toc-collapse li:not([data-bs-level="3"]) > a.active {
        anchor-name: --toc-current;
    }

    #toc-collapse li:not([data-bs-level="3"]) > a.active::after {
        content: none;
    }

    .toc-current-bg,
    .toc-current-bar {
        display: block;
        position: absolute;
        position-anchor: --toc-current;
        transition: top 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), bottom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
            background-color 0.3s ease;
    }

    .toc-current-bg {
        top: anchor(top);
        bottom: anchor(bottom);
        left: anchor(left);
        right: anchor(right);
        border-radius: 8px;
        background: oklch(0.93 0.04 var(--toc-current-hue, var(--awesome-section-hue)));
    }

    /* Where the entry's own bar was */
    .toc-current-bar {
        z-index: 2;
        top: calc(anchor(top) + 5px);
        bottom: calc(anchor(bottom) + 5px);
        right: calc(anchor(right) - 10px);
        width: 4px;
        border-radius: 4px 0 0 4px;
        background: oklch(0.62 0.15 var(--toc-current-hue, var(--awesome-section-hue)));
    }

    [data-bs-theme="dark"] .toc-current-bg {
        background: oklch(0.3 0.05 var(--toc-current-hue, var(--awesome-section-hue)));
    }

    [data-bs-theme="dark"] .toc-current-bar {
        background: oklch(0.72 0.15 var(--toc-current-hue, var(--awesome-section-hue)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .toc-current-bg,
    .toc-current-bar {
        transition: none;
    }
}

/*****************************************************************************/
/* Additional classes for the main container                                 */
/*****************************************************************************/
.main-container {
    background-color: var(--awesomemb-content-bg);
    margin-top: 0px !important;
}

/* How far full-width parts (the home page's header and the section bar) reach past the content's
   padding: to the screen's edges on phones, and to the sidebar's border beside it */
.main-content {
    --awesomemb-bleed-left: calc(var(--bs-gutter-x) * 0.5);
    --awesomemb-bleed-right: calc(var(--bs-gutter-x) * 0.5);
    padding-bottom: 16px;
}

/* Beside the sidebar only, phones hide it (base.html) and keep Bootstrap's gutter */
@media (min-width: 768px) {
    .main-container {
        padding-left: 0;
    }

    .main-content {
        --awesomemb-bleed-left: var(--bs-gutter-x);
    }
}

/* The background and border are on the scrolling element, as the overscroll bounce in Chrome and
   Safari moves the entries and shows what's behind them. An inset shadow, so the current section's
   bar can cover it. */
.bs-sidebar,
.bs-sidebar.affix {
    position: sticky;
    top: 3.5rem;
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
    background-color: var(--awesomemb-page-bg);
    box-shadow: inset -1px 0 0 var(--awesomemb-rule);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.bs-sidebar::-webkit-scrollbar {
    width: 6px;
}

.bs-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.bs-sidebar::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
}

.bs-sidebar:hover {
    scrollbar-color: var(--awesomemb-colour-2) transparent;
}

.bs-sidebar:hover::-webkit-scrollbar-thumb {
    background-color: var(--awesomemb-colour-2);
}

/*****************************************************************************/
/* Footer                                                                    */
/*****************************************************************************/
footer {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 16px;
    font-size: 0.82rem;
    color: var(--awesomemb-footer-text);
    letter-spacing: 0.01em;
}

footer hr {
    margin-top: 0;
    padding-top: 0;
    border-color: var(--awesomemb-rule);
}