/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #2c3e50;
    background-color: #f8f9fa;
    position: relative;
    z-index: 1;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Responsive images site-wide. Root cause of figures overflowing to the
   right on mobile: most <img> tags on content pages set an inline
   max-width in px (e.g. "max-width: 800px") meant for desktop, with no
   fallback for viewports narrower than that — on a phone the image just
   renders at its intrinsic pixel width past the edge of the screen. A
   max-width here is a hard clamp: it wins over any wider inline width/
   max-width already on the element (browsers resolve the final width by
   computing 'width' first, then clamping to 'max-width' — image-specific
   inline styles keep working on wide screens, this only kicks in once the
   viewport is narrower than what they specify), so it's safe to apply
   unconditionally rather than hunting down every page's inline styles.
   Icons/badges (SVG nav icons, shields.io badges) are unaffected — they're
   either <svg> or already small enough that 100% of their container never
   binds. */
img {
    max-width: 100%;
    height: auto;
}

/* Top nav: slim, persistent site-wide navigation (every page except the map,
   which is a full-screen app with its own topbar). Separate from the hero
   CTA cards on the landing page — this is for wayfinding once you're
   already browsing, not the primary call to action.
   Default variant: solid, for pages with no big banner (hub pages).
   .topnav--overlay variant: transparent, laid over the hero banner (index). */
.topnav {
    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;
    position: relative;
    z-index: 20;
}

.topnav--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    border-bottom: none;
}

.topnav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 20px;
    gap: 20px;
}

.topnav-logo {
    justify-self: start;
    font-weight: 600;
    font-size: 1.05rem;
    color: #2c3e50;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.topnav--overlay .topnav-logo {
    color: #ffffff;
}

.topnav-links {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

/* Forces a line break inside .topnav-links right before the Docs dropdown,
   so Docs & Publications land together on their own row on mobile instead
   of wherever natural flex-wrap happens to fold — see the mobile-nav rule
   below. Invisible/inert on desktop, where the nav never wraps. */
.topnav-break {
    display: none;
}

.topnav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
    text-decoration: none;
    transition: color 0.2s ease;
}

.topnav-link:hover,
.topnav-link.is-active {
    color: #2c3e50;
}

.topnav-link--muted {
    color: #868e96;
    font-weight: 400;
}

.topnav--overlay .topnav-link {
    color: rgba(255, 255, 255, 0.85);
}

.topnav--overlay .topnav-link:hover {
    color: #ffffff;
}

.topnav--overlay .topnav-link--muted {
    color: rgba(255, 255, 255, 0.55);
}

.topnav-icon {
    display: inline-flex;
    color: #495057;
    background: none;
    border: none;
    cursor: pointer;
}

.topnav-icon:hover {
    color: #2c3e50;
}

.topnav-icon svg {
    width: 20px;
    height: 20px;
}

.topnav-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 6px;
    padding-left: 18px;
    border-left: 1px solid #e9ecef;
}

.topnav--overlay .topnav-right {
    border-left-color: rgba(255, 255, 255, 0.28);
}

/* Cite badge: small pill button, opens the citation modal */
.cite-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid #ced4da;
    border-radius: 999px;
    padding: 5px 12px 5px 10px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cite-badge:hover {
    color: #2c3e50;
    border-color: #34495e;
}

.cite-badge .cite-mark {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    line-height: 1;
    transform: translateY(-1px);
}

.topnav--overlay .cite-badge {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.4);
}

.topnav--overlay .cite-badge:hover {
    color: #ffffff;
    border-color: #ffffff;
}

/* GitHub repo badge: icon + live star/fork counts (populated by script.js) */
.topnav-repo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #495057;
    text-decoration: none;
}

.topnav-repo:hover {
    color: #2c3e50;
}

.topnav--overlay .topnav-repo {
    color: rgba(255, 255, 255, 0.85);
}

.topnav--overlay .topnav-repo:hover {
    color: #ffffff;
}

.topnav-repo .topnav-icon-svg {
    width: 20px;
    height: 20px;
}

.repo-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 500;
}

.repo-stat svg {
    width: 13px;
    height: 13px;
}

/* Landing page only: header + footer together fill exactly one viewport
   (no scroll needed on a normal browser window) — the header no longer
   forces its own 100vh, it just grows to fill whatever space the footer
   doesn't need, and its content stays vertically centered within that. */
body.landing-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.landing-page .header {
    min-height: 0;
    flex: 1 0 auto;
}

body.landing-page .footer {
    flex-shrink: 0;
}

/* Header / hero: the entire landing is meant to fit without scrolling —
   name, byline, description and the core CTA all live in this one block,
   overlaid on the banner image. The top nav is absolutely positioned inside
   it (transparent, see .topnav--overlay), not a separate white bar. */
.header {
    position: relative;
    color: white;
    padding: 100px 0 60px 0;
    text-align: center;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Compact header: same banner treatment as the landing hero, but short —
   used by hub and sub-pages (title + one-liner), not a full-viewport hero. */
.header--compact {
    min-height: auto;
    padding: 90px 0 50px 0;
}

.header--compact .title {
    font-size: 2.4rem;
}

.header--compact .subtitle {
    font-size: 1.1rem;
    margin-bottom: 0;
}

.header-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/banner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.header-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(44, 62, 80, 0.8);
    z-index: 2;
}

.header .container {
    position: relative;
    z-index: 3;
}

.title {
    font-size: 3.5rem;
    font-weight: 300;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.subtitle {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* Landing hero tagline, linked to the About page: looks like plain text,
   with just enough affordance (a soft underline) to read as clickable. */
body.landing-page .subtitle a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    transition: border-color 0.2s ease;
}

body.landing-page .subtitle a:hover,
body.landing-page .subtitle a:focus-visible {
    border-bottom-color: rgba(255, 255, 255, 0.75);
}

/* Homepage hero stat strip — sells the scale of the dataset in one glance
   (visitors currently see the pitch but no numbers until they click
   through) without turning the hero into a dashboard: a single muted line
   between the subtitle and the Data/Software/Contribute cards. */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 34px 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.72);
}

.hero-stats strong {
    color: #ffffff;
    font-weight: 600;
}

.hero-stats .hero-stat-sep {
    color: rgba(255, 255, 255, 0.32);
}

/* Small text link under the stat strip pointing to the Use Cases page —
   it was findable only from the nav before, with no mention in the hero
   itself. */
.hero-explore {
    margin: 0 0 34px 0;
    font-size: 0.92rem;
}

.hero-explore a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.hero-explore a:hover,
.hero-explore a:focus-visible {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.85);
}

/* Small region label under a département's name, replacing the old
   full-size subtitle — same slot, much lighter weight. */
.title-region {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
    margin-bottom: 0;
}

/* Compact "back to home" link shown above the page title on every
   inner page. Icon-first so it stays unobtrusive next to the title. */
.back-home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    margin-bottom: 14px;
    transition: color 0.2s ease;
}

.back-home:hover,
.back-home:focus-visible {
    color: #ffffff;
}

.back-home svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Small secondary "About" pointer in the landing footer, alongside the
   contact icons and copyright line. */
.footer-about-link {
    font-size: 0.85rem;
}

.authors {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.authors a {
    color: white;
    text-decoration: none;
    font-weight: 500;
}

.authors a:hover {
    text-decoration: underline;
}

.affiliations {
    font-size: 1rem;
    margin-bottom: 40px;
    opacity: 0.8;
}

.links {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #34495e;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #34495e;
}

.btn:hover {
    background-color: #2c3e50;
    transform: translateY(-1px);
    border-color: #2c3e50;
}

/* Dropdown styles */
.dropdown {
    position: relative;
    display: inline-block;
    z-index: 99999;
}

.dropdown-btn {
    cursor: pointer;
}

.dropdown-content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background-color: white;
    backdrop-filter: blur(8px);
    min-width: 350px;
    border-radius: 8px;
    z-index: 999999;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    margin-top: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-item {
    display: block;
    padding: 18px 20px;
    text-decoration: none;
    color: #2c3e50;
    transition: all 0.2s ease;
    border-radius: 6px;
    margin: 6px;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    transform: translateY(-1px);
    text-decoration: none;
}

/* Header quick-links: small pills sitting on a dark compact-header banner,
   jumping to a category further down the page (or, for items that map to a
   single external resource, linking straight out to it). A quick-link can
   optionally be a .dropdown trigger when it fans out to more than one
   resource (e.g. several packages) — too many items for a flat pill row,
   but too few to deserve their own page. */
.quick-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.quick-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 500;
    color: white;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    padding: 7px 16px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.quick-link:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.45);
}

.quick-links .dropdown-content {
    top: 100%;
    margin-top: 10px;
    min-width: 260px;
}

.quick-links .dropdown-item {
    padding: 12px 16px;
    margin: 4px;
    font-size: 0.88rem;
}

.dropdown-item .dropdown-item-sub {
    display: block;
    font-size: 0.74rem;
    color: #868e96;
    margin-top: 2px;
}

/* Top nav "Resources" dropdown: same trigger styling as a flat .topnav-link
   (including the active-page color rules), just with a caret and a
   hover-revealed menu of the 3 self-contained research pages. */
.topnav-link.dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.pub-title {
    display: block;
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 6px;
    color: #2c3e50;
}

.pub-authors {
    display: block;
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 4px;
}

.pub-year {
    display: block;
    font-size: 0.75rem;
    color: #868e96;
    font-weight: 500;
}

/* Sections */
section {
    padding: 80px 0;
}

section:nth-child(even) {
    background-color: white;
}

h2 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 30px;
    color: #2c3e50;
    text-align: center;
}

/* Abstract */
.abstract p {
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
}

/* Teaser */
.teaser {
    text-align: center;
}

.teaser-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.caption {
    font-size: 1rem;
    color: #6c757d;
    font-style: italic;
    max-width: 600px;
    margin: 0 auto;
}

/* Method */
.method-content {
    max-width: 900px;
    margin: 0 auto;
}

.method-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.method-text ol {
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 20px 0;
    padding-left: 30px;
}

.method-text li {
    margin-bottom: 10px;
}

/* Results */
.results p {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
}

/* Long-form section numbering (Pipeline, OpenPVMapper, Registry Audit, ...) */
.section-number {
    display: inline-block;
    color: #6c757d;
    font-weight: 400;
    margin-right: 10px;
}

h3.subsection {
    font-size: 1.4rem;
    font-weight: 300;
    color: #2c3e50;
    margin: 40px 0 16px 0;
    text-align: left;
}

h3.subsection .section-number {
    font-size: 1.2rem;
}

/* Side-by-side figures / placeholders (Pipeline, Registry Audit, ...) */
.side-by-side {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 30px 0;
}

.side-by-side figure,
.side-by-side .placeholder-box {
    flex: 1;
    min-width: 280px;
    max-width: 480px;
    text-align: center;
    margin: 0;
}

@media (max-width: 360px) {
    /* The 280px floor above sits right at the edge of the narrowest real
       phones once container padding is subtracted — drop it here instead
       of letting two figures fight for space side by side. */
    .side-by-side figure,
    .side-by-side .placeholder-box {
        min-width: 100%;
    }
}

/* Figures that still overflow on mobile past a certain width: several
   <img> tags carry an inline "max-width: 700/750/800px" (sized for
   desktop reading width) — sometimes paired with an inline width:100%,
   sometimes not. Inline style attributes always win over any rule in this
   stylesheet for the same property, no matter its specificity, so the
   global `img { max-width: 100% }` above and `.teaser-image` are both
   silently overridden by that inline px cap on any image that doesn't
   also carry an inline width:100%. Below this breakpoint, force every
   image back down to its container's width with !important — the only
   thing that can out-rank an inline style — which is safe because no
   image is meant to overflow a phone screen. */
@media (max-width: 600px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Back to top: injected by script.js on the long-form, text-heavy pages
   (see the has-back-to-top check there), hidden by default and faded/
   slid in past a scroll threshold rather than shown on every short page. */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #34495e;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(44, 62, 80, 0.28);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
    z-index: 500;
}

.back-to-top:hover {
    background-color: #2c3e50;
}

.back-to-top svg {
    width: 20px;
    height: 20px;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 480px) {
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
    }
}

/* Platform badges (Zenodo / Hugging Face / GitHub, ...) */
.badge-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 14px 0 0 0;
}

.badge-row img {
    height: 20px;
    display: block;
}

/* Publication / resource list rows (Publications, Resources) */
.pub-list {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    gap: 4px;
}

.pub-item {
    display: block;
    padding: 16px 20px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.pub-item:hover {
    background-color: #f8f9fa;
}

.pub-item .pub-title {
    display: block;
    font-size: 0.98rem;
    color: #2c3e50;
    line-height: 1.5;
    margin-bottom: 4px;
}

.pub-item.no-link .pub-title {
    color: #495057;
}

.pub-item .pub-authors {
    display: block;
    font-size: 0.84rem;
    color: #6c757d;
    margin-bottom: 2px;
}

.pub-item .pub-year {
    display: block;
    font-size: 0.78rem;
    color: #adb5bd;
}

/* Citation */
.citation-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 30px;
    max-width: 800px;
    margin: 0 auto;
}

.citation-box pre {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #2c3e50;
}

/* References */
.reference-list {
    max-width: 800px;
    margin: 0 auto;
}

.reference-list p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: left;
}

/* Validation Stats */
.validation-stats {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.validation-stats .stat-item {
    text-align: center;
    flex: 1;
    min-width: 150px;
}

.validation-stats .stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 300;
    color: #34495e;
    margin-bottom: 0.5rem;
}

.validation-stats .stat-label {
    font-size: 1rem;
    color: #6c757d;
    font-weight: 500;
}

/* Icon link (GitHub, LinkedIn, ...) inline with nav/author links */
.icon-link {
    display: inline-flex;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.icon-link:hover {
    opacity: 1;
}

/* Hero CTA: the 3 core-pillar cards overlaid on the banner image (icon +
   title + one-line description) — the landing's one and only call to
   action, no separate section below. "Glass" style so the banner still
   reads through, same spirit as the map's dark glass UI. */
.hero-cta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 260px));
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
}

.hero-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-decoration: none;
    color: white;
    transition: all 0.25s ease;
}

.hero-card:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.hero-card-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-card-icon svg {
    width: 100%;
    height: 100%;
}

.hero-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 3px;
}

.hero-card p {
    font-size: 0.8rem;
    line-height: 1.4;
    opacity: 0.8;
}

/* Modal overlay (citation popover, and reused by the map's intro popup pattern) */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 25, 35, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-box {
    background: white;
    border-radius: 10px;
    padding: 30px;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    color: #2c3e50;
    text-align: left;
}

.modal-box h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 16px;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: #868e96;
    cursor: pointer;
    padding: 4px;
}

.modal-close:hover {
    color: #2c3e50;
}

/* Hub pages: intro block under the header (used by data/software/contribute/results hubs) */
.hub-intro p {
    font-size: 1.1rem;
    line-height: 1.75;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    color: #495057;
}

/* Cards grid used inside hub pages (fewer / wider cards than .pillars-grid) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.hub-card {
    background-color: white;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 30px;
}

.hub-card h3 {
    font-size: 1.15rem;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 10px;
}

.hub-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6c757d;
    margin-bottom: 16px;
}

/* Whole-card links: some .hub-card tiles are entirely clickable <a>
   elements (badge + title + description + a CTA that's just styled text,
   not a separate nested link) rather than a div with a button inside. */
a.hub-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.hub-card:hover {
    transform: translateY(-3px);
    border-color: #34495e;
    box-shadow: 0 12px 28px rgba(44, 62, 80, 0.1);
}

.hub-card-badge {
    height: 20px;
    margin-bottom: 14px;
}

/* "Ask for a specific city" note — under a département page's city
   ranking, for a commune that isn't listed (either it hasn't crossed the
   minimum detection count yet, or wasn't among the largest communes
   checked for this département). Links out to a prefilled GitHub issue on
   the same public tracker used by known-issues.html/contribute.html —
   a demand signal, not an instant request. */
.city-request-note {
    max-width: 560px;
    margin: 18px auto 0;
    text-align: center;
    font-size: 0.85rem;
    color: #6c757d;
}

.city-request-note a {
    color: #34495e;
    font-weight: 600;
}

/* "Report an issue" CTA — département/city (and région) pages. A single
   textarea + button that hands off to a mailto: link client-side (see
   static/js/script.js) rather than a database insert, since these are
   static pages with no backend wiring of their own. */
.report-issue-card {
    max-width: 560px;
    margin: 40px auto 0;
    text-align: center;
    background-color: white;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 26px 30px;
}

.report-issue-card h3 {
    font-size: 1.05rem;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 6px;
}

.report-issue-card p {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #6c757d;
    margin-bottom: 14px;
}

.report-issue-card textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 64px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    color: #2c3e50;
    margin-bottom: 14px;
}

.report-issue-card textarea:focus {
    outline: none;
    border-color: #34495e;
}

/* Hero byline: de-emphasized author/affiliation credit, secondary to the
   name + description + CTA hierarchy of the hero. */
.hero-byline {
    font-size: 0.95rem;
    opacity: 0.75;
    margin-top: 6px;
}

.hero-byline a {
    color: white;
    text-decoration: none;
    font-weight: 500;
}

.hero-byline a:hover {
    text-decoration: underline;
}

/* Research note: the secondary "content" band (academic results, publications,
   press, citation) — deliberately quieter than the core Data/Software/
   Contribute pillars above, per the core-vs-content split of the site. */
.research-note {
    background-color: #eef1f4;
    padding: 60px 0;
}

.research-note .container {
    max-width: 820px;
}

.eyebrow {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #868e96;
    margin-bottom: 10px;
}

.research-note h2 {
    font-size: 1.9rem;
    margin-bottom: 18px;
}

.mini-stats {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.92rem;
    color: #495057;
    margin: 22px 0 26px 0;
    text-align: center;
}

.mini-stats strong {
    color: #2c3e50;
}

.mini-stats .sep {
    opacity: 0.4;
}

.text-link {
    display: block;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: #34495e;
    text-decoration: none;
}

.text-link:hover {
    color: #2c3e50;
    text-decoration: underline;
}

.research-note .citation-box {
    margin-top: 34px;
}

/* Browse-by-département grid (Data hub): grouped by région, plain crawlable
   links — deliberately static HTML (baked in at build time), not JS-rendered,
   so search engines can index every département page. */
.dept-grid {
    margin-top: 20px;
}

.dept-region {
    margin-bottom: 34px;
}

.dept-region h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 14px;
}

.dept-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dept-link {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 6px 12px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 999px;
    font-size: 0.85rem;
    color: #495057;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dept-link:hover {
    background-color: #34495e;
    border-color: #34495e;
    color: white;
}

.dept-link .dept-link-code {
    font-size: 0.72rem;
    opacity: 0.65;
}

/* Placeholder box: used for not-yet-built content (e.g. Contribute's
   upcoming Challenges) so it reads as "coming soon", not a dead end. */
.placeholder-box {
    border: 1px dashed #ced4da;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    color: #adb5bd;
    font-style: italic;
    margin: 20px 0;
}

/* Contribute page: task lists grouped under sub-headings, and numbered
   how-to steps. Reuses the site's existing prose/list conventions. */
.task-group {
    margin-bottom: 26px;
}

.task-group h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}

.task-group ul {
    padding-left: 22px;
}

.task-group li {
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 8px;
    color: #495057;
}

.task-group li strong {
    color: #2c3e50;
}

.steps-list {
    counter-reset: step;
    list-style: none;
    padding-left: 0;
    max-width: 780px;
    margin: 0 auto;
}

.steps-list li {
    counter-increment: step;
    position: relative;
    padding-left: 42px;
    margin-bottom: 18px;
    font-size: 1rem;
    line-height: 1.7;
    color: #495057;
}

.steps-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #34495e;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contribute-way {
    max-width: 780px;
    margin: 0 auto 60px auto;
}

.contribute-way h3 {
    font-size: 1.4rem;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 16px;
}

.contribute-way p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #495057;
    margin-bottom: 16px;
}

.contribute-way code {
    background-color: #f1f3f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'Courier New', monospace;
}

/* Footer */
.footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px 0;
}

.footer .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer p {
    margin: 0;
}

.footer a {
    color: #bdc3c7;
    text-decoration: none;
}

.footer a:hover {
    color: #ecf0f1;
    text-decoration: underline;
}

/* Footer contact row: mail + LinkedIn icon links, sitting on the same
   line as the copyright/license text. */
.footer-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
}

.footer-contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #bdc3c7;
    transition: all 0.2s ease;
}

.footer-contact a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
}

.footer-contact svg {
    width: 14px;
    height: 14px;
}

/* Responsive design */
@media (max-width: 768px) {
    .title {
        font-size: 2.5rem;
    }
    
    .subtitle {
        font-size: 1.2rem;
    }
    
    .links {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 200px;
        text-align: center;
    }
    
    .dropdown-content {
        min-width: 280px;
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
    }
    
    .dropdown:hover .dropdown-content {
        transform: translateX(-50%) translateY(0);
    }
    
    .pub-title {
        font-size: 0.85rem;
    }
    
    .pub-authors {
        font-size: 0.75rem;
    }
    
    .pub-year {
        font-size: 0.7rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .abstract p,
    .method-text p,
    .results p {
        font-size: 1rem;
    }
    
    section {
        padding: 60px 0;
    }
    
    .header {
        padding: 220px 0 60px 0;
        min-height: auto;
    }

    .topnav--overlay {
        position: absolute;
    }

    .hero-cta {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .topnav-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    /* About/Data/Software/Contribute/Use Cases wrap onto their own line(s)
       naturally; .topnav-break then forces Docs & Publications — the two
       dropdowns — onto a fresh row together, rather than leaving it to
       chance where flex-wrap happens to fold given the viewport width. */
    .topnav-links {
        justify-self: auto;
        justify-content: center;
        gap: 18px;
        flex-wrap: wrap;
        width: 100%;
    }

    .topnav-break {
        display: block;
        flex-basis: 100%;
        height: 0;
    }

    .topnav-right {
        justify-content: center;
        padding-left: 0;
        border-left: none;
        padding-top: 10px;
        border-top: 1px solid #e9ecef;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .title {
        font-size: 2rem;
    }
    
    .subtitle {
        font-size: 1rem;
    }
    
    .container {
        padding: 0 15px;
    }
    
    .citation-box {
        padding: 20px;
    }
    
    .citation-box pre {
        font-size: 0.8rem;
    }
}