/* transparent header */
.site-header {
  position: fixed;
  /* top: 0; */
  left: 0;
  right: 0;
  z-index: 12;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* White text and logo for readability over hero image */
.site-header.transparent-header {
  background: transparent;
}

/* match your current DOM: .menu-container + <a> links */
.site-header.transparent-header .menu-container a,
.site-header.transparent-header .logo img {
  color: var(--color-white);
  filter: brightness(0) invert(1); /* Makes logo white */
}

/* Solid header state - after scrolling */
.site-header.solid-header {
  background: var(--color-white);
}

.site-header.solid-header .menu-container a,
.site-header.solid-header .logo img {
  color: var(--color-black);
  filter: none; /* Restores original logo colors */
}

/* ---------
HERO
---------- */
/* Hero image that transforms up and fades out */
#p-hero {
  position: relative;
  height: 95vh;
}

#p-hero img {
  width: 100%;
  height: 100vh; /* fill the hero vertically */
  display: block;
  object-fit: cover; /* keep aspect ratio, crop instead of stretch */
  object-position: center center; /* keep the right side visible, crop left */
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
  opacity: 1;
  z-index: 9;
}

/* Hero title that stays in place but changes color */
#p-hero h1 {
  position: absolute;
  bottom: 0rem;
  left: var(--gap-x);
  margin: 0;
  color: var(--color-white);
  transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 11;
}

#p-hero h1 .con-status {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

h2 {
  left: var(--gap-x);
  color: transparent;
  transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 11;
}

/* When scrolled, title changes to black */
.scrolled #p-hero h1,
.scrolled h2 {
  color: var(--color-black);
}

.scrolled #p-hero h1 .con-status {
  opacity: 1;
}

/* When scrolled, image moves up and fades */
.scrolled #p-hero img {
  transform: translateY(-50%);
  opacity: 0;
}

/* DESCRIPTION */
/* LOCAL NAMES: 2-column text grid */
.local-names {
  row-gap: 0.25rem;
  margin-top: 0rem; /* previously inherited too much margin */
  line-height: 0.8em;
}

/* Reduce excessive spacing between paragraphs */
#description p {
  margin-block: 0.75rem; /* instead of browser default ~1.2em */
}

/* Fix spacing between big categories */
#description .grid.two > div > * + .section-label {
  margin-top: 2rem; /* consistent section rhythm */
}

/* Right column placeholder box */
.species-media-placeholder {
  border: 1px solid var(--color-black);
  aspect-ratio: 3 / 6; /* or 3/2, tune as you like */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

/** POPULATION DIRECTION **/
.trend-line {
  display: flex;
  align-items: center;
  justify-content: center; /* centre within the line */
}

/* The icon wrapper */
.trend-icon {
  display: inline-flex;
  align-items: center;
}

.trend-icon svg {
  height: 0.5em; /* relative to font size */
  width: auto; /* keep proportions */
  display: block;
}
.trend-increasing svg {
  transform: rotate(-70deg);
}
.trend-decreasing svg {
  transform: rotate(50deg);
}
.trend-stable svg {
  transform: rotate(0deg) scale(0.8);
}
.trend-unknown svg {
  opacity: 0.5;
}

/* =========================
   MOBILE ADAPTATION
   ========================= */
@media (max-width: 600px) {
  /* Header: always solid on mobile so we don't fight with the hero */

  /* Hero: simple full-width image, no parallax/fade */
  #p-hero {
    height: auto;
  }

  #p-hero img {
    height: auto;
    max-height: none;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Title below image, in normal flow */
  #p-hero h1 {
    font-size: 24px;
    position: static;
    margin: 0 var(--gap-x) 0;
    color: var(--color-black);
  }

  #p-hero h1 .con-status {
    font-size: 24px;
    position: static;
    color: var(--color-black);
  }

  /* Names (h2) fully visible, normal flow */
  #description h2 {
    position: static;
    left: auto;
    color: var(--color-black);
  }

  /* Grid -> single column: right column (map) goes below bio_line block */
  #description .grid.two {
    display: block;
  }

  #description .grid.two > div {
    width: 100%;
  }

  .species-media {
    margin-top: 1rem;
  }
}