/*
Shared refinements for every Theme Style - hibbittsdesign.org
Dark Mode colours for these are in each theme-*-dark.css file.
*/

/* Slim header image (Theme option: Header Image Height) */
.myheader.myheader-slim {
    height: 140px;
}

@media (max-width: 960px) {
    .myheader.myheader-slim {
        height: 110px;
    }
}

/* On phones, a slim header image is left out, so the page starts with the NavBar */
@media (max-width: 576px) {
    .myheader.myheader-slim {
        display: none;
    }
}

/* Current page in the NavBar */
.navbar .nav-item.current > .nav-link {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* Sidebar headings a step quieter than page headings */
.blog-sidebar h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

/* On phones the sidebar sits below the page content: extra space keeps it
   from reading as part of the page (767.98px = below Bootstrap's md) */
@media (max-width: 767.98px) {
    .blog-sidebar {
        margin-top: 2.5rem;
    }
}

/* Weekly (blog post) headings in the text colour, with an underline on hover, like the course cards */
.list-blog-header h1 a,
.list-blog-header h2 a {
    color: inherit;
    text-decoration: none;
}

.list-blog-header h1 a:hover,
.list-blog-header h1 a:focus,
.list-blog-header h2 a:hover,
.list-blog-header h2 a:focus {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* "View all of …" links with the course cards' arrow */
.continue-link-arrow {
    margin-left: 0.25rem;
    transition: margin-left 0.2s ease;
}

a:hover > .continue-link-arrow,
a:focus > .continue-link-arrow {
    margin-left: 0.45rem;
}

/* Soft badges (for example the date badges in reminders, and Default course card badges) */
.badge.badge-secondary {
    background-color: rgba(108, 117, 125, 0.16);
    color: #374151;
    font-weight: 600;
}

/* Green, teal and purple badges (Badge Color Green and Purple, or [badge type="success"] and type="info"):
   Bootstrap's own green and teal are too light for their white text, so these are darker (at least 4.5:1).
   badge-purple is the theme's own, so Badge Color Purple is purple rather than Bootstrap's teal. White text
   on these colours also reads well in Dark Mode, so they need no Dark Mode version. */
.badge.badge-success {
    background-color: #1e7e34;
}

.badge.badge-info {
    background-color: #117a8b;
}

.badge.badge-purple {
    color: #fff;
    background-color: #6f42c1;
}

/* a little darker when a badge with a link (url) is hovered or focused */
a.badge.badge-success:hover,
a.badge.badge-success:focus {
    background-color: #155d27;
}

a.badge.badge-info:hover,
a.badge.badge-info:focus {
    background-color: #0c5460;
}

a.badge.badge-purple:hover,
a.badge.badge-purple:focus {
    color: #fff;
    background-color: #59339d;
}

/* Friendlier "page not found" page */
.error-page {
    max-width: 36rem;
    margin: 0 auto;
    padding: 2rem 0 3rem;
    text-align: center;
}

.error-page .error-code {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.error-page .error-search {
    max-width: 24rem;
    margin: 1.5rem auto 0;
}

/* [references] shortcode - a list of sources under a small heading */
.course-references {
    border-top: 1px solid rgba(127, 127, 127, 0.25);
    padding-top: 0.75rem;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.course-references-title {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.5rem;
}

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

/* [excerpt] shortcode - a quoted passage */
.blockquote.excerpt {
    border-left: 4px solid rgba(127, 127, 127, 0.35);
    padding: 0.25rem 0 0.25rem 1rem;
    font-size: 1.05rem;
}

.blockquote.excerpt > :last-child {
    margin-bottom: 0;
}

/* [topics] shortcode letter headings - a soft label, like the soft badges (corner size set by each Theme Style) */
h2.topics-letter {
    display: inline-block;
    width: auto;
    min-width: 2.25em;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    padding: 0.2em 0.6em;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    background: rgba(108, 117, 125, 0.16);
    color: inherit;
}


/* NavBar Look "Tinted" (Theme option): the NavBar in a light tint of its colour, with dark text.
   color-mix() blends some of the NavBar colour into white; older browsers without it use the plain white set just before it.
   (!important is needed because Bootstrap's bg- classes use it for their background) */

/* How strong the tint is: Tinted (subtle), Tinted, or Tinted (strong).
   --navbar-tint-lightness and --navbar-tint-chroma are for newer browsers (see the end of this section),
   --navbar-tint-amount is the share of colour blended into white for older ones. */
.navbar-tint {
    --navbar-tint-lightness: 0.915;
    --navbar-tint-chroma: 0.15;
    --navbar-tint-amount: 10%;
}

.navbar-tint.navbar-tint-subtle {
    --navbar-tint-lightness: 0.94;
    --navbar-tint-chroma: 0.11;
    --navbar-tint-amount: 5%;
}

.navbar-tint.navbar-tint-strong {
    --navbar-tint-lightness: 0.89;
    --navbar-tint-chroma: 0.19;
    --navbar-tint-amount: 18%;
}

.navbar.navbar-tint {
    background-color: #ffffff !important;
    background-color: color-mix(in srgb, var(--navbar-color, #1b6ec2) var(--navbar-tint-amount), #ffffff) !important;
    /* a hairline along the bottom gives the NavBar a clear edge against the page, as in Grav Helios */
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

/* The NavBar Background classes as the colour for the tint */
.navbar-tint.bg-primary { --navbar-color: #007bff; }
.navbar-tint.bg-success { --navbar-color: #28a745; }
.navbar-tint.bg-info    { --navbar-color: #17a2b8; }
.navbar-tint.bg-warning { --navbar-color: #ffc107; }
.navbar-tint.bg-danger  { --navbar-color: #dc3545; }
.navbar-tint.bg-inverse { --navbar-color: #343a40; }
.navbar-tint.bg-faded   { --navbar-color: #adb5bd; }

/* Dark text for the site title and menu (Bootstrap's light NavBar text can be too pale on a tint) */
.navbar-tint .navbar-brand,
.navbar-tint .navbar-brand:hover,
.navbar-tint .navbar-brand:focus {
    color: #111827;
}

.navbar-tint .navbar-nav .nav-link,
.navbar-tint .navbar-nav .active > .nav-link {
    color: #1f2937;
}

.navbar-tint .navbar-nav .nav-link:hover,
.navbar-tint .navbar-nav .nav-link:focus {
    color: #000000;
}

/* Menu items with room on each side for the current page's pill */
.navbar-tint .navbar-nav .nav-link {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-radius: 8px;
}

/* Current page as a white pill with semibold text, a little shorter than the NavBar so it has space around it.
   This replaces the underline (and 2026 Modern's rounded bar, hidden with display: none). */
.navbar-tint .navbar-nav .nav-item.current > .nav-link {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    background-color: #ffffff;
    /* a thin outline (drawn with box-shadow, so it doesn't change the size) keeps the pill clear on the subtle tint */
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.navbar-tint .navbar-nav .nav-item.current > .nav-link::after {
    display: none;
}

/* When the menu is in a row, its items are centred in the NavBar, so the shorter pill stays in line with them.
   The menu is in a row from the NavBar Breakpoint setting's width: Small, Medium or Large. */
@media (min-width: 576px) {
    .navbar-tint.navbar-expand-sm .navbar-nav {
        align-items: center;
    }
}

@media (min-width: 768px) {
    .navbar-tint.navbar-expand-md .navbar-nav {
        align-items: center;
    }
}

@media (min-width: 992px) {
    .navbar-tint.navbar-expand-lg .navbar-nav {
        align-items: center;
    }
}

/* With NavBar Position "Sticky Top", a frosted NavBar: slightly see-through, blurring the page as it scrolls under.
   (@supports checks the browser can blur, and visitors who ask their system to reduce transparency keep a solid NavBar) */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .navbar.navbar-tint.sticky-top {
        background-color: color-mix(in srgb, var(--navbar-color, #1b6ec2) var(--navbar-tint-amount), rgba(255, 255, 255, 0.85)) !important;
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter: saturate(180%) blur(12px);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .navbar.navbar-tint.sticky-top {
        background-color: color-mix(in srgb, var(--navbar-color, #1b6ec2) var(--navbar-tint-amount), #ffffff) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Newer browsers (2024 onwards) make the tint from the NavBar colour's own hue instead of blending it into white,
   so the tint stays warm or cool like the colour, and every colour gets the same light background.
   oklch(from ...) is a relative colour: it takes the colour's hue (h), sets a fixed lightness, and keeps a share
   of its colourfulness (c). @supports checks the browser understands it; others keep the blend above. */
@supports (color: oklch(from red l c h)) {
    .navbar.navbar-tint {
        background-color: oklch(from var(--navbar-color, #1b6ec2) var(--navbar-tint-lightness) calc(c * var(--navbar-tint-chroma)) h) !important;
    }
}

/* the same tint for the frosted Sticky Top NavBar, slightly see-through (/ 0.85) */
@supports (color: oklch(from red l c h)) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar.navbar-tint.sticky-top {
        background-color: oklch(from var(--navbar-color, #1b6ec2) var(--navbar-tint-lightness) calc(c * var(--navbar-tint-chroma)) h / 0.85) !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    @supports (color: oklch(from red l c h)) {
        .navbar.navbar-tint.sticky-top {
            background-color: oklch(from var(--navbar-color, #1b6ec2) var(--navbar-tint-lightness) calc(c * var(--navbar-tint-chroma)) h) !important;
        }
    }
}

/* Course panels, such as the announcement, "What's Happening This Week" and "Looking Ahead to Next Week", on a
   Home page or above a blog's posts. The last line in a reminders box (.listbullet.alert, in any Alert Style colour)
   adds no extra space of its own, so the space below it matches the space above (each Theme Style sets the padding) */
.listbullet.alert > :last-child {
    margin-bottom: 0;
}

/* More space below an announcement, so it doesn't sit tight against the box that follows it. On a Home page the
   announcement is followed directly by the box (.list-item); above a blog's posts each panel is in its own .blog-panel.
   (The space between two boxes is the larger of their margins, not both added together, so this is the full space.
   !important as some Theme Styles set .list-item's margin with !important.) */
.blog-main > .md-alert + .list-item {
    margin-top: 1.5rem!important;
}

.blog-panel > .md-alert {
    margin-bottom: 1.5rem;
}

/* The line between the panels and a blog's posts, with room on both sides so the posts read as their own section */
.blog-panels-end {
    margin: 2.5rem 0;
}

/* "Skip to content": the first link on the page, for keyboard users. Bootstrap's sr-only and sr-only-focusable
   classes keep it hidden until it gets keyboard focus; these rules place it at the top left when it shows */
.skip-link:focus {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 2000;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    background: #fff;
    color: #212529;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    font-weight: 600;
    text-decoration: none;
}

/* Images in page text are no taller than a little over half the screen, so an image and the text around it fit
   on screen together - when reading, and when presenting a module in class or by screen sharing. A shortened
   image keeps its shape. Only images in the page's own text (inside a paragraph) are limited, not card or
   header images - the same as Quark Open Publishing - hibbittsdesign.org */
.main-content p > img {
    max-height: 55vh;
    width: auto;
    max-width: 100%;
}

/* A caption in plain Markdown: an italic line right after an image on its own, such as
   ![A photo](photo.jpg) followed by *Photo by …* - shown like a figure caption (smaller and softer, just below
   the image), so authors need no HTML. It works with the italic line in its own paragraph (after a blank line)
   or on the line just below the image (the same paragraph), as in Quark Open Publishing.
   (":only-child" here looks at elements only, so text beside them still counts) */
.main-content p:has(> img:only-child):has(+ p > em:only-child) {
    margin-bottom: 0.375rem;
}

.main-content p:has(> img:only-child) + p:has(> em:only-child),
.main-content p > img:first-child + em:last-child {
    display: block;
    margin-top: 0;
    font-size: 90%;
    /* softer than the page text, but still 4.5:1 contrast or more (70%, as figure captions use, is just under) */
    opacity: 0.8;
}

/* the image in the same paragraph as its caption sits on its own line */
.main-content p > img:first-child:has(+ em:last-child) {
    display: block;
    margin-bottom: 0.375rem;
}

/* [topics] shortcode: the A-Z index - letters a little larger and bold, so they're easy to read and tap, with letters
   without topics clearly faded (they aren't links, and screen readers skip them), and a clear outline around the letter
   that has keyboard focus, instead of Bootstrap's faint glow - the same as Grav Helios Course Hub - hibbittsdesign.org */
.topics-index .page-link {
    min-width: 2.25rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.topics-index .page-item.disabled .page-link {
    opacity: 0.45;
}

.topics-index .page-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- Seeing an image larger ---------- */

/* An image in a page that's shown smaller than its full size can be tapped or clicked to see it larger
   (js/image-zoom.js adds image-zoom to it): a zoom-in pointer, and a visible focus ring for keyboard users */
img.image-zoom {
    cursor: zoom-in;
}

img.image-zoom:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* the larger view: the image as large as fits the screen, on a dark background, with a Close button at the top right */
.image-zoom-dialog {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 3.5rem 1rem 1rem;
    border: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: zoom-out;
}

.image-zoom-dialog[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-zoom-dialog::backdrop {
    background: rgba(0, 0, 0, 0.92);
}

.image-zoom-dialog img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* the Close button: white on the dark background, 44px so it's easy to tap */
.image-zoom-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.image-zoom-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}