/* Wealthy Wave "glass" layer (29 Oct 2026). Chirag liked the effects on taxoraconsulting.ca and asked for them
   without changing colours. Adds: floating glass pill header, pill buttons, pill eyebrows, soft hero glow,
   hover lift on cards, gently floating hero chips. CSS only (WWA CSP is script-src 'none'). Uses the theme's
   own colour variables, so the warm ivory + clay palette is unchanged. Linked last on every WWA page by
   scripts/wwa-glass-css.php. The !important flags only answer !important rules already in wwa-theme.css. */
:root {
  --gl-bg: rgba(250, 249, 245, .74);
  --gl-line: rgba(20, 20, 19, .09);
  --gl-soft: 0 1px 2px rgba(20, 20, 19, .05), 0 10px 30px -14px rgba(20, 20, 19, .18);
  --gl-lift: 0 2px 6px rgba(20, 20, 19, .06), 0 26px 50px -22px rgba(20, 20, 19, .32);
}

/* 1. Floating glass pill header that stays on screen */
header.site-header {
  position: sticky; top: 12px; z-index: 60;
  height: auto; min-height: 72px;
  margin-top: 12px; padding-top: 10px; padding-bottom: 10px;
  background: var(--gl-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid var(--gl-line); border-radius: 999px;
  box-shadow: var(--gl-soft);
}
header.site-header::before { content: none; }
header.site-header .desktop-nav a { border-radius: 999px; padding: 8px 14px; min-height: 0; transition: background-color .2s ease, color .2s ease; }
header.site-header .desktop-nav a::after { display: none; }
header.site-header .desktop-nav a:hover, header.site-header .desktop-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
header.site-header .header-call {
  border-radius: 999px; padding: 10px 18px; gap: 14px;
  background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg);
  text-decoration: none; font-weight: 600;
  box-shadow: 0 8px 20px -10px rgba(173, 79, 47, .7);
}
header.site-header .mobile-nav nav { border-radius: 20px; box-shadow: var(--gl-lift); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.site-header { background: var(--bg); }
}

/* 2. Pill buttons with a lift */
.button.primary, .button, .primary, .pp3d__button, .fdr__button, .hf__button { border-radius: 999px !important; }
.button, .pp3d__button, .fdr__button, .hf__button { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.button:hover, .pp3d__button:hover, .fdr__button:hover, .hf__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(173, 79, 47, .75);
}

/* 3. Eyebrow labels become small pills with a dot */
main .eyebrow, body > section .eyebrow, .hero .eyebrow {
  display: inline-block; width: auto;
  padding: 6px 14px; border-radius: 20px;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid rgba(173, 79, 47, .16);
  font-weight: 600; letter-spacing: .08em;
}
main .eyebrow::before, body > section .eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%;
  background: var(--art-2); box-shadow: 0 0 0 4px rgba(217, 119, 87, .18);
  position: static; margin: -2px 10px 0 2px; border: 0;
}
.wst__head .eyebrow { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
.eyebrow .small-line { display: none; }
.wnum .eyebrow, .dr-band .eyebrow, .wj .eyebrow, .perspective-section .eyebrow {
  background: rgba(255, 255, 255, .08); color: #f3c3ae; border-color: rgba(255, 255, 255, .14);
}

/* 4. Soft warm glow behind the hero */
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -140px; bottom: -40px; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background:
    radial-gradient(34% 46% at 14% 22%, rgba(217, 119, 87, .16), transparent 70%),
    radial-gradient(30% 42% at 86% 36%, rgba(173, 79, 47, .10), transparent 72%);
}

/* 5. Cards lift on hover */
.dr-guide__card, .pp3d__card, .pp3d__slab, .wst__fig, .wnum li {
  transition: transform .25s ease, box-shadow .25s ease;
}
.dr-guide__card:hover, .pp3d__card:hover, .pp3d__slab:hover, .wst__fig:hover, .wnum li:hover {
  transform: translateY(-4px); box-shadow: var(--gl-lift);
}

/* 6. Hero chips float gently */
@keyframes gl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.hx__chip { animation: gl-float 6s ease-in-out infinite; }
.hx__chip + .hx__chip { animation-delay: -3s; }

@media (max-width: 760px) {
  header.site-header { top: 8px; margin-top: 8px; min-height: 60px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx__chip { animation: none; }
  .button:hover, .pp3d__button:hover, .fdr__button:hover, .hf__button:hover, .dr-guide__card:hover,
  .pp3d__card:hover, .pp3d__slab:hover, .wst__fig:hover, .wnum li:hover { transform: none; }
}