/* ---------------------------------------------------------------
   MATEN Health — design layer on top of Bootstrap 5.3 colour modes.

   Tokens are defined for light, then overridden for [data-bs-theme=dark].
   The brand-derived subset (--mh-brand, --mh-accent, --mh-hero-bg and the
   text colour that sits on them) is re-emitted from Admin → Brand settings
   in an inline <style> AFTER this file, so this file's values are only the
   fallback used before a logo has been uploaded.

   Shares its token names with the course platform at courses.matenhealth.com
   so the two sites stay one visual system. Surfaces here lean purple rather
   than blue because the MATEN logo's ground is a deep violet-black; dark is
   the default theme for the same reason (theme.js).
   --------------------------------------------------------------- */
:root {
  color-scheme: light;

  --mh-ink:        #14101e;   /* primary text — flips with the theme */
  --mh-brand:      #1f6feb;
  --mh-brand-hover:#1a5fd0;
  --mh-brand-2:    #0ea5a4;   /* decorative use only */
  --mh-mark-2:     #0b7f7e;   /* gradient end where text sits on top */
  --mh-on-brand:   #ffffff;   /* text that sits ON a brand-coloured fill */
  --mh-surface:    #ffffff;
  --mh-surface-2:  #f7f5fb;
  --mh-border:     #e5e0ee;
  --mh-muted:      #5f5a70;
  --mh-shadow:     0 1px 2px rgba(13,27,42,.06), 0 8px 24px rgba(13,27,42,.06);
  --mh-shadow-lg:  0 2px 4px rgba(13,27,42,.06), 0 18px 48px rgba(13,27,42,.12);
  --mh-radius:     14px;

  --mh-ok:         #15803d;
  --mh-warn:       #f59e0b;
  --mh-bad:        #dc2626;

  /* The hero is an always-dark surface in BOTH themes, so its colours must NOT
     be derived from --mh-ink (which inverts). Using --mh-ink here on the course
     site turned the hero near-white in dark mode with near-white text on it. */
  --mh-hero-bg:    #0d1b2a;
  --mh-hero-fg:    #eaf2ff;
  --mh-hero-lead:  #b9cbe4;
  --mh-hero-dim:   #9fb6d4;
  --mh-hero-line:  rgba(255,255,255,.18);
  --mh-hero-chip:  rgba(255,255,255,.10);
  --mh-hero-chip-border: rgba(255,255,255,.16);
  --mh-hero-chip-fg: #cfe0f7;

  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: #1c1826;
  --bs-body-bg: var(--mh-surface-2);
  /* Bootstrap 5.3 reads --bs-link-color-rgb, not --bs-link-color. */
  --bs-link-color: #1a5fd0;
  --bs-link-color-rgb: 26, 95, 208;
  --bs-link-hover-color: var(--mh-brand-hover);
}

[data-bs-theme="dark"] {
  color-scheme: dark;

  --mh-ink:        #ece6f5;
  --mh-brand:      #5b9dff;
  --mh-brand-hover:#7fb2ff;
  --mh-brand-2:    #2dd4bf;
  --mh-mark-2:     #2dd4bf;
  /* #5b9dff is light: white text on it is only 2.7:1. Dark text is 7:1. */
  --mh-on-brand:   #06101f;
  --mh-surface:    #171224;
  --mh-surface-2:  #100c1a;
  --mh-border:     #2b2239;
  --mh-muted:      #a89bc0;
  --mh-shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --mh-shadow-lg:  0 2px 4px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.5);

  --mh-ok:         #34d399;
  --mh-warn:       #fbbf24;
  --mh-bad:        #f87171;

  --mh-hero-bg:    #150f1f;
  /* hero foreground tokens deliberately inherit the light block: the hero is
     dark in both themes, so its text stays light in both. */

  --bs-body-color: #e2dcee;
  --bs-body-bg: var(--mh-surface-2);
  --bs-link-color: var(--mh-brand);
  --bs-link-color-rgb: 91, 157, 255;
  --bs-link-hover-color: var(--mh-brand-hover);
}

body { background: var(--bs-body-bg); }
.text-body-secondary { color: var(--mh-muted) !important; }
.section { padding: 4.5rem 0; }
.section-tight { padding: 3rem 0; }
h1, h2, h3, h4 { letter-spacing: -.02em; }
.lead-narrow { max-width: 46rem; }

/* ---------- chrome ---------- */
.site-nav {
  background: color-mix(in srgb, var(--mh-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--mh-border);
}
.brand-mark {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--mh-brand), var(--mh-mark-2));
  color: var(--mh-on-brand); font-size: 1.05rem;
}
.brand-mark-sm { width: 26px; height: 26px; font-size: .85rem; border-radius: 8px; }
.brand-text { font-weight: 700; letter-spacing: -.01em; color: var(--mh-ink); }
.brand-logo { display: block; width: auto; max-width: 220px; object-fit: contain; }
/* Only one of the two logo files is ever shown; which one follows the theme. */
.brand-logo-dark { display: none; }
[data-bs-theme="dark"] .brand-logo-light { display: none; }
[data-bs-theme="dark"] .brand-logo-dark  { display: block; }

.navbar-nav .nav-link { font-weight: 500; color: var(--mh-muted); }
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover { color: var(--mh-brand); }

.btn-primary {
  /* Bootstrap 5.3 hardcodes --bs-btn-bg on .btn-primary, so setting --bs-primary
     alone does nothing — these are the variables the component actually reads. */
  --bs-btn-color: var(--mh-on-brand);
  --bs-btn-bg: var(--mh-brand);
  --bs-btn-border-color: var(--mh-brand);
  --bs-btn-hover-color: var(--mh-on-brand);
  --bs-btn-hover-bg: var(--mh-brand-hover);
  --bs-btn-hover-border-color: var(--mh-brand-hover);
  --bs-btn-active-color: var(--mh-on-brand);
  --bs-btn-active-bg: var(--mh-brand-hover);
  --bs-btn-active-border-color: var(--mh-brand-hover);
  --bs-btn-disabled-color: var(--mh-on-brand);
  --bs-btn-disabled-bg: var(--mh-brand);
  --bs-btn-disabled-border-color: var(--mh-brand);
}
.badge.text-bg-primary { background-color: var(--mh-brand) !important; color: var(--mh-on-brand) !important; }

.btn-ghost {
  border: 1px solid var(--mh-border);
  background: var(--mh-surface);
  color: var(--bs-body-color);
}
.btn-ghost:hover { background: var(--mh-surface-2); color: var(--mh-brand); }

/* On the hero's dark band the ghost button needs light-on-dark borders in both
   themes, since the band does not invert. */
.hero .btn-ghost {
  background: rgba(255,255,255,.08);
  border-color: var(--mh-hero-chip-border);
  color: var(--mh-hero-fg);
}
.hero .btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }

.site-footer { background: var(--mh-surface); border-top: 1px solid var(--mh-border); }
.footer-link { color: var(--mh-muted); text-decoration: none; }
.footer-link:hover { color: var(--mh-brand); }

/* ---------- surfaces ---------- */
.card, .panel {
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius);
  box-shadow: var(--mh-shadow);
}
.panel { padding: 1.5rem; }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(1100px 460px at 12% -10%, color-mix(in srgb, var(--mh-brand) 26%, transparent), transparent 60%),
    radial-gradient(900px 420px at 88% 0%, color-mix(in srgb, var(--mh-brand-2) 24%, transparent), transparent 60%),
    var(--mh-hero-bg);
  color: var(--mh-hero-fg);
  border-bottom: 1px solid var(--mh-border);
}
.hero h1 { color: #fff; font-weight: 700; line-height: 1.12; }
.hero .lead { color: var(--mh-hero-lead); }
.hero a:not(.btn) { color: var(--mh-hero-fg); }
/* Cards nested inside the hero paint their own themed background, so they must
   NOT inherit the hero's light-on-dark text colour — in light mode that put
   near-white text on a white panel. */
.hero .panel, .hero .card { color: var(--bs-body-color); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .32rem .8rem; border-radius: 999px;
  background: var(--mh-hero-chip); border: 1px solid var(--mh-hero-chip-border);
  color: var(--mh-hero-chip-fg);
}
.hero-stat { border-left: 2px solid var(--mh-hero-line); padding-left: 1rem; }
.hero-stat .n { font-size: 1.7rem; font-weight: 700; line-height: 1; color: #fff; }
.hero-stat .l { font-size: .76rem; color: var(--mh-hero-dim); text-transform: uppercase; letter-spacing: .06em; }
.hero-shot {
  border-radius: var(--mh-radius); max-width: 100%; height: auto;
  border: 1px solid var(--mh-hero-line); box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

/* ---------- solution cards ---------- */
.solution-card {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.4rem; border-radius: var(--mh-radius);
  background: var(--mh-surface); border: 1px solid var(--mh-border);
  box-shadow: var(--mh-shadow); text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.solution-card:hover {
  transform: translateY(-3px); box-shadow: var(--mh-shadow-lg);
  border-color: color-mix(in srgb, var(--accent, var(--mh-brand)) 45%, var(--mh-border));
  color: inherit;
}
.solution-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--mh-ink); }
.solution-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.3rem; color: var(--accent, var(--mh-brand));
  background: color-mix(in srgb, var(--accent, var(--mh-brand)) 14%, transparent);
}
.chip {
  display: inline-block; font-size: .72rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 999px;
  background: var(--mh-surface-2); border: 1px solid var(--mh-border); color: var(--mh-muted);
}
.chip-soft {
  background: color-mix(in srgb, var(--accent, var(--mh-brand)) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--mh-brand)) 28%, transparent);
  /* Accents are author-chosen and do not vary with the theme, so the label is
     darkened on light surfaces and lightened on dark ones — at their raw value
     they land near 3:1 against the tinted chip. */
  color: color-mix(in srgb, var(--accent, var(--mh-brand)) 75%, #000000);
}
[data-bs-theme="dark"] .chip-soft {
  color: color-mix(in srgb, var(--accent, var(--mh-brand)) 65%, #ffffff);
}
.chip-status-development,
.chip-status-soon { border-color: color-mix(in srgb, var(--mh-warn) 45%, transparent); color: var(--mh-warn); }

/* ---------- feature list ---------- */
.feature-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.2rem; flex: 0 0 42px;
  background: color-mix(in srgb, var(--mh-brand) 13%, transparent); color: var(--mh-brand);
}

/* ---------- call-to-action band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--mh-brand), var(--mh-mark-2));
  color: var(--mh-on-brand); border-radius: var(--mh-radius);
}
.cta-band h2 { color: inherit; }
.cta-band .btn-light {
  --bs-btn-color: var(--mh-ink);
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #ffffff;
}

/* ---------- partner strip ---------- */
.partner-strip {
  border: 1px solid var(--mh-border); border-radius: var(--mh-radius);
  background: var(--mh-surface); padding: 1.75rem;
  border-left: 4px solid var(--mh-brand-2);
}

/* ---------- forms ---------- */
.form-control, .form-select { border-color: var(--mh-border); }
.form-control:focus, .form-select:focus {
  border-color: var(--mh-brand);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--mh-brand) 20%, transparent);
}
/* The contact form's honeypot. Hidden from people, left in the DOM for bots.
   `display:none` is skipped by some crawlers, so it is moved off-screen instead. */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .solution-card { transition: none; }
  .solution-card:hover { transform: none; }
}