/* ============================================================
   Glassmorphism layer — loaded after Tailwind & style.css.
   LIGHT theme: frosted white glass over a soft pastel backdrop.
   (Colours are inverted in tools/tailwind/tailwind.config.js.)
   Most templates are restyled here (by targeting their existing
   Tailwind classes), so remove this file to revert the look.
   ============================================================ */

:root {
  /* Glass tiers (white frost) */
  --g-strong: rgba(255, 255, 255, 0.72);
  --g-mid:    rgba(255, 255, 255, 0.55);
  --g-light:  rgba(255, 255, 255, 0.45);
  --g-hover:  rgba(255, 255, 255, 0.78);
  --g-blur: 20px;
  --g-blur-strong: 24px;
  --g-sat: 170%;

  /* Edges & light */
  --g-border:        rgba(255, 255, 255, 0.75);
  --g-border-bright: rgba(255, 255, 255, 0.95);
  --g-highlight:     inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --g-sheen:         linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%);

  /* Soft, layered elevation */
  --g-shadow-1: 0 1px 2px rgba(30, 27, 75, .06), 0 4px 12px rgba(30, 27, 75, .06);
  --g-shadow-2: 0 1px 2px rgba(30, 27, 75, .06), 0 8px 24px rgba(30, 27, 75, .08), 0 24px 48px rgba(30, 27, 75, .06);
  --g-shadow-3: 0 2px 4px rgba(30, 27, 75, .07), 0 16px 40px rgba(30, 27, 75, .12), 0 40px 80px rgba(30, 27, 75, .08);

  --g-glow: rgba(99, 102, 241, .28);
  --g-focus: 0 0 0 2px #ffffff, 0 0 0 4px #4f46e5;
}

/* ------------------------------------------------------------
   0. Typography — Inter, tuned toward Apple's SF Pro rhythm
   ------------------------------------------------------------ */
html body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-optical-sizing: auto;
  /* Single-storey a, flat-top 1/3/4/6/9 — softer, more SF-like shapes */
  font-feature-settings: "cv11", "cv02", "cv03", "cv04", "calt";
  letter-spacing: -0.011em;
  text-rendering: optimizeLegibility;
}
/* Display headings: tight tracking, firm (not heavy) weight */
html :is(h1, .section-title, .cta-title) {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
}
html :is(h2, h3) { letter-spacing: -0.022em; }
html :is(h4, h5, h6) { letter-spacing: -0.012em; }
html :is(.font-extrabold, .font-black) { font-weight: 700; }
/* Small caps-style labels open up instead of tightening */
html :is(.eyebrow, .uppercase) { letter-spacing: 0.12em; font-weight: 600; }
/* Body copy breathes a little more */
html :is(p, li) { line-height: 1.65; }
/* Numbers line up in stats, prices and counters */
html :is(.tabular-nums, [class*="text-2xl"], [class*="text-3xl"], [class*="text-4xl"]) { font-variant-numeric: tabular-nums; }
html :is(.btn, button) { letter-spacing: -0.01em; }
html :is(code, pre, kbd, .font-mono, .code-pre) { font-feature-settings: normal; letter-spacing: 0; }

/* ------------------------------------------------------------
   1. Vivid backdrop (markup lives in includes/header.php)
   ------------------------------------------------------------ */
html, body { background-color: #f3f2fb; }
body { background: transparent !important; }

/* One static, GPU-cheap layer: gradients only — no filters, no
   blend modes, nothing moving. Anything animating behind a
   backdrop-filter forces every glass panel to re-blur each frame
   (measured: 127 dropped frames per 6s scroll vs 0 when static). */
.site-backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 8% 6%,   rgba(167, 139, 250, .55), transparent 70%),
    radial-gradient(50% 45% at 95% 10%, rgba(96, 165, 250, .5), transparent 70%),
    radial-gradient(40% 35% at 30% 55%, rgba(196, 181, 253, .4), transparent 70%),
    radial-gradient(35% 35% at 85% 60%, rgba(253, 186, 116, .4), transparent 70%),
    radial-gradient(55% 55% at 80% 100%, rgba(244, 114, 182, .42), transparent 70%),
    radial-gradient(45% 45% at 0% 100%, rgba(94, 234, 212, .45), transparent 70%),
    #f3f2fb;
}

/* ------------------------------------------------------------
   1b. Scroll reveal (driven by main.js; replaces the AOS library).
       Hidden only when JS has run (html.js-reveal), short moves,
       opacity + transform only.
   ------------------------------------------------------------ */
html.js-reveal [data-aos] {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
}
html.js-reveal [data-aos="fade-up"]    { transform: translate3d(0, 24px, 0); }
html.js-reveal [data-aos="fade-right"] { transform: translate3d(-24px, 0, 0); }
html.js-reveal [data-aos="fade-left"]  { transform: translate3d(24px, 0, 0); }
html.js-reveal [data-aos="zoom-in"]    { transform: scale(.97); }
html.js-reveal [data-aos].aos-animate  { opacity: 1; transform: none; }
html.js-reveal [data-aos-delay="100"] { transition-delay: .1s; }
html.js-reveal [data-aos-delay="200"] { transition-delay: .2s; }
html.js-reveal [data-aos-delay="300"] { transition-delay: .3s; }

/* Decorative glow orbs: heavy blur(100px) layers, redundant over the gradient backdrop */
html .ambient-glow-orb { display: none; }

/* ------------------------------------------------------------
   2. Let the backdrop through: page-level section backgrounds
   ------------------------------------------------------------ */
html main [class~="bg-base"]:is(section, article) { background-color: transparent; }
html main [class~="bg-base2"]:is(section, article) {
  background-color: rgba(255, 255, 255, .3);
  border-color: rgba(255, 255, 255, .7);
}

/* ------------------------------------------------------------
   3. Glass surfaces
   ------------------------------------------------------------ */
html .glass-card, html .glass-panel, html .card, html .faq-item,
html [class*="bg-card/"], html [class*="bg-base2/"] {
  background-color: var(--g-mid);
  background-image: var(--g-sheen);
  -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);
  box-shadow: var(--g-highlight), var(--g-shadow-2);
}
/* Sticky sidebars, dropdowns & floating badges: strong tier */
html .glass-panel,
html [class*="bg-card/85"], html [class*="bg-card/95"], html [class*="bg-card/90"], html [class*="bg-card/80"] {
  background-color: var(--g-strong);
  -webkit-backdrop-filter: blur(var(--g-blur-strong)) saturate(var(--g-sat));
          backdrop-filter: blur(var(--g-blur-strong)) saturate(var(--g-sat));
  box-shadow: var(--g-highlight), var(--g-shadow-3);
}
html .glass-card:hover, html .card:hover,
html article[class*="bg-card/"]:hover {
  background-color: var(--g-hover);
  border-color: var(--g-border-bright);
  box-shadow: var(--g-highlight), var(--g-shadow-3);
}
html .faq-item:hover { border-color: var(--g-border-bright); }

/* Light tier: chips, pills, icon boxes */
html .chip, html .link-pill, html .glass-pill, html .ico-box {
  background-color: var(--g-light);
  border-color: var(--g-border);
  box-shadow: var(--g-highlight);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html .chip:hover, html .link-pill:hover, html .glass-pill:hover {
  border-color: var(--g-border-bright);
  background-color: rgba(255, 255, 255, .75);
  box-shadow: var(--g-highlight), var(--g-shadow-1);
}

/* Fields */
html .field-input, html .glass-input {
  background-color: rgba(255, 255, 255, .7);
  border-color: rgba(15, 23, 42, .1);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
  /* No blur here: it would paint over absolutely-positioned field icons */
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html .field-input:focus, html .glass-input:focus { background-color: #fff; border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, .15); }

/* ------------------------------------------------------------
   4. Buttons — border brightness & glow shifts on hover
   ------------------------------------------------------------ */
/* Primary = dark ink pill (bg-white is inverted to ink) */
html .btn-primary, html .btn-white {
  border: 1px solid #0b1020;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 20px rgba(11, 16, 32, .18);
}
html .btn-primary:hover, html .btn-white:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 4px rgba(99, 102, 241, .14), 0 10px 32px var(--g-glow);
}
html .btn-outline, html .btn-ghostdark {
  background-color: var(--g-light);
  border-color: var(--g-border-bright);
  box-shadow: var(--g-highlight), var(--g-shadow-1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html .btn-outline:hover, html .btn-ghostdark:hover {
  background-color: rgba(255, 255, 255, .8);
  border-color: #fff;
  box-shadow: var(--g-highlight), 0 0 0 4px rgba(99, 102, 241, .1), 0 8px 28px var(--g-glow);
}
html :is(.btn, .chip, .link-pill, .cat-btn, a, button):focus-visible { outline: none; box-shadow: var(--g-focus); }

html .cat-btn { background: var(--g-light); border-color: var(--g-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html .cat-btn:hover { background: rgba(255, 255, 255, .8); border-color: var(--g-border-bright); }

/* ------------------------------------------------------------
   5. Floating navigation
   ------------------------------------------------------------ */
html .site-header { padding: 12px 12px 0; background: none; }
/* The frost lives on ::before so the bar itself is not a "backdrop root" —
   otherwise the nested dropdown could only blur the bar, not the page. */
html .glass-nav {
  position: relative;
  isolation: isolate;
  border-radius: 20px;
  /* Cancel style.css's .glass-nav surface: a backdrop-filter here would make the
     bar a backdrop root and stop the dropdown / mobile menu from blurring the page */
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
html .glass-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--g-strong);
  background-image: var(--g-sheen);
  -webkit-backdrop-filter: blur(var(--g-blur-strong)) saturate(var(--g-sat));
          backdrop-filter: blur(var(--g-blur-strong)) saturate(var(--g-sat));
  border: 1px solid var(--g-border);
  box-shadow: var(--g-highlight), var(--g-shadow-2);
}

/* Desktop: the link list is plain — no panel, no strip */
@media (min-width: 768px) {
  html body .nav-menu {
    background: transparent; border: 0; box-shadow: none; padding: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* Dropdown + mobile menu: near-opaque glass so text never fights the page behind */
html .nav-dropdown,
html .nav-menu {
  background-color: rgba(255, 255, 255, .9);
  background-image: var(--g-sheen);
  -webkit-backdrop-filter: blur(var(--g-blur-strong)) saturate(var(--g-sat));
          backdrop-filter: blur(var(--g-blur-strong)) saturate(var(--g-sat));
  border-color: var(--g-border);
  box-shadow: var(--g-highlight), var(--g-shadow-3);
}
html .nav-dropdown a { align-items: center; }
html .nav-dropdown a:hover { background: rgba(99, 102, 241, .07); }

/* Mobile app bar & back-to-top */
html .glass-tabbar {
  background: var(--g-strong);
  -webkit-backdrop-filter: blur(var(--g-blur-strong)) saturate(var(--g-sat));
          backdrop-filter: blur(var(--g-blur-strong)) saturate(var(--g-sat));
  border-top: 1px solid var(--g-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 -8px 30px rgba(30, 27, 75, .08);
}

/* ------------------------------------------------------------
   6. Footer
   ------------------------------------------------------------ */
html .site-footer {
  background: var(--g-mid);
  background-image: var(--g-sheen);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
          backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  border-top: 1px solid var(--g-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
html .site-footer-bar { background: rgba(255, 255, 255, .4); }

/* Scrollbar & selection pick up the tint */
::-webkit-scrollbar-track { background: #f3f2fb; }
::-webkit-scrollbar-thumb { border-color: #f3f2fb; }

/* ------------------------------------------------------------
   7. Accessibility & performance fallbacks
   ------------------------------------------------------------ */

/* No backdrop-filter support → near-opaque surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --g-strong: rgba(255, 255, 255, .96);
    --g-mid:    rgba(255, 255, 255, .92);
    --g-light:  rgba(255, 255, 255, .85);
    --g-hover:  rgba(255, 255, 255, .98);
  }
}

/* OS-level "reduce transparency" → solid panels, no blur */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --g-strong: rgba(255, 255, 255, .97);
    --g-mid:    rgba(255, 255, 255, .95);
    --g-light:  rgba(255, 255, 255, .9);
    --g-hover:  #ffffff;
    --g-border: rgba(15, 23, 42, .12);
  }
}

/* Phones: cheaper blur, static backdrop */
@media (max-width: 767px) {
  :root { --g-blur: 14px; --g-blur-strong: 16px; }
  .site-header { padding: 8px 8px 0; }
}


/* Windows High Contrast */
@media (forced-colors: active) {
  .site-backdrop { display: none; }
  .glass-card, .glass-panel, .card, .glass-nav, .site-footer, .glass-tabbar,
  .btn-outline, .chip, .link-pill { background: Canvas; border: 1px solid CanvasText; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
}