/* ==========================================================================
   GLASS.CSS — "liquid glass" surface treatment
   A skin layer loaded after style.css: gives recurring surfaces (nav,
   dropdowns, cards, pills, buttons) a translucent, blurred, soft-lit look.
   Only touches background/border-color/box-shadow/backdrop-filter — layout,
   spacing and typography stay owned by style.css. Falls back to solid
   Material surfaces automatically where backdrop-filter isn't supported.
   ========================================================================== */

:root {
  --glass-blur: 20px;
  --glass-tint: color-mix(in srgb, var(--sc-lowest) 58%, transparent);
  --glass-tint-strong: color-mix(in srgb, var(--sc-lowest) 80%, transparent);
  /* Used wherever body text sits directly on the glass (nav, dropdowns,
     mobile panel) — these overlay arbitrary scrolled content (photos,
     video, gradients) behind them, so they stay nearly opaque to
     guarantee legible text no matter what's underneath. */
  --glass-tint-readable: color-mix(in srgb, var(--sc-lowest) 95%, transparent);
  --glass-border: color-mix(in srgb, #fff 65%, var(--outline-variant) 35%);
  --glass-shadow:
    0 8px 30px rgba(10, 30, 25, .10),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .10);
}

/* ---- Chrome: nav, dropdowns, mobile panel ----
   Nearly-opaque tint + a gentler saturation boost than the decorative
   surfaces below, so nav/menu text stays crisp over any page content. */
.appbar__inner,
.drop,
.nav.open {
  background: var(--glass-tint-readable);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  border-color: var(--glass-border);
}

/* ---- Pills & chips ---- */
.hero__chip,
.tagpill,
.chip {
  background: var(--glass-tint);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-color: var(--glass-border);
}

/* ---- Cards & content surfaces (static — no continuous animation) ---- */
.card,
.value,
.pcard,
.act-card,
.contact-item,
.promise__card,
.faq__item,
.featured,
.chair,
.form,
.map__card {
  background: var(--glass-tint-strong);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Placeholder "add" cards stay transparent/dashed, not glassed */
.pcard--add {
  background: transparent;
  box-shadow: none;
}

/* Org chart nodes: glass surface, but keep each role's own border-top accent.
   Chairman/CEO nodes are excluded — style.css gives them a solid tinted
   background with light text, and glassing that over would make the text
   unreadable (:not() here beats trying to "undo" the rule afterwards, since
   `revert` would roll back to the browser default, not style.css's rule). */
.node:not(.node--chair):not(.node--ceo) {
  background: var(--glass-tint-strong);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--glass-shadow);
}

/* ---- Buttons ---- */
.btn--tonal,
.btn--outlined {
  background: var(--glass-tint);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
}

/* Marquee tiles (partners/clients) are excluded on purpose: blurring an
   element that's continuously translating is expensive and can look like
   it "swims" during motion — they keep their plain solid look instead. */

@supports not (backdrop-filter: blur(1px)) {

  .appbar__inner,
  .drop,
  .nav.open,
  .hero__chip,
  .tagpill,
  .chip,
  .card,
  .value,
  .pcard,
  .act-card,
  .contact-item,
  .promise__card,
  .faq__item,
  .featured,
  .chair,
  .form,
  .map__card,
  .node,
  .btn--tonal,
  .btn--outlined {
    background: var(--sc-lowest);
  }
}