/* glass.css — frosted-glass aesthetic for the main nav pages.
   Mirrors the homepage globe section: dark tinted glass panels with light
   text, floating over a soft backdrop of colourful brand-coloured orbs.
   Reuses the same selector strategy as mountain-skin.css (proven safe across
   these pages), so it won't break their mixed light/dark sections.
   Desktop only (>=768px); mobile keeps the original light design. */

@media (min-width: 768px) {

  /* Deep base + a fixed wash of colourful brand orbs the glass blurs over. */
  html { background: #101a30 !important; }
  body { background: transparent !important; background-color: transparent !important; }

  body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(600px 600px at 12% 6%,  rgba(74,127,165,0.45), transparent 60%),
      radial-gradient(560px 560px at 88% 14%, rgba(232,133,55,0.30), transparent 62%),
      radial-gradient(640px 640px at 76% 92%, rgba(201,169,110,0.40), transparent 62%),
      radial-gradient(520px 520px at 16% 88%, rgba(74,127,165,0.30), transparent 62%),
      linear-gradient(180deg, #101a30 0%, #14233f 100%);
  }

  /* ---- Frosted glass panels (content sections) --------------------------- */
  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*="-strip"]: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(16, 26, 44, 0.5) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
  }

  /* ---- Cards / boxes -> their own frosted-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(22, 34, 56, 0.55) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    backdrop-filter: blur(10px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.25),
                inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  /* ---- Text legibility: light text on the dark glass --------------------- */
  body :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,label,small,strong,em,dt,dd,td,th,figcaption):not([class*="hero"]) {
    color: #f3f1ec !important;
  }
  /* Gold accents stay gold (defined after, 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 / logo 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: translucent, light text ----------------------------- */
  body :is(input,textarea,select):not([class*="hero"]) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f3f1ec !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
  }
  body ::placeholder { color: rgba(243, 241, 236, 0.55) !important; }

  /* ---- A11y: visible keyboard focus (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 interactive glass islands ----------------------- */
  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 26px 60px rgba(0,0,0,.38),
                inset 0 1px 0 rgba(255,255,255,.3) !important;
    border-color: rgba(201,169,110,.5) !important;
  }
}

/* Honour reduced-motion: 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;
  }
}