/* Sitewide typography standard based on the approved Marketing page.
   index.html sets html[data-route] from the SPA hash route. */

:root {
  --sd-gold: #D4AF37;
  --sd-navy: #0F172A;
  --sd-muted: #A8B3C7;
}

html[data-route],
html[data-route] body,
html[data-route] #root {
  overflow-x: hidden;
}

html[data-route] #root,
html[data-route] header,
html[data-route] footer {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html[data-route] #root h1,
html[data-route] #root h2,
html[data-route] #root h3,
html[data-route] #root h4 {
  letter-spacing: 0 !important;
  text-wrap: balance;
}

html[data-route] #root h1 {
  font-size: clamp(30px, 4vw, 42px) !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
}

html[data-route] #root h2 {
  font-size: clamp(22px, 3vw, 29px) !important;
  line-height: 1.12 !important;
  font-weight: 820 !important;
}

html[data-route] #root h3 {
  font-size: clamp(18px, 2vw, 21px) !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
}

html[data-route] #root h4 {
  font-size: clamp(15px, 1.6vw, 17px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

html[data-route] #root h1 + p {
  font-size: clamp(15px, 1.7vw, 18px) !important;
  line-height: 1.58 !important;
  letter-spacing: 0 !important;
}

html[data-route] #root h2 + p,
html[data-route] #root h3 + p {
  font-size: clamp(14px, 1.45vw, 16px) !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}

html[data-route] #root p,
html[data-route] #root li {
  letter-spacing: 0 !important;
}

/* Yellow eyebrow language: same voice as Marketing, without forcing every page into the same layout. */
html[data-route] #root p[class*="uppercase"][class*="tracking"],
html[data-route] #root span[class*="uppercase"][class*="tracking"],
html[data-route] #root div[class*="uppercase"][class*="tracking"] {
  color: var(--sd-gold) !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

html[data-route] #root blockquote {
  font-size: clamp(15px, 1.65vw, 18px) !important;
  line-height: 1.55 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

html[data-route] #root blockquote + p,
html[data-route] #root figcaption {
  color: var(--sd-gold) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

html[data-route] #root a,
html[data-route] #root button {
  letter-spacing: 0 !important;
}

html[data-route] #root a[style*="padding"],
html[data-route] #root button[style*="padding"] {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

@media (max-width: 640px) {
  html[data-route]:not([data-route="home"]) #root h1 {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 1.08 !important;
    max-width: min(100%, calc(100vw - 64px)) !important;
    white-space: normal !important;
  }

  html[data-route]:not([data-route="home"]) #root h2,
  html[data-route]:not([data-route="home"]) #root h3,
  html[data-route]:not([data-route="home"]) #root p,
  html[data-route]:not([data-route="home"]) #root blockquote {
    max-width: min(100%, calc(100vw - 64px)) !important;
  }

  html[data-route] #root h2 {
    font-size: clamp(22px, 7vw, 29px) !important;
  }
}

@media (max-width: 640px) {
  html[data-route="marketing"] #root section:first-of-type > div {
    width: 100% !important;
    max-width: 100vw !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-route="marketing"] #root section:first-of-type > div > div:first-child {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  html[data-route="marketing"] #root section:first-of-type > div > div:first-child > * {
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* Home hero fallback: force the approved uppercase headline and keep it to the intended two lines. */
html[data-route="home"] #root section:first-of-type div[class*="max-w-lg"] {
  max-width: min(720px, calc(100vw - 48px)) !important;
}

html[data-route="home"] #root section:first-of-type h1 {
  text-transform: uppercase !important;
  white-space: nowrap !important;
  font-size: clamp(22px, 4vw, 42px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-wrap: nowrap !important;
}

html[data-route="home"] #root section:first-of-type h1 span {
  display: inline-block !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}