/* Butla — Glassmorphism experiment (frosted warm glass).
   UNPLUG: delete the single /css/glassmorphism.css <link> in nuxt.config.js; every
   glassed surface keeps a solid base elsewhere, so removal leaves the site finished.
   Applied only to surfaces that float over content (dropdown, snippet cards, pills,
   mobile drawer, fixed chrome, CTA cards); never flat sections, inputs, or grid cards. */

/* ── Tokens: single source of truth ───────────────────────────────────────── */
:root {
  --g-bg:        rgba(255, 253, 249, 0.62);   /* low-text chips/cards */
  --g-bg-strong: rgba(255, 253, 249, 0.82);   /* text-bearing panels */
  --g-border:    rgba(255, 253, 249, 0.55);   /* warm hairline rim */
  --g-blur:      18px;
  --g-sat:       1.35;
  --g-shadow:    0 2px 6px rgba(70, 50, 30, 0.05), 0 18px 40px -22px rgba(70, 50, 30, 0.28);
  --g-highlight: inset 0 1px 0 rgba(138, 0, 252, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Warm-dark variant: only the tokens change, so no per-surface duplication. */
body.dark-theme {
  --g-bg:        rgba(34, 29, 24, 0.58);
  --g-bg-strong: rgba(34, 29, 24, 0.80);
  --g-border:    rgba(255, 240, 225, 0.10);
  --g-shadow:    0 2px 6px rgba(0, 0, 0, 0.25), 0 18px 40px -22px rgba(0, 0, 0, 0.60);
  --g-highlight: inset 0 1px 0 rgba(232, 176, 106, 0.08);
}

/* ── Floating navigation dropdown ──────────────────────────────────────────
   The improved solid base (radius/shadow/animation/tiles) lives in the header
   component's scoped CSS. Here we only swap the fill for frosted glass. */
.nav-dropdown {
  background: var(--g-bg-strong) !important;
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  border-color: var(--g-border) !important;
  box-shadow: 0 2px 6px rgba(70,50,30,0.06), 0 22px 44px -20px rgba(70,50,30,0.30), var(--g-highlight) !important;
}

/* ── Mobile nav drawer — floats over the whole page on mobile ──────────────── */
.mobile-nav-drawer {
  background: var(--g-bg-strong) !important;
  -webkit-backdrop-filter: blur(16px) saturate(var(--g-sat));
  backdrop-filter: blur(16px) saturate(var(--g-sat));
  border-top: 1px solid var(--g-border) !important;
}

/* ── Floating snippet cards over the pastel blobs ──────────────────────────
   The highest-value glass surface: index / how-it-works / use-cases / business /
   marketplace / butla-orb / butla-one. Scoped, hardcoded white base -> !important. */
.vcard,
.vrow {
  background: var(--g-bg) !important;
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  border-color: var(--g-border) !important;
  box-shadow: var(--g-shadow), var(--g-highlight) !important;
}

/* ── Floating context pills (hero canvas, animated) ────────────────────────
   Small animated chips read as glass with slightly less blur and composite cheaper. */
.canvas-pill {
  background: var(--g-bg) !important;
  -webkit-backdrop-filter: blur(14px) saturate(var(--g-sat));
  backdrop-filter: blur(14px) saturate(var(--g-sat));
  border-color: var(--g-border) !important;
  box-shadow: 0 4px 14px -6px rgba(70, 50, 30, 0.14), var(--g-highlight) !important;
}

/* ── Fixed chrome floating over any page content (text-bearing -> strong fill) ── */
.activity-ticker,
.cookie-consent {
  background: var(--g-bg-strong) !important;
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  border-color: var(--g-border) !important;
  box-shadow: var(--g-shadow), var(--g-highlight) !important;
}

/* ── Sticky cards layering over scrolling content (extended.vue) ───────────── */
.sticky-card {
  background: var(--g-bg-strong) !important;
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  border-color: var(--g-border) !important;
  box-shadow: var(--g-shadow), var(--g-highlight) !important;
}

/* ── CTA cards + the named .glass-card hook (global classes in dark-theme.css) ─
   This file loads after dark-theme.css, so equal-specificity rules win without
   !important. .cta-band is deliberately excluded (full-bleed gradient band). */
.cta-card,
.get-started-hero .container,
.glass-card {
  background: var(--g-bg-strong);
  -webkit-backdrop-filter: blur(16px) saturate(var(--g-sat));
  backdrop-filter: blur(16px) saturate(var(--g-sat));
  border-color: var(--g-border);
  box-shadow: var(--g-shadow), var(--g-highlight);
}

/* ── Fallback 1: no backdrop-filter support ────────────────────────────────
   Test BOTH prefixes, or Safari (prefixed-only) is mis-detected as unsupported
   and needlessly forced solid. Falls back to the solid warm surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root,
  body.dark-theme {
    --g-bg:        var(--m-surface);
    --g-bg-strong: var(--m-surface);
    --g-border:    var(--m-border);
  }
}

/* ── Fallback 2: user prefers reduced transparency ─────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .nav-dropdown,
  .mobile-nav-drawer,
  .vcard,
  .vrow,
  .canvas-pill,
  .activity-ticker,
  .cookie-consent,
  .sticky-card,
  .cta-card,
  .get-started-hero .container,
  .glass-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--m-surface) !important;
  }
}