/* ══════════════════════════════════════════════════════════════
   HerMap shared design system
   Source of truth: HERMAP_WEB_DESIGN_SYSTEM_V2.md
   Shared across all public pages. Do not fork per-page copies of
   these tokens/classes — add to this file instead.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Brand colors */
  --hermap-purple: #492485;
  --hermap-purple-dark: #24123D;
  --hermap-blue: #2098D1;
  --hermap-coral: #F24A37;
  --hermap-teal: #087C7A;

  --hermap-cream: #FBF8F2;
  --hermap-lilac: #F5F1FA;
  --hermap-white: #FFFFFF;

  --hermap-text: #2D2545;
  --hermap-muted: #6F687D;
  --hermap-border: #E5E0EA;
  --hermap-surface: #FAF9FC;

  --hermap-purple-soft: #F3EDFA;
  --hermap-blue-soft: #EAF6FC;
  --hermap-coral-soft: #FFF0ED;
  --hermap-teal-soft: #E8F6F4;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 4px 16px rgba(36, 18, 61, 0.06);
  --shadow-md: 0 8px 28px rgba(36, 18, 61, 0.08);

  /* Layout */
  --page-max: 1320px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

/* ── Base ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body.hm-page {
  margin: 0;
  font-family: 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--hermap-text);
  background: var(--hermap-cream);
  -webkit-font-smoothing: antialiased;
}

.hm-page a { color: inherit; text-decoration: none; }
.hm-page ul { list-style: none; margin: 0; padding: 0; }
.hm-page img { max-width: 100%; display: block; }

.hm-container {
  width: min(var(--page-max), calc(100% - 96px));
  margin-inline: auto;
}
@media (max-width: 640px) {
  .hm-container { width: calc(100% - 40px); }
}

/* ── Typography ───────────────────────────────────────────────── */

.hm-display { font-size: clamp(34px, 5vw, 58px); font-weight: 700; line-height: 1.08; color: var(--hermap-purple-dark); }
.hm-h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1.12; color: var(--hermap-purple-dark); }
.hm-h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.18; color: var(--hermap-purple-dark); }
.hm-h3 { font-size: 23px; font-weight: 700; line-height: 1.2; color: var(--hermap-purple-dark); }
.hm-h4 { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--hermap-text); }
.hm-lead { font-size: 18px; line-height: 1.55; color: var(--hermap-muted); }
.hm-body { font-size: 16px; line-height: 1.5; color: var(--hermap-text); }
.hm-small { font-size: 15px; line-height: 1.5; color: var(--hermap-muted); }
.hm-label { font-size: 13px; font-weight: 600; line-height: 1.2; }
.hm-micro { font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 0.03em; }
.hm-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hermap-purple); }

/* ── Header ───────────────────────────────────────────────────── */

.hm-header { background: #fff; border-bottom: 1px solid var(--hermap-border); position: sticky; top: 0; z-index: 50; }
.hm-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 84px; }

/* Logo lockup target: ~190-230px total width per the design system doc (section 5).
   Icon + wordmark were previously sized to read weaker than the nav/buttons next
   to them — bumped both up together.
   `a.hm-logo` (not bare `.hm-logo`) is deliberate: `.hm-page a { color: inherit }`
   above is class+element specificity, which silently beat a single-class
   `.hm-logo` rule — "Her" was rendering as inherited body text color
   (--hermap-text, #2D2545) instead of the intended purple the whole time. The
   two dark tones are close enough that this went unnoticed until someone
   compared it against the icon's actual purple. Same trap as the button fix
   below — always pair `.hm-logo` with its tag. */
.hm-logo-icon { height: 46px; width: auto; display: block; }
a.hm-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 800; color: var(--hermap-purple); }
/* "Map" was briefly --hermap-coral for a two-tone mark; reverted — read as an
   unrelated black+red clash rather than a deliberate accent once the color-bug
   above was also in play. Whole wordmark is one solid brand purple now. */
a.hm-logo .hm-logo-word span { color: var(--hermap-purple); }
/* Trademark application pending (2026-09-14) — marked on the header wordmark
   only, not every other place "HerMap" appears in nav/body text, matching
   how brands typically handle a ™ notice. */
.hm-tm { font-size: 0.4em; font-weight: 700; vertical-align: super; margin-left: 1px; opacity: 0.75; }

/* Footer sits on a dark background — swap the logo mark to a single flat light
   tone via the CSS variables its <symbol> reads (see the shared
   <symbol id="hermap-logo-mark"> defined once per page, right after <body>).
   Do not reintroduce a second inline <style>/class-name copy of the logo —
   that caused the two instances to fight over the same class names
   document-wide. */
.hm-logo-icon--footer { --logo-c1: #FBF8F2; --logo-c2: #FBF8F2; --logo-c3: #FBF8F2; --logo-window: rgba(251,248,242,0.3); }

.hm-nav { display: flex; align-items: center; gap: var(--space-8); }
.hm-nav a { font-size: 14.5px; font-weight: 600; color: var(--hermap-text); padding-bottom: 4px; border-bottom: 2px solid transparent; }
.hm-nav a:hover { color: var(--hermap-purple); }
.hm-nav a.is-active { color: var(--hermap-purple); border-bottom-color: var(--hermap-purple); }

.hm-header-actions { display: flex; align-items: center; gap: var(--space-4); }
.hm-nav-toggle { display: none; }

@media (max-width: 860px) {
  .hm-nav { display: none; }
  .hm-header-inner { height: 68px; }
}

/* ── Footer ───────────────────────────────────────────────────── */

.hm-footer { background: var(--hermap-purple-dark); color: rgba(255,255,255,0.72); padding: var(--space-8) 0; }
.hm-footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.hm-footer .hm-logo { color: #fff; }
.hm-footer .hm-logo .hm-logo-word span { color: #fff; }
.hm-footer a { color: rgba(255,255,255,0.72); }
.hm-footer a:hover { color: #fff; }
/* These read as quick-nav links, not fine print — sized closer to the header
   nav (14.5px) rather than a footer-legalese size. */
.hm-footer-links { display: flex; gap: var(--space-6); flex-wrap: wrap; font-size: 15px; font-weight: 600; }

.hm-footer-brand { display: flex; flex-direction: column; gap: 6px; }
.hm-footer-tagline { margin: 0; font-size: 13px; color: rgba(255,255,255,0.6); }
.hm-footer-legal { margin: 0; font-size: 11.5px; color: rgba(255,255,255,0.45); }

/* ── Buttons ──────────────────────────────────────────────────── */

.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 26px; border-radius: 9px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.hm-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(73, 36, 133, 0.22); }

/* Compound `.hm-btn.hm-btn-*` selectors (not just `.hm-btn-*`) are deliberate:
   the base reset `.hm-page a { color: inherit }` has specificity (class+element)
   that beats a single class selector, which silently made every button's text
   fall back to the inherited body text color instead of white/purple. Two
   classes together outrank it. Don't drop back to a single-class selector here. */
.hm-btn.hm-btn-primary { background: var(--hermap-purple); border-color: var(--hermap-purple); color: #fff; }
.hm-btn.hm-btn-primary:hover { background: var(--hermap-purple-dark); border-color: var(--hermap-purple-dark); color: #fff; }

.hm-btn.hm-btn-coral { background: var(--hermap-coral); border-color: var(--hermap-coral); color: #fff; }
.hm-btn.hm-btn-coral:hover { background: #D8402F; border-color: #D8402F; color: #fff; }

.hm-btn.hm-btn-secondary { background: #fff; border-color: var(--hermap-purple); color: var(--hermap-purple); }
.hm-btn.hm-btn-secondary:hover { background: var(--hermap-purple-soft); color: var(--hermap-purple); }

.hm-btn.hm-btn-text { height: auto; padding: 0; border: none; background: none; color: var(--hermap-purple); font-weight: 600; }
.hm-btn.hm-btn-text:hover { color: var(--hermap-purple-dark); text-decoration: underline; }

.hm-btn-block { width: 100%; }

/* ── Inputs ───────────────────────────────────────────────────── */

.hm-label-field { display: block; font-size: 13px; font-weight: 700; color: var(--hermap-purple-dark); margin-bottom: 6px; }
.hm-input, .hm-select {
  width: 100%; height: 47px; padding: 0 14px; font-family: inherit; font-size: 15px; color: var(--hermap-text);
  background: #fff; border: 1px solid var(--hermap-border); border-radius: 9px;
}
.hm-input:focus, .hm-select:focus {
  outline: none; border-color: var(--hermap-purple); box-shadow: 0 0 0 3px rgba(73, 36, 133, 0.12);
}
.hm-input::placeholder { color: var(--hermap-muted); }

/* ── Cards ────────────────────────────────────────────────────── */

.hm-card { background: #fff; border: 1px solid var(--hermap-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); }
.hm-card-soft { background: var(--hermap-lilac); border: none; border-radius: var(--radius-lg); padding: var(--space-6); }
.hm-card-selected { border-color: var(--hermap-purple); background: var(--hermap-purple-soft); box-shadow: none; }

/* ── Chips / Badges ───────────────────────────────────────────── */

.hm-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
  font-size: 13.5px; font-weight: 500; color: var(--hermap-text);
  background: var(--hermap-surface); border: 1px solid var(--hermap-border); border-radius: var(--radius-pill);
}

.hm-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; font-size: 13px; font-weight: 600; border-radius: var(--radius-pill); }
.hm-badge-public { background: var(--hermap-purple-soft); color: var(--hermap-purple); }
.hm-badge-confirmed { background: var(--hermap-blue-soft); color: #146690; }
.hm-badge-verified { background: var(--hermap-teal-soft); color: var(--hermap-teal); }

/* ── Badge strip ──────────────────────────────────────────────── */
/* A horizontal row of several identity/attribute chips, sitting as its own
   banner directly under a hero — for when a business has multiple factual
   attributes worth surfacing at once (not for single feature chips inline in
   a card; use .hm-chip for that). */
.hm-badge-strip { background: #fff; border-bottom: 1px solid var(--hermap-border); padding: var(--space-4) 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hm-badge-strip .hm-chip { background: var(--hermap-surface); }

/* ── Info card: dark header bar + icon/label/value rows ──────────────────── */
.hm-info-card { background: #fff; border: 1px solid var(--hermap-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.hm-info-card-header { background: var(--hermap-purple-dark); color: #fff; padding: 13px 18px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.hm-info-row { padding: 14px 18px; border-bottom: 1px solid var(--hermap-border); display: flex; align-items: flex-start; gap: 12px; font-size: 14px; }
.hm-info-row:last-child { border-bottom: none; }
.hm-info-row .hm-info-icon { flex-shrink: 0; margin-top: 1px; color: var(--hermap-purple); }
.hm-info-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hermap-muted); margin-bottom: 3px; }
.hm-info-value { color: var(--hermap-text); line-height: 1.5; }
.hm-info-value a { color: var(--hermap-purple); font-weight: 600; }
.hm-info-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; }

/* ── Sidebar CTA card ─────────────────────────────────────────────────────── */
.hm-cta-card { background: var(--hermap-coral); border-radius: var(--radius-lg); padding: 22px 20px; text-align: center; color: #fff; }
.hm-cta-card .hm-cta-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.hm-cta-card .hm-cta-sub { font-size: 13.5px; opacity: 0.92; margin-bottom: 18px; line-height: 1.5; }
.hm-cta-card .hm-btn { display: flex; width: 100%; margin-bottom: 10px; }
.hm-cta-card .hm-btn:last-child { margin-bottom: 0; }
.hm-cta-card .hm-btn.hm-btn-secondary { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); color: #fff; }
.hm-cta-card .hm-btn.hm-btn-secondary:hover { background: rgba(255,255,255,0.28); }

/* ── Icon circle ──────────────────────────────────────────────── */

.hm-icon-circle {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--hermap-purple-soft); color: var(--hermap-purple); flex-shrink: 0;
}
.hm-icon-circle--lg { width: 56px; height: 56px; }
.hm-icon-circle--sm { width: 32px; height: 32px; }
.hm-icon-circle--coral { background: var(--hermap-coral-soft); color: var(--hermap-coral); }
.hm-icon-circle--teal { background: var(--hermap-teal-soft); color: var(--hermap-teal); }
.hm-icon-circle--blue { background: var(--hermap-blue-soft); color: var(--hermap-blue); }

/* ── Section rhythm ───────────────────────────────────────────── */

.hm-section { padding: var(--space-20) 0; }
.hm-section--tight { padding: var(--space-16) 0; }
.hm-section-head { max-width: 620px; margin: 0 auto var(--space-10); text-align: center; }
.hm-section-head .hm-h2 { margin: var(--space-3) 0 var(--space-3); }
.hm-section-head .hm-lead { margin: 0; }

.hm-band-cream { background: var(--hermap-cream); }
.hm-band-lilac { background: var(--hermap-lilac); }
.hm-band-white { background: #fff; }
.hm-band-ink { background: var(--hermap-purple-dark); color: #fff; }
.hm-band-ink .hm-h2, .hm-band-ink .hm-eyebrow { color: #fff; }
.hm-band-ink .hm-lead { color: rgba(255,255,255,0.72); }

@media (max-width: 640px) {
  .hm-section { padding: var(--space-12) 0; }
}