/* ODA Concepts typography contract / v1.0.38
 *
 * Three visual type roles are intentionally exposed to the site:
 *   HERO    page title and primary hero statement
 *   HEADING section, card, CTA, footer and portfolio headings
 *   BODY    everything else, including UI, labels, metadata and forms
 *
 * This file is enqueued after the legacy design and Elementor correction
 * layers. The older selectors remain available for backwards compatibility,
 * but every production text surface is reset here to the shared tokens.
 */

:root {
  --font-hero: clamp(42px, 5vw, 72px);
  --font-heading: clamp(28px, 3vw, 42px);
  --font-body: clamp(16px, 1.2vw, 18px);
  --line-height-hero: 1.05;
  --line-height-heading: 1.15;
  --line-height-body: 1.6;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: clamp(4rem, 8vw, 8rem);
}

:is(
  .oda-page-home,
  .oda-page-about,
  .oda-page-services,
  .oda-page-selected-work,
  .oda-page-team,
  .oda-page-contact,
  .oda-single-service-detail,
  .oda-theme-404,
  .oda-site-header,
  .oda-site-footer
) {
  font-size: var(--font-body) !important;
  line-height: var(--line-height-body) !important;
}

/* The live Elementor clients page is a bespoke logo roster rather than the
 * reusable page-wrapper pattern used by the other templates. Bring its
 * existing semantic surfaces into the same three-role contract. */
.elementor-1007 .oda-client-title :is(h1, .elementor-heading-title) {
  font-family: var(--oda-display) !important;
  font-size: var(--font-hero) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: var(--line-height-hero) !important;
  max-width: 16ch !important;
  text-transform: uppercase;
}

.elementor-1007 .oda-client-label p,
.elementor-1007 .oda-client-hero-meta-copy p {
  font-size: var(--font-body) !important;
  line-height: var(--line-height-body) !important;
  max-width: 65ch !important;
}

.elementor-1007 .oda-client-hero-index p {
  font-size: var(--font-heading) !important;
  line-height: var(--line-height-heading) !important;
  font-weight: 900 !important;
}

/* Elementor's generated widget rules can be more specific than a page-level
 * selector. This deliberately repeated scope wins that cascade while
 * leaving the semantic h1/h2/h3/h4/h5/h6 tags intact. */
main#main.oda-theme-main.oda-theme-main.oda-theme-main.oda-theme-main h1 {
  font-family: var(--oda-display) !important;
  font-size: var(--font-hero) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: var(--line-height-hero) !important;
  max-width: 16ch !important;
  text-transform: uppercase;
}

main#main.oda-theme-main.oda-theme-main.oda-theme-main.oda-theme-main :is(h2, h3, h4, h5, h6) {
  font-family: var(--oda-display) !important;
  font-size: var(--font-heading) !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  line-height: var(--line-height-heading) !important;
  text-transform: uppercase;
}

main#main.oda-theme-main.oda-theme-main.oda-theme-main.oda-theme-main :is(
  p,
  li,
  a,
  button,
  input,
  textarea,
  select,
  option,
  label,
  small,
  caption,
  .elementor-icon-list-text,
  .elementor-button-text,
  .elementor-field-label,
  .elementor-field
) {
  font-size: var(--font-body) !important;
  line-height: var(--line-height-body) !important;
}

/* Keep the page's decorative section index in HEADING after the broad BODY
 * reset above. */
main#main.oda-theme-main.oda-theme-main.oda-theme-main.oda-theme-main .elementor-1007 .oda-client-hero-index p {
  font-size: var(--font-heading) !important;
  line-height: var(--line-height-heading) !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}

/* BODY is the inherited baseline. Explicit component selectors below also
 * win against Elementor widget typography that is marked !important. */
:is(
  .oda-page-home,
  .oda-page-about,
  .oda-page-services,
  .oda-page-selected-work,
  .oda-page-team,
  .oda-page-contact,
  .oda-single-service-detail,
  .oda-theme-404
) :is(
  p,
  li,
  a,
  button,
  input,
  textarea,
  select,
  option,
  label,
  small,
  caption,
  .elementor-widget-text-editor,
  .elementor-widget-text-editor .elementor-widget-container,
  .elementor-icon-list-text,
  .elementor-button-text,
  .elementor-field-label,
  .elementor-field,
  .oda-body-copy,
  .oda-body-large,
  .oda-lead,
  .oda-statement-copy,
  .oda-cta-copy,
  .oda-footer-copy,
  .oda-eyebrow,
  .oda-section-label,
  .oda-media-tag,
  .oda-hero-note,
  .oda-page-hero-meta,
  .oda-detail-rail-number,
  .oda-service-row-number,
  .oda-process-number,
  .oda-capability-number,
  .oda-portfolio-card-kicker
) {
  font-size: var(--font-body) !important;
  line-height: var(--line-height-body) !important;
}

/* Navigation, buttons, footer copy and form controls are BODY-weight text;
 * casing, tracking and weight continue to provide interface hierarchy. */
.oda-site-header :is(a, button, span, .elementor-item, .elementor-button, .elementor-button-text),
.oda-site-footer :is(p, li, a, span, small, .elementor-icon-list-text, .oda-footer-copy, .oda-footer-bottom),
.oda-button :is(.elementor-button, .elementor-button-text),
.oda-header-cta :is(.elementor-button, .elementor-button-text),
.oda-contact-form :is(input, textarea, select, option, label, .elementor-field-label, .elementor-button, .elementor-button-text) {
  font-size: var(--font-body) !important;
  line-height: var(--line-height-body) !important;
}

/* Keep long-form copy comfortably readable without changing the three-size
 * system. Labels, controls and navigation are excluded from this measure. */
:is(
  .oda-page-home,
  .oda-page-about,
  .oda-page-services,
  .oda-page-selected-work,
  .oda-page-team,
  .oda-page-contact,
  .oda-single-service-detail,
  .oda-theme-404
) :is(
  p,
  .oda-body-copy,
  .oda-body-large,
  .oda-lead,
  .oda-statement-copy,
  .oda-cta-copy,
  .oda-philosophy-copy,
  .oda-page-hero-meta,
  .oda-hero-note
) {
  max-width: min(65ch, 100%) !important;
}

/* HEADING covers every semantic heading after the page title. H2/H3/H4
 * remain distinct in the markup for SEO and accessibility, but share one
 * visual scale as requested. */
:is(
  .oda-page-home,
  .oda-page-about,
  .oda-page-services,
  .oda-page-selected-work,
  .oda-page-team,
  .oda-page-contact,
  .oda-single-service-detail,
  .oda-theme-404,
  .oda-site-footer
) :is(h2, h3, h4, h5, h6, .oda-display-lg, .oda-display-md, .oda-statement-quote) {
  font-family: var(--oda-display) !important;
  font-size: var(--font-heading) !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  line-height: var(--line-height-heading) !important;
  text-transform: uppercase;
}

/* HERO is reserved for the single primary page title / statement. The H1
 * semantics remain in the Elementor data; this only standardizes its scale. */
:is(
  .oda-page-home,
  .oda-page-about,
  .oda-page-services,
  .oda-page-selected-work,
  .oda-page-team,
  .oda-page-contact,
  .oda-single-service-detail,
  .oda-theme-404
) :is(h1, .oda-display-xl),
:is(.oda-page-hero, .oda-section-hero) :is(h1, .elementor-heading-title),
.oda-display-xl .elementor-heading-title {
  font-family: var(--oda-display) !important;
  font-size: var(--font-hero) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: var(--line-height-hero) !important;
  max-width: 16ch !important;
  text-transform: uppercase;
  overflow-wrap: normal;
}

/* Decorative hero indices use the heading role rather than creating a fourth
 * visual scale. */
:is(.oda-hero-index, .oda-detail-rail-number) {
  font-size: var(--font-heading) !important;
  line-height: var(--line-height-heading) !important;
}

:is(.oda-hero-index, .oda-detail-rail-number) :is(p, span) {
  font-size: var(--font-heading) !important;
  line-height: var(--line-height-heading) !important;
}

main#main.oda-theme-main.oda-theme-main.oda-theme-main.oda-theme-main :is(.oda-hero-index, .oda-detail-rail-number) :is(p, span) {
  font-size: var(--font-heading) !important;
  line-height: var(--line-height-heading) !important;
}

/* Restore the requested breathing room between the hero label and title, and
 * between the title and its supporting copy. */
:is(.oda-page-hero, .oda-section-hero) :is(.oda-hero-copy, .oda-hero-copy > .e-con-inner) {
  padding-block-start: clamp(1.25rem, 3vw, 3rem) !important;
}

:is(.oda-page-hero, .oda-section-hero) :is(.oda-lead, .oda-body-copy) {
  margin-block-start: clamp(1.25rem, 2vw, 2rem) !important;
}

/* Prevent late Elementor widths and letter spacing from creating a viewport
 * edge overflow at tablet and phone sizes. */
@media (max-width: 980px) {
  :is(
    .oda-page-home,
    .oda-page-about,
    .oda-page-services,
    .oda-page-selected-work,
    .oda-page-team,
    .oda-page-contact,
    .oda-single-service-detail,
    .oda-theme-404
  ) :is(h1, h2, h3, h4, h5, h6, .oda-display-xl, .oda-display-lg, .oda-display-md) {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  :is(.oda-page-hero, .oda-section-hero) :is(.oda-hero-copy, .oda-hero-copy > .e-con-inner) {
    padding-block-start: clamp(1rem, 4vw, 2.5rem) !important;
  }
}

@media (max-width: 700px) {
  :is(.oda-page-hero, .oda-section-hero) :is(h1, .elementor-heading-title, .oda-display-xl) {
    max-width: 100% !important;
    letter-spacing: -.03em !important;
  }

  :is(
    .oda-page-home,
    .oda-page-about,
    .oda-page-services,
    .oda-page-selected-work,
    .oda-page-team,
    .oda-page-contact,
    .oda-single-service-detail,
    .oda-theme-404
  ) :is(p, li, .oda-body-copy, .oda-body-large, .oda-lead, .oda-statement-copy) {
    max-width: 65ch !important;
  }

  .elementor-1007 .oda-client-title :is(h1, .elementor-heading-title) {
    max-width: 100% !important;
    letter-spacing: -.03em !important;
  }
}

@media (max-width: 390px) {
  :is(.oda-page-hero, .oda-section-hero) :is(h1, .elementor-heading-title, .oda-display-xl) {
    letter-spacing: -.025em !important;
  }
}

/* A visible focus ring remains legible on every ODA surface. */
:is(.oda-page-home, .oda-page-about, .oda-page-services, .oda-page-selected-work, .oda-page-team, .oda-page-contact, .oda-single-service-detail, .oda-theme-404, .oda-site-header, .oda-site-footer) :is(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--oda-focus, #2396F4) !important;
  outline-offset: 3px;
}

/* Search and archive templates use the same shared type contract as the
 * Elementor page templates. Keep their archive titles wrap-safe on phones. */
:is(.oda-page-search, .oda-page-archive) {
  font-size: var(--font-body) !important;
  line-height: var(--line-height-body) !important;
}

:is(.oda-page-search, .oda-page-archive) h1 {
  font-family: var(--oda-display) !important;
  font-size: var(--font-hero) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: var(--line-height-hero) !important;
  max-width: 16ch !important;
  overflow-wrap: normal;
  text-transform: uppercase;
}

:is(.oda-page-search, .oda-page-archive) :is(h2, h3, h4, h5, h6) {
  font-family: var(--oda-display) !important;
  font-size: var(--font-heading) !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  line-height: var(--line-height-heading) !important;
  text-transform: uppercase;
}

:is(.oda-page-search, .oda-page-archive) :is(p, li, a, button, input, textarea, select, option, label, small, caption, blockquote, code, pre, .elementor-button-text, .elementor-field-label, .elementor-field) {
  font-size: var(--font-body) !important;
  line-height: var(--line-height-body) !important;
}

@media (max-width: 980px) {
  :is(.oda-page-search, .oda-page-archive) :is(h1, h2, h3, h4, h5, h6) {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
}