/*
 * Jacupemba light visual system.
 * Typography, content, navigation and actions remain unchanged; this layer
 * only revises colour, contrast, spacing and photographic presentation.
 */

:root {
  --jacupemba-ink: #18372b;
  --jacupemba-body: #43524a;
  --jacupemba-green: #145b3d;
  --jacupemba-green-strong: #0d4b31;
  --jacupemba-leaf: #2f775f;
  --jacupemba-mint: #edf6f0;
  --jacupemba-mint-soft: #f5faf6;
  --jacupemba-cream: #fbfaf6;
  --jacupemba-line: #dce8df;
  --jacupemba-white: #ffffff;
  --jacupemba-coral: #d65f43;
}

/* About: connect the sanctuary's origin story directly to its namesake bird. */
.about-origin {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.55fr);
  grid-template-areas:
    "title media"
    "copy media";
  column-gap: clamp(2.25rem, 5vw, 4.75rem);
  align-items: start;
  margin-bottom: clamp(2.75rem, 6vw, 5rem);
}

.about-origin-title {
  grid-area: title;
  margin-top: 0 !important;
}

.about-origin-copy {
  grid-area: copy;
  min-width: 0;
}

.about-origin-media {
  grid-area: media;
  margin: 2.75rem 0 0;
  align-self: start;
  border: 1px solid var(--jacupemba-line);
  background: var(--jacupemba-mint-soft);
  box-shadow: 0 18px 44px rgba(24, 55, 43, 0.13);
  overflow: hidden;
}

.about-origin-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  margin: 0 !important;
}

/* Animals: photographs taken at the sanctuary, followed by a compact wildlife
   directory that remains easy to scan at both desktop and mobile widths. */
.wildlife-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(13rem, 22vw, 20rem);
  gap: clamp(0.65rem, 1.4vw, 1rem);
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.wildlife-gallery figure {
  position: relative;
  grid-column: span 3;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #dbe8de;
}

.wildlife-gallery figure:nth-child(1) {
  grid-column: span 5;
}

.wildlife-gallery figure:nth-child(2) {
  grid-column: span 7;
}

.wildlife-gallery figure:nth-child(3),
.wildlife-gallery figure:nth-child(4),
.wildlife-gallery figure:nth-child(5) {
  grid-column: span 4;
}

.wildlife-gallery figure:nth-child(6),
.wildlife-gallery figure:nth-child(7),
.wildlife-gallery figure:nth-child(8) {
  grid-column: span 4;
}

.wildlife-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: cover;
  transition: transform 450ms ease;
}

.wildlife-gallery figure:nth-child(1) img {
  object-position: center top;
}

.wildlife-gallery figure:nth-child(2) img {
  object-position: center 48%;
}

.wildlife-gallery figure:nth-child(4) img {
  object-position: center 62%;
}

.wildlife-gallery figure:nth-child(6) img {
  object-position: center 46%;
}

.wildlife-gallery figure:hover img {
  transform: scale(1.025);
}

.wildlife-gallery figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2.6rem 1rem 0.8rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(transparent, rgba(8, 31, 20, 0.82));
}

.wildlife-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  margin: 0;
  list-style: none;
  background: var(--jacupemba-line);
  border: 1px solid var(--jacupemba-line);
}

.wildlife-directory li {
  min-width: 0;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: rgba(255, 255, 255, 0.94);
}

.wildlife-directory h3 {
  margin: 0 0 0.45rem;
  color: var(--jacupemba-ink);
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
}

.wildlife-directory p {
  margin: 0;
  color: #5b6a62;
  font-size: 0.92rem;
  line-height: 1.6;
}

@media (max-width: 47.99rem) {
  .about-origin {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "media"
      "copy";
    row-gap: 0;
    margin-bottom: 2.75rem;
  }

  .about-origin-media {
    width: min(100%, 28rem);
    margin: 0.4rem auto 1.75rem;
  }

  .wildlife-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(11rem, 52vw, 15rem);
    gap: 0.55rem;
  }

  .wildlife-gallery figure,
  .wildlife-gallery figure:nth-child(1),
  .wildlife-gallery figure:nth-child(2),
  .wildlife-gallery figure:nth-child(3),
  .wildlife-gallery figure:nth-child(4),
  .wildlife-gallery figure:nth-child(5),
  .wildlife-gallery figure:nth-child(6),
  .wildlife-gallery figure:nth-child(7),
  .wildlife-gallery figure:nth-child(8) {
    grid-column: span 1;
  }

  .wildlife-gallery figure:nth-child(1),
  .wildlife-gallery figure:nth-child(2) {
    grid-column: 1 / -1;
  }

  .wildlife-gallery figcaption {
    padding: 2rem 0.75rem 0.65rem;
    font-size: 0.68rem;
  }

  .wildlife-directory {
    grid-template-columns: minmax(0, 1fr);
  }
}

body {
  background: var(--jacupemba-white);
  color: var(--jacupemba-body);
}

.bg-sand,
.bg-sand\/30,
.bg-sand\/40 {
  background-color: var(--jacupemba-mint-soft) !important;
}

.text-forest {
  color: var(--jacupemba-ink) !important;
}

.text-leaf {
  color: var(--jacupemba-leaf) !important;
}

.text-terracotta {
  color: var(--jacupemba-coral) !important;
}

.bg-leaf {
  background-color: var(--jacupemba-leaf) !important;
}

.bg-forest {
  background-color: var(--jacupemba-green) !important;
}

/* White navigation bar: the rainforest now belongs to the photography, not chrome. */
header[data-astro-cid-sckkx6r4] {
  background: rgba(255, 255, 255, 0.97) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--jacupemba-line) !important;
  box-shadow: 0 3px 18px rgba(24, 55, 43, 0.07) !important;
}

header[data-astro-cid-sckkx6r4] .header-brand-logo,
header[data-astro-cid-sckkx6r4] nav > a > .header-brand-logo {
  width: 3rem !important;
  height: 3rem !important;
  background: transparent !important;
  box-shadow: none !important;
}

header[data-astro-cid-sckkx6r4] .header-brand-logo img {
  width: 3rem;
  height: 3rem;
}

.header-brand-logo img,
.footer-brand-logo img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(18%) saturate(1320%)
    hue-rotate(103deg) brightness(87%) contrast(91%);
}

header[data-astro-cid-sckkx6r4] nav > a > span,
header[data-astro-cid-sckkx6r4] nav > ul > li > a,
.header-name-lockup {
  color: var(--jacupemba-ink) !important;
  text-shadow: none !important;
}

.header-name-lockup .site-name-kicker {
  color: var(--jacupemba-ink) !important;
}

header[data-astro-cid-sckkx6r4] nav > ul > li > a:hover {
  color: var(--jacupemba-green) !important;
}

.header-language-switcher {
  border-color: var(--jacupemba-line) !important;
  background: var(--jacupemba-mint-soft) !important;
}

#menu-toggle {
  border-color: #cbdcd1 !important;
  background: var(--jacupemba-white) !important;
  box-shadow: none !important;
}

header[data-astro-cid-sckkx6r4] #menu-toggle > span {
  background-color: var(--jacupemba-green) !important;
  box-shadow: none !important;
}

header[data-astro-cid-sckkx6r4] .flag-btn:focus-visible,
.desktop-nav-group > a:focus-visible {
  outline-color: var(--jacupemba-leaf) !important;
}

/* Light mobile navigation with the same clear hierarchy as desktop. */
@media (max-width: 63.99rem) {
  #mobile-menu {
    background:
      radial-gradient(circle at 90% 0%, rgba(47, 119, 95, 0.12), transparent 32%),
      var(--jacupemba-white) !important;
    color: var(--jacupemba-ink) !important;
  }

  #menu-close {
    border-color: var(--jacupemba-line) !important;
    background: var(--jacupemba-mint-soft) !important;
    color: var(--jacupemba-ink) !important;
  }

  #mobile-menu > a,
  #mobile-menu .mobile-nav-group {
    border-color: var(--jacupemba-line) !important;
  }

  #mobile-menu > a,
  #mobile-menu > a:first-of-type,
  #mobile-menu .mobile-nav-trigger {
    color: var(--jacupemba-ink) !important;
  }

  #mobile-menu .mobile-nav-trigger > span[aria-hidden="true"] {
    color: var(--jacupemba-leaf) !important;
  }

  #mobile-menu .mobile-submenu a {
    border-left-color: #b8d7c4 !important;
    color: #4f6258 !important;
  }

  #menu-toggle:focus-visible,
  #menu-close:focus-visible,
  #mobile-menu a:focus-visible,
  #mobile-menu button:focus-visible {
    outline-color: var(--jacupemba-leaf) !important;
  }
}

/* Internal page introductions become open, calm and bright. */
main > section:first-child.bg-forest:not(.home-hero) {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 87% 18%, rgba(47, 119, 95, 0.12), transparent 28%),
    linear-gradient(135deg, var(--jacupemba-white) 0%, var(--jacupemba-mint) 100%) !important;
  color: var(--jacupemba-body) !important;
  border-bottom: 1px solid var(--jacupemba-line);
}

main > section:first-child.bg-forest:not(.home-hero) h1,
main > section:first-child.bg-forest:not(.home-hero) h2,
main > section:first-child.bg-forest:not(.home-hero) h3,
main > section:first-child.bg-forest:not(.home-hero) .text-white {
  color: var(--jacupemba-ink) !important;
}

main > section:first-child.bg-forest:not(.home-hero) .text-white\/60,
main > section:first-child.bg-forest:not(.home-hero) .text-white\/70,
main > section:first-child.bg-forest:not(.home-hero) .text-white\/80 {
  color: #5a6a61 !important;
}

/* Dark in-page bands are converted to pale botanical panels. */
main > section.bg-forest.text-white:not(:first-child) {
  background: var(--jacupemba-mint) !important;
  color: var(--jacupemba-body) !important;
  border-block: 1px solid var(--jacupemba-line);
}

main > section.bg-forest.text-white:not(:first-child) h2,
main > section.bg-forest.text-white:not(:first-child) h3,
main > section.bg-forest.text-white:not(:first-child) h4,
main > section.bg-forest.text-white:not(:first-child) p,
main > section.bg-forest.text-white:not(:first-child) .text-white,
main > section.bg-forest.text-white:not(:first-child) .text-white\/60,
main > section.bg-forest.text-white:not(:first-child) .text-white\/70,
main > section.bg-forest.text-white:not(:first-child) .text-white\/80 {
  color: var(--jacupemba-ink) !important;
}

main > section.bg-forest.text-white:not(:first-child) article,
main > section.bg-forest.text-white:not(:first-child) .bg-white\/10 {
  border-color: var(--jacupemba-line) !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

main > section.bg-forest.text-white:not(:first-child) a.bg-terracotta,
main > section.bg-forest.text-white:not(:first-child) a.bg-leaf,
main > section.bg-forest.text-white:not(:first-child) button.bg-terracotta,
main > section.bg-forest.text-white:not(:first-child) button.bg-leaf {
  color: #fff !important;
}

/* Homepage: a genuine sanctuary view followed by an editorial white story panel. */
.home-hero {
  display: block !important;
  min-height: 0 !important;
  padding-top: 0;
  background-color: var(--jacupemba-mint) !important;
  background-image: none !important;
}

.home-hero-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--jacupemba-mint);
}

.home-hero-visual::after {
  display: none;
}

.home-hero-media {
  display: block;
  width: 100%;
  line-height: 0;
  background: var(--jacupemba-mint);
}

.home-hero-media img {
  display: block;
  width: min(100%, 2048px);
  height: auto;
  margin-inline: auto;
}

.home-hero-media__overlay {
  position: absolute;
  right: 50%;
  bottom: 0;
  z-index: 2;
  display: flex;
  width: min(100%, 1200px);
  padding: clamp(2rem, 5vw, 4.5rem) 1.5rem;
  align-items: flex-end;
  transform: translateX(50%);
  pointer-events: none;
}

@media (min-width: 48rem) {
  .home-hero-visual {
    width: min(calc(100% - 3rem), 1200px);
    margin: 0 auto;
    border-radius: 0;
  }
}

.home-hero > .absolute,
.home-hero > .absolute.right-0 {
  display: none !important;
}

.home-hero > .content-width {
  width: 100%;
  max-width: none;
  padding: clamp(2.25rem, 4vw, 3.5rem) max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem));
  background: var(--jacupemba-white);
  border-top: 1px solid rgba(24, 55, 43, 0.08);
}

.home-hero > .content-width > .max-w-3xl {
  max-width: 58rem;
}

.home-hero [data-i18n="home_four_tagline"] {
  color: var(--jacupemba-leaf) !important;
}

.home-hero-title,
.home-hero .text-white {
  color: var(--jacupemba-ink) !important;
}

.home-hero-title {
  max-width: 16ch;
  font-size: clamp(2.75rem, 5.6vw, 5.2rem) !important;
  line-height: 0.98 !important;
}

.home-hero .home-hero-media__overlay .home-hero-title {
  max-width: 15ch;
  margin: 0 !important;
  color: #fff !important;
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.home-hero .text-white\/70 {
  max-width: 48rem !important;
  color: #56665d !important;
}

.home-hero a.bg-white\/10 {
  border-color: var(--jacupemba-green) !important;
  background: var(--jacupemba-green) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.home-hero a.bg-white\/10:hover {
  background: var(--jacupemba-green-strong) !important;
}

/* A mobile-safe sticky photograph sits behind the homepage overview while the
   content moves over it. It releases when this section ends. */
.home-scroll-stage {
  overflow: clip;
  background: transparent !important;
  clip-path: inset(0);
}

.home-scroll-stage__media {
  position: fixed;
  top: 5rem;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: block !important;
  height: auto;
  margin-bottom: 0;
  overflow: hidden;
  background: #315238;
}

.home-scroll-stage .home-sanctuary-bg__layer {
  inset: 0;
  background-image: url('/images/homepage-orchid-sticky-20260820-mobile.webp') !important;
  background-position: 50% 48%;
  background-size: cover;
  animation: none !important;
  transform: none !important;
  will-change: auto;
}

.home-scroll-stage__shade {
  display: none;
}

.home-scroll-stage__media::after,
.home-background-slice__media::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block !important;
  background-color: rgba(255, 255, 255, 0.22) !important;
  content: "";
  opacity: 1 !important;
  pointer-events: none;
}

.home-scroll-stage__content {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: calc(135svh - 5rem);
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(5rem, 12vh, 8rem);
}

.home-scroll-intro {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-color: rgba(220, 232, 223, 0.95) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 34px rgba(12, 47, 31, 0.13) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.home-scroll-stage__content > .grid > a,
.home-pillars-grid > a {
  border-color: var(--jacupemba-line) !important;
  box-shadow: 0 10px 30px rgba(24, 55, 43, 0.07) !important;
}

.home-pillars-grid > a:hover {
  box-shadow: 0 16px 38px rgba(24, 55, 43, 0.11) !important;
}

.home-research-note {
  color: #42564b !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: #cfe1d5 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.home-scroll-split__frame,
article:has([data-i18n^="ecology_"]),
article:has([data-i18n^="retreat_"]),
article:has([data-i18n^="wildlife_"]),
.animal-residents-panel,
.retreat-stay-panel {
  border-color: var(--jacupemba-line) !important;
  box-shadow: 0 12px 32px rgba(24, 55, 43, 0.07) !important;
}

/* A narrow second window onto the same fixed orchid photograph introduces the
   Reach section without adding content or another image crop. */
.home-background-slice {
  position: relative;
  height: clamp(11rem, 24vw, 18rem);
  overflow: clip;
  isolation: isolate;
  border-block: 1px solid rgba(220, 232, 223, 0.8);
  clip-path: inset(0);
}

.home-background-slice__media {
  position: fixed;
  top: 5rem;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  background: #315238;
}

.home-background-slice__image {
  position: absolute;
  inset: 0;
  background-image: url('/images/homepage-orchid-sticky-20260820-mobile.webp');
  background-position: 50% 48%;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (min-width: 48rem) {
  .home-scroll-stage .home-sanctuary-bg__layer,
  .home-background-slice__image {
    background-image: url('/images/homepage-orchid-sticky-20260820-desktop.webp') !important;
  }
}

/* A light footer closes the page without returning it to gloom. */
footer[data-astro-cid-sckkx6r4] {
  background: var(--jacupemba-cream) !important;
  color: var(--jacupemba-ink) !important;
  border-top: 1px solid var(--jacupemba-line);
}

footer[data-astro-cid-sckkx6r4] .footer-name-lockup,
footer[data-astro-cid-sckkx6r4] h4,
footer[data-astro-cid-sckkx6r4] a,
footer[data-astro-cid-sckkx6r4] .text-white,
footer[data-astro-cid-sckkx6r4] .text-white\/60,
footer[data-astro-cid-sckkx6r4] .text-white\/40 {
  color: var(--jacupemba-ink) !important;
}

footer[data-astro-cid-sckkx6r4] .footer-name-lockup .site-name-kicker,
footer[data-astro-cid-sckkx6r4] .text-leaf {
  color: var(--jacupemba-leaf) !important;
}

footer[data-astro-cid-sckkx6r4] p,
footer[data-astro-cid-sckkx6r4] li a {
  color: #5c6b63 !important;
}

footer[data-astro-cid-sckkx6r4] .border-white\/10 {
  border-color: var(--jacupemba-line) !important;
}

@media (max-width: 47.99rem) {
  .home-scroll-stage__media,
  .home-background-slice__media {
    top: 5rem;
    bottom: auto;
    height: calc(100vh - 5rem);
    height: calc(100lvh - 5rem);
    contain: paint;
  }

  .home-hero-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .home-hero-media__overlay {
    padding: 1.5rem;
  }

  .home-hero .home-hero-media__overlay .home-hero-title {
    max-width: 13ch;
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    line-height: 0.96 !important;
  }

  .home-hero > .content-width {
    padding-block: 2.75rem 3.5rem;
  }

  .home-hero-title {
    max-width: 11ch;
    font-size: clamp(2.75rem, 13vw, 4.35rem) !important;
    line-height: 0.98 !important;
  }

  .home-scroll-stage__content {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  .home-background-slice {
    height: clamp(10rem, 45vw, 14rem);
  }

  .home-scroll-stage__media::after,
  .home-background-slice__media::after {
    background-color: rgba(255, 255, 255, 0.24) !important;
  }

  .home-scroll-intro {
    padding: 1.5rem 1.25rem 1.75rem !important;
  }

  [data-i18n="pillars_tag"] {
    font-size: clamp(0.68rem, 3vw, 0.75rem) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.13em !important;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero,
  .home-pillars-grid > a {
    transition: none !important;
  }
}