/* mountain-skin.css — makes the content BELOW the hero on every sub-page
   show the homepage animated mountain background through translucent
   "glass" panels. Any element whose class contains "hero" is left untouched
   (hero text uses hero-* classes, so it is excluded automatically).
   Desktop only (≥768px); mobile keeps the original light design. */

@media (min-width: 768px) {

  /* Dark sky behind the fixed WebGL canvas (mountain-home.js sets the same). */
  html { background: #0f172a !important; }

  /* Body transparent so the z-index:-1 canvas shows through. */
  body { background: transparent !important; background-color: transparent !important; }

  /* ---- Glass panels --------------------------------------------------- */
  /* Content blocks (section pages AND div pages) become dark translucent
     glass so the animated mountain reads through. */
  section:not([class*="hero"]):not([class*="-bg"]),
  footer,
  [class*="-section"]:not([class*="hero"]):not([class*="label"]):not([class*="title"]):not([class*="sub"]):not([class*="eyebrow"]):not([class*="-bg"]),
  [class*="-page"]:not([class*="hero"]):not([class*="-bg"]),
  [class*="-band"]:not([class*="hero"]):not([class*="-bg"]),
  [class*="-block"]:not([class*="hero"]):not([class*="text"]):not([class*="-bg"]),
  [class*="-body"]:not([class*="hero"]):not([class*="text"]):not([class*="-bg"]) {
    background: rgba(8, 12, 22, 0.55) !important;
    background-image: none !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* ---- Cards / boxes / light call-outs -> their own glass islands ------ */
  /* Real photo layers (anything ending in -bg, plus the tour collage cards)
     are excluded so actual images never get replaced by a flat tint. */
  body :is(
    [class*="card"],[class*="-box"],[class*="-item"],[class*="tile"],[class*="panel"],
    [class*="callout"],[class*="note"],[class*="-info"],[class*="well"],[class*="alert"],
    [class*="result"],[class*="summary"],[class*="-field"],[class*="-row"],[class*="step"]
  ):not([class*="hero"]):not([class*="-bg"]):not(.fv-card) {
    background: rgba(15, 23, 42, 0.6) !important;
    background-image: none !important;
    border-color: rgba(201, 169, 110, 0.28) !important;
  }

  /* ---- Text legibility: force non-hero text to light -------------------
     Hero text carries hero-* classes, so :not([class*="hero"]) skips it. */
  body :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,label,small,strong,em,dt,dd,td,th,figcaption):not([class*="hero"]) {
    color: #f5f0eb !important;
  }

  /* Keep gold accents gold (defined after so it wins on equal specificity). */
  body :is([class*="eyebrow"],[class*="-label"],[class*="price"],[class*="tag"],[class*="badge"]):not([class*="hero"]) {
    color: #c9a96e !important;
  }

  /* Plain text links -> gold (leave buttons / CTAs / nav alone). */
  body a:not([class*="btn"]):not([class*="button"]):not([class*="cta"]):not([class*="enquire"]):not([class*="nav"]):not([class*="hero"]):not([class*="logo"]) {
    color: #c9a96e !important;
  }

  /* ---- Form fields stay usable: dark field, light text ---------------- */
  body :is(input,textarea,select):not([class*="hero"]) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f5f0eb !important;
    border-color: rgba(245, 240, 235, 0.3) !important;
  }
  body ::placeholder { color: rgba(245,240,235,0.55) !important; }

  /* ---- A11y: visible keyboard focus on the dark skin (WCAG 2.4.7) ------ */
  body a:focus-visible,
  body button:focus-visible,
  body :is(input,textarea,select):focus-visible {
    outline: 2px solid #c9a96e !important;
    outline-offset: 2px !important;
    border-radius: 3px;
  }

  /* ---- Subtle, smooth motion on interactive glass elements ------------- */
  body :is(
    [class*="card"],[class*="-box"],[class*="tile"],[class*="panel"]
  ):not([class*="hero"]) {
    transition: transform .35s cubic-bezier(.22,.61,.36,1),
                box-shadow .35s ease,
                border-color .35s ease;
  }
  body :is(
    [class*="card"],[class*="-box"],[class*="tile"],[class*="panel"]
  ):not([class*="hero"]):hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
    border-color: rgba(201,169,110,.5) !important;
  }
  body a:not([class*="btn"]):not([class*="nav"]):not([class*="hero"]),
  body :is(button,[class*="btn"]):not([class*="hero"]) {
    transition: color .25s ease, background-color .25s ease,
                transform .25s ease, opacity .25s ease;
  }
}

/* Honour reduced-motion globally: no hover lifts, no transitions. */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  body * { transition: none !important; animation: none !important; }
  body :is([class*="card"],[class*="-box"],[class*="tile"],[class*="panel"]):hover {
    transform: none !important;
  }
}