/* ============================================================================
   ONEEXISTS v1.4.1 — Contrast + Emphasis
   Fix: dim silver headings on dark, unreadable text where opacity was too low.
   Rule from user: dark bg → white text; light bg → dark text; titles bolder + bigger.
   Loaded LAST so it wins the cascade.

   CRITICAL: Astra Customizer holds legacy "GTTG" Additional CSS that forces
   body/.site to cream (#faf8f5). We must (a) redefine the --gttg-* vars to our
   dark palette, and (b) use higher-specificity selectors (html body) that beat
   plain `body` even with !important on both sides.
   ============================================================================ */

/* ---------- Nuke the legacy GTTG palette by redefining its variables ----- */
:root {
  --gttg-bg: rgb(28 27 26) !important;             /* was #faf8f5 cream → now graphite */
  --gttg-surface: rgb(36 34 31) !important;
  --gttg-surface-muted: rgb(42 39 35) !important;
  --gttg-text: rgb(237 234 228) !important;        /* was #1a1a1a → now warm white */
  --gttg-text-mute: rgb(195 200 208) !important;
  --gttg-accent: rgb(195 200 208) !important;
  --gttg-accent-dark: rgb(178 184 192) !important;
  --gttg-border: rgb(48 46 42) !important;
  --gttg-border-strong: rgb(72 68 63) !important;
  --gttg-black: rgb(15 14 13) !important;
}

/* ---------- Higher-specificity body/site overrides ---------------------- */
html body,
html body.oe-theme,
html .site,
html .site-content,
html .site-main,
html .ast-container,
html .entry-content {
  background: rgb(var(--oe-bg)) !important;
  background-color: rgb(var(--oe-bg)) !important;
  color: rgb(var(--oe-text)) !important;
  font-family: var(--oe-font-body) !important;
}

/* ---------- Announcement bar: bright white text for legibility ---------- */
.oe-announcement,
.oe-announcement * {
  color: rgb(var(--oe-white)) !important;
}
.oe-announcement__item {
  color: rgb(var(--oe-white)) !important;
  opacity: 0.95 !important;
  font-weight: 500 !important;
  letter-spacing: var(--oe-ls-wide) !important;
}

/* ---------- Footer bottom bar: fix first-item vertical misalignment ---- */
/* Root cause: <li> defaults to display: list-item which reserves marker box.
   Force display: inline-flex + align-items: center so every item aligns to
   the row's vertical center regardless of its marker-box quirks.            */
.oe-footer-bottom__pay,
.oe-footer-bottom__legal-list {
  align-items: center !important;
  line-height: 1 !important;
}
.oe-footer-bottom__pay li,
.oe-footer-bottom__legal-list li {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Astra applies `li + li { margin-top: … }` for stacked lists — kill it inside our
   horizontal payment/legal rows, which was pushing every sibling down 2 px. */
.oe-footer-bottom__pay li + li,
.oe-footer-bottom__legal-list li + li { margin-top: 0 !important; }
.oe-footer-bottom__pay li::marker,
.oe-footer-bottom__legal-list li::marker { content: none !important; }

/* ---------- Hero with image: darker scrim + solid form for legibility --- */
.oe-hero--has-image .oe-hero__scrim {
  background: linear-gradient(180deg,
              rgb(var(--oe-black) / 0.55) 0%,
              rgb(var(--oe-black) / 0.70) 50%,
              rgb(var(--oe-black) / 0.90) 100%) !important;
}
.oe-hero--has-image .oe-hero__form {
  background: rgb(var(--oe-black) / 0.72) !important;
  border-color: rgb(var(--oe-silver) / 0.3) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Object image cards: subtle silver frame so photos don't float unsupported */
.oe-object-hero__figure .oe-ratio-5-6,
.oe-philo__figure .oe-ratio-4-5,
.oe-design-card .oe-ratio-4-5,
.oe-lab__figure .oe-ratio-3-2 {
  overflow: hidden;
  background: rgb(var(--oe-black));
  border: 1px solid rgb(var(--oe-hairline) / 0.15);
}
.oe-object-hero__figure img,
.oe-philo__figure img,
.oe-design-card img,
.oe-lab__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ---------- Bump display/heading sizes for stronger hierarchy ---------- */
:root {
  --oe-fs-display: clamp(3.5rem, 2.2rem + 5.5vw, 7.5rem);
  --oe-fs-h1:      clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);
  --oe-fs-h2:      clamp(2rem,   1.5rem + 2.1vw, 3rem);
  --oe-fs-h3:      clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --oe-fs-lede:    1.1875rem;   /* was 1.125rem body-lg — pinch more read weight */
}

/* ---------- Global heading emphasis: thicker weight, tighter tracking --- */
h1, h2, h3,
.oe-h1, .oe-h2, .oe-h3,
.oe-display,
.oe-hero__title,
.oe-section-head h2,
.entry-title {
  font-weight: 700 !important;
  letter-spacing: var(--oe-ls-extra-tight) !important;
  line-height: var(--oe-lh-tight) !important;
}

h4, h5, .oe-h4, .oe-h5 {
  font-weight: 600 !important;
  letter-spacing: var(--oe-ls-tight) !important;
}

/* Boost the on-page size where tokens don't reach the element directly */
.oe-display { font-size: var(--oe-fs-display) !important; }
h1, .oe-h1, .oe-hero__title, .oe-section-head .oe-h1 { font-size: var(--oe-fs-h1) !important; }
h2, .oe-h2, .oe-section-head h2 { font-size: var(--oe-fs-h2) !important; }
h3, .oe-h3 { font-size: var(--oe-fs-h3) !important; }

/* ============================================================================
   DARK BACKGROUND (site default) → pure bright white text
   Kill any silver/opacity dimming on headings and body copy.
   ============================================================================ */

/* Headings on dark: force bright warm-white, no opacity */
body h1, body h2, body h3, body h4, body h5,
body .oe-h1, body .oe-h2, body .oe-h3, body .oe-h4, body .oe-h5,
body .oe-display,
body .oe-hero__title,
body .oe-section-head h2,
body .oe-mat-card__name,
body .oe-design-card__title,
body .oe-roadmap__label,
body .oe-pers-card h3,
body .oe-jour-card__title,
body .oe-process__label,
body .entry-title {
  color: rgb(var(--oe-white)) !important;
  opacity: 1 !important;
}

/* Body copy + lede on dark: use warm-white, not silver, not opacity-dimmed */
body p,
body .oe-lede,
body li,
body address,
body blockquote,
body .oe-mat-card__lede,
body .oe-design-card__desc,
body .oe-roadmap__desc,
body .oe-pers-card p,
body .oe-hero__lede,
body .oe-hero__deck,
body .oe-philo__copy p {
  color: rgb(var(--oe-white)) !important;
  opacity: 1 !important;
}

/* Lede specifically gets slight up-weight for readability */
body .oe-lede,
body .oe-hero__lede,
body .oe-philo__copy .oe-lede {
  font-size: var(--oe-fs-lede) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: rgb(var(--oe-white)) !important;
  opacity: 0.95 !important;
}

/* Eyebrows on dark: bright silver, no opacity (was 0.85 — too dim) */
body .oe-eyebrow,
body .oe-section-head .oe-eyebrow,
body .oe-mat-card__code,
body .oe-mat-card__sub,
body .oe-design-card > .oe-eyebrow,
body .oe-roadmap__item .oe-eyebrow,
body .oe-roadmap__date,
body h6 {
  color: rgb(var(--oe-silver)) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  letter-spacing: var(--oe-ls-wide) !important;
}

/* Passport numbers stay silver but at full opacity */
body .oe-passport,
body .oe-passport dt,
body .oe-roadmap__no,
body .oe-process__no {
  color: rgb(var(--oe-silver)) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

/* Tertiary buttons on dark — full white underline, weight up */
body .oe-btn--tertiary {
  color: rgb(var(--oe-white)) !important;
  border-bottom-color: rgb(var(--oe-white)) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

/* Section head lede on dark: was 0.9 opacity — bump to 1 */
body .oe-section .oe-section-head .oe-lede,
body .oe-section .oe-section-head p {
  color: rgb(var(--oe-white)) !important;
  opacity: 0.95 !important;
}
body .oe-section .oe-section-head .oe-eyebrow {
  color: rgb(var(--oe-silver)) !important;
  opacity: 1 !important;
}

/* ============================================================================
   ACTIVE ROADMAP ITEM = WHITE SURFACE → force dark text on it
   ============================================================================ */
.oe-roadmap__item--active,
.oe-roadmap__item--active * {
  color: rgb(var(--oe-graphite)) !important;
  opacity: 1 !important;
}
.oe-roadmap__item--active .oe-roadmap__label {
  color: rgb(var(--oe-graphite)) !important;
  font-weight: 700 !important;
}
.oe-roadmap__item--active .oe-roadmap__no,
.oe-roadmap__item--active .oe-eyebrow,
.oe-roadmap__item--active .oe-roadmap__date {
  color: rgb(var(--oe-charcoal)) !important;
  opacity: 0.75 !important;
}

/* ============================================================================
   LIGHT SECTION (.oe-section--paper) — if any remains → dark text throughout
   ============================================================================ */
.oe-section--paper,
.oe-section--paper * {
  color: rgb(var(--oe-graphite)) !important;
}
.oe-section--paper h1, .oe-section--paper h2, .oe-section--paper h3,
.oe-section--paper h4, .oe-section--paper h5,
.oe-section--paper .oe-h1, .oe-section--paper .oe-h2, .oe-section--paper .oe-h3,
.oe-section--paper .oe-display {
  color: rgb(var(--oe-black)) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.oe-section--paper p,
.oe-section--paper .oe-lede,
.oe-section--paper li {
  color: rgb(52 52 54) !important;
  opacity: 1 !important;
}
.oe-section--paper .oe-eyebrow,
.oe-section--paper h6 {
  color: rgb(90 88 82) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}
.oe-section--paper .oe-btn--tertiary {
  color: rgb(var(--oe-graphite)) !important;
  border-bottom-color: rgb(var(--oe-graphite)) !important;
  font-weight: 600 !important;
}

/* ============================================================================
   HERO — biggest emphasis: display huge + bold + full contrast
   ============================================================================ */
.oe-hero__title,
.oe-hero .oe-display {
  color: rgb(var(--oe-white)) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.02 !important;
  opacity: 1 !important;
}
.oe-hero__lede {
  color: rgb(var(--oe-white)) !important;
  opacity: 0.95 !important;
  font-weight: 400 !important;
}
.oe-hero__eyebrow {
  color: rgb(var(--oe-silver)) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* ============================================================================
   HEADER NAV — slightly bolder for editorial confidence
   ============================================================================ */
.oe-nav a {
  color: rgb(var(--oe-white)) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}
.oe-nav a:hover { opacity: 1 !important; }

/* ============================================================================
   CARDS ON DARK ELEVATION — make sure title stays bright even with .oe-mat-card
   overrides from v140
   ============================================================================ */
.oe-mat-card .oe-mat-card__name,
.oe-mat-card h3 {
  color: rgb(var(--oe-white)) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.oe-mat-card .oe-mat-card__lede,
.oe-mat-card p {
  color: rgb(var(--oe-white)) !important;
  opacity: 0.88 !important;
}
.oe-mat-card .oe-mat-card__code,
.oe-mat-card .oe-mat-card__sub {
  color: rgb(var(--oe-silver)) !important;
  opacity: 1 !important;
}

.oe-design-card .oe-design-card__title,
.oe-design-card h3 {
  color: rgb(var(--oe-white)) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.oe-design-card .oe-design-card__desc,
.oe-design-card p {
  color: rgb(var(--oe-white)) !important;
  opacity: 0.88 !important;
}
.oe-design-card > .oe-eyebrow {
  color: rgb(var(--oe-silver)) !important;
  opacity: 1 !important;
}

/* Personalization cards */
.oe-pers-card h3 {
  color: rgb(var(--oe-white)) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.oe-pers-card p {
  color: rgb(var(--oe-white)) !important;
  opacity: 0.88 !important;
}

/* Roadmap non-active items */
.oe-roadmap__item:not(.oe-roadmap__item--active) .oe-roadmap__label {
  color: rgb(var(--oe-white)) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.oe-roadmap__item:not(.oe-roadmap__item--active) .oe-roadmap__desc {
  color: rgb(var(--oe-white)) !important;
  opacity: 0.85 !important;
}

/* Process 8-step grid labels */
.oe-process__step .oe-process__label {
  color: rgb(var(--oe-white)) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

/* ============================================================================
   FOOTER — make sure headings + links pop against deepest black
   ============================================================================ */
.oe-footer h3, .oe-footer h4, .oe-footer .oe-footer__title {
  color: rgb(var(--oe-white)) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.oe-footer a, .oe-footer p, .oe-footer li {
  color: rgb(var(--oe-white)) !important;
  opacity: 0.88 !important;
}
.oe-footer a:hover { opacity: 1 !important; }
.oe-footer .oe-eyebrow {
  color: rgb(var(--oe-silver)) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}
.oe-footer-bottom, .oe-footer-bottom * {
  color: rgb(var(--oe-silver)) !important;
  opacity: 0.85 !important;
}
