/* @import url("observablehq:default.css"); */
/* @import url("observablehq:theme-air.css"); */

html {
    font-size: clamp(14px, 1.5vw, 17px);
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.2;
    color: black;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

h1 {
    font-size: 2.412rem;
    /* 41px */
    font-weight: normal;
    margin-top: 4.706rem;
    /* 80px */
}

/* Screen-reader-only utility class */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyvisual h1 on home page: reset heading styles so it renders like a plain image paragraph */
h1#keyvisual-heading {
    font-size: inherit;
    font-weight: inherit;
    margin-top: 0;
    line-height: 0;
}

h2 {
    font-size: 1.824rem;
    /* 31px */
    font-weight: normal;
    margin-top: 4.706rem;
    /* 80px */
}

h3 {
    font-size: 1.353rem;
    /* 23px */
    font-weight: normal;
    margin-top: 4.706rem;
    /* 80px */
    color: black;
}

.lead p {
    font-size: 1.235rem;
    /* 21px */
    font-weight: bold;
}

.leadhome p {
    font-size: 1.235rem;
    /* 21px */
    font-weight: normal;
}

.download-buttons {
    display: inline-flex !important;
    gap: 10px !important;
    font-size: 0.706rem !important;
    /* 12px at base 17px */
}

.download-buttons > form {
    margin: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    font-size: 0.706rem !important;
    /* 12px at base 17px — overrides inputs.css 13px */
}

.download-buttons button {
    padding: 0.25rem;
    cursor: pointer;
}

/* Horizontal top navigation bar — two-row layout */
#observablehq-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    bottom: auto !important;
    overflow: visible !important;
    visibility: initial !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
    border-left: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* All ol rows: full width, content centered */
#observablehq-sidebar > ol {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    background-color: var(--theme-background);
    border-bottom: none !important;
    position: relative !important;
    top: unset !important;
}

#observablehq-sidebar > ol::before {
    display: none !important;
}

/* Row 1: DIZH logo as left-aligned background, subtitle text centered */
#observablehq-sidebar > ol:first-child {
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 1rem !important;
    border-bottom: solid 1px black !important;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJFYmVuZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MTUuMjcgMTU1LjA2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bGltZTt9LmNscy0ye2ZpbGw6Ymx1ZTt9LmNscy0ze2ZpbGw6cmVkO308L3N0eWxlPjwvZGVmcz48cG9seWdvbiBwb2ludHM9IjE3NS44IDAgMTc1LjggMTU0Ljk2IDE1NS4xOCAxNTQuOTYgMTU1LjE4IDAgMTc1LjggMCAxNzUuOCAwIi8+PHBvbHlnb24gcG9pbnRzPSIzNzIuNjIgMCAzNzIuNjIgNjYuNjMgNDU0LjIyIDY2LjYzIDQ1NC4yMiAwIDQ3NC44NCAwIDQ3NC44NCAxNTQuOTYgNDU0LjIyIDE1NC45NiA0NTQuMjIgODMuOTkgMzcyLjYyIDgzLjk5IDM3Mi42MiAxNTQuOTYgMzUyIDE1NC45NiAzNTIgMCAzNzIuNjIgMCAzNzIuNjIgMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSI3MTkuMDQgMTM4LjA2IDcxOS4wNCAxMTMuNzUgNzQzLjM0IDExMy43NSA3NDMuMzQgMTM4LjA2IDcxOS4wNCAxMzguMDYgNzE5LjA0IDEzOC4wNiIvPjxwb2x5Z29uIHBvaW50cz0iNzQzLjI5IDExMy43MyA3NDMuMjkgODkuNDIgNzY3LjYgODkuNDIgNzY3LjYgMTEzLjczIDc0My4yOSAxMTMuNzMgNzQzLjI5IDExMy43MyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI3OTAuOTcgNjUuMTEgNzkwLjk3IDQwLjggODE1LjI3IDQwLjggODE1LjI3IDY1LjExIDc5MC45NyA2NS4xMSA3OTAuOTcgNjUuMTEiLz48cGF0aCBkPSJNMjI2LjYxLDEzNy43di0yMy40N2gyNC40MnYtMjQuNDhoLTI0LjQ4djI0LjQ4aC0yMy40OXY0MC44M2gxMjMuMjd2LTE3LjM2aC05OS43MlpNMjUxLjAzLDY1LjI4djI0LjQ4aDI0LjQ4di0yNC40OGgtMjQuNDhaTTI3NS41MSw0MC44djI0LjQ4aDI0LjQ4di0yNC40OGgtMjQuNDhaTTI5OS45OCwxNy4zNnYyMy40NGgyMy41NVYwaC0xMTMuMjl2MTcuMzZoODkuNzRaIi8+PHBvbHlnb24gY2xhc3M9ImNscy0zIiBwb2ludHM9IjU5Ny4wNSAyNC4zMSA1OTcuMDUgNDguNjIgNjIxLjM2IDQ4LjYyIDYyMS4zNiAyNC4zMSA1OTcuMDUgMjQuMzEgNTk3LjA1IDI0LjMxIi8+PHBhdGggZD0iTTEyOS42NSwxMDYuMzZ2LTU3Ljg2aC0yNC4zMXY1Ny44NmgyNC4zMVpNODEuMjksNDguNTFoMjQuMDV2LTI0LjI1aC0yNC4wM1YwSDB2MTU0Ljk2aDgxLjMxdi0yNC4yOWgyNC4wM3YtMjQuMjVoLTI0LjAzdjI0LjIzSDIwLjYyVjI0LjMxaC0uMDN2LS4wNWg2MC43djI0LjI1aDBaIi8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: 32px center;
    background-size: auto 1.4rem;
}

/* Replace "DIZH Data Stories" with subtitle */
#observablehq-sidebar > ol:first-child > li > a {
    font-size: 0 !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: black;
    text-decoration: none;
}

#observablehq-sidebar > ol:first-child > li > a::after {
    content: "Data Stories";
    white-space: pre;
    text-align: center;
    font-size: 1.5rem;
    font-weight: normal;
}

#observablehq-main {
    max-width: 960px;
    margin: 0 auto !important;
}

.observablehq-link-active::before {
    display: none !important;
}

/* Row 2+: hidden — shown via MENU overlay instead */
#observablehq-sidebar > ol:not(:first-child),
#observablehq-sidebar > details,
#observablehq-sidebar > section {
    display: none !important;
}

#observablehq-sidebar > ol li,
#observablehq-sidebar > section li {
    display: inline-flex;
}

/* ── MENU pill button (injected into row 1 by utils.js) ── */
#nav-menu-btn {
    position: absolute;
    right: 32px;
    background: black;
    color: white;
    border: 1px solid black;
    border-radius: 9999px;
    padding: 0.4rem 1.2rem;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}

#nav-menu-btn:hover {
    background: white;
    color: black;
}

/* ── Fullscreen nav overlay ── */
#nav-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

#nav-menu-overlay.open {
    display: flex;
}

#nav-menu-close {
    position: absolute;
    top: 1.25rem;
    right: 1.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: black;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#nav-menu-close:hover {
    opacity: 0.6;
}

#nav-menu-overlay > ol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav-menu-overlay li {
    display: block;
}

#nav-menu-overlay .observablehq-link a {
    display: block;
    background: none;
    color: black !important;
    border: none;
    padding: 0.55rem 1rem;
    white-space: nowrap;
    text-decoration: none;
    font-size: 2rem;
    height: auto !important;
    text-align: center;
}

#nav-menu-overlay .observablehq-link a:hover {
    text-decoration: underline;
}

#nav-menu-overlay .observablehq-link-active a {
    font-weight: normal;
}

#observablehq-sidebar-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
}

#observablehq-sidebar-close,
#observablehq-header {
    display: none !important;
}

/* Push content below the two-row nav bar, reset horizontal insets (sidebar is now top nav) */
#observablehq-center {
    padding-top: var(--nav-height, 10rem) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    --observablehq-inset-left: 0 !important;
    --observablehq-inset-right: 0 !important;
}

#observablehq-footer {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 3rem;
    margin-bottom: 0;
    color: black;
    background-color: #f0f0f0;
    box-sizing: border-box;
    font-size: 0.824rem;
    /* 14px at base 17px */
}

#observablehq-footer > div {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 0 2.5rem 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

/* Center D3 SVGs (all have role="img") */
svg[role="img"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Plot captions and axis labels: 12px */
figcaption,
figure > svg text {
    font-size: 0.706rem;
    /* 12px at base 17px */
}

/* Add breathing room between figures and their captions */
figure > figcaption,
.observablehq--block + .observablehq--block figcaption {
    margin-top: 0.75rem;
}

/* Remove per-element max-width — let #observablehq-main control width instead */
p,
table,
figure,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
ol,
ul {
    max-width: none;
}

#observablehq-main a,
#observablehq-footer a {
    color: black;
    text-decoration: underline;
}

#observablehq-main h1 a,
#observablehq-main h2 a,
#observablehq-main h3 a,
#observablehq-main h4 a,
#observablehq-main h5 a,
#observablehq-main h6 a {
    text-decoration: none;
    color: inherit;
}

.card {
    border: none;
}

/* h3 inside cards: override theme's muted color, use same size as h2 inside cards */
.card h3 {
    color: black;
    font-weight: 500;
    font-size: 15px;
}

/* Discipline bar legend: add row spacing (Observable Plot's wrap legend has no row-gap by default) */
.discipline-bar-swatches-wrap {
    row-gap: 4px;
}

/* Faster tooltip display - reduce delay from default 500ms to 100ms */
:root {
    --tip-delay: 50ms;
}

/* Apply faster delay to all SVG title elements (native tooltips) */
svg title {
    pointer-events: none;
}

/* ── High contrast mode for users who need it ── */
@media (prefers-contrast: more) {
    /* Increase text contrast */
    body {
        color: #000000;
        background-color: #ffffff;
    }

    /* Footer: white bg, black top border (matches nav bar look) */
    #observablehq-footer {
        color: #000000;
        background-color: #ffffff;
        border-top: 1px solid #000000;
    }

    /* Cards: black outline, white background */
    .card {
        border: 1px solid #000000;
        background-color: #ffffff;
    }

    /* Download buttons: white background, keep existing round corners */
    .download-buttons button {
        background-color: #ffffff;
        border: 1px solid #000000;
        border-radius: inherit;
    }

    /* Links more visible */
    #observablehq-main a,
    #observablehq-footer a {
        color: #0000ee !important;
        text-decoration: underline;
    }

    /* Form controls more visible */
    #nav-menu-btn {
        border-width: 2px;
    }

    /* Sidebar navigation items */
    #observablehq-sidebar > ol:first-child > li > a {
        color: #000000;
    }
}

/* ── Mobile: prevent menu items from overflowing narrow screens ── */
@media (max-width: 680px) {
    #nav-menu-overlay .observablehq-link a {
        white-space: normal;
        font-size: 1.2rem;
    }

    /* Reduce logo size slightly (75% of 1.4rem) */
    #observablehq-sidebar > ol:first-child {
        background-size: auto 1.1rem;
    }

    /* Close button half size */
    #nav-menu-close svg {
        width: 48px;
        height: 48px;
    }
}

/* Fix for label inside ol (Framework-generated invalid HTML) */
#observablehq-sidebar-close {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

#observablehq-sidebar-close::before {
    content: "✕";
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
}

#observablehq-sidebar-close:hover {
    background-color: rgba(0, 0, 0, 0.1);
}