/* ---------------------------------------------------------------
   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; }
/* Vertical rhythm only. These are also put on `.container` elements, whose own
   side padding must survive — `padding: 4.5rem 0` wiped it and let the row's
   negative gutters overflow the viewport by 12px on phones. */
.section { padding-block: 4.5rem; }
.section-tight { padding-block: 3rem; }

/* Keyboard users get a way past the navigation; invisible until focused. */
.skip-link {
  position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 2000;
  padding: .5rem .9rem; border-radius: 8px;
  background: var(--mh-brand); color: var(--mh-on-brand); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: .75rem; color: var(--mh-on-brand); }
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); white-space: nowrap; }
.brand-text-sm { font-size: 1rem; }
.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, .hero-copy h2 { 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);
}
/* The sticky header would otherwise hide the heading a #fragment link jumps to. */
.anchor-target { scroll-margin-top: 5.5rem; }

.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);
}
/* The brand emblem standing in for a hero image: a soft brand-coloured glow
   behind a circular, transparent-edged cut of the artwork. */
.hero-orb { position: relative; display: grid; place-items: center; padding: 1rem; }
.hero-orb::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--mh-brand) 38%, transparent), transparent 72%),
    radial-gradient(closest-side at 70% 30%, color-mix(in srgb, var(--mh-brand-2) 30%, transparent), transparent 70%);
  filter: blur(28px);
}
.hero-orb img {
  position: relative; width: min(100%, 420px); height: auto; border-radius: 50%;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

/* A large icon standing in for a slide image: a glass tile with a soft glow. */
.hero-tile {
  position: relative; display: grid; place-items: center;
  width: min(100%, 380px); aspect-ratio: 1; margin-inline: auto;
  border-radius: 32px; border: 1px solid var(--mh-hero-chip-border);
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.hero-tile::before {
  content: ""; position: absolute; inset: -12%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mh-brand) 34%, transparent), transparent 72%);
  filter: blur(28px);
}
.hero-tile .bi {
  font-size: 9rem; line-height: 1;
  /* The hero is dark in both themes, so the light-theme brand (chosen to read on
     white) is lifted before it is used as ink here. */
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--mh-brand) 55%, #ffffff),
    color-mix(in srgb, var(--mh-brand-2) 65%, #ffffff));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- hero slider ----------
   Every slide is laid out in the same grid cell so that hero.js can measure
   the incoming slide while it is still invisible and ease the band's height
   to it during the fade. Without the script the cell is as tall as the
   tallest slide, which is the fallback. The fade itself is Bootstrap's. */
.hero-slider .carousel-inner {
  display: grid; overflow: visible;
  transition: height .6s cubic-bezier(.2,.7,.2,1);
}
/* Narrow screens slide sideways (hero.js drops the fade class there), so the
   outgoing and incoming slides must be clipped at the sides — but only the
   sides: `clip` on one axis leaves the image shadow free at the bottom. */
@media (max-width: 991.98px) {
  .hero-slider .carousel-inner { overflow-x: clip; }
}
/* Because every slide stays rendered, the incoming slide's jump to its
   off-screen start position (Bootstrap adds `-next`/`-prev` first, then the
   direction class) would itself be animated — and immediately reversed, so
   the slide never travelled. Stock Bootstrap is spared this only because a
   hidden slide starts from display:none. */
.hero-slider .carousel-item-next:not(.carousel-item-start),
.hero-slider .carousel-item-prev:not(.carousel-item-end) { transition: none; }
/* align-self: grid items stretch to the row by default, which would make every
   slide measure as the tallest one. */
.hero-slider .carousel-item { grid-area: 1 / 1; align-self: start; display: block; margin: 0; }
.hero-slider .carousel-item:not(.active):not(.carousel-item-next):not(.carousel-item-prev) {
  visibility: hidden;    /* keeps hidden slides' links out of the tab order */
}
.hero-slider .carousel-item:is(.active, .carousel-item-next) .hero-copy > * {
  animation: hero-rise .55s cubic-bezier(.2,.7,.2,1) both;
}
.hero-slider .carousel-item:is(.active, .carousel-item-next) .hero-copy > :nth-child(2) { animation-delay: .07s; }
.hero-slider .carousel-item:is(.active, .carousel-item-next) .hero-copy > :nth-child(3) { animation-delay: .14s; }
.hero-slider .carousel-item:is(.active, .carousel-item-next) .hero-copy > :nth-child(4) { animation-delay: .21s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Controls sit under the slide, aligned with the copy, rather than Bootstrap's
   full-height arrows that would overlay the headline. */
.hero-slider .carousel-indicators {
  position: static; margin: 0; display: flex; gap: .5rem; z-index: auto;
}
.hero-slider .carousel-indicators [data-bs-target] {
  width: 28px; height: 4px; margin: 0; border: 0; border-radius: 999px;
  background: var(--mh-hero-chip-fg); opacity: .35;
  transition: opacity .2s ease, width .2s ease;
}
.hero-slider .carousel-indicators .active { opacity: 1; width: 44px; }
.hero-slider-btn {
  width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid var(--mh-hero-chip-border); background: var(--mh-hero-chip);
  color: var(--mh-hero-fg); font-size: 1.05rem;
}
.hero-slider-btn:hover, .hero-slider-btn:focus-visible { background: rgba(255,255,255,.18); color: #fff; }

/* ---------- 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); }
/* The accent is set per card by the admin and does not change with the theme, so
   anything written *in* it is mixed towards the theme's ink: at its raw value a
   pale amber vanishes on white and a slate vanishes on the dark surface. */
.solution-card { --accent-ink: color-mix(in srgb, var(--accent, var(--mh-brand)) 70%, #000000); }
[data-bs-theme="dark"] .solution-card {
  --accent-ink: color-mix(in srgb, var(--accent, var(--mh-brand)) 60%, #ffffff);
}
.solution-more { color: var(--accent-ink); }
.solution-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.3rem; color: var(--accent-ink);
  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 {
  /* Fixed, not --mh-ink: the button stays white in both themes, and --mh-ink
     turns near-white in dark mode — which left "Talk to us" white on white. */
  --bs-btn-color: #14101e;
  --bs-btn-hover-color: #14101e;
  --bs-btn-active-color: #14101e;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-hover-bg: #f1eef8;
  --bs-btn-hover-border-color: #f1eef8;
}

/* ---------- 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; }
  .hero-slider .carousel-item .hero-copy > * { animation: none; }
  .hero-slider .carousel-item, .hero-slider .carousel-inner { transition: none; }
}