/* ConfirmMyMeds marketing site — visual language v2.
   Modeled after lumahealth.io / notablehealth.com / healthgorilla.com:
   full-width alternating color bands, icon-led feature blocks, a simple
   flat hero illustration, card shadows, normal (not suppressed) motion.
   Palette matches public/style.css (the demo app) for continuity.

   IMPORTANT: this intentionally does NOT touch Astra's own `.ast-container`
   class (a prior version did, and it caused double-nested-container
   misalignment between the header and page content). Page content uses its
   own `.cmm-wrap` class instead, and full-bleed bands use Astra's native
   `.alignfull` breakout (works because our body has the
   `.ast-plain-container.ast-no-sidebar` classes — see wp-content/mu-plugins). */

:root {
  /* Fallback before wp-content/mu-plugins/cmm-styles.php's inline script
     runs (or if JS is disabled) — see the .alignfull override below for why
     this exists. */
  --cmm-vw: 100vw;
  --cmm-ink: #1a2233;
  --cmm-muted: #5b6577;
  --cmm-line: #dde2ea;
  --cmm-bg: #f6f7fb;
  --cmm-card: #ffffff;
  --cmm-accent: #2f6fed;
  --cmm-accent-dark: #1d4ed8;
  --cmm-accent-tint: #eaf1ff;
  --cmm-accent-ink: #ffffff;
  --cmm-good: #1a7f4e;
  --cmm-good-bg: #e7f6ee;
  --cmm-warn: #a35a00;
  --cmm-warn-bg: #fff3e0;
  --cmm-bad: #b3261e;
  --cmm-bad-bg: #fdecea;
  --cmm-radius: 12px;
  --cmm-radius-sm: 8px;
  --cmm-shadow: 0 1px 2px rgba(26,34,51,0.04), 0 6px 20px rgba(26,34,51,0.06);
  --cmm-shadow-hover: 0 4px 10px rgba(26,34,51,0.06), 0 14px 32px rgba(26,34,51,0.10);
  --cmm-font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body { font-family: var(--cmm-font); color: var(--cmm-ink); }
a { color: var(--cmm-accent-dark); }
a:hover { color: var(--cmm-accent); }

/* ---------------------------------------------------------------------
   Primary nav — "Request a Demo" is a standalone CTA button, separated
   from the rest of the menu (bin/setup.sh applies the `cmm-nav-cta`
   menu-item class via `wp menu item update --classes=cmm-nav-cta`).
   Deliberately mirrors .cmm-btn / .cmm-btn-primary above (same padding,
   radius, hover lift + shadow) so it reads as the identical button used
   elsewhere on the site (e.g. the Home hero's "Request a Demo"), just
   relocated into the nav. !important overrides Astra's own nav-link
   color/hover, same rationale as the .alignfull override further below —
   a themed <a> needs to beat Astra's own nav-link selector.

   Astra's `.main-header-menu > .menu-item > .menu-link { height: 100% }`
   (equal specificity, so it wins any property we don't touch) otherwise
   stretches this link to the full header-bar height with zero breathing
   room top/bottom — the exact "no margin around the button" look this
   block exists to avoid. `height: auto` restores an intrinsic height so
   the surrounding `justify-content: center` on the parent `<li>` (also
   Astra's, column-direction flex) centers the button with visible space
   above and below, matching other vendors' nav CTA buttons. */
.main-header-menu .menu-item.cmm-nav-cta {
  margin-left: 1.25rem;
}
.main-header-menu .menu-item.cmm-nav-cta > a {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  height: auto !important;
  background: var(--cmm-accent-dark) !important;
  color: var(--cmm-accent-ink) !important;
  padding: 0.75rem 1.5rem !important;
  line-height: 1.2;
  border-radius: var(--cmm-radius-sm);
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.main-header-menu .menu-item.cmm-nav-cta > a:hover {
  background: var(--cmm-accent) !important;
  color: var(--cmm-accent-ink) !important;
  transform: translateY(-1px);
  box-shadow: var(--cmm-shadow);
}

/* Override Astra's own `.alignfull` rule (100vw / calc(-50vw + 50%)), which
   mis-centers full-bleed bands — clipping the left edge of flush-left text —
   on any browser with a classic (space-reserving) scrollbar. --cmm-vw is the
   real, scrollbar-excluding viewport width (set in cmm-styles.php).
   Astra's actual live rule is
   `.ast-plain-container.ast-no-sidebar .entry-content > .alignfull` — 4
   class selectors (specificity 0,4,0), which beats a naive `body` prefix
   (0,3,1: class-count is compared before element-count). Match the same
   class combination plus `!important` so this wins regardless of Astra
   shipping yet another selector variant later. */
body.ast-plain-container.ast-no-sidebar .entry-content > .alignfull,
body.ast-page-builder-template.ast-no-sidebar .entry-content > .alignfull {
  width: var(--cmm-vw) !important;
  max-width: var(--cmm-vw) !important;
  margin-left: calc(-1 * var(--cmm-vw) / 2 + 50%) !important;
  margin-right: calc(-1 * var(--cmm-vw) / 2 + 50%) !important;
}

/* Every marketing Page already opens with its own H1 inside a styled hero
   band (see wp-content/page-content/*.html) — Astra's generic page-title
   header would otherwise print a second, unstyled H1 above it. Scoped to
   `body.page` (WP's Page-singular body class) so it doesn't also blank out
   blog post titles on /blog/, /blog/<slug>/, or /blog/<category>/, which
   have no such built-in hero and rely on this header for their title. */
body.page .entry-header { display: none; }

/* ---------------------------------------------------------------------
   Content width — self-contained, independent of Astra's own container.
   ------------------------------------------------------------------- */
.cmm-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.75rem;
}
@media (max-width: 600px) {
  .cmm-wrap { padding: 0 1.25rem; }
}

/* ---------------------------------------------------------------------
   Full-bleed color bands. Pair `alignfull` (Astra's native breakout,
   requires the section to be a direct child of .entry-content) with one
   of these background modifiers, then put a .cmm-wrap inside for the
   readable-width content.
   ------------------------------------------------------------------- */
.cmm-band { padding: 4rem 0; }
.cmm-band-white { background: var(--cmm-card); }
.cmm-band-tint { background: linear-gradient(180deg, var(--cmm-accent-tint) 0%, #f4f8ff 100%); }
.cmm-band-muted { background: var(--cmm-bg); }
.cmm-band-dark { background: var(--cmm-ink); color: #e7ebf5; }
.cmm-band-dark h2, .cmm-band-dark h3 { color: #fff; }
.cmm-band-dark p { color: #b9c1d4; }
.cmm-band-dark a:not(.cmm-btn) { color: #9fc0ff; }

/* ---------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------- */
.cmm-hero { padding: 3rem 0 2.5rem; }
.cmm-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}
.cmm-hero-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .cmm-hero-grid { grid-template-columns: 1fr; }
  .cmm-hero-art { order: -1; max-width: 280px; margin: 0 auto 1rem; }
}
/* Flush-left kicker, no pill/padding — a pill's internal padding visibly
   staggers the label text from the flush-left H1 directly beneath it. */
.cmm-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cmm-accent-dark);
  margin: 0 0 0.75rem;
}
.cmm-hero h1 {
  font-size: clamp(1.85rem, 4.5vw + 1rem, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}
.cmm-hero .cmm-sub {
  font-size: clamp(1.05rem, 1vw + 0.9rem, 1.2rem);
  line-height: 1.55;
  color: var(--cmm-muted);
  max-width: 56ch;
  margin-bottom: 1.75rem;
}
.cmm-hero-strip {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cmm-line);
  font-size: 0.9rem;
  color: var(--cmm-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.cmm-hero-strip span { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ---------------------------------------------------------------------
   Buttons — normal motion is back: a small lift + shadow on hover.
   ------------------------------------------------------------------- */
.cmm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--cmm-radius-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  margin: 0.25rem 0.4rem 0.25rem 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.cmm-btn-primary { background: var(--cmm-accent-dark); color: var(--cmm-accent-ink); }
.cmm-btn-primary:hover { background: var(--cmm-accent); color: var(--cmm-accent-ink); transform: translateY(-1px); box-shadow: var(--cmm-shadow); }
.cmm-btn-secondary { background: var(--cmm-card); color: var(--cmm-accent-dark); border-color: var(--cmm-line); }
.cmm-btn-secondary:hover { border-color: var(--cmm-accent); transform: translateY(-1px); box-shadow: var(--cmm-shadow); }
.cmm-btn-large { padding: 0.95rem 1.9rem; font-size: 1.05rem; }

/* ---------------------------------------------------------------------
   Pricing page — Monthly/Yearly toggle (pricing.html)
   ------------------------------------------------------------------- */
.cmm-pricing-toggle {
  display: inline-flex;
  background: var(--cmm-bg);
  border-radius: 999px;
  padding: 0.3rem;
  gap: 0.2rem;
  box-shadow: var(--cmm-shadow);
}
.cmm-toggle-btn {
  border: none;
  background: transparent;
  color: var(--cmm-accent-dark);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.65rem 1.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.cmm-toggle-btn:hover:not(.is-active) { background: rgba(255,255,255,0.6); }
.cmm-toggle-btn.is-active {
  background: var(--cmm-accent-dark);
  color: #fff;
}

/* ---------------------------------------------------------------------
   Section rhythm (non-banded sections)
   ------------------------------------------------------------------- */
/* Longhand, not `padding: 3.5rem 0` — this class is combined with .cmm-wrap
   (`class="cmm-wrap cmm-section"`) on most sections, and a shorthand here
   would win the equal-specificity tie by source order and silently zero out
   .cmm-wrap's horizontal padding, pushing content flush against the
   viewport edge (found via the pricing-page "A clinic near a tier
   boundary" left-edge clipping report). */
.cmm-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.cmm-section h2 { font-size: clamp(1.5rem, 2vw + 1rem, 1.85rem); letter-spacing: -0.01em; margin: 0 auto 1rem; max-width: 36ch; }
.cmm-section p { color: var(--cmm-ink); max-width: 70ch; line-height: 1.6; }
.cmm-section-head { max-width: 68ch; margin-bottom: 2rem; }

/* ---------------------------------------------------------------------
   Icons
   ------------------------------------------------------------------- */
.cmm-icon {
  width: 1.35rem;
  height: 1.35rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.cmm-icon-badge {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--cmm-accent-tint);
  color: var(--cmm-accent-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.cmm-icon-badge .cmm-icon { width: 1.5rem; height: 1.5rem; }
.cmm-icon-badge-lg { width: 3.5rem; height: 3.5rem; }

/* ---------------------------------------------------------------------
   Cards — shadow instead of flat hairline, gentle hover lift.
   ------------------------------------------------------------------- */
.cmm-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }
.cmm-stat-card {
  background: var(--cmm-card);
  border-radius: var(--cmm-radius);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--cmm-shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cmm-stat-card:hover { box-shadow: var(--cmm-shadow-hover); transform: translateY(-2px); }
.cmm-stat-card .cmm-stat-number { font-size: 2.2rem; font-weight: 700; color: var(--cmm-accent-dark); display: block; margin-bottom: 0.35rem; letter-spacing: -0.01em; }
.cmm-stat-card p { font-size: 0.95rem; color: var(--cmm-muted); margin: 0; }
.cmm-stat-card .cmm-source { display: block; margin-top: 0.6rem; font-size: 0.8rem; }

.cmm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
@media (max-width: 900px) { .cmm-steps { grid-template-columns: 1fr; } }
.cmm-step {
  background: var(--cmm-card);
  border-radius: var(--cmm-radius);
  padding: 1.75rem 1.6rem;
  box-shadow: var(--cmm-shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cmm-step:hover { box-shadow: var(--cmm-shadow-hover); transform: translateY(-2px); }
.cmm-step-num {
  width: 2.25rem; height: 2.25rem;
  border-radius: 999px;
  background: var(--cmm-accent-dark);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.cmm-step h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.cmm-step p { margin: 0; color: var(--cmm-muted); }

.cmm-do-dont { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.cmm-do-dont > div { background: var(--cmm-card); border-radius: var(--cmm-radius); padding: 1.6rem 1.7rem; box-shadow: var(--cmm-shadow); }
.cmm-do-dont h3 { margin-top: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; }
.cmm-do-dont ul { margin: 0; padding-left: 0; list-style: none; }
.cmm-do-dont li { margin-bottom: 0.6rem; color: var(--cmm-ink); padding-left: 1.6rem; position: relative; }
.cmm-do-dont li::before {
  content: "";
  position: absolute; left: 0; top: 0.4em;
  width: 0.9rem; height: 0.9rem;
  border-radius: 999px;
  background: var(--cmm-accent-tint);
}

.cmm-role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.cmm-role-grid > div {
  border-radius: var(--cmm-radius);
  padding: 1.6rem 1.6rem;
  background: var(--cmm-card);
  box-shadow: var(--cmm-shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cmm-role-grid > div:hover { box-shadow: var(--cmm-shadow-hover); transform: translateY(-2px); }
.cmm-role-grid h3 { margin-top: 0; font-size: 1.05rem; color: var(--cmm-ink); }

/* Proof / standards bar */
.cmm-proof-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.cmm-proof-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--cmm-card);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cmm-ink);
  box-shadow: var(--cmm-shadow);
}
.cmm-proof-badge .cmm-icon { width: 1.1rem; height: 1.1rem; color: var(--cmm-accent-dark); }

/* Closing CTA band */
.cmm-cta-band { text-align: center; }
.cmm-cta-band p { max-width: 60ch; margin: 0 auto 1.5rem; }
.cmm-cta-band h2 { margin: 0 auto 1rem; }

/* Blog post content (core Gutenberg blocks, e.g. Blog articles/*.html) —
   Astra provides layout/width for these, this just aligns button color with
   the rest of the site's palette instead of leaving core-block defaults. */
.entry-content .wp-block-button__link {
  background: var(--cmm-accent-dark);
  border-radius: var(--cmm-radius-sm);
  font-weight: 600;
}
.entry-content .wp-block-button__link:hover { background: var(--cmm-accent); }
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--cmm-accent-dark);
  border: 1px solid var(--cmm-line);
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--cmm-accent);
}

/* In-page jump nav (used on About, which folds in Security & Specialties
   content that used to be separate top-level nav items). */
.cmm-jumpnav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.75rem; }
.cmm-jumpnav a { font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.cmm-jumpnav a:hover { text-decoration: underline; }

/* Offsets an anchor-linked section so Astra's sticky header doesn't cover
   the heading when jumped to directly. */
.cmm-anchor-target { scroll-margin-top: 90px; }

/* Product-demo video placeholder (SDD §4.8) — swap the .cmm-video-frame div
   in wp-content/page-content/home.html for the chosen provider's embed
   <iframe> once a Wistia/Vimeo/YouTube account exists (§11 Q2 still open). */
.cmm-video-frame {
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: var(--cmm-radius);
  background: var(--cmm-card);
  border: 1.5px dashed var(--cmm-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--cmm-muted);
}
.cmm-video-play {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--cmm-accent-dark);
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}
.cmm-video-frame-label { font-size: 0.95rem; font-weight: 600; }

/* Self-hosted product-demo video (temporary — see the comment above
   .cmm-video-player in wp-content/page-content/home.html; SDD §4.8/§11 Q2
   still recommends moving this to Wistia/Vimeo). Same 16:9/max-width box as
   .cmm-video-frame above so swapping between the two never shifts layout. */
.cmm-video-player {
  display: block;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: var(--cmm-radius);
  background: #000;
  box-shadow: var(--cmm-shadow);
}

/* Gated demo box (shortcode output) */
.cmm-gate { border-radius: var(--cmm-radius); padding: 1.75rem 1.9rem; background: var(--cmm-card); box-shadow: var(--cmm-shadow); margin: 1.5rem 0; }
.cmm-gate-pending { background: var(--cmm-warn-bg); }
.cmm-gate-rejected { background: var(--cmm-bad-bg); }
.cmm-gate-approved { background: var(--cmm-good-bg); }

/* Objection / FAQ blocks */
.cmm-objection { margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--cmm-line); }
.cmm-objection:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.cmm-objection h3 { font-size: 1.05rem; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.5rem; }
.cmm-objection p { color: var(--cmm-muted); margin: 0; max-width: 78ch; }

blockquote { border-left: 3px solid var(--cmm-accent-dark); padding-left: 1.1rem; color: var(--cmm-muted); margin: 1.25rem 0; font-size: 1.05rem; }

/* Lead form */
.cmm-lead-form { max-width: 640px; }
.cmm-lead-form input[type="text"],
.cmm-lead-form input[type="email"],
.cmm-lead-form textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--cmm-line);
  border-radius: var(--cmm-radius-sm);
  font-family: inherit;
  font-size: 1rem;
  margin-top: 0.3rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cmm-lead-form input:focus, .cmm-lead-form textarea:focus {
  outline: none;
  border-color: var(--cmm-accent);
  box-shadow: 0 0 0 3px var(--cmm-accent-tint);
}
.cmm-lead-form label { font-weight: 600; font-size: 0.92rem; }

/* Astra's footer-builder region sits outside .entry-content (my alignfull
   sections never touch it), and its own row is explicitly classed
   "ast-builder-grid-row-mobile-full" — edge-to-edge on mobile with no side
   padding of its own. Give the copyright text the same breathing room as
   the rest of the page. */
.ast-footer-copyright {
  padding: 0 1.75rem;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .ast-footer-copyright { padding: 0 1.25rem; }
}