/* ============================================================================
   glass.css — Liquid Glass design system shared across the site
   Loaded AFTER header.css on every page.

   Provides:
     - Extended :root color tokens (navy-deep, gold-deep)
     - Layered shadow stack tokens (--glass-shadow-stack, hover variant)
     - Body background with layered ambient highlights
     - Utility classes per-page styles can opt into

   Per-page <style> blocks reference these tokens to style their specific
   layouts. Header lives in header.css; this file handles everything else.
   ============================================================================ */

:root {
  --navy-deep: #0f1936;
  --gold-deep: #d6981a;
  --glass-radius:    18px;
  --glass-radius-sm: 12px;
  --glass-radius-lg: 24px;

  /* === Layered shadow stack — true depth, not a single soft blur ===
     Highlight = top inner edge that catches light (the "glass" tell).
     Hairline  = ultra-thin border that defines the surface edge.
     1/2/3     = three shadow distances (close, mid, ambient) stacked. */
  --glass-highlight: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
  --glass-hairline:  0 0 0 0.5px rgba(23, 36, 74, 0.08);
  --glass-shadow-1:  0 1px 2px rgba(23, 36, 74, 0.05);
  --glass-shadow-2:  0 8px 16px -4px rgba(23, 36, 74, 0.10);
  --glass-shadow-3:  0 24px 48px -12px rgba(23, 36, 74, 0.20);
  --glass-shadow-stack:
    var(--glass-highlight),
    var(--glass-hairline),
    var(--glass-shadow-1),
    var(--glass-shadow-2),
    var(--glass-shadow-3);

  --glass-shadow-stack-hover:
    var(--glass-highlight),
    0 0 0 0.5px rgba(23, 36, 74, 0.12),
    0 2px 4px rgba(23, 36, 74, 0.08),
    0 12px 24px -4px rgba(23, 36, 74, 0.14),
    0 36px 64px -12px rgba(23, 36, 74, 0.26);

  /* Glass surface gradient (subtle white-on-white for "glass" face) */
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.78) 100%);

  /* Gold button gradient + glow shadow */
  --gold-gradient: linear-gradient(180deg, #f3b631 0%, #d6981a 100%);
  --gold-glow: 0 4px 12px -2px rgba(214, 152, 26, 0.45);
  --gold-glow-hover: 0 8px 20px -2px rgba(214, 152, 26, 0.55);

  /* Standard easing for hover lifts */
  --glass-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================================================
   Body — layered ambient background with soft warm + cool highlights.
   Kept subtle so dark feature banners (.key-banner, .glass-dark) don't
   pick up an orange wash on translucent overlays.
   ============================================================================ */
body {
  background:
    radial-gradient(900px 500px at 0% -10%, rgba(235, 169, 17, 0.05), transparent 55%),
    radial-gradient(1000px 600px at 100% 30%, rgba(23, 36, 74, 0.04), transparent 65%),
    radial-gradient(800px 400px at 50% 100%, rgba(235, 169, 17, 0.03), transparent 60%),
    linear-gradient(180deg, #f6f7fb 0%, #ecedf3 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* ============================================================================
   .glass-surface — generic glass card.
   Applies to anything that should look like a glass card (white base).
   ============================================================================ */
.glass-surface {
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow-stack);
}

/* ============================================================================
   .glass-interactive — glass surface with hover lift.
   Apply to clickable cards, tiles, options.
   ============================================================================ */
.glass-interactive {
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow-stack);
  transition: transform 0.22s var(--glass-ease),
              box-shadow 0.22s var(--glass-ease);
  position: relative;
  overflow: hidden;
}
.glass-interactive::before {
  /* Top sheen for that extra "glass face" feel */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent);
  pointer-events: none;
  border-radius: inherit;
}
.glass-interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-stack-hover);
}
.glass-interactive:active { transform: translateY(-1px); }

/* ============================================================================
   .glass-btn-primary — gold gradient button with glow shadow.
   Apply to primary CTAs.
   ============================================================================ */
.glass-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  background: var(--gold-gradient);
  color: var(--navy, #17244A);
  border: none;
  border-radius: var(--glass-radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 -1px 0 rgba(0, 0, 0, 0.08) inset,
    0 1px 2px rgba(23, 36, 74, 0.08),
    var(--gold-glow);
  transition: transform 0.12s var(--glass-ease),
              box-shadow 0.12s var(--glass-ease);
}
.glass-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 -1px 0 rgba(0, 0, 0, 0.08) inset,
    0 2px 4px rgba(23, 36, 74, 0.10),
    var(--gold-glow-hover);
}
.glass-btn-primary:active {
  transform: translateY(0);
}

/* ============================================================================
   .glass-pill — small rounded glass pill (e.g., for ratings, badges)
   ============================================================================ */
.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: linear-gradient(180deg, #fff8e6 0%, #fceec7 100%);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 0 0 0.5px rgba(214, 152, 26, 0.30),
    0 2px 6px rgba(214, 152, 26, 0.20);
}

/* ============================================================================
   .glass-dark — premium dark glass section (for "feature" banners)
   ============================================================================ */
.glass-dark {
  background:
    linear-gradient(180deg, rgba(23, 36, 74, 0.95) 0%, rgba(15, 25, 54, 0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--glass-radius-lg);
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 0 0 0.5px rgba(255, 255, 255, 0.08),
    0 24px 48px -12px rgba(23, 36, 74, 0.40),
    0 48px 96px -24px rgba(23, 36, 74, 0.30);
}

/* ============================================================================
   Reduced motion — disable hover transforms for accessibility
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .glass-interactive,
  .glass-btn-primary {
    transition: none;
  }
  .glass-interactive:hover,
  .glass-btn-primary:hover { transform: none; }
}