/*
Site-wide extras from Quark Open Publishing, in Quark 2's style - hibbittsdesign.org
The templates are the same as in Quark Open Publishing; colours and spacing come from Quark 2's --q2-* tokens.
*/

/* ---------- Accessibility ---------- */
/* Quark 2's muted grey (#898989) is 3.5:1 on its light background, below the 4.5:1 small text needs (WCAG AA).
   In light mode it's a little darker here (about 5:1); Dark mode keeps Quark 2's own grey, which already passes. */
:root,
:root[data-theme="light"] {
    --q2-text-muted: #6b6b70;
}

/* "Skip to content": hidden until it gets keyboard focus, then shown at the top left. While hidden it's clipped to an
   invisible 1px box (the usual way to hide text from view but not from screen readers), which works in every browser */
.skip-link {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 1000;
    padding: 0.5rem 1rem;
    border-radius: var(--q2-radius);
    background: var(--q2-bg-elev);
    color: var(--q2-text-strong);
    box-shadow: var(--q2-shadow-raised);
    font-family: var(--pico-font-family-sans-serif);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:not(:focus) {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    box-shadow: none;
}

/* ---------- Icons ---------- */
.fa.fa-github,
.fa.fa-gitlab,
.fa.fa-bitbucket,
.fa.fa-git,
.fa.fa-twitter,
.fa.fa-mastodon,
.fa.fa-linkedin {
    --fa-family: "Font Awesome 7 Brands";
    --fa-style: 400;
}

/* Font Awesome 4's bookmark-o (Continue reading) is the regular "bookmark" in Font Awesome 5 and later */
.fa.fa-bookmark-o {
    --fa: "\f02e";
    --fa-style: 400;
}

/* Font Awesome 4's clock-o (reading time) is "clock" in Font Awesome 5 and later */
.fa.fa-clock-o {
    --fa: "\f017";
    --fa-style: 400;
}

/* Blades CSS shows a link with an icon as a small flex row (with a gap after the icon); centre the icon on the text,
   rather than stretching it to the line height */
a:has(> .fa) {
    align-items: center;
}

/* ---------- Search boxes ---------- */
/* A plain field, as in Grav's Quark 2 blog demo (Blades CSS would otherwise draw type="search" fields as a pill with
   a magnifier icon). The field's colours, border and focus ring are Quark 2's own form styles. */
.search-box {
    margin: 0;
}

.search-box input[type="search"] {
    margin: 0;
    border-radius: var(--q2-radius);
    background-image: none;
    padding: 0.625rem 0.75rem;
    padding-inline-start: 0.75rem;
}

/* Rounded on all four corners. Blades treats a search form as a group of fields and squares off the right corners of
   any field that isn't last – and the hidden field that limits search to a guide comes after this one. (The longer
   selector outranks that Blades rule.) */
form.search-box[role="search"] input[type="search"] {
    border-radius: var(--q2-radius);
}

/* A clearer edge than Quark 2's very light form border, so the search box is easy to see – at least 3:1 against the
   page or card behind it in Light and Dark modes. With keyboard focus, Quark 2's own focus ring takes over. */
form.search-box[role="search"] input[type="search"]:not(:focus) {
    border-color: rgba(34, 42, 53, 0.5);
}

:root[data-theme="dark"] form.search-box[role="search"] input[type="search"]:not(:focus) {
    border-color: rgba(255, 255, 255, 0.42);
}

/* On phones, the search box's text is at least 16px, as iPhones zoom the whole page in when a box with smaller text is
   tapped (and leave it zoomed) */
@media (max-width: 959px) {
    form.search-box[role="search"] input[type="search"] {
        font-size: 16px;
    }
}

/* ---------- The Git Sync and "This page as Markdown" links on pages (their location: Page) ---------- */
.gitrepo-link-note,
.markdown-link-note {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--q2-divider);
    color: var(--q2-text-muted);
    font-family: var(--pico-font-family-sans-serif);
    font-size: 0.875rem;
}

.gitrepo-link-note p,
.markdown-link-note p {
    margin: 0;
    /* the note's small, muted text (Quark 2 sets every paragraph to 1rem in its main text colour) */
    font-size: inherit;
    color: inherit;
}

/* the links themselves are quiet, like the attribution, so they don't compete with the page content:
   muted, underlined only on hover, with a clear outline for keyboard focus */
.gitrepo-link-note a,
.markdown-link-note a {
    color: var(--q2-text-muted);
    text-decoration: none;
}

.gitrepo-link-note a:hover,
.markdown-link-note a:hover {
    text-decoration: underline;
}

.gitrepo-link-note a:focus-visible,
.markdown-link-note a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* on standard, blog and guide pages these links sit inside the content, centred, without a line */
.page-extras .gitrepo-link-note,
.page-extras .markdown-link-note {
    margin-top: 1rem;
    padding-top: 0;
    border-top: 0;
    text-align: center;
}

/* on a blog post, right after the Previous/Next Post buttons, more space above them */
#item .prev-next + .page-extras {
    padding-top: 2rem; /* padding, as margins here would merge with the link's own and add less */
}

/* on a guide page, right after its Previous/Next buttons or tiles (no attribution between them), the same space */
#sections-content p.prev-next + .page-extras {
    padding-top: 1rem; /* the classic buttons' own bottom margin adds the rest */
}

#sections-content .reader-nav-block + .page-extras {
    padding-top: 2rem;
}

/* when both links are on the page, the Markdown link sits just below the Git Sync link, without a second line */
.gitrepo-link-note + .markdown-link-note {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: 0;
}

/* ---------- Creative Commons license, below the page content ---------- */
.creative-commons-license {
    margin-top: 2rem;
    color: var(--q2-text-muted);
    font-family: var(--pico-font-family-sans-serif);
    font-size: 0.875rem;
    text-align: center;
}

.creative-commons-license > br:first-child {
    display: none;
}

/* ---------- OER attribution: a guide's or a course's, below the page content ---------- */

.reader-attribution {
    color: var(--q2-text-muted);
    font-size: 0.875rem;
    text-align: center;
    margin-top: 2.5rem;
}

/* after the page links, the attribution sits close below them, as one block (as in Grav Helios Open Reader) */
.page-extras + .reader-attribution {
    margin-top: 1rem;
}

/* (Quark 2 gives paragraphs their own colour and size, so these take the attribution's instead) */
.reader-attribution p {
    margin: 0 0 0.3rem;
    color: inherit;
    font-size: inherit;
}

/* its links stay muted, like the text, so the line reads as fine print (underlined, so they still look like links) */
.reader-attribution a {
    color: inherit;
    text-decoration: underline;
}

.reader-attribution a:hover {
    color: var(--q2-text-strong);
}

/* ---------- Footer: the text of the site's "footer" page ---------- */
#footer .footer-page p {
    margin: 0 0 0.25rem;
}

#footer .footer-git-link {
    margin: 0 0 0.75rem;
}

/* ---------- Error page ("page not found"), with a way back home and a search box ---------- */
/* (overrides Quark 2's own #error layout, which places its parts in a row with a very large title) */
#error.empty {
    display: block;
    min-height: 0;
    max-width: 34rem;
    margin: 2rem auto;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--q2-bg-elev);
    border-radius: var(--q2-radius-md);
    box-shadow: var(--q2-shadow-card);
}

#error .empty-title {
    font-size: 1.75rem;
    margin: 0.25rem 0 0.75rem;
}

#error .empty-subtitle {
    color: var(--q2-text-muted);
}

#error .empty-action {
    margin-top: 1.25rem;
}

.error-search .search-box {
    max-width: 20rem;
    margin: 0 auto;
}

/* ---------- Blog ---------- */
/* a notice above the posts (the blog's modular content, for example _important-notice) */
.blog-notice {
    margin-bottom: 1.5rem;
}

/* Bricklayer Layout turned off: posts in a single column */
.blog-grid.blog-grid-single,
.columns.has-sidebar .blog-grid.blog-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

/* reading time beside the date */
.blogitem__readingtime {
    margin-left: 0.75rem;
}

/* image credit below a post's card image */
.card .image-credit {
    margin: 0.4rem 1.375rem 0;
    color: var(--q2-text-muted);
    font-size: 0.75rem;
}

/* the site's "sidebar" page in the blog sidebar */
.sidebar-page > :last-child {
    margin-bottom: 0;
}

/* headings in a "sidebar" page (Open Matter course sidebars use ## headings) look like Quark 2's own sidebar headings */
.sidebar-page :is(h1, h2, h3) {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--q2-text-muted);
    margin: 1.5rem 0 0.75rem;
}

.sidebar-page :is(h1, h2, h3):first-child {
    margin-top: 0;
}

.sidebar-page h2::before {
    display: none;
}

/* ---------- Embeds: responsive boxes for H5P, PDF, iFrame and video embeds (Spectre's video-responsive) ---------- */
.video-responsive {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
}

.video-responsive::before {
    content: "";
    display: block;
    padding-bottom: 56.25%; /* 16:9 */
}

.video-responsive-4-3::before {
    padding-bottom: 75%;
}

.video-responsive-1-1::before {
    padding-bottom: 100%;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed,
.video-responsive video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Heading Weight option "Lighter" (the default; templates/partials/base.html.twig adds the class):
   the browser doesn't fake bold, so Cal Sans headings show their one real weight. Inter has real
   bold weights, so body text is unchanged; faked italic is still allowed. */
.headings-light {
    font-synthesis: style;
}

/* the site menu (#header) and phone menu (#overlay) keep Quark 2's usual bolder look */
.headings-light #header,
.headings-light #overlay {
    font-synthesis: weight style;
}


/* [topics] shortcode: the A-Z index and its letter headings - hibbittsdesign.org
   Semi-transparent greys are used so the same rules suit light and dark modes */
/* the letters start at the left and wrap onto a new line when needed (justify-content is set because
   Quark 2 spaces out the items in a nav across its full width) */
.topics-index {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.3rem;
    margin: 0 0 1.5rem;
}

/* each letter is a box about 36px square - comfortably above the 24px minimum target size (WCAG 2.2),
   so it's easy to tap on a phone or click with less precise pointing. The letters are large and bold
   (about 19px), which counts as large text, so the theme's link colour has enough contrast (3:1) */
.topics-index a,
.topics-index .topics-index-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    margin: 0;
    padding: 0 0.4rem;
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 0.3rem;
    font-size: 1.2rem;
    text-decoration: none;
    font-weight: 700;
}

/* a clear outline around the letter that has keyboard focus (!important is needed because
   Quark Open Publishing's base theme removes focus outlines from links with !important) */
.topics-index a:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px;
}

/* a letter with no topics */
.topics-index .topics-index-empty {
    opacity: 0.35;
}

/* no accent bar above the letter headings (Quark 2 adds one to h2 headings) */
h2.topics-letter::before {
    display: none;
}

/* each letter heading, as a soft label; after jumping to it from the index, it stops below a fixed header */
h2.topics-letter {
    scroll-margin-top: 5rem;
    display: inline-block;
    min-width: 2.25em;
    padding: 0.2em 0.6em;
    margin: 1.5rem 0 0.5rem;
    border-radius: 0.3rem;
    background: rgba(127, 127, 127, 0.16);
    font-size: 1.25rem;
    text-align: center;
}

/* Dark mode links a little lighter than Quark 2 makes them (about 65% accent colour instead of 75%), so normal-sized
   links pass the 4.5:1 contrast minimum on the lighter card behind standard pages too, with any Accent Color.
   Quark 2's dark accent is already 80% accent colour, so 81% of it gives about 65%. This stylesheet loads after
   Quark 2's own accent settings, so it takes their place - hibbittsdesign.org */
:root[data-theme='dark'] {
    --q2-link: color-mix(in oklab, var(--q2-accent) 81%, white);
}

/* Dark mode buttons a little deeper than Quark 2's lightened accent, so their white text passes the 4.5:1 contrast
   minimum with any Accent Color, while the button still stands out from the dark page (3:1 or more). This covers
   Quark 2's buttons (such as Start Reading and Continue Reading), form submit buttons and the chosen option in
   a switch; outline, ghost and reset buttons keep their own lighter look - hibbittsdesign.org */
:root[data-theme='dark'] {
    --q2op-accent-fill: color-mix(in oklab, var(--q2-accent) 85%, black);
}

:root[data-theme='dark'] .btn:not(.btn-ghost):not(.btn-outline),
:root[data-theme='dark'] .form-wrapper .buttons button:not([type="reset"]),
:root[data-theme='dark'] .form-wrapper .buttons input[type="submit"],
:root[data-theme='dark'] .form-wrapper .button-wrapper button:not([type="reset"]),
:root[data-theme='dark'] .form-wrapper .button-wrapper input[type="submit"],
:root[data-theme='dark'] .switch-toggle.switch-grav input[type="radio"]:checked + label {
    background: var(--q2op-accent-fill);
}

/* [showifembedded] content is hidden on the site; embedded pages show it, and hide [hideifembedded] content
   instead (those two rules are added in templates/partials/base.html.twig) - hibbittsdesign.org */
.chromeless-show {
    display: none;
}

/* [badge] shortcode: a small label in the text, such as "Draft" or "New", in the same colours as the section card
   badges (css/reader.css), here on any page - hibbittsdesign.org */
.content-badge {
    --badge-color: var(--q2-accent);
    display: inline-block;
    padding: 0.1em 0.55em;
    border-radius: 999px;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: 0.1em;
    color: var(--badge-color);
    background: color-mix(in oklab, var(--badge-color) 14%, transparent);
}

.content-badge-blue { --badge-color: #1d4ed8; }
.content-badge-green { --badge-color: #166534; }
.content-badge-yellow { --badge-color: #854d0e; }
.content-badge-red { --badge-color: #b91c1c; }
.content-badge-purple { --badge-color: #7e22ce; }

.content-badge-plain {
    color: var(--q2-text-muted);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--q2-divider);
}

/* a badge that is a link keeps the badge look (no underline) */
a.content-badge-link {
    text-decoration: none;
}

/* lighter colours in Dark mode, so the badges stay easy to read */
:root[data-theme="dark"] .content-badge { --badge-color: color-mix(in oklab, var(--q2-link) 75%, white); }
:root[data-theme="dark"] .content-badge-blue { --badge-color: #93c5fd; }
:root[data-theme="dark"] .content-badge-green { --badge-color: #86efac; }
:root[data-theme="dark"] .content-badge-yellow { --badge-color: #fde047; }
:root[data-theme="dark"] .content-badge-red { --badge-color: #fca5a5; }
:root[data-theme="dark"] .content-badge-purple { --badge-color: #d8b4fe; }

/* Code blocks in dark mode: the Prism Highlight plugin uses one colour theme in both modes (One Light by default),
   so these switch code blocks to the matching One Dark colours (with comments a little lighter, to be easier to read) */
:root[data-theme="dark"] code[class*="language-"],
:root[data-theme="dark"] pre[class*="language-"] {
    background: hsl(220, 13%, 18%);
    color: hsl(220, 14%, 71%);
    text-shadow: none;
}

:root[data-theme="dark"] .token.comment, :root[data-theme="dark"] .token.prolog, :root[data-theme="dark"] .token.cdata { color: hsl(220, 10%, 60%); }
:root[data-theme="dark"] .token.doctype, :root[data-theme="dark"] .token.punctuation, :root[data-theme="dark"] .token.entity { color: hsl(220, 14%, 71%); }
:root[data-theme="dark"] .token.attr-name, :root[data-theme="dark"] .token.class-name, :root[data-theme="dark"] .token.boolean, :root[data-theme="dark"] .token.constant, :root[data-theme="dark"] .token.number, :root[data-theme="dark"] .token.atrule { color: hsl(29, 54%, 61%); }
:root[data-theme="dark"] .token.keyword { color: hsl(286, 60%, 67%); }
:root[data-theme="dark"] .token.property, :root[data-theme="dark"] .token.tag, :root[data-theme="dark"] .token.symbol, :root[data-theme="dark"] .token.deleted, :root[data-theme="dark"] .token.important { color: hsl(355, 65%, 65%); }
:root[data-theme="dark"] .token.selector, :root[data-theme="dark"] .token.string, :root[data-theme="dark"] .token.char, :root[data-theme="dark"] .token.builtin, :root[data-theme="dark"] .token.inserted, :root[data-theme="dark"] .token.regex, :root[data-theme="dark"] .token.attr-value { color: hsl(95, 38%, 62%); }
:root[data-theme="dark"] .token.variable, :root[data-theme="dark"] .token.operator, :root[data-theme="dark"] .token.function { color: hsl(207, 82%, 66%); }
:root[data-theme="dark"] .token.url { color: hsl(187, 47%, 55%); }

:root[data-theme="dark"] div.code-toolbar > .toolbar .toolbar-item > button {
    background: hsl(220, 13%, 26%);
    color: hsl(220, 14%, 71%);
}

/* The divider before a guide's own menu items (such as Topics and Resources), while reading that guide: a short
   vertical line in the desktop menu, and a line across the phone menu */
.dropmenu .guide-menu-divider {
    display: inline-block;
    align-self: center;
    vertical-align: middle;
    width: 1px;
    height: 1.25rem;
    margin: 0 0.5rem;
    padding: 0;
    background: currentColor;
    opacity: 0.3;
}

.overlay-menu .guide-menu-divider {
    width: auto;
    height: 1px;
    margin: 0.75rem 0;
    padding: 0;
    background: currentColor;
    opacity: 0.3;
}

/* No automatic hyphenation on standard pages and blog posts (About, Topics, Resources): Quark 2 hyphenates by
   default, which suits cards but interrupts reading – as on guide pages (reader.css) */
.content-item p,
.content-item li {
    hyphens: manual;
}

/* A guide's name in the header, after the logo (sites with more than one guide; see templates/partials/logo.html.twig) */
#header .navbar-section.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

#header .navbar-guide-name {
    padding-left: 0.75rem;
    border-left: 1px solid var(--q2-divider);
    color: var(--q2-text-strong);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

#header .navbar-guide-name:hover {
    color: var(--q2-link);
}

/* over a hero image, with Quark 2's Header Transparent on: the same white or near-black text as Quark 2's own logo */
body.header-dark:not(.scrolled) #header .navbar-guide-name {
    color: #ffffff;
    border-left-color: rgb(255 255 255 / 0.4);
}

body.header-light:not(.scrolled) #header .navbar-guide-name {
    color: #111111;
    border-left-color: rgb(17 17 17 / 0.3);
}

/* on narrow phones, just the logo – the guide's colour and the page's back link show which guide it is */
@media (max-width: 640px) {
    #header .navbar-guide-name {
        display: none;
    }
}

/* Font Awesome 4 outline icon names, such as [fa="calendar-o"] in pages from older themes (Open Course Hub, Quark Open
   Publishing): Font Awesome 5 and later dropped the "-o" names, so each is shown as its newer icon in the regular
   (outline) style, which Font Awesome's free set includes. Other Font Awesome 4 names still work as they are */
.fa.fa-calendar-o { --fa: "\f133"; --fa-style: 400; }
.fa.fa-file-o { --fa: "\f15b"; --fa-style: 400; }
.fa.fa-comments-o { --fa: "\f086"; --fa-style: 400; }
.fa.fa-comment-o { --fa: "\f075"; --fa-style: 400; }
.fa.fa-file-text-o { --fa: "\f15c"; --fa-style: 400; }
.fa.fa-envelope-o { --fa: "\f0e0"; --fa-style: 400; }
.fa.fa-clock-o { --fa: "\f017"; --fa-style: 400; }
.fa.fa-star-o { --fa: "\f005"; --fa-style: 400; }
.fa.fa-heart-o { --fa: "\f004"; --fa-style: 400; }
.fa.fa-folder-o { --fa: "\f07b"; --fa-style: 400; }
.fa.fa-folder-open-o { --fa: "\f07c"; --fa-style: 400; }
.fa.fa-check-circle-o { --fa: "\f058"; --fa-style: 400; }
.fa.fa-square-o { --fa: "\f0c8"; --fa-style: 400; }
.fa.fa-check-square-o { --fa: "\f14a"; --fa-style: 400; }
.fa.fa-circle-o { --fa: "\f111"; --fa-style: 400; }
.fa.fa-lightbulb-o { --fa: "\f0eb"; --fa-style: 400; }
.fa.fa-bookmark-o { --fa: "\f02e"; --fa-style: 400; }
.fa.fa-calendar-check-o { --fa: "\f274"; --fa-style: 400; }
.fa.fa-image-o { --fa: "\f03e"; --fa-style: 400; }
.fa.fa-picture-o { --fa: "\f03e"; --fa-style: 400; }
.fa.fa-file-pdf-o { --fa: "\f1c1"; --fa-style: 400; }
.fa.fa-file-word-o { --fa: "\f1c2"; --fa-style: 400; }
.fa.fa-file-video-o { --fa: "\f1c8"; --fa-style: 400; }
.fa.fa-file-image-o { --fa: "\f1c5"; --fa-style: 400; }
.fa.fa-file-code-o { --fa: "\f1c9"; --fa-style: 400; }
.fa.fa-file-archive-o { --fa: "\f1c6"; --fa-style: 400; }
.fa.fa-file-audio-o { --fa: "\f1c7"; --fa-style: 400; }
.fa.fa-file-excel-o { --fa: "\f1c3"; --fa-style: 400; }
.fa.fa-file-powerpoint-o { --fa: "\f1c4"; --fa-style: 400; }
.fa.fa-files-o { --fa: "\f0c5"; --fa-style: 400; }
.fa.fa-thumbs-o-up { --fa: "\f164"; --fa-style: 400; }
.fa.fa-question-circle-o { --fa: "\f059"; --fa-style: 400; }
.fa.fa-user-o { --fa: "\f007"; --fa-style: 400; }
.fa.fa-paper-plane-o { --fa: "\f1d8"; --fa-style: 400; }
.fa.fa-map-o { --fa: "\f279"; --fa-style: 400; }
.fa.fa-keyboard-o { --fa: "\f11c"; --fa-style: 400; }
.fa.fa-newspaper-o { --fa: "\f1ea"; --fa-style: 400; }

/* A course page's header image (header_image: true; see templates/partials/page_header_image.html.twig): a wide image
   below the title, with rounded corners, and its "Image:" credit over the bottom-right corner, as in Open Matter */
.page-header-image {
    position: relative;
    margin: 0 0 1.5rem;
}

.page-header-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--q2-radius-md);
}

.page-header-image-credit {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--q2-radius-sm);
    background: rgb(0 0 0 / 0.55);
    color: #ffffff;
    font-size: 0.75rem;
}

.page-header-image-credit a {
    color: #ffffff;
}

/* Course navbar: the header's second row on course pages (templates/partials/course_navbar.html.twig); sticks below the header */
.course-navbar {
    position: sticky;
    top: var(--course-navbar-top, var(--q2-header-height, 72px));
    z-index: 40;
    /* tinted with the course's Course Color when it has one (see partials/base.html.twig) */
    background: var(--course-navbar-bg, var(--q2-nav-bg));
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--q2-divider);
    border-bottom: 1px solid var(--q2-divider);
}

.course-navbar-inner {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    min-height: 3rem;
    padding-block: 0.375rem;
}

.course-navbar-name {
    /* the name keeps its width (a very long one is cut short with "…"); the tabs get the rest */
    flex: none;
    max-width: 40%;
    align-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 1rem;
    border-right: 1px solid var(--q2-divider);
    color: var(--q2-text-strong);
    font-family: var(--pico-font-family-display);
    font-size: 1.125rem;
    line-height: 1.6;
    text-decoration: none;
}

.course-navbar-name:hover {
    color: var(--q2-link);
}

/* reset Quark 2's nav spacing (item padding, negative link margins) */
.course-navbar .course-navbar-menu {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* without the script, tabs that don't fit scroll sideways (scrollbar hidden) */
.course-navbar-menu {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.course-navbar-menu::-webkit-scrollbar {
    display: none;
}

.course-navbar .course-navbar-menu li {
    display: flex;
    margin: 0;
    padding: 0;
}

.course-navbar .course-navbar-menu a,
.course-navbar .course-navbar-name {
    margin: 0;
}

/* tabs sized like Quark 2's menu items; the current one a deeper shade than hover, and bold */
.course-navbar-menu a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.9375rem;
    border-radius: var(--q2-radius-sm);
    font-family: var(--pico-font-family-sans-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--q2-text-strong);
    text-decoration: none;
    white-space: nowrap;
}

.course-navbar-menu a:hover {
    /* (a course with a Course Color uses shades of it instead - see partials/base.html.twig) */
    background: var(--course-navbar-hover, var(--q2-bg-muted));
    color: var(--q2-text-strong);
    text-decoration: none;
}

.course-navbar-menu a.active,
.course-navbar-menu a.active:hover {
    background: var(--course-navbar-active, color-mix(in srgb, var(--q2-text) 11%, transparent));
    color: var(--q2-text-strong);
    font-weight: 600;
}

/* in dark mode Quark 2's hover shade is already light, so the current page needs a stronger one to stay distinct */
:root[data-theme=dark] .course-navbar-menu a.active,
:root[data-theme=dark] .course-navbar-menu a.active:hover {
    background: var(--course-navbar-active, color-mix(in srgb, var(--q2-text) 28%, transparent));
}

.course-navbar a:focus-visible {
    outline: 2px solid var(--q2-focus-ring, currentColor);
    outline-offset: 2px;
}

/* (inside the scrolling menu, the focus ring goes inside the tab so it isn't cut off) */
.course-navbar-menu a:focus-visible {
    outline-offset: -2px;
}

/* linked-to headings and entries stop below the course navbar too (header height + navbar + a little space) */
body.in-course [id] {
    scroll-margin-top: calc(var(--course-navbar-top, var(--q2-header-height, 72px)) + 4.75rem);
}

/* on phones and tablets: at the very top of the window once the header slides away (js/reader.js) */
@media (max-width: 959px) {
    .course-navbar {
        transition: top 0.2s ease;
    }

    body.header-fixed.header-hide-on-scroll.reader-header-away .course-navbar {
        top: 0;
    }
}

@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
    .course-navbar {
        transition: none;
    }
}


/* Course banner: the course's header image across the top of its home page (partials/course_hero.html.twig), cropped
   to a short band so the home page content stays in view */
.course-banner {
    height: clamp(9rem, 22vw, 15rem);
    overflow: hidden;
}

.course-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills the band, trimming the image's edges rather than stretching it */
}

/* Accordion pages (Open Matter's accordion page type): sections that open and close, in Quark 2's card style */
/* the sections sit together in one bordered block, with a line between each (as in Open Matter) */
.accordion {
    margin-top: 1.5rem;
    border: 1px solid var(--q2-divider);
    border-radius: var(--q2-radius-sm, 6px);
    overflow: hidden;
}

.accordion-section {
    margin: 0;
    background: var(--q2-bg, transparent);
}

/* (+ matches each section after the first) */
.accordion-section + .accordion-section {
    border-top: 1px solid var(--q2-divider);
}

.accordion-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.125rem;
    cursor: pointer;
    list-style: none;
}

.accordion-section > summary::-webkit-details-marker {
    display: none;
}

.accordion-section > summary::after {
    content: "";
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    /* (Pico draws its own chevron here as a background image; without this a sliver of it shows as a faint line) */
    background-image: none;
    float: none;
    margin-inline-start: 0;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.accordion-section[open] > summary::after {
    transform: rotate(-135deg);
}

.accordion-section[open] > summary {
    margin-bottom: 0;
}

.accordion-section > summary:hover {
    background: var(--q2-bg-muted);
}

.accordion-section > summary:focus-visible {
    outline: 2px solid var(--q2-focus-ring, var(--q2-accent));
    outline-offset: -2px; /* inside, so the block's edge doesn't cut it off */
}

.accordion-section > summary h2 {
    margin: 0;
    font-size: 1.125rem;
}

.accordion-section > summary h2::before {
    display: none;
}

.accordion-body {
    padding: 0.25rem 1.125rem 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
    .accordion-section > summary::after {
        transition: none;
    }
}

/* an older-style icon ([fa="calendar"][/fa] or <i class="fa fa-calendar">) placed right before a link, as in moved-over
   course sidebars and schedules, gets a small gap so it doesn't touch the link text */
i.fa + a {
    margin-left: 0.3em;
}

/* RSS Feeds page (Open Matter's rssfeeds page type) */
.rss-feed-item {
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--q2-divider);
}

.rss-feed-item h2 {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
}

.rss-feed-item h2::before {
    display: none;
}

.rss-feed-meta {
    margin: 0 0 0.75rem;
    color: var(--q2-text-muted);
    font-size: 0.875rem;
}

.rss-feed-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--q2-radius-sm, 6px);
}

.rss-feed-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 1.5rem;
}

.rss-feed-pages .active {
    background: color-mix(in srgb, var(--q2-text) 11%, transparent);
    font-weight: 600;
}

/* Alert boxes (modular/alert.html.twig), such as a course home's "What's Happening This Week": Quark 2's sidebar box -
   a plain card with a soft shadow, matching the sidebar beside it - or, when a colour is set, the callout style */
.course-alert {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--q2-bg-elev);
    border-radius: var(--q2-radius-md, 12px);
    box-shadow:
        rgba(19, 19, 22, 0.04) 0 1px 2px,
        rgba(19, 19, 22, 0.06) 0 8px 24px -8px;
}

:root[data-theme="dark"] .course-alert {
    box-shadow:
        rgba(0, 0, 0, 0.4) 0 1px 2px,
        rgba(0, 0, 0, 0.55) 0 10px 28px -8px;
}

.course-alert.md-alert {
    border-radius: var(--q2-radius-sm, 6px);
    box-shadow: none;
}

/* headings and text inside a box keep their standard sizes; only Quark 2's accent dash is left out */
.course-alert h2::before {
    display: none;
}

.course-alert > :first-child {
    margin-top: 0;
}

.course-alert > :last-child {
    margin-bottom: 0;
}

/* Course navbar, compact mode (when the tabs don't fit – set by the script in course_navbar.html.twig): the course name
   and a button that opens the course pages as a list */
.course-navbar-toggle {
    display: none;
}

.course-navbar.is-compact .course-navbar-inner {
    position: relative;
    flex-direction: row;
    align-items: center;
    padding-block: 0.375rem;
}

.course-navbar.is-compact .course-navbar-name {
    align-self: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
    padding-right: 0;
    border-right: 0;
}

.course-navbar.is-compact .course-navbar-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    margin: 0 0 0 auto;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--q2-divider);
    border-radius: var(--q2-radius-sm);
    background: transparent;
    color: var(--q2-text-strong);
    font-family: var(--pico-font-family-sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.course-navbar.is-compact .course-navbar-toggle:hover {
    background: var(--q2-bg-muted);
}

/* Pico's focus ring only for keyboard focus (:focus-visible), not after a click or tap */
.course-navbar-toggle:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.course-navbar-toggle:focus-visible {
    outline: 2px solid var(--q2-focus-ring, currentColor);
    outline-offset: 2px;
    box-shadow: none;
}

.course-navbar-toggle .fa-chevron-down {
    font-size: 0.75em;
    transition: transform 0.2s ease;
}

.course-navbar.is-open .course-navbar-toggle .fa-chevron-down {
    transform: rotate(180deg);
}

/* the list: hidden until the button opens it, then below the navbar on the right, one page per line */
.course-navbar.is-compact .course-navbar-menu {
    display: none;
}

.course-navbar.is-compact.is-open .course-navbar-menu {
    display: flex;
    position: absolute;
    top: 100%;
    right: clamp(1rem, 4vw, 2rem); /* the same as the container's side padding */
    z-index: 41;
    flex-direction: column;
    align-items: stretch;
    width: min(18rem, calc(100% - 2rem));
    max-height: 70vh;
    margin: 0.25rem 0 0;
    padding: 0.375rem;
    gap: 2px;
    overflow-y: auto;
    scrollbar-width: auto; /* (the tabs hide their scrollbar; a long list on a short screen should show it) */
    /* the same surface, corners and shadow as Quark 2's own dropdown menus */
    background: var(--q2-bg-elev);
    border-radius: var(--q2-radius-md);
    box-shadow: var(--q2-shadow-dropdown);
}

.course-navbar.is-compact.is-open .course-navbar-menu li {
    display: block;
}

.course-navbar.is-compact.is-open .course-navbar-menu a {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
    .course-navbar-toggle .fa-chevron-down {
        transition: none;
    }
}

/* text on blog post cards: line spacing of 24px, so links on separate lines (as in Weekly Units) are far enough apart
   to tap (WCAG 2.2 target size) */
.blog-grid .card-body :is(p, li) {
    line-height: 1.6;
}

/* Every page in a guide or a course (body class guide-or-course, embedded too) uses the same type scale as a guide's section
   pages (see css/reader.css): titles 30px, bold and left-aligned (not Quark 2's 60px, or centred on blog posts),
   headings a step below, and text a little larger. ":not(.card *)" leaves cards (such as blog post cards) as they are */
body.guide-or-course main h1 {
    font-size: clamp(1.5rem, 2vw + 0.75rem, 1.875rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-align: start;
}

body.guide-or-course main .content-title {
    text-align: start;
}

/* (Quark 2 styles an h2 right after an h1 as a subtitle; in a guide or course it's a section heading, so it keeps its
   usual spacing, colour and accent dash) */
body.guide-or-course main h1 + h2 {
    margin-top: 1.75rem;
    color: var(--q2-text-strong);
}

body.guide-or-course main h1 + h2::before {
    display: block;
}

body.guide-or-course main :is(.content-item, .e-content) h2:not(.card *) {
    font-size: clamp(1.25rem, 1vw + 0.875rem, 1.5rem);
}

body.guide-or-course main :is(.content-item, .e-content) h3:not(.card *) {
    font-size: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
}

body.guide-or-course main :is(.content-item, .e-content) :is(p, li, dd, blockquote):not(.card *) {
    font-size: 1.0625rem;
}

/* hidden from view but still read by screen readers, such as a course page's hidden title */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}