/* Main application styles */

/* Body and base typography */
body {
    font-family: var(--font-family);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    font-weight: 700;
    line-height: 1.15;
}

h1 {
    color: var(--brand-primary);
}

h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

/* Links */
a {
    color: var(--link-color);
}

a:hover {
    color: #0c6289;
}

/* Site header (mirrors centreforaquacultureprogress.org) */
.cap-header {
    background: var(--brand-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    font-family: var(--font-family);
}

.cap-header-inner {
    display: flex;
    align-items: center;
    min-height: var(--header-height);
    padding: 0 20px;
}

.cap-logo {
    display: flex;
    align-items: center;
}

.cap-logo img {
    width: 140px;
    height: auto;
}

.cap-nav {
    display: flex;
    flex: 1;
    align-items: center;
}

.cap-nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0 0 0 20px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.cap-nav-links a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px;
}

.cap-nav-links a:hover {
    color: rgba(255, 255, 255, 0.75);
}

.cap-nav-buttons {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-left: 20px;
}

.cap-btn-contact {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    background: rgba(237, 237, 237, 0.8);
    padding: 8px 18px;
    border-radius: 0;
    text-decoration: none;
}

.cap-btn-contact:hover {
    color: #000;
    background: rgb(213, 213, 213);
}

.cap-menu-toggle {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 10px 0 0;
}

/* Mobile toggle for the protocol sidebar (injected by main.js) */
.cap-sidebar-toggle {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    margin-left: auto;
    padding: 0 0 0 10px;
}

@media (max-width: 991.98px) {
    .cap-nav-links {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0;
    }

    .cap-nav-links a {
        padding: 10px 0;
    }
}

/* Breadcrumb bar below the site header */
.cap-breadcrumb-bar {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0.4rem 1rem;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    /* Dynamic viewport height where supported: on iOS, 100vh assumes the URL
       bar is collapsed, cutting the sidebar's bottom off while it's shown */
    height: calc(100dvh - var(--header-height));
    overflow-y: scroll;
    /* Don't hand the scroll to the page when the list hits its end — on iOS
       that chained scroll runs the page to the bottom and rubber-bands past */
    overscroll-behavior: contain;
    position: sticky;
    top: var(--header-height);
    flex-shrink: 0;
    background-color: var(--brand-primary);
    color: #fff;
    /* No scrollbar styling here: ANY scrollbar-width/scrollbar-color/::-webkit-scrollbar
       rule forces Chrome/Safari into classic space-reserving scrollbars. Unstyled,
       macOS overlay scrollbars float above the content and the sidebar elements
       bleed to the very right edge. */
}

.sidebar-header {
    position: sticky;
    top: 0;
    background: var(--brand-primary);
    z-index: 10;
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 1.5rem 1rem 0.5rem;
    transition: background-color 0.15s ease;
}

a.sidebar-header:hover {
    background: #0c6289;
    color: #fff;
}

a.sidebar-header:hover .protocol-cover-image {
    filter: brightness(1.12);
}

/* Protocol cover (shared by the sidebar header and the hub cards) */
.protocol-cover-title {
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: break-word;
    color: #fff;
}

.protocol-cover-image {
    display: block;
    /* Bleed through the container's side padding to its edges */
    width: calc(100% + 2rem);
    margin: 1rem -1rem 0;
    height: 170px;
    object-fit: cover;
    /* Diagonal edges echoing the printed cover: blue shows through the cut corners */
    clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
    transition: filter 0.15s ease;
}

/* Image lightbox overlay (enlarge on click) */
.owi-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.owi-lightbox.show {
    opacity: 1;
}

.owi-lightbox img {
    max-width: 92vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    cursor: default;
}

.owi-lightbox-caption {
    margin-top: 1rem;
    max-width: 80vw;
    color: #fff;
    text-align: center;
    font-size: 0.95rem;
}

.owi-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    padding: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.25rem;
    line-height: 1;
    cursor: pointer;
}

/* Signal that content images can be enlarged */
.score-image-item img,
.markdown-content img {
    cursor: zoom-in;
}

.sidebar-nav {
    padding: 0 0 1rem;
}

/* Divider above each section sits on the header itself (not the container)
   so it travels with the header while it's stuck. It blends over the header's
   own opaque background, never over the chapters scrolling beneath. */
.sidebar-category + .sidebar-category > .sidebar-category-header {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: inherit;
    text-decoration: none;
    border-left: 3px solid transparent;
    /* Not "all": that would animate `top` on the sticky section headers when
       the JS-measured --sidebar-sticky-top offset arrives, making them slide
       into place on page load. */
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: inherit;
}

.sidebar-link.active {
    background-color: rgba(255, 255, 255, 0.14);
    border-left-color: #fff;
    color: #fff;
    font-weight: 500;
}

.sidebar-category-header {
    font-weight: 500;
    /* Fill the full band between section divider lines so hover covers it */
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    /* Keep the current section's title pinned below the sidebar header while
       its chapters scroll by, until the next section pushes it out. The offset
       is the measured .sidebar-header height (set from JS — it varies with the
       cover image). Opaque background so chapters can't show through. */
    position: sticky;
    top: var(--sidebar-sticky-top, 0px);
    z-index: 5;
    background-color: var(--brand-primary);
}

/* While pinned, content scrolls beneath the header, so hover/active states
   need opaque backgrounds: layer the usual translucent white over the brand
   color instead of relying on what's behind. */
.sidebar-category-header:hover {
    background-color: var(--brand-primary);
    background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
}

.sidebar-category-header.active {
    background-color: var(--brand-primary);
    background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14));
}

.sidebar-category-header .sidebar-chevron {
    transition: transform 0.2s ease;
    transform: rotate(-90deg);
}

.sidebar-category-header[aria-expanded="true"] .sidebar-chevron {
    transform: rotate(0deg);
}

/* Faster open/close than Bootstrap's default 0.35s */
.sidebar-category .collapsing {
    transition-duration: 0.15s;
}

.sidebar-indicators {
    background-color: rgba(0, 0, 0, 0.12);
}

.sidebar-indicator {
    padding-left: 1.75rem;
    font-size: 0.9rem;
    /* Long titles wrap onto several lines; keep the bullet on the first one
       instead of letting it drift to the middle of the item. */
    align-items: baseline;
}

.sidebar-indicator::before {
    content: "";
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 0.75rem;
    background-color: rgba(255, 255, 255, 0.75);
}

/* Sidebar quick-jump search input */
.sidebar-search {
    /* Equal breathing room above and below the input */
    padding: 0.85rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.sidebar-search-wrapper {
    position: relative;
}
.sidebar-search input {
    width: 100%;
    padding: 0.35rem 2rem 0.35rem 0.5rem;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: var(--font-family);
}
.sidebar-search input:focus {
    outline: 1px solid rgba(255, 255, 255, 0.5);
    outline-offset: -1px;
    border-color: rgba(255, 255, 255, 0.5);
}
.sidebar-search input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
.sidebar-search-clear {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0 0.2rem;
    font-size: 0.85rem;
    line-height: 1;
    display: none;
}
.sidebar-search-clear:hover {
    color: #fff;
}

/* Content area */
.content-area {
    padding: var(--content-padding);
    background-color: #fff;
    /* Flex items default to min-width: auto, which lets a wide child (a scoring
       table) stretch the main column past the viewport instead of scrolling
       inside its own container. */
    min-width: 0;
}

.content-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.content-header {
    margin-bottom: 1.5rem;
}

/* Sticky header on indicator pages */
.indicator-page .content-header {
    position: sticky;
    top: var(--header-height);
    z-index: 10;
    background-color: #fff;
    padding-top: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #d9d9d9;
}

/* Hub cards on the home page: small A4 previews of the protocol cover,
   reusing the sidebar header's title/image treatment */
.hub-card {
    display: flex;
    flex-direction: column;
    width: 280px;
    aspect-ratio: 210 / 297;
    background: var(--brand-primary);
    color: #fff;
    text-decoration: none;
    padding: 1.5rem 1rem 0.75rem;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    transition: background-color 0.15s ease, transform 0.15s ease,
        box-shadow 0.15s ease;
}

.hub-card:hover {
    background: #0c6289;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
}

.hub-card:hover .protocol-cover-image {
    filter: brightness(1.12);
}

.hub-card .protocol-cover-title {
    font-size: 1.1rem;
}

/* Fill the card's remaining height so the cover reads as a full page */
.hub-card .protocol-cover-image {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    margin-bottom: -0.75rem;
}

/* Category cards */
.category-card {
    transition: border-color 0.15s ease;
}

.category-card:hover {
    border-color: var(--bs-primary) !important;
}

/* Indicator list */
.indicators-list .list-group-item {
    border-left-width: 3px;
    transition: border-left-color 0.15s ease;
}

.indicators-list .list-group-item:hover {
    border-left-color: var(--bs-primary);
}

/* Markdown content styling */
.markdown-content {
    line-height: 1.5;
    /* Long URLs in references have no natural break points; break them
       rather than overflowing the column */
    overflow-wrap: break-word;
}

.bibliography {
    overflow-wrap: break-word;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    font-family: var(--font-family);
    font-weight: 700;
    line-height: 1.15;
}

/* Body headings sit *below* the page title (h1.h2, 2rem) in the hierarchy, so
   they get an explicit descending scale — Bootstrap's defaults would render a
   markdown h2 at the same 2rem as the page title above it. */
.markdown-content h1 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-size: 1.7rem;
    color: var(--brand-primary);
}

.markdown-content h2 {
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    font-size: 1.5rem;
}

.markdown-content h3 {
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    font-size: 1.2rem;
}

.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    font-size: 1.05rem;
}

.markdown-content h1:first-child,
.markdown-content h2:first-child,
.markdown-content h3:first-child {
    margin-top: 0;
}

/* Reduce vertical space when headings follow each other */
.markdown-content h1 + h2,
.markdown-content h2 + h3,
.markdown-content h3 + h4 {
    margin-top: 0.5em;
}

.markdown-content p {
    margin-bottom: 1em;
}

.markdown-content ul,
.markdown-content ol {
    margin-bottom: 1em;
    padding-left: 2em;
    line-height: 1.5;
}

.markdown-content li {
    margin-bottom: 0.25em;
}

.markdown-content li > ul,
.markdown-content li > ol {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Key evidence table column widths */
.key-evidence .markdown-content table th:first-child,
.key-evidence .markdown-content table td:first-child {
    width: 20%;
}
.key-evidence .markdown-content table th:nth-child(2),
.key-evidence .markdown-content table td:nth-child(2) {
    width: 40%;
}
.key-evidence .markdown-content table th:nth-child(3),
.key-evidence .markdown-content table td:nth-child(3) {
    width: 40%;
}

/* Every markdown table sits in its own scroller (see _wrap_tables_for_scrolling)
   so a wide table scrolls on its own instead of widening the page. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1em;
}

.markdown-content table {
    width: 100%;
    margin-bottom: 1em;
    border-collapse: collapse;
}

.table-scroll > table {
    margin-bottom: 0;
}

.markdown-content th,
.markdown-content td {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    vertical-align: top;
}

.markdown-content th {
    background-color: var(--brand-primary);
    color: #ffffff;
    font-weight: 700;
}

/* Scoring table: keep Level narrow, other columns equal width */
.markdown-content table.scoring-level-table {
    table-layout: fixed;
}

.markdown-content table.scoring-level-table th:first-child,
.markdown-content table.scoring-level-table td:first-child {
    width: 12%;
}

.markdown-content table.scoring-level-table th:not(:first-child),
.markdown-content table.scoring-level-table td:not(:first-child) {
    width: 29.33%;
}

/* Evidence quality cell colors */
.markdown-content td.evidence-high {
    background-color: #b6d7a8;
}
.markdown-content td.evidence-moderate {
    background-color: #ffe599;
}
.markdown-content td.evidence-low {
    background-color: #f9cb9c;
}
.markdown-content td.evidence-very-low {
    background-color: #ea9999;
}

.markdown-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

.markdown-content blockquote {
    padding: 0.5rem 1rem;
    margin: 1em 0;
    border-left: 4px solid var(--brand-primary);
    background-color: var(--background-light);
}

.markdown-content code {
    padding: 0.125rem 0.25rem;
    background-color: var(--background-light);
    border-radius: 0.25rem;
    font-size: 0.9em;
}

.markdown-content pre {
    padding: 1rem;
    background-color: var(--background-light);
    border: 1px solid var(--text-secondary);
    border-radius: 0.375rem;
    overflow-x: auto;
}

.markdown-content pre code {
    padding: 0;
    background-color: transparent;
}

/* Page titles are bold on every protocol page (Bootstrap's .h2 would reset them to 500) */
.content-header h1 {
    font-weight: 700;
}

/* Section headings shared across protocol pages (Contents, Scoring notes, ...) */
.section-heading {
    margin-bottom: 1rem;
    font-size: 1.15rem;
    font-weight: 700;
}

/* Protocol metadata block (overview page) */
.protocol-metadata {
    padding: 1.25rem 0;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
}

.metadata-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1.5rem;
    margin-bottom: 0;
}

.metadata-grid .metadata-item-wide {
    grid-column: 1 / -1;
}

.metadata-grid dt {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.1rem;
}

.metadata-grid dd {
    margin-bottom: 0;
    font-size: 0.95rem;
}

@media (max-width: 575.98px) {
    .metadata-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Contents navigation (overview page) */
.contents-chevron {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
    transform: rotate(-90deg);
}

.contents-card-toggle[aria-expanded="true"] .contents-chevron {
    transform: rotate(0deg);
}

/* Faster open/close than Bootstrap's default 0.35s */
.contents-card .collapsing {
    transition-duration: 0.15s;
}

.contents-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.85rem;
}

.contents-list a {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.25rem 0.35rem 1.5rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.contents-list a::before {
    content: "";
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 0.75rem;
    background-color: var(--brand-primary);
}

.contents-list a:hover {
    background-color: rgba(0, 0, 0, 0.03);
    color: var(--brand-primary);
}

/* Category cards (overview page): context full-width and collapsible,
   indicator categories side by side and always expanded */
.contents-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.contents-card {
    padding: 1rem 1.25rem;
    background-color: var(--background-light);
}

.contents-card-full {
    grid-column: 1 / -1;
    transition: background-color 0.15s ease;
}

.contents-card-full:has(.contents-card-toggle:hover) {
    background-color: #ebebeb;
}

.contents-card-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--font-family);
}

.contents-card-toggle .contents-card-title {
    flex-grow: 1;
    margin-right: 0.75rem;
}

.contents-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.contents-card .contents-list {
    padding: 0.5rem 0 0;
}

/* Negative margins let the hover box breathe past the dot without shifting text */
.contents-card .contents-list a {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

@media (max-width: 991.98px) {
    .contents-cards {
        grid-template-columns: 1fr;
    }
}

/* Type explanation alert */
.type-explanation {
    background-color: #f8f9fa;
}

/* Protocol application: boxed to stand out as the key practical section */
.protocol-application {
    padding: 1.25rem 1.5rem;
    background-color: var(--background-light);
    /* Same border as the scoring tables (score-cards.css) */
    border: 1px solid #767676;
}

.protocol-application .markdown-content > :last-child {
    margin-bottom: 0;
}

/* Mobile responsiveness */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        left: -100%;
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        height: calc(100dvh - var(--header-height));
        z-index: 1040;
        transition: left 0.3s ease;
    }

    .sidebar.show {
        left: 0;
    }

    /* Backdrop behind the open drawer (created by initSidebarToggle in main.js) */
    .sidebar-overlay {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1039;
        display: none;
        /* Dragging on the dimmed page must not scroll it */
        touch-action: none;
    }

    /* Freeze the page scroller while the drawer is open. Scoped to mobile so
       resizing to desktop with the drawer stuck open can't trap the page.
       html only: overflow on body would make body itself a scroll container,
       and the sticky site header would stick to body's (scrolled-away) top
       instead of the viewport. */
    html.sidebar-open {
        overflow: hidden;
    }

    .content-area {
        padding: 1rem;
    }
}

/* Narrow screens: fitting a table to the viewport would crush its columns to a
   few characters each, so give the cells a floor and let .table-scroll scroll. */
@media (max-width: 767.98px) {
    .markdown-content th,
    .markdown-content td {
        min-width: 12rem;
    }

    /* Source is just an author and year — it needs less room than the prose columns */
    .key-evidence .markdown-content th:first-child,
    .key-evidence .markdown-content td:first-child {
        min-width: 7rem;
    }

    /* Fixed layout ignores per-cell min-width, so size the table instead */
    .markdown-content table.scoring-level-table {
        min-width: 40rem;
    }
}

@media (max-width: 575.98px) {
    :root {
        --content-padding: 1rem;
    }

    .content-header h1 {
        font-size: 1.5rem;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Always show the page scrollbar, even when the page is too short to scroll,
   so the layout doesn't shift between pages. overflow-y: scroll reserves the
   gutter; the ::-webkit-scrollbar styling is what forces macOS out of
   auto-hiding overlay scrollbars into a permanently visible one. Scoped to
   the root scroller only — the sidebar must stay unstyled (see .sidebar).
   Uses ::-webkit-scrollbar rather than the inheriting scrollbar-color
   property, which would leak onto the sidebar and every inner scroller. */
html {
    overflow-y: scroll;
}

html::-webkit-scrollbar {
    width: 12px;
}

html::-webkit-scrollbar-track {
    background: #f1f3f4;
}

html::-webkit-scrollbar-thumb {
    background: #b8bfc4;
    border-radius: 6px;
    /* Inset the thumb from the track edges */
    border: 2px solid #f1f3f4;
}

html::-webkit-scrollbar-thumb:hover {
    background: #99a1a7;
}

/* Focus styles for accessibility (keyboard only — no outline on mouse click) */
.sidebar-link:focus-visible,
.btn:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* On the dark sidebar, a brand-blue outline would be invisible */
.sidebar a:focus-visible,
.sidebar button:focus-visible {
    outline-color: #fff;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--bs-primary);
    color: white;
    padding: 8px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* Footnotes (citations/references) */
.footnote-ref {
    font-size: 0.75em;
    vertical-align: super;
    line-height: 0;
    text-decoration: none;
}

.markdown-content .footnote-ref:hover {
    text-decoration: underline;
}

/* Score card images - ensure consistent sizing */
.score-image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.score-image-item img {
    width: 350px;
    height: 350px;
    object-fit: cover;
    margin-bottom: 0.5rem;
}

/* Footnotes section at bottom of each page */
.markdown-content .footnote {
    border-top: 1px solid var(--border-color);
    margin-top: 2rem;
    padding-top: 1rem;
    font-size: 0.9em;
}

.markdown-content .footnote hr {
    display: none;
}

.markdown-content .footnote ol {
    padding-left: 1.5em;
    margin-bottom: 0;
}

.markdown-content .footnote li {
    margin-bottom: 0.5em;
    line-height: 1.4;
}

.markdown-content .footnote p {
    margin-bottom: 0.25em;
}

/* Backref link in footnotes */
.markdown-content .footnote-backref {
    font-size: 0.8em;
    margin-left: 0.25em;
    text-decoration: none;
}