/* Hide default header on homepage only */
/* Fix map being behind menu */
#map {
    position: relative;
    z-index: 1;
}

.md-header,
.md-sidebar {
    z-index: 100;
}

.md-content__inner > article > h1:first-child {
    display: none;
}

/* Hero section with map background */
.hero-section {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 60vh;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -24px;
}

/* Remove the gray overlay box - just text now */
.hero-overlay {
    text-align: center;
    color: white;
    max-width: 800px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.hero-title {
    font-size: 3em;
    font-weight: bold;
    margin: 0 0 0.3em 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-subtitle {
    font-size: 1.5em;
    margin: 0;
    font-weight: 300;
}

/* Footer with logos */
.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
    padding: 2em 0;
    flex-wrap: wrap;
}

.footer-logos img {
    height: 40px;
    width: auto;
}

/* --- Header logo sizing (Material for MkDocs) --- */

/* Remove extra spacing around the logo button */
.md-header__button.md-logo {
  margin: 0;
  padding: 0;
}

/* Scale the logo image/SVG while keeping aspect ratio */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 4.0rem; /* tweak between ~2.4–3.2rem as you like */
  width: auto;
}

/* Optional: slightly increase header height to avoid clipping at larger sizes */
.md-header {
  min-height: 4.2rem;
}

/* Mobile: reduce a bit so it doesn't crowd the title */
@media (max-width: 599px) {
  .md-header__button.md-logo img,
  .md-header__button.md-logo svg {
    height: 2.2rem;
  }
}

/* --- Header site name (next to logo) --- */
/* Load a custom font (example: Inter). Replace with your preferred font or remove if not needed. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@600;700&display=swap");

/* Desktop sizing */
@media (min-width: 60em) {
  .md-header__title .md-ellipsis {
    font-size: 1.6rem;          /* increase size */
    line-height: 1.5;
    font-weight: 400;           /* bolder */
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; /* change style */
    letter-spacing: 0.2px;
  }
}


@media (max-width: 60em) {
  .md-header__title {
    display: flex;
    align-items: center;
  }

  .md-header__title .md-ellipsis {
    font-size: 0.9rem;
    font-weight: 400;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: inline-flex;
    align-items: center;
    height: 2.2rem; /* passt zur mobilen Logo-Höhe */
    line-height: 1;
  }
}

/* Optional: slightly loosen truncation so longer names show more before ellipsis */
.md-header__title {
  max-width: 60vw; /* tweak or remove if it causes wrapping */
}

/* --- Vertically center logo + site name in header --- */

/* Ensure the header row centers its children (logo, title, actions) */
.md-header__inner {
  align-items: center; /* Material already uses flex; this enforces vertical centering */
}

/* Make the title itself a flex box so the text centers on its own line-height */
.md-header__title {
  display: flex;
  align-items: center;
}

/* Tighten the title’s line box so it aligns visually with the logo */
.md-header__title .md-ellipsis {
  line-height: 1.5;
}

/* Make sure the logo aligns to the middle too */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  vertical-align: middle;
}

/* Make auto-generated DOI citations wrap nicely */
a.doi-citation { white-space: normal; }

/* Reserve space above headings when scrolled into view */
:root { --pgn-header-offset: 100px; }  /* fallback; updated dynamically by JS below */

.md-typeset h1[id],
.md-typeset h2[id],
.md-typeset h3[id],
.md-typeset h4[id],
.md-typeset h5[id],
.md-typeset h6[id] {
  scroll-margin-top: var(--pgn-header-offset, 100px);
}

/* Always reserve space for the vertical scrollbar to avoid width shifts */
html { scrollbar-gutter: stable both-edges; }