/**
 * Shared Marketing Site Foundation
 * Applies to: COAChain.net, DPS.io, COAScan.net marketing websites
 * Scope: Homepage + public inner/content pages only
 * Excludes: React applications, dashboards, account/admin interfaces
 *
 * IMPORTANT:
 * - This file intentionally contains NO brand color styles.
 * - Keep brand colors, backgrounds, borders, shadows, logos, and imagery
 *   in each site's separate brand stylesheet.
 * - This file is the shared source of truth for typography, type scale,
 *   line-height, letter-spacing, content widths, and core page spacing.
 */

:root {
  /* Typeface */
  --marketing-font-sans: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Base type */
  --marketing-body-size: 1rem;
  --marketing-body-line-height: 1.6;
  --marketing-content-line-height: 1.7;

  /* Hero */
  --marketing-hero-h1-size: clamp(1.45rem, 1.78vw, 1.82rem);
  --marketing-hero-h1-line-height: 1.15;
  --marketing-hero-h1-letter-spacing: 0.012em;
  --marketing-hero-h1-weight: 700;

  --marketing-hero-lead-size: clamp(1rem, 1.3vw, 1.3rem);
  --marketing-hero-lead-line-height: 1.45;
  --marketing-hero-lead-weight: 700;

  --marketing-hero-subtitle-size: clamp(1.35rem, 2vw, 1.95rem);
  --marketing-hero-subtitle-line-height: 1.2;
  --marketing-hero-subtitle-letter-spacing: 0.01em;
  --marketing-hero-subtitle-weight: 800;

  /* Eyebrows / section labels */
  --marketing-eyebrow-size: 0.7rem;
  --marketing-eyebrow-line-height: 1.4;
  --marketing-eyebrow-letter-spacing: 0.16em;
  --marketing-eyebrow-weight: 800;

  /* Section headings */
  --marketing-h2-size: clamp(1.65rem, 2.15vw, 2.2rem);
  --marketing-h2-line-height: 1.16;
  --marketing-h2-letter-spacing: 0.005em;
  --marketing-h2-weight: 700;

  --marketing-h3-size: 1.06rem;
  --marketing-h3-line-height: 1.3;
  --marketing-h3-letter-spacing: 0;
  --marketing-h3-weight: 700;

  /* Supporting copy */
  --marketing-lead-size: clamp(0.98rem, 1.15vw, 1.08rem);
  --marketing-lead-line-height: 1.7;
  --marketing-small-size: 0.95rem;
  --marketing-small-line-height: 1.7;

  /* Navigation / utility type */
  --marketing-nav-size: 0.87rem;
  --marketing-nav-line-height: 1.35;
  --marketing-nav-letter-spacing: 0;

  --marketing-nav-label-size: 0.76rem;
  --marketing-nav-label-line-height: 1.35;
  --marketing-nav-label-letter-spacing: 0.15em;
  --marketing-nav-label-weight: 800;

  --marketing-account-size: 0.76rem;
  --marketing-account-letter-spacing: 0.01em;
  --marketing-account-weight: 650;

  --marketing-breadcrumb-size: 0.77rem;
  --marketing-breadcrumb-line-height: 1.45;

  /* Buttons */
  --marketing-button-size: 0.78rem;
  --marketing-button-line-height: 1.2;
  --marketing-button-letter-spacing: 0.1em;
  --marketing-button-weight: 800;

  /* Layout rhythm */
  --marketing-content-max: 1180px;
  --marketing-reading-max: 760px;
  --marketing-heading-max: 800px;
  --marketing-section-block: 88px;
  --marketing-section-block-compact: 76px;
  --marketing-section-inline: 24px;
}

/* Reset / document defaults */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--marketing-font-sans);
  font-size: var(--marketing-body-size);
  line-height: var(--marketing-body-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
}

/* Shared content container */
.marketing-container,
.container {
  width: min(var(--marketing-content-max), 100%);
  margin-inline: auto;
}

/* Shared section rhythm */
.marketing-section,
.section {
  position: relative;
  padding: var(--marketing-section-block) var(--marketing-section-inline);
}

.marketing-section.is-compact,
.section.compact {
  padding-block: var(--marketing-section-block-compact);
}

/* Hero typography */
.marketing-hero h1,
.hero h1,
.hero-title {
  margin: 0 0 16px;
  max-width: 800px;
  font-family: var(--marketing-font-sans);
  font-size: var(--marketing-hero-h1-size);
  line-height: var(--marketing-hero-h1-line-height);
  letter-spacing: var(--marketing-hero-h1-letter-spacing);
  font-weight: var(--marketing-hero-h1-weight);
  text-wrap: balance;
}

.marketing-hero-lead,
.hero-lead,
.hero-intro {
  max-width: 660px;
  margin: 20px 0 0;
  font-size: var(--marketing-hero-lead-size);
  line-height: var(--marketing-hero-lead-line-height);
  font-weight: var(--marketing-hero-lead-weight);
}

.marketing-hero-subtitle,
.hero-subtitle {
  margin: 0 0 14px;
  font-size: var(--marketing-hero-subtitle-size);
  line-height: var(--marketing-hero-subtitle-line-height);
  letter-spacing: var(--marketing-hero-subtitle-letter-spacing);
  font-weight: var(--marketing-hero-subtitle-weight);
}

/* Uppercase eyebrow / section-label typography */
.marketing-eyebrow,
.eyebrow,
.section-label {
  margin: 0 0 14px;
  font-size: var(--marketing-eyebrow-size);
  line-height: var(--marketing-eyebrow-line-height);
  letter-spacing: var(--marketing-eyebrow-letter-spacing);
  font-weight: var(--marketing-eyebrow-weight);
  text-transform: uppercase;
}

/* Primary below-the-fold headings */
.marketing-section h2,
.section h2,
.section-title,
.cta h2 {
  margin: 0 0 16px;
  max-width: var(--marketing-heading-max);
  font-size: var(--marketing-h2-size);
  line-height: var(--marketing-h2-line-height);
  letter-spacing: var(--marketing-h2-letter-spacing);
  font-weight: var(--marketing-h2-weight);
  text-wrap: balance;
}

/* Card / subsection headings */
.marketing-section h3,
.section h3,
.card h3,
.info-card h3,
.step-card h3 {
  margin: 0 0 9px;
  font-size: var(--marketing-h3-size);
  line-height: var(--marketing-h3-line-height);
  letter-spacing: var(--marketing-h3-letter-spacing);
  font-weight: var(--marketing-h3-weight);
}

/* Main reading copy */
.marketing-section p,
.section p,
.marketing-copy,
.content-copy {
  line-height: var(--marketing-content-line-height);
}

.marketing-lead,
.lead,
.section-intro {
  max-width: var(--marketing-reading-max);
  margin: 0 0 14px;
  font-size: var(--marketing-lead-size);
  line-height: var(--marketing-lead-line-height);
}

.marketing-muted,
.muted {
  max-width: var(--marketing-reading-max);
  font-size: var(--marketing-small-size);
  line-height: var(--marketing-small-line-height);
}

/* Breadcrumbs */
.breadcrumbs,
.marketing-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 30px;
  font-size: var(--marketing-breadcrumb-size);
  line-height: var(--marketing-breadcrumb-line-height);
}

/* Shared navigation type only. Visual header styling remains brand-specific. */
.mega-title,
.mega-col h2,
.mega-col h3 {
  margin: 0 0 14px;
  font-size: var(--marketing-nav-label-size);
  line-height: var(--marketing-nav-label-line-height);
  letter-spacing: var(--marketing-nav-label-letter-spacing);
  font-weight: var(--marketing-nav-label-weight);
  text-transform: uppercase;
}

.mega-links a,
.mega-col a,
.site-nav a {
  font-size: var(--marketing-nav-size);
  line-height: var(--marketing-nav-line-height);
  letter-spacing: var(--marketing-nav-letter-spacing);
}

.account-link {
  font-size: var(--marketing-account-size);
  letter-spacing: var(--marketing-account-letter-spacing);
  font-weight: var(--marketing-account-weight);
}

/* Shared CTA/button type only. Brand-specific shape/colors can override. */
.btn,
.marketing-button,
.wp-element-button,
.wp-block-button__link {
  font-family: var(--marketing-font-sans);
  font-size: var(--marketing-button-size);
  line-height: var(--marketing-button-line-height);
  letter-spacing: var(--marketing-button-letter-spacing);
  font-weight: var(--marketing-button-weight);
  text-transform: uppercase;
}

/* Utility text */
small,
.marketing-small {
  font-size: 0.8rem;
  line-height: 1.55;
}

/* Responsive type behavior carried forward from the approved COA Chain pages. */
@media (max-width: 800px) {
  :root {
    --marketing-section-block: 72px;
    --marketing-section-block-compact: 64px;
    --marketing-section-inline: 20px;
  }

  .marketing-hero h1,
  .hero h1,
  .hero-title {
    font-size: 1.55rem;
    line-height: 1.15;
  }

  .marketing-section h2,
  .section h2,
  .section-title,
  .cta h2 {
    font-size: 1.7rem;
    line-height: 1.2;
  }
}

@media (max-width: 540px) {
  :root {
    --marketing-section-block: 60px;
    --marketing-section-block-compact: 54px;
    --marketing-section-inline: 18px;
  }

  .marketing-section h2,
  .section h2,
  .section-title,
  .cta h2 {
    font-size: 1.55rem;
  }

  .marketing-hero-lead,
  .hero-lead,
  .hero-intro {
    font-size: 1rem;
  }
}