/* ============================================================
   Apex Integration — Cymatic brand theme (shared override)
   Loaded AFTER each page's inline <style>, so re-defining the
   design tokens here re-themes every component that uses them.
   Palette + font pulled from the Cymatic flavor.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Cymatic palette */
  --cy-slate:      #091942;
  --cy-slate-deep: #050E2A;
  --cy-teal:       #5ADAE5;
  --cy-teal-dark:  #3BC0CB;
  --cy-gold:       #F5D36C;
  --cy-gray:       #95A0B9;
  --cy-violet:     #8B5CF6;
  --cy-light:      #F0F1F5;

  /* Remap each page's tokens to the dark theme.
     (Components reference these, so they convert automatically.) */
  --navy:        #F0F1F5;                     /* headings (now light on dark) */
  --slate:       #D4DBE8;                     /* sub-headings */
  --ink:         #E6E9F0;                     /* body text */
  --muted:       #95A0B9;                     /* muted text */
  --line:        rgba(240,241,245,0.12);      /* borders */
  --bg:          #091942;                     /* page background */
  --card:        #0C2350;                     /* panels / cards */
  --accent:      #5ADAE5;                     /* primary teal */
  --accent-d:    #3BC0CB;                     /* teal hover / links */
  --accent-soft: rgba(90,218,229,0.13);       /* teal tint (badges, pills, chips) */
  --err:         #ff6b6b;
  --ok:          #5fe0a0;
  --shadow:      0 10px 30px rgba(3,9,24,0.45);
}

html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Subtle brand wash on the page background */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(90,218,229,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(139,92,246,0.08) 0%, transparent 60%);
}

/* Nav / header — translucent navy */
nav { background: rgba(9,25,66,0.82) !important; border-bottom: 1px solid var(--line) !important; }

/* Logo lockup (image + wordmark) */
.logo { display: inline-flex !important; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; display: block; }
.logo-word { font-weight: 800; letter-spacing: .2px; color: var(--cy-light); font-size: 16px; white-space: nowrap; }
header.brand { margin-bottom: 22px; }

/* Buttons — bright teal needs dark text for contrast */
.btn-primary, button.submit, .nav-cta, .book {
  background: var(--accent) !important; color: #091942 !important; font-weight: 700;
}
.btn-primary:hover, button.submit:hover, .nav-cta:hover { background: var(--accent-d) !important; color: #091942 !important; }
.btn-ghost { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.btn-ghost:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* Form controls — dark fields */
input[type=text], input[type=email], input[type=tel], select, textarea {
  background: rgba(240,241,245,0.06) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
input::placeholder, textarea::placeholder { color: rgba(240,241,245,0.40); }
select { color: var(--ink) !important; }
select option { color: #091942; background: #fff; }   /* native dropdown list */
.chip span { background: rgba(240,241,245,0.06) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.chip input:checked + span { background: var(--accent) !important; border-color: var(--accent) !important; color: #091942 !important; }
.opt { border-color: var(--line) !important; }
.opt input { accent-color: var(--accent); }

/* Cards / panels get a hairline border + soft shadow on dark */
.card, .step, form, .done, .booking-embed { border: 1px solid var(--line) !important; box-shadow: var(--shadow); }

/* Homepage "who" band — was a solid-navy block; make it a gradient panel */
.who { background: linear-gradient(135deg, #0C2350 0%, #091942 55%, #10224f 100%) !important; border: 1px solid var(--line); }

/* Success check */
.tick { background: var(--accent-soft) !important; color: var(--accent) !important; }

a { color: var(--accent-d); }
a:hover { color: var(--accent); }
footer { border-top: 1px solid var(--line); }

/* Mobile header: keep logo + the Get Started CTA only; drop the rest
   (every page's footer carries the full link set). */
@media (max-width: 760px) {
  .nav-links li.hide-sm { display: none; }
  .nav-links { gap: 14px; }
  .logo-word { font-size: 15px; }
  .logo-mark { width: 26px; height: 26px; }
}