/* SDHHTL Visual Motif System v1.1
   v0.4.5.1 visibility hotfix
   Decorative only: local SVG, pointer-events disabled.
   Motifs are deliberately visible, but remain below readable content. */

:root{
  --motif-leaf-opacity:.115;
  --motif-contour-opacity:.095;
  --motif-canopy-opacity:.135;
}

/* Establish local stacking context without hiding decoration behind section backgrounds. */
.motif-leaf,
.motif-contour,
.motif-canopy,
.motif-mixed{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

/* Direct container becomes the decoration canvas. */
.motif-leaf>.container,
.motif-contour>.container,
.motif-canopy>.container,
.motif-mixed>.container{
  position:relative;
  z-index:1;
  isolation:isolate;
}

/*
  IMPORTANT FIX:
  v1.0 used z-index:-1. That made the motif disappear behind several section
  backgrounds in real layouts. v1.1 keeps it at layer 0 and explicitly raises
  actual content to layer 1.
*/
.motif-leaf>.container::before,
.motif-contour>.container::before,
.motif-mixed>.container::before,
.motif-mixed>.container::after,
.motif-canopy>.container::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  background-repeat:no-repeat;
}

/* Keep real content above decorative artwork. */
.motif-leaf>.container>*,
.motif-contour>.container>*,
.motif-canopy>.container>*,
.motif-mixed>.container>*{
  position:relative;
  z-index:1;
}

/* LEAF — large botanical watermark, intentionally partly cropped. */
.motif-leaf>.container::before{
  width:min(52vw,700px);
  aspect-ratio:1;
  right:-7%;
  top:-22%;
  background-image:url('../images/motifs/leaf-vein.svg');
  background-size:contain;
  background-position:center;
  opacity:var(--motif-leaf-opacity);
}

.motif-leaf.motif-leaf-left>.container::before{
  right:auto;
  left:-9%;
  top:-4%;
  transform:rotate(20deg);
}

.motif-leaf.motif-leaf-bottom>.container::before{
  top:auto;
  bottom:-34%;
  transform:rotate(-15deg);
}

/* CONTOUR — wider map/science texture, more visible around whitespace. */
.motif-contour>.container::before{
  left:50%;
  top:-8%;
  width:100vw;
  height:116%;
  transform:translateX(-50%);
  background-image:url('../images/motifs/contour-lines.svg');
  background-size:min(1180px,96vw) auto;
  background-position:108% 48%;
  opacity:var(--motif-contour-opacity);
}

.motif-contour.motif-contour-left>.container::before{
  background-position:-12% 54%;
}

.motif-contour.motif-contour-center>.container::before{
  background-position:50% 50%;
  background-size:min(1320px,108vw) auto;
}

/* CANOPY — stronger forest silhouette across the lower section edge. */
.motif-canopy>.container::after{
  left:50%;
  bottom:-2px;
  width:100vw;
  height:min(340px,52%);
  transform:translateX(-50%);
  background-image:url('../images/motifs/canopy-trees.svg');
  background-size:cover;
  background-position:center bottom;
  opacity:var(--motif-canopy-opacity);
}

.motif-canopy.motif-canopy-top>.container::after{
  bottom:auto;
  top:-1px;
  transform:translateX(-50%) rotate(180deg);
}

/* MIXED — leaf + scientific contour, used on selected internal heroes. */
.motif-mixed>.container::before{
  width:min(48vw,620px);
  aspect-ratio:1;
  right:-6%;
  top:-22%;
  background-image:url('../images/motifs/leaf-vein.svg');
  background-size:contain;
  opacity:.105;
}

.motif-mixed>.container::after{
  left:50%;
  top:-5%;
  width:100vw;
  height:110%;
  transform:translateX(-50%);
  background-image:url('../images/motifs/contour-lines.svg');
  background-size:min(1120px,92vw) auto;
  background-position:-6% 56%;
  opacity:.070;
}

/* Facility feature has no direct .container. */
.facility-feature.motif-canopy::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:220px;
  pointer-events:none;
  z-index:1;
  background:url('../images/motifs/canopy-trees.svg') center bottom/cover no-repeat;
  opacity:.105;
}

.facility-feature.motif-canopy>.facility-image,
.facility-feature.motif-canopy>.facility-copy-wrap{
  position:relative;
  z-index:2;
}

/* Dark sections receive white botanical/scientific watermark. */
.motif-on-dark>.container::before,
.motif-on-dark>.container::after,
.facility-feature.motif-on-dark::after{
  filter:brightness(0) invert(1);
}

.motif-on-dark{
  --motif-leaf-opacity:.095;
  --motif-contour-opacity:.090;
  --motif-canopy-opacity:.115;
}

/* Specific page tuning. */
.hero.motif-canopy{
  --motif-canopy-opacity:.105;
}

.section-khdtk.motif-contour,
.section-khdtk-map.motif-contour{
  --motif-contour-opacity:.115;
}

.about-hero.motif-mixed,
.khdtk-hero.motif-canopy,
.service-hero.motif-mixed,
.explorer-hero.motif-mixed,
.map-intro.motif-mixed{
  --motif-leaf-opacity:.105;
  --motif-contour-opacity:.085;
}

#organization.motif-contour{
  --motif-contour-opacity:.070;
}

#request.motif-leaf{
  --motif-leaf-opacity:.085;
}

/* Keep functional/data surfaces solid and legible. */
.record-list,
.rate-table-wrap,
.map-workspace,
.organization-grid,
.service-rates-feature,
.request-card,
.research-card,
.species-card,
.metric-card{
  position:relative;
  z-index:2;
}

/* Stronger but still decorative botanical signature after eyebrow labels. */
.motif-heading-mark .eyebrow::after{
  content:"";
  display:inline-block;
  width:44px;
  height:18px;
  margin-left:11px;
  vertical-align:-5px;
  background:url('../images/motifs/leaf-vein.svg') center/44px 44px no-repeat;
  opacity:.52;
}

/* Give selected light sections a very soft environmental wash. */
.section-light.motif-leaf,
.section-light.motif-contour{
  background-color:#fafbf8;
}

.section-soft.motif-leaf,
.section-soft.motif-contour,
.section-soft.motif-mixed{
  background-color:#f2f5f0;
}

/* Responsive: visible, but calmer on smaller screens. */
@media (max-width:760px){
  :root{
    --motif-leaf-opacity:.085;
    --motif-contour-opacity:.075;
    --motif-canopy-opacity:.105;
  }

  .motif-leaf>.container::before,
  .motif-mixed>.container::before{
    width:82vw;
    right:-30%;
    top:-10%;
  }

  .motif-contour>.container::before,
  .motif-mixed>.container::after{
    background-size:1040px auto;
    background-position:54% 46%;
  }

  .motif-canopy>.container::after{
    height:210px;
    background-size:auto 210px;
  }

  .motif-heading-mark .eyebrow::after{
    width:34px;
    height:15px;
    background-size:36px 36px;
    opacity:.44;
  }
}

@media (max-width:520px){
  .motif-mixed>.container::after{
    display:none;
  }

  .motif-leaf>.container::before,
  .motif-mixed>.container::before{
    opacity:.070;
  }
}

/* User preference: reduced transparency => reduce visual intensity. */
@media (prefers-reduced-transparency: reduce){
  .motif-leaf>.container::before,
  .motif-contour>.container::before,
  .motif-mixed>.container::before,
  .motif-mixed>.container::after,
  .motif-canopy>.container::after{
    opacity:.055;
  }
}