/*
 * Reviewed Ukrainian editorial type scale.
 *
 * This stylesheet is linked only from prerendered Ukrainian pages and is kept
 * separate from the shared design system so no other locale is affected.
 */
@media (min-width: 1280px) {
  html[lang="uk"] .site-header {
    grid-template-columns: 145px minmax(0, 1fr) auto;
    column-gap: 14px;
    padding-inline: 24px;
  }

  html[lang="uk"] .desktop-nav {
    min-width: 0;
    align-items: center;
    gap: 13px;
  }

  html[lang="uk"] .desktop-nav a {
    flex: 0 0 auto;
    font-size: .7rem;
    white-space: nowrap;
  }

  html[lang="uk"] .header-actions {
    gap: 10px;
  }

  html[lang="uk"] .careers-header-button {
    gap: 8px;
    padding-inline: 10px;
  }

  html[lang="uk"] .language-switch select {
    width: 108px;
  }

  html[lang="uk"] .header-actions .button-small {
    gap: 10px;
    padding-left: 13px;
  }
}

@media (max-width: 359px) {
  html[lang="uk"] .language-switch select {
    width: 118px;
  }
}

@media (min-width: 360px) and (max-width: 420px) {
  html[lang="uk"] .language-switch select {
    width: 165px;
  }
}

html[lang="uk"] body[data-seo-locale="uk"][data-page]:not([data-page="home"]) main h1 {
  font-size: clamp(3.5rem, 5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}

html[lang="uk"] body[data-seo-locale="uk"][data-page]:not([data-page="home"]) main h2 {
  font-size: clamp(2.25rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

html[lang="uk"] body[data-seo-locale="uk"][data-page]:not([data-page="home"]) main h3 {
  font-size: clamp(1.375rem, 1.7vw, 1.625rem);
  line-height: 1.22;
  letter-spacing: -.012em;
  text-wrap: balance;
}

html[lang="uk"] body[data-seo-locale="uk"][data-page]:not([data-page="home"]) :is(
  .inner-hero-side > p,
  .country-page-title > div:last-child > p,
  .about-hero-intro,
  .academy-catalogue-copy > p:not(.section-index),
  .careers-hero-lead,
  .contact-copy > p:not(.section-index),
  .section-head > p:last-child,
  .topic-visual-copy > p,
  .brand-story-copy > p:not(.section-index),
  .page-cta > div > p:last-child
) {
  max-width: 68ch;
  font-size: clamp(1.125rem, 1.35vw, 1.25rem);
  line-height: 1.6;
}

html[lang="uk"] body[data-seo-locale="uk"][data-page]:not([data-page="home"]) main :is(
  p,
  h1,
  h2,
  h3,
  h4,
  li,
  a,
  b,
  small
) {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 760px) {
  html[lang="uk"] body[data-seo-locale="uk"][data-page]:not([data-page="home"]) main h1 {
    font-size: clamp(2.375rem, 10.5vw, 2.75rem);
    line-height: 1.04;
    letter-spacing: -.02em;
  }

  html[lang="uk"] body[data-seo-locale="uk"][data-page]:not([data-page="home"]) main h2 {
    font-size: clamp(1.75rem, 8vw, 2.125rem);
    line-height: 1.12;
    letter-spacing: -.015em;
  }

  html[lang="uk"] body[data-seo-locale="uk"][data-page]:not([data-page="home"]) main h3 {
    font-size: clamp(1.25rem, 5.6vw, 1.4375rem);
    line-height: 1.25;
  }

  html[lang="uk"] body[data-seo-locale="uk"][data-page]:not([data-page="home"]) :is(
    .inner-hero-side > p,
    .country-page-title > div:last-child > p,
    .about-hero-intro,
    .academy-catalogue-copy > p:not(.section-index),
    .careers-hero-lead,
    .contact-copy > p:not(.section-index),
    .section-head > p:last-child,
    .topic-visual-copy > p,
    .brand-story-copy > p:not(.section-index),
    .page-cta > div > p:last-child
  ) {
    font-size: clamp(1.0625rem, 4.5vw, 1.125rem);
    line-height: 1.62;
  }
}

/*
 * Contracted hero subtitles are semantic H2 elements, but they are not
 * section titles. This compatibility selector intentionally outranks the
 * legacy locale-wide `main h2` rule above so the supporting promise stays
 * visibly subordinate to the single page H1.
 */
html[lang="uk"] body[data-seo-locale="uk"][data-page][data-heading-contract="editorial-v1"] main h2[data-heading-role="hero-slogan"] {
  margin: .65rem 0 1.75rem;
  font-size: var(--guga-type-hero-slogan);
  line-height: 1.18;
  letter-spacing: -.012em;
}

@media (max-width: 760px) {
  html[lang="uk"] body[data-seo-locale="uk"][data-page][data-heading-contract="editorial-v1"] main h2[data-heading-role="hero-slogan"] {
    margin: .5rem 0 1.25rem;
    font-size: var(--guga-type-hero-slogan-mobile);
    line-height: 1.22;
  }
}