/* mountain-skin.css — lets the homepage animated mountain show through the
   content on every sub-page. Content sits CLEANLY over the mountain: light,
   legible text with a soft shadow — NO dark boxes / outlines behind labels,
   rows, cards, etc. (those looked like ugly rectangles).
   Real photo layers (anything ending in -bg, plus .fv-card) are never touched.
   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; }

  /* ---- Content sections: ONE soft dark glass backing ------------------ */
  /* Each big section gets a single translucent dark tint so the mountain
     still reads faintly behind it AND text stays legible. This is the only
     panel — inner cards/labels/rows are transparent (no nested boxes). */
  section:not([class*="hero"]):not([class*="-bg"]),
  footer,
  [class*="-section"]:not([class*="hero"]):not([class*="-bg"]):not([class*="-header"]):not([class*="-inner"]):not([class*="-content"]),
  [class*="-page"]:not([class*="hero"]):not([class*="-bg"]),
  [class*="-band"]:not([class*="hero"]):not([class*="-bg"]) {
    background: rgba(10, 14, 24, 0.62) !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* ---- ONE outline per card (no nested double boxes) ----------------- */
  /* The double-outline bug came from BEM names: [class*="card"] matched BOTH
     .tour-card AND its children .tour-card-content / .tour-card-footer, so you
     got a box inside a box. We only style the OUTERMOST card — a class that
     contains "card"/"panel"/"tile" but NOT "card-"/"panel-"/"tile-" (those are
     the inner BEM parts) — giving each card a single clean outline. */
  /* NOTE: the compound selector below MUST have no spaces between :is() and the
     :not()s — a space would become a descendant combinator and leak the outline
     onto inner elements (e.g. the price amount). */
  body :is([class*="card"],[class*="panel"],[class*="tile"]):not([class*="card-"]):not([class*="panel-"]):not([class*="tile-"]):not([class*="hero"]):not([class*="-bg"]):not([class*="-cta"]):not([class*="price"]):not(.fv-card) {
    background: rgba(255, 255, 255, 0.03) !important;
    background-image: none !important;
    border: 1px solid rgba(235, 235, 240, 0.13) !important; /* single, very light grey outline */
    border-radius: 14px;
    box-shadow: none !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  /* Inner wrappers (rows, items, labels, meta, body, steps…) get NO box of
     their own — they sit flat on the card or the section tint. This is what
     kills the little rectangles behind captions / country names / rows. */
  body :is(
    [class*="-box"],[class*="-item"],[class*="callout"],[class*="note"],[class*="-info"],
    [class*="well"],[class*="alert"],[class*="result"],[class*="summary"],[class*="-field"],
    [class*="-row"],[class*="step"],[class*="-label"],[class*="badge"],[class*="tag"],
    [class*="-block"],[class*="-body"],[class*="card-"],[class*="panel-"]
  ):not([class*="hero"]):not([class*="-bg"]):not(.fv-card) {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ---- Text legibility: light text + soft shadow (no box needed) ------ */
  /* Except: white-background boxes keep dark text (handled separately below) */
  body :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,label,small,strong,em,dt,dd,td,th,figcaption,span):not([class*="hero"]):not([class*="btn"]):not([class*="button"]) {
    color: #f5f0eb !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.35);
  }
  /* But NOT inside white boxes */
  .booking-bar :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,label,small,strong,em,dt,dd,td,th,figcaption,span),
  .region-card :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,label,small,strong,em,dt,dd,td,th,figcaption,span),
  .food-card :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,label,small,strong,em,dt,dd,td,th,figcaption,span),
  .award-card :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,label,small,strong,em,dt,dd,td,th,figcaption,span),
  .sidebar-box :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,label,small,strong,em,dt,dd,td,th,figcaption,span) {
    color: #0a0a0a !important;
    text-shadow: none !important;
  }

  /* White-background boxes: keep dark text (overrides the light text rule above) */
  .booking-bar h1, .booking-bar h2, .booking-bar h3, .booking-bar h4, .booking-bar h5, .booking-bar h6, .booking-bar p, .booking-bar span, .booking-bar label, .booking-bar li, .booking-bar blockquote,
  .region-card h1, .region-card h2, .region-card h3, .region-card h4, .region-card h5, .region-card h6, .region-card p, .region-card span, .region-card label, .region-card li, .region-card blockquote,
  .food-card h1, .food-card h2, .food-card h3, .food-card h4, .food-card h5, .food-card h6, .food-card p, .food-card span, .food-card label, .food-card li, .food-card blockquote,
  .award-card h1, .award-card h2, .award-card h3, .award-card h4, .award-card h5, .award-card h6, .award-card p, .award-card span, .award-card label, .award-card li, .award-card blockquote,
  .sidebar-box h1, .sidebar-box h2, .sidebar-box h3, .sidebar-box h4, .sidebar-box h5, .sidebar-box h6, .sidebar-box p, .sidebar-box span, .sidebar-box label, .sidebar-box li, .sidebar-box blockquote {
    color: #0a0a0a !important;
    text-shadow: none !important;
  }

  /* Keep gold accents gold. */
  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: subtle 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.25) !important;
    text-shadow: none !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 motion on real image cards (kept) ----------------------- */
  body :is([class*="card"],[class*="tile"]):not([class*="hero"]):not(.fv-card) {
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
  }
  body :is([class*="card"],[class*="tile"]):not([class*="hero"]):not(.fv-card):hover {
    transform: translateY(-4px);
  }
  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*="tile"]):hover { transform: none !important; }
}

/* ── GLASSY CONTACT/ENQUIRY FORMS (match the homepage contact card) ── */
@media (min-width: 768px) {
  .contact-inner,
  .contact-card,
  .ep-form,
  .enquiry-form,
  [class*="contact-form"] {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 48px rgba(0,0,0,0.30) !important;
    backdrop-filter: blur(14px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
  }
  /* give the bare form wrappers some inner breathing room */
  .contact-inner, .ep-form, .enquiry-form { padding: 46px 48px !important; max-width: 920px; margin: 0 auto; }
  /* rounded, glassy inputs inside */
  :is(.contact-inner,.contact-card,.ep-form,.enquiry-form) :is(input,textarea,select) {
    border-radius: 12px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(245,240,235,0.20) !important;
  }
}