/*
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;
}

/* ---------- 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;
}

/* ---------- 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;
}

/* ---------- 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;
}