/*
 * Awesome micro:bit look for the awesome_list hook's cards, on top of the hook's default
 * layout (hooks/awesome-list.css).
 */

/*****************************************************************************/
/* Section colours                                                           */
/*****************************************************************************/
/* The site's purple, for lists outside a numbered section */
:root {
    --awesome-section-hue: 318deg;
}

/* content.html numbers each h2 section, and each Contents tile like its section; the golden angle
   keeps neighbouring hues apart */
.awesome-section,
.awesome-contents__tile {
    --awesome-section-hue: calc(var(--awesome-section) * 137.5deg);
}

.awesome-section:has(.awesome-list) > h2 {
    border-image: linear-gradient(to right, oklch(0.78 0.09 var(--awesome-section-hue)) 0%, transparent 80%) 1;
}

/* oklch keeps the same contrast whatever the hue. The tiles and the current section's bar take
   their own hue, so they need the tokens declared on them too. */
.awesome-list,
.awesome-contents__tile,
.awesome-where__bar {
    --awesome-list-border: oklch(0.91 0.035 var(--awesome-section-hue));
    /* Behind logos and favicons, many of them are black, so it stays light in dark mode */
    --awesome-list-tint: oklch(0.965 0.018 var(--awesome-section-hue));
    --awesome-list-radius: 14px;
    --awesome-entry-bg: #ffffff;
    --awesome-entry-text: #3d4248;
    --awesome-entry-muted: #5f6670;
    --awesome-entry-title: oklch(0.47 0.12 var(--awesome-section-hue));
    --awesome-entry-accent: oklch(0.8 0.08 var(--awesome-section-hue));
    --awesome-entry-hover-bg: oklch(0.975 0.012 var(--awesome-section-hue));
    --awesome-entry-sticker: oklch(0.62 0.15 var(--awesome-section-hue));
    --awesome-entry-sticker-hot: oklch(0.72 0.16 calc(var(--awesome-section-hue) + 20deg));
}

[data-bs-theme="dark"] .awesome-list,
[data-bs-theme="dark"] .awesome-contents__tile,
[data-bs-theme="dark"] .awesome-where__bar {
    --awesome-list-border: oklch(0.36 0.03 var(--awesome-section-hue));
    --awesome-list-tint: oklch(0.93 0.02 var(--awesome-section-hue));
    --awesome-entry-bg: #1f1b22;
    --awesome-entry-text: #d6d0da;
    --awesome-entry-muted: #a59dab;
    --awesome-entry-title: oklch(0.83 0.08 var(--awesome-section-hue));
    --awesome-entry-accent: oklch(0.55 0.08 var(--awesome-section-hue));
    --awesome-entry-hover-bg: oklch(0.26 0.02 var(--awesome-section-hue));
    --awesome-entry-sticker: oklch(0.6 0.12 var(--awesome-section-hue));
    --awesome-entry-sticker-hot: oklch(0.7 0.13 calc(var(--awesome-section-hue) + 20deg));
}

/*****************************************************************************/
/* All styles                                                                */
/*****************************************************************************/
.awesome-list .awesome-entry {
    color: var(--awesome-entry-text);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* extend.css forces the colour and weight of every link */
.awesome-list .awesome-entry__title,
.awesome-subs .awesome-entry__sub > a {
    font-family: var(--awesomemb-title-font);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--awesome-entry-title) !important;
    text-decoration: none;
}

/* Handles like `@microbit_edu` keep their font, but not the box or extend.css's link colour */
.awesome-list .awesome-entry__title code {
    padding: 0;
    border: none;
    background: none;
    color: inherit !important;
}

/* The title covers the card, so this is hovering anywhere on it */
.awesome-list .awesome-entry__title:hover,
.awesome-list .awesome-entry__sub a:hover {
    text-decoration: underline;
}

/* extend.css also resets the margin of every image */
.awesome-list .awesome-entry__favicon {
    width: 16px;
    height: 16px;
    margin-right: 7px !important;
    border-radius: 3px;
    vertical-align: -2px;
}

.awesome-list .awesome-entry__domain {
    font-size: 0.78rem;
    color: var(--awesome-entry-muted);
    opacity: 1;
}

/* On the light tint in both modes */
.awesome-list .awesome-entry__icon {
    color: oklch(0.47 0.12 var(--awesome-section-hue));
}

/*****************************************************************************/
/* "media" and "gallery" styles                                              */
/*****************************************************************************/
/* Just tall enough (99.5px) for a title and three lines of description, which most cards fit in */
.awesome-list--media {
    --awesome-list-media-width: 190px;
}

/* Galleries keep the hook's 12px, which their columns and layout switch are worked out from */
.awesome-list--media:not(.awesome-list--gallery) {
    gap: 8px;
}

.awesome-list--media .awesome-entry {
    background: var(--awesome-entry-bg);
    column-gap: 14px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(66, 49, 73, 0.05);
}

.awesome-list--media .awesome-entry__desc {
    margin-top: 4px;
}

/* A blurred copy of the picture fills the frame, set by js/awesome-microbit.js */
.awesome-list--media .awesome-entry[data-image="picture"] .awesome-entry__media {
    position: relative;
    isolation: isolate;
}

.awesome-list--media .awesome-entry[data-image="picture"] .awesome-entry__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--awesome-image, none) center / cover;
    filter: blur(14px) saturate(1.2);
    transform: scale(1.3);
    opacity: 0.8;
}

/* Sub-entries' cards, joined to their entry's by a line to the first */
.awesome-subs {
    position: relative;
    margin: -2px 0 0 24px;
    padding-left: 16px;
}

.awesome-subs::before {
    content: "";
    position: absolute;
    left: 0;
    top: -6px;
    width: 10px;
    height: 29px;
    border-left: 1.5px solid var(--awesome-entry-accent);
    border-bottom: 1.5px solid var(--awesome-entry-accent);
    border-bottom-left-radius: 6px;
}

.awesome-subs .awesome-entry__sub {
    padding: 7px 10px 8px;
    background: var(--awesome-entry-bg);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--awesome-entry-text);
}

.awesome-subs .awesome-entry__sub > a {
    margin-bottom: 2px;
    font-size: 0.88rem;
}

.awesome-subs .awesome-entry__favicon {
    width: 14px;
    height: 14px;
}

.awesome-subs .awesome-entry__sub-desc {
    color: var(--awesome-entry-muted);
}

@container (max-width: 599px) {
    .awesome-subs {
        margin-left: 10px;
        padding-left: 14px;
    }
}


/*****************************************************************************/
/* "index" style                                                             */
/*****************************************************************************/
/* Two columns where there's room for them. The negative margin takes up all but 4px of the first
   row's padding, so the list sits close to its heading. */
.awesome-list--index {
    --awesome-index-row-padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    column-gap: 32px;
    margin-top: calc(4px - var(--awesome-index-row-padding));
}

.awesome-list--index .awesome-entry {
    background: var(--awesome-entry-bg);
    padding: var(--awesome-index-row-padding) 4px;
}

.awesome-list--index .awesome-entry__title {
    font-size: 1rem;
}

.awesome-list--index .awesome-entry__domain {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
}

.awesome-list--index .awesome-entry__icon {
    border-radius: 9px;
}

.awesome-list--index .awesome-entry__desc {
    margin-top: 3px;
}

.awesome-list--index .awesome-entry__subs {
    margin-top: 8px;
    font-size: 0.85rem;
}

.awesome-list--index .awesome-entry__sub::before {
    color: var(--awesome-entry-title);
    opacity: 0.6;
}

.awesome-list--index .awesome-entry__sub a {
    font-weight: 500;
    text-decoration: none;
}

@media (hover: hover) {
    .awesome-list--index .awesome-entry:hover {
        background: var(--awesome-entry-hover-bg);
    }
}

/*****************************************************************************/
/* "shelf" style: book covers on glass shelves                               */
/*****************************************************************************/
/* The shelves are the list's background, one per row, as the rows all have the same height. Each
   row has room above it for the cover's lift and below its shelf for the reflection.
   js/awesome-microbit.js spreads the covers evenly over the rows. */
.awesome-list--shelf {
    --awesome-list-cover-height: 150px;
    /* A picked book lifts and leans on its corner; its reflection doesn't tilt */
    --shelf-lift: 8px;
    --shelf-tilt: -2deg;
    --shelf-cover-lifted: translateY(calc(-1 * var(--shelf-lift))) rotate(var(--shelf-tilt));
    --shelf-cover-lifted-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), 6px 12px 18px rgba(40, 20, 50, 0.3);
    --shelf-reflection-lifted: translateY(var(--shelf-lift)) scaleY(-1);
    /* Clears the lifted cover by the same 12px as the details below a cover, plus about 4px the
       tilt raises its far corner */
    --awesome-list-details-gap: calc(var(--shelf-lift) + 16px);
    --shelf-above: 26px;
    --shelf-glass: 12px;
    --shelf-below: 36px;
    --shelf-top: calc(var(--shelf-above) + var(--awesome-list-cover-height));
    --shelf-glass-shine: rgba(255, 255, 255, 0.95);
    --shelf-glass-bg: oklch(0.86 0.06 var(--awesome-section-hue) / 0.8);
    --shelf-glass-edge: oklch(0.74 0.07 var(--awesome-section-hue) / 0.9);
    --shelf-glass-shadow: oklch(0.45 0.08 var(--awesome-section-hue) / 0.2);
    row-gap: calc(var(--shelf-glass) + var(--shelf-below) + var(--shelf-above));
    column-gap: 22px;
    padding-block: var(--shelf-above) calc(var(--shelf-glass) + 10px);
    background: linear-gradient(to bottom,
            transparent var(--shelf-top),
            var(--shelf-glass-shine) var(--shelf-top) calc(var(--shelf-top) + 2px),
            var(--shelf-glass-bg) calc(var(--shelf-top) + 2px) calc(var(--shelf-top) + var(--shelf-glass) - 1px),
            var(--shelf-glass-edge) calc(var(--shelf-top) + var(--shelf-glass) - 1px) calc(var(--shelf-top) + var(--shelf-glass)),
            var(--shelf-glass-shadow) calc(var(--shelf-top) + var(--shelf-glass)),
            transparent calc(var(--shelf-top) + var(--shelf-glass) + 10px))
        center top / calc(100% - 8px) calc(var(--shelf-top) + var(--shelf-glass) + var(--shelf-below)) repeat-y;
}

[data-bs-theme="dark"] .awesome-list--shelf {
    --shelf-glass-shine: rgba(255, 255, 255, 0.35);
    --shelf-glass-bg: rgba(255, 255, 255, 0.14);
    --shelf-glass-edge: rgba(255, 255, 255, 0.24);
    --shelf-glass-shadow: rgba(0, 0, 0, 0.5);
}

.awesome-list--shelf .awesome-entry__media,
.awesome-list--shelf .awesome-entry[data-image="none"] .awesome-entry__icon {
    position: relative;
    overflow: hidden;
    border-radius: 2px 5px 5px 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), 3px 6px 12px rgba(40, 20, 50, 0.25);
    transform-origin: 15% 100%;
    transition: transform 0.3s cubic-bezier(0.3, 1.25, 0.5, 1), box-shadow 0.3s ease;
}

/* The cover's foot reflected in the shelf: the picture js/awesome-microbit.js sets once it loads,
   flipped, under the glass. It moves down as the cover lifts. */
.awesome-list--shelf .awesome-entry::after {
    content: "";
    position: absolute;
    top: calc(100% + var(--shelf-glass));
    left: 0;
    right: 0;
    height: calc(var(--awesome-list-cover-height) * 0.22);
    background: var(--awesome-image, none) center bottom / 100% var(--awesome-list-cover-height) no-repeat;
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.24), transparent);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.24), transparent);
    transform: scaleY(-1);
    transition: transform 0.3s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.3s ease;
    pointer-events: none;
}

/* Light along the spine */
.awesome-list--shelf .awesome-entry__media::after,
.awesome-list--shelf .awesome-entry[data-image="none"] .awesome-entry__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.2) 3%, rgba(0, 0, 0, 0.05) 6%, transparent 12%);
    pointer-events: none;
}

/* A book without a cover image yet: the section's colour, with the favicon */
.awesome-list--shelf .awesome-entry[data-image="none"] .awesome-entry__icon {
    background: oklch(0.47 0.11 var(--awesome-section-hue));
    font: 600 2.5rem Georgia, serif;
    color: #fff;
}

.awesome-list--shelf .awesome-entry__icon img {
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: 8px;
    background: #fff;
}

/* A picked book. Hovering only counts where devices can hover (below), as it would stick after a tap. */
.awesome-list--shelf .awesome-entry:is(.awesome-entry--open, :has(.awesome-entry__title:focus-visible)) :is(.awesome-entry__media, .awesome-entry__icon) {
    transform: var(--shelf-cover-lifted);
    box-shadow: var(--shelf-cover-lifted-shadow);
}

.awesome-list--shelf .awesome-entry:is(.awesome-entry--open, :has(.awesome-entry__title:focus-visible))::after {
    transform: var(--shelf-reflection-lifted);
    opacity: 0.6;
}

@media (hover: hover) {
    .awesome-list--shelf .awesome-entry:hover :is(.awesome-entry__media, .awesome-entry__icon) {
        transform: var(--shelf-cover-lifted);
        box-shadow: var(--shelf-cover-lifted-shadow);
    }

    .awesome-list--shelf .awesome-entry:hover::after {
        transform: var(--shelf-reflection-lifted);
        opacity: 0.6;
    }
}

/* Below the cover when the navbar and section bar would hide them (js/awesome-microbit.js) */
.awesome-list--shelf .awesome-entry[data-details="below"] {
    --awesome-list-details-gap: 12px;
}

.awesome-list--shelf .awesome-entry[data-details="below"] .awesome-entry__details {
    top: calc(100% + var(--awesome-list-details-gap));
    bottom: auto;
}

.awesome-list--shelf .awesome-entry[data-details="below"] .awesome-entry__details::after {
    top: auto;
    bottom: 100%;
}

.awesome-list--shelf .awesome-entry__details {
    background: var(--awesome-entry-bg);
    box-shadow: 0 12px 30px rgba(40, 20, 50, 0.22);
    font-size: 0.86rem;
    line-height: 1.45;
}

/* js/awesome-microbit.js marks each row's first and last cover */
.awesome-list--shelf .awesome-entry[data-shelf-edge="start"] .awesome-entry__details {
    left: 0;
    transform: none;
}

.awesome-list--shelf .awesome-entry[data-shelf-edge="end"] .awesome-entry__details {
    left: auto;
    right: 0;
    transform: none;
}

.awesome-list--shelf .awesome-entry__title {
    font-size: 0.98rem;
}

.awesome-list--shelf .awesome-entry__desc {
    display: block;
    margin-top: 4px;
}

.awesome-list--shelf .awesome-entry__subs {
    margin-top: 8px;
    font-size: 0.8rem;
}

@media (max-width: 575.98px) {
    .awesome-list--shelf {
        --awesome-list-cover-height: 124px;
        --shelf-above: 18px;
        --shelf-below: 26px;
        column-gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .awesome-list--shelf .awesome-entry__media,
    .awesome-list--shelf .awesome-entry__icon,
    .awesome-list--shelf .awesome-entry::after {
        transition: none;
    }
}

/*****************************************************************************/
/* Contents tiles (contents-tiles.html)                                      */
/*****************************************************************************/
.awesome-contents {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.awesome-contents__tile {
    display: grid;
    grid-template: "emoji name" auto "emoji count" auto / auto 1fr;
    align-content: center;
    align-items: center;
    column-gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--awesome-list-border);
    border-radius: 12px;
    background: var(--awesome-entry-hover-bg);
    text-decoration: none;
}

.awesome-contents__emoji {
    grid-area: emoji;
    font-size: 1.45rem;
    line-height: 1;
}

.awesome-contents__name {
    grid-area: name;
    font-family: var(--awesomemb-title-font);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--awesome-entry-title);
}

.awesome-contents__count {
    grid-area: count;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--awesome-entry-muted);
}

/* Two columns on phones, with the emoji above the name so the name gets the tile's width */
@media (max-width: 575.98px) {
    .awesome-contents {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .awesome-contents__tile {
        grid-template: "emoji" auto "name" auto "count" auto / 1fr;
        align-content: start;
        row-gap: 2px;
        padding: 10px 12px;
    }

    .awesome-contents__emoji {
        margin-bottom: 4px;
        font-size: 1.25rem;
    }
}

.awesome-contents__tile:focus-visible {
    outline: 2px solid oklch(0.6 0.12 var(--awesome-section-hue));
    outline-offset: 2px;
}


/*****************************************************************************/
/* Hover: a sticker shadow on the cards and Contents tiles                   */
/*****************************************************************************/
/* The card nudges up and left over a hard shadow in its section's colour, brighter where the
   pointer is (js/awesome-microbit.js sets --awesome-x and --awesome-y). The shadow is a layer
   behind the card, as box-shadow can't take a gradient, and the card moves with top and left, as a
   transform would put that layer in front of the card's background. Keyboard focus does the same. */
@media (hover: hover) {
    /* Keeps the shadow layers above the content's background */
    .awesome-list--media,
    .awesome-contents {
        isolation: isolate;
    }

    .awesome-list--media .awesome-entry,
    .awesome-subs .awesome-entry__sub,
    .awesome-contents__tile {
        --sticker-lift: 2px;
        --sticker-offset: 3px;
        --sticker-reach: 260px;
        position: relative;
        top: 0;
        left: 0;
        transition: top 0.12s ease-out, left 0.12s ease-out, border-color 0.12s ease-out;
    }

    .awesome-subs .awesome-entry__sub,
    .awesome-contents__tile {
        --sticker-lift: 1px;
        --sticker-offset: 2px;
        --sticker-reach: 140px;
    }

    .awesome-list--media .awesome-entry::before,
    .awesome-subs .awesome-entry__sub::before,
    .awesome-contents__tile::before {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: -1;
        border-radius: inherit;
        background: radial-gradient(circle var(--sticker-reach)
            at calc(var(--awesome-x, 50%) - var(--sticker-offset)) calc(var(--awesome-y, 50%) - var(--sticker-offset)),
            var(--awesome-entry-sticker-hot), var(--awesome-entry-sticker));
        opacity: 0;
        pointer-events: none;
        transition: transform 0.12s ease-out, opacity 0.12s ease-out;
    }

    .awesome-list--media .awesome-entry:hover,
    .awesome-list--media .awesome-entry:has(.awesome-entry__title:focus-visible),
    .awesome-subs .awesome-entry__sub:hover,
    .awesome-subs .awesome-entry__sub:has(> a:focus-visible),
    .awesome-contents__tile:hover,
    .awesome-contents__tile:focus-visible {
        top: calc(var(--sticker-lift) * -1);
        left: calc(var(--sticker-lift) * -1);
        border-color: var(--awesome-entry-sticker);
    }

    .awesome-list--media .awesome-entry:hover::before,
    .awesome-list--media .awesome-entry:has(.awesome-entry__title:focus-visible)::before,
    .awesome-subs .awesome-entry__sub:hover::before,
    .awesome-subs .awesome-entry__sub:has(> a:focus-visible)::before,
    .awesome-contents__tile:hover::before,
    .awesome-contents__tile:focus-visible::before {
        opacity: 1;
        transform: translate(var(--sticker-offset), var(--sticker-offset));
    }

    /* Pressed down on click */
    .awesome-list--media .awesome-entry:active,
    .awesome-subs .awesome-entry__sub:active,
    .awesome-contents__tile:active {
        top: 0;
        left: 0;
    }

    .awesome-list--media .awesome-entry:active::before,
    .awesome-subs .awesome-entry__sub:active::before,
    .awesome-contents__tile:active::before {
        transform: translate(1px, 1px);
    }

    /* The focus outline clears the shadow */
    .awesome-contents__tile:focus-visible {
        outline-offset: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .awesome-list--media .awesome-entry,
    .awesome-list--media .awesome-entry::before,
    .awesome-subs .awesome-entry__sub,
    .awesome-subs .awesome-entry__sub::before,
    .awesome-contents__tile,
    .awesome-contents__tile::before {
        transition: none;
    }
}

/*****************************************************************************/
/* Home page header (hero.html)                                              */
/*****************************************************************************/
/* A band from the sidebar to the edge of the page, under the navbar: near white, with a pink glow
   behind the micro:bit. The title's gradient spans the words only, so no letter is too light. Links
   are darker than the site's, too faint on the band, through extend.css's link tokens. */
.awesome-hero,
.awesome-end {
    --hero-band: linear-gradient(180deg, oklch(0.99 0.006 318deg), oklch(0.975 0.014 300deg));
    --hero-glow: oklch(0.92 0.07 350deg);
    --hero-muted: oklch(0.45 0.03 318deg);
    --hero-title-end: oklch(0.55 0.18 320deg);
    --hero-button-bg: var(--bs-body-bg);
    --hero-button-border: oklch(0.85 0.05 318deg);
    --hero-button-text: oklch(0.42 0.1 318deg);
    --hero-button-hover-bg: oklch(0.95 0.035 318deg);
    --hero-button-hover-border: oklch(0.72 0.09 318deg);
    --hero-button-hover-text: oklch(0.36 0.11 318deg);
    --hero-main: #625974;
    --hero-main-hover: #4a4159;
    --hero-rule: oklch(0.92 0.03 318deg);
    --awesomemb-link: oklch(0.45 0.13 318deg);
}

.awesome-hero {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 10px 44px;
    align-items: center;
    margin: 0 calc(-1 * var(--awesomemb-bleed-right)) 24px calc(-1 * var(--awesomemb-bleed-left));
    padding: 34px 40px 28px 32px;
    overflow: hidden;
    container-type: inline-size;
    border-bottom: 1px solid var(--hero-rule);
    background: radial-gradient(circle at 13% 46%, var(--hero-glow), transparent 38%), var(--hero-band);
}

[data-bs-theme="dark"] :is(.awesome-hero, .awesome-end) {
    --hero-band: linear-gradient(180deg, oklch(0.22 0.02 318deg), oklch(0.19 0.02 300deg));
    --hero-glow: oklch(0.36 0.1 350deg);
    --hero-muted: var(--bs-secondary-color);
    --hero-title-end: oklch(0.78 0.14 320deg);
    --hero-button-bg: oklch(0.2 0.02 318deg);
    --hero-button-border: oklch(0.42 0.05 318deg);
    --hero-button-text: oklch(0.86 0.06 318deg);
    --hero-button-hover-bg: oklch(0.28 0.04 318deg);
    --hero-button-hover-border: oklch(0.58 0.08 318deg);
    --hero-button-hover-text: oklch(0.93 0.04 318deg);
    --hero-main: oklch(0.55 0.1 318deg);
    --hero-main-hover: oklch(0.47 0.1 318deg);
    --hero-rule: oklch(0.32 0.04 318deg);
    /* The site's own, which reads well on the dark band */
    --awesomemb-link: inherit;
}

.awesome-hero__mascot {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 16px rgba(60, 20, 60, 0.28));
}

.awesome-hero h1 {
    width: fit-content;
    margin: 0 0 12px;
    padding: 0;
    font-size: 3.1rem;
    text-align: left;
    background-image: linear-gradient(90deg, var(--awesomemb-h1-start), var(--hero-title-end));
    /* Jumping to it from the sidebar shows the whole header, as the page can't scroll above it */
    scroll-margin-top: 100vh;
}

.awesome-hero h1::after {
    content: none;
}

.awesome-hero__lead {
    max-width: 40em;
    margin: 0 0 12px;
    font-size: 1.16rem;
    line-height: 1.6;
}

.awesome-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0 0 22px;
    font-size: 0.94rem;
    color: var(--hero-muted);
}

.awesome-hero__stats strong {
    color: var(--bs-body-color);
}

.awesome-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* The text colours go through extend.css's link tokens, as it forces every link's colour */
.awesome-hero__button {
    --awesomemb-link: var(--hero-button-text);
    --awesomemb-link-hover: var(--hero-button-hover-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--hero-button-border);
    border-radius: 999px;
    background: var(--hero-button-bg);
    font-size: 0.96rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.awesome-hero__button--main {
    --hero-button-bg: var(--hero-main);
    --hero-button-border: var(--hero-main);
    --hero-button-text: #fff;
    --hero-button-hover-bg: var(--hero-main-hover);
    --hero-button-hover-border: var(--hero-main-hover);
    --hero-button-hover-text: #fff;
}

.awesome-hero__button:is(:hover, :focus) {
    border-color: var(--hero-button-hover-border);
    background: var(--hero-button-hover-bg);
}

.awesome-hero__button:focus-visible {
    outline: 2px solid oklch(0.6 0.12 var(--awesome-section-hue));
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .awesome-hero__button {
        transition: none;
    }
}

.awesome-hero__about {
    grid-column: 1 / -1;
    margin: 10px 0 0;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--hero-muted);
}

/* Until the container is at its widest, a smaller micro:bit beside the title, with the rest under
   them, as the text beside a large one would wrap. The glow is a layer on that first row, so it
   stays centred on the micro:bit and title whatever their height. */
@media (max-width: 1399.98px) {
    .awesome-hero {
        grid-template-columns: 120px 1fr;
        gap: 6px 20px;
        padding: 36px 28px 30px;
        background: var(--hero-band);
    }

    .awesome-hero::before {
        content: "";
        grid-row: 1;
        grid-column: 1 / -1;
        align-self: stretch;
        margin: -100px -70px;
        background: radial-gradient(ellipse closest-side at 38% 50%, var(--hero-glow), transparent);
        pointer-events: none;
    }

    .awesome-hero__mascot {
        grid-row: 1;
        grid-column: 1;
    }

    .awesome-hero__text {
        display: contents;
    }

    .awesome-hero h1 {
        grid-row: 1;
        grid-column: 2;
        margin: 0;
        font-size: 2.4rem;
        line-height: 1.1;
    }

    .awesome-hero__lead,
    .awesome-hero__stats,
    .awesome-hero__actions {
        grid-column: 1 / -1;
    }

    .awesome-hero__lead {
        margin-top: 14px;
    }
}

/* Tablets: smaller buttons, so the three fit on a line */
@media (max-width: 991.98px) {
    .awesome-hero__button {
        padding: 8px 14px;
        font-size: 0.92rem;
    }
}

@media (max-width: 575.98px) {
    .awesome-hero {
        grid-template-columns: 96px 1fr;
        gap: 6px 16px;
        padding: 30px 18px 26px;
    }

    .awesome-hero h1 {
        font-size: 2rem;
    }

    .awesome-hero__lead {
        margin-top: 12px;
        font-size: 1.04rem;
    }

    .awesome-hero__stats {
        gap: 2px 14px;
        margin-bottom: 14px;
        font-size: 0.88rem;
    }

    .awesome-hero__button {
        flex: 1 1 40%;
        justify-content: center;
        padding: 9px 10px;
        font-size: 0.9rem;
    }

    .awesome-hero__button--main {
        flex-basis: 100%;
    }

    .awesome-hero__about {
        display: none;
    }
}

/* "Bluesky" alone where the three buttons wouldn't fit on a line with "Follow on" */
@container (max-width: 560px) {
    .awesome-hero__wide {
        display: none;
    }
}

/*****************************************************************************/
/* Panel at the end of the home page (end.html)                              */
/*****************************************************************************/
/* In the header's colours, with its buttons */
.awesome-end {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 6px 28px;
    align-items: center;
    margin-top: 40px;
    padding: 32px 36px;
    container-type: inline-size;
    border: 1px solid var(--hero-rule);
    border-radius: 18px;
    background: radial-gradient(circle at 10% 50%, var(--hero-glow), transparent 32%), var(--hero-band);
}

.awesome-end__mascot {
    grid-row: span 3;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 12px rgba(60, 20, 60, 0.25));
}

/* Not a section of the list, so none of extend.css's h2 rule and spacing */
.awesome-end__title {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.5rem;
}

.awesome-end__text {
    margin: 0;
    color: var(--hero-muted);
}

.awesome-end .awesome-hero__actions {
    margin-top: 10px;
}

@media (max-width: 575.98px) {
    .awesome-end {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 26px 18px;
        text-align: center;
        background: radial-gradient(circle at 50% 70px, var(--hero-glow), transparent 120px), var(--hero-band);
    }

    .awesome-end__mascot {
        grid-row: auto;
        width: 110px;
    }

    .awesome-end .awesome-hero__actions {
        justify-content: center;
    }
}

/*****************************************************************************/
/* Current section bar (content.html)                                        */
/*****************************************************************************/
/* Sticks under the navbar (js/base.js sets its top) without taking up space, so it stays out of
   the way above the first section */
.awesome-where {
    position: sticky;
    top: 3.5rem;
    z-index: 10;
    height: 0;
}

/* Over the content's padding too (extend.css). A fixed height, as js/base.js adds it to the scroll
   padding before the bar has any text. */
.awesome-where__bar {
    position: absolute;
    top: 0;
    left: calc(-1 * var(--awesomemb-bleed-left));
    right: calc(-1 * var(--awesomemb-bleed-right));
    display: flex;
    align-items: center;
    gap: 8px;
    height: 2.5rem;
    padding: 0 var(--awesomemb-bleed-right) 0 var(--awesomemb-bleed-left);
    border-bottom: 1px solid var(--awesome-list-border);
    background: color-mix(in srgb, var(--awesome-entry-hover-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s,
        color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Over the theme's link colours */
.awesome-where .awesome-where__bar {
    color: var(--awesome-entry-title) !important;
}

.awesome-where--shown .awesome-where__bar {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.awesome-where__bar:focus-visible {
    outline: 2px solid oklch(0.6 0.12 var(--awesome-section-hue));
    outline-offset: -2px;
}

/* How far down the page, in the colour of the sidebar's bar */
.awesome-where__bar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: oklch(0.62 0.15 var(--awesome-section-hue));
    transform: scaleX(var(--awesome-where-progress, 0));
    transform-origin: left;
}

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

/* The section's and subsection's names in the titles' face, the count in the text's */
.awesome-where__name,
.awesome-where__sub {
    font-family: var(--awesomemb-title-font);
}

.awesome-where__name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The emoji's font leaves the space after it too narrow at this size */
.awesome-where__name .heading-emoji {
    margin-right: 0.25em;
}

/* In a subsection, the section's name stays whole and the subsection's gives way */
.awesome-where__bar:has(.awesome-where__sub:not(:empty)) .awesome-where__name {
    flex: none;
}

.awesome-where__sub {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.awesome-where__sub:not(:empty)::before {
    content: '\203a';
    margin-right: 8px;
    opacity: 0.6;
}

/* Phones only have room for the subsection, with its section's emoji (js/awesome-microbit.js) */
@media (max-width: 767.98px) {
    .awesome-where__bar:has(.awesome-where__sub:not(:empty)) .awesome-where__name {
        display: none;
    }

    .awesome-where__sub:not(:empty)::before {
        content: attr(data-emoji);
        /* Empty alt text, so screen readers skip the emoji, where browsers support it */
        content: attr(data-emoji) / '';
        margin-right: 0.35em;
        opacity: 1;
    }
}

.awesome-where__count {
    flex: none;
    font-weight: 400;
    color: var(--awesome-entry-muted);
}

.awesome-where__count:not(:empty)::before {
    content: '\00b7';
    margin-right: 8px;
}

/* Phones only, where the bar opens the menu */
.awesome-where__menu {
    margin-left: auto;
    font-size: 0.8rem;
}

@media (min-width: 768px) {
    .awesome-where__menu {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .awesome-where__bar {
        transition: none;
    }
}


/*****************************************************************************/
/* Section emoji                                                             */
/*****************************************************************************/
/* In the tiles, the sidebar, the phone menu and the headings (hooks/heading_emoji.py). The colour
   emoji, as Inter would draw symbols like ©️ in the text colour. */
.awesome-contents__emoji,
.toc-emoji,
.heading-emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Wrapped names hang after the emoji, which would otherwise wrap onto a line of its own */
:is(#toc-collapse, .navbar-toc) .nav-link:has(> .toc-emoji) {
    display: flex;
    align-items: first baseline;
}

.toc-emoji {
    flex: none;
    margin-right: 0.5em;
}

/* Black and grey emoji (©️, 🎓, 🛠️) vanish on the dark surfaces, so they sit on a light chip */
[data-bs-theme="dark"] :is(.awesome-contents__emoji, .toc-emoji, .heading-emoji) {
    display: inline-grid;
    place-items: center;
    /* The tiles' emoji is a grid item, which phones would stretch across the tile */
    justify-self: start;
    width: 1.3em;
    height: 1.3em;
    /* Emoji fonts draw high in their line */
    padding-top: 0.08em;
    border-radius: 0.3em;
    background: oklch(0.82 0.04 var(--awesome-section-hue));
    line-height: 1;
}