/*
 * Mercury Components v1.0
 *
 * Shared Mercury marketing component CSS.
 *
 * Load order on every Mercury page (matters for cascade):
 *   1. /css/hello_brand_tokens.css          (parent tokens)
 *   2. /css/mercury_brand_tokens.css        (Mercury tokens, override parent)
 *   3. /css/mercury_components.css          (this file — consumes both)
 *
 * Consumers:
 *   - public_html/pages/mercury.html
 *   - public_html/pages/mercury_pricing.html
 *   - public_html/templates/mercury_page_template.html
 *   - public_html/brand/mercury_brand_style_guide.html (live previews)
 *
 * Rules of engagement:
 *   - All values consume tokens from mercury_brand_tokens.css.
 *     Never hardcode a value here that already has a token.
 *   - New shared component? Do not add it here without approval per
 *     docs/standards/rules/component-approval.mdc.
 *   - Page-specific CSS (dashboards, tier grids, case-study blocks,
 *     etc.) stays on the page. Only move it here after it is used
 *     by ≥2 pages and has been approved as a shared primitive.
 *
 * Canonical human-readable contract:
 *   public_html/brand/mercury_brand_style_guide.html
 */

/* ------------------------------------------------------------------ */
/*  Page container                                                    */
/* ------------------------------------------------------------------ */

.container {
  max-width: var(--home-content-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------------------ */
/*  Badges (.m-badge)                                                 */
/*    --cyan: on light surfaces                                       */
/*    --white: on dark hero / CTA surfaces                            */
/* ------------------------------------------------------------------ */

.m-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.m-badge--cyan {
  background: var(--mercury-primary-subtle);
  color: var(--mercury-primary-active);
}
.m-badge--white {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

/* ------------------------------------------------------------------ */
/*  Section heading (.m-h2) + lead (.m-lead)                          */
/* ------------------------------------------------------------------ */

.m-h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  max-width: var(--mercury-h2-max);
}
.m-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--mercury-text-secondary);
  max-width: var(--mercury-lead-max);
}

/* ------------------------------------------------------------------ */
/*  Section header group (.m-section-header)                          */
/*    --center: centered alignment (replaces inline style="")         */
/* ------------------------------------------------------------------ */

.m-section-header {
  margin-bottom: 48px;
}
.m-section-header--center {
  text-align: center;
  max-width: var(--mercury-h2-max);
  margin-left: auto;
  margin-right: auto;
}
.m-section-header--center .m-lead {
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------ */
/*  Section wrapper (.m-section)                                      */
/*    --tint: mercury-surface-tint background                         */
/*    --white: mercury-surface background                             */
/* ------------------------------------------------------------------ */

.m-section { padding: 80px 24px; }
.m-section--tint { background: var(--mercury-surface-tint); }
.m-section--white { background: var(--mercury-surface); }

/* ------------------------------------------------------------------ */
/*  Hero (.mercury-hero)                                              */
/* ------------------------------------------------------------------ */

.mercury-hero {
  background: var(--mercury-hero-gradient);
  padding: 140px 24px 80px;
  color: #ffffff;
}
.mercury-hero h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  max-width: var(--mercury-hero-h1-max);
}
.mercury-hero .hero-lead {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: var(--mercury-hero-lead-max);
  margin-bottom: 36px;
}

/* ------------------------------------------------------------------ */
/*  Hero CTA row (.hero-ctas)                                         */
/* ------------------------------------------------------------------ */

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 48px;
}

/* ------------------------------------------------------------------ */
/*  Buttons (.btn-mercury)                                            */
/*    --primary:    white on dark hero                                */
/*    --ghost:      outline on dark hero                              */
/*    --cyan:       primary cyan on light surfaces                    */
/*    --dark:       darker cyan fill                                  */
/* ------------------------------------------------------------------ */

.btn-mercury {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  min-height: 44px;
  transition: background 0.2s, box-shadow 0.2s;
  border: none;
  cursor: pointer;
}
.btn-mercury--primary {
  background: #ffffff;
  color: var(--mercury-primary-deep);
}
.btn-mercury--primary:hover { background: var(--mercury-primary-subtle); }
.btn-mercury--ghost {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.btn-mercury--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}
.btn-mercury--cyan {
  background: var(--mercury-primary);
  color: #ffffff;
}
.btn-mercury--cyan:hover { background: var(--mercury-primary-hover); }
/* --dark: brand-canonical dark secondary button. #222222 is the Hello
   parent brand's secondary-button color (see project.mdc → "Secondary
   buttons: #222222 background"). Candidate for a parent-brand token
   (`--btn-dark-bg`) — pending approval per component-approval.mdc. */
.btn-mercury--dark {
  background: #222222;
  color: #ffffff;
}
.btn-mercury--dark:hover { background: var(--mercury-primary-active); }

/* ------------------------------------------------------------------ */
/*  Trust pills (.hero-trust + .hero-trust-pill)                      */
/* ------------------------------------------------------------------ */

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-trust-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}

/* ------------------------------------------------------------------ */
/*  Breadcrumb (.m-breadcrumb)                                        */
/* ------------------------------------------------------------------ */

.m-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 20px;
}
.m-breadcrumb a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.15s;
}
.m-breadcrumb a:hover { color: rgba(255, 255, 255, 0.85); }
.m-breadcrumb-sep { color: rgba(255, 255, 255, 0.3); font-size: 11px; }
.m-breadcrumb-current { color: rgba(255, 255, 255, 0.8); }

/* ------------------------------------------------------------------ */
/*  Mercury CTA band (.mercury-cta)                                   */
/* ------------------------------------------------------------------ */

.mercury-cta {
  background: linear-gradient(135deg, #0c4a6e 0%, #164e63 50%, #134e4a 100%);
  padding: 80px 24px;
  text-align: center;
  color: #ffffff;
}
.mercury-cta h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 16px;
}
.mercury-cta p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.8);
  max-width: var(--mercury-lead-narrow-max);
  margin: 0 auto 32px;
  line-height: 1.6;
}
.mercury-cta .hero-ctas { justify-content: center; }
.mercury-cta-trust {
  margin-top: 28px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ */
/*  FAQ component — Mercury theme overrides                            */
/*                                                                     */
/*  The FAQ component anatomy (.faq-section, .faq-header, .faq-list,  */
/*  .faq-item, .faq-question, .faq-answer) is owned by                 */
/*  /js/components.js (shared across Hello + Mercury pages). When a    */
/*  page sets <body data-mercury-theme>, these rules re-skin the       */
/*  shared component for the Mercury surface (dark cyan background,    */
/*  white heading, cyan-subtle lede + answer hover colors).            */
/*                                                                     */
/*  Why these live here, not in components.js:                         */
/*  - This is a THEME concern, not shared-component anatomy            */
/*  - Loading via <link> (this file) is more cascade-predictable than  */
/*    a JS-injected <style>                                            */
/*  - Future refactors of components.js cannot accidentally erase      */
/*    these overrides                                                  */
/* ------------------------------------------------------------------ */

body[data-mercury-theme] .faq-section {
  background: #0c4a6e;
}
body[data-mercury-theme] .faq-top-strip {
  background: var(--mercury-primary, #0891b2);
}
body[data-mercury-theme] .faq-header h2 {
  color: #ffffff;
}
body[data-mercury-theme] .faq-header p {
  color: #cffafe;
}
body[data-mercury-theme] .faq-question:hover h3 {
  color: var(--mercury-primary-muted, #67e8f9);
}
body[data-mercury-theme] .faq-question:hover .faq-icon svg {
  stroke: var(--mercury-primary-muted, #67e8f9);
}
body[data-mercury-theme] .faq-answer-inner a {
  color: var(--mercury-primary-muted, #67e8f9);
}
body[data-mercury-theme] .faq-answer-inner a:hover {
  color: var(--mercury-primary-subtle, #cffafe);
}

/* ------------------------------------------------------------------ */
/*  Responsive overrides for shared components                         */
/*    Page-specific responsive rules (.rp-grid, .dashboard-*, etc.)   */
/*    stay on their page's own <style> block.                         */
/* ------------------------------------------------------------------ */

@media (min-width: 768px) {
  .mercury-hero h1 { font-size: 44px; }
  .m-h2 { font-size: 32px; }
}

@media (min-width: 1024px) {
  .mercury-hero { padding: 160px 24px 100px; }
  .mercury-hero h1 { font-size: 52px; }
  .m-h2 { font-size: 36px; }
  .m-section { padding: 100px 24px; }
  .mercury-cta { padding: 100px 24px; }
  .mercury-cta h2 { font-size: 36px; }
}