@import "./fonts/ibm-plex-sans.css";

/* Shared font roles for the static site and React pages. */
:root {
  --site-font-sans: "IBM Plex Sans", "Noto Sans SC", Arial, sans-serif;
  --site-weight-slogan: 600;
  --site-weight-title: 600;
  --site-weight-subtitle: 600;
  --site-weight-body: 400;
  --site-weight-body-emphasis: 500;
  --site-weight-action: 500;
  --site-weight-header-action: 500;
  --site-weight-cover-brand: 600;
  --site-weight-cover-entry: 400;
  --site-type-language: calc(0.875rem - 5px);
  --site-type-action: calc(0.9375rem - 5px);
  --module-heading-font: var(--site-font-sans);
  --module-body-font: var(--site-font-sans);
}

html,
body {
  font-family: var(--site-font-sans);
  font-weight: var(--site-weight-body);
  font-synthesis: style;
}

body .guide-workmate {
  font-family: var(--site-font-sans);
}

body :is(h1, h2, h3, h4, h5, h6, button, input, textarea, select) {
  font-family: var(--site-font-sans);
}

body h1,
body h2 {
  font-weight: var(--site-weight-title) !important;
}

body h3,
body h4,
body h5,
body h6,
body .pd-hero h1 span {
  font-weight: var(--site-weight-subtitle) !important;
}

#hero.lean-opening .hero-content h1 {
  font-weight: var(--site-weight-slogan) !important;
}

body p,
body figcaption,
body input,
body textarea,
body select {
  font-weight: var(--site-weight-body);
}

body main p:not(.eyebrow):not([class*="-label"]):not([class*="-index"]) {
  font-weight: var(--site-weight-body) !important;
}

body button,
body .button,
body nav,
body summary {
  font-weight: var(--site-weight-action);
}

body strong,
body b {
  font-weight: var(--site-weight-body-emphasis);
}

body .case-card-date,
body time {
  font-weight: var(--site-weight-body);
  font-synthesis: style;
}

/* Compact header actions with relaxed spacing across every locale. */
.header .language-trigger,
.header .workspace-trigger {
  font-weight: var(--site-weight-header-action);
  border-radius: 999px;
  min-height: 44px;
  line-height: 1.5;
}

.header .language-trigger {
  font-size: var(--site-type-language);
  min-width: 88px;
  gap: 9px;
  padding: 8px 23px;
}

.header .workspace-trigger {
  font-size: var(--site-type-action);
  padding: 8px 18px;
}

/* Language choices match their trigger without an oversized dropdown. */
.header .language-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: auto;
  inset-inline-end: 0;
  width: 156px;
  max-width: calc(100vw - 32px);
  margin-inline: 0;
  padding: 6px;
}

.header .language-menu button {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: var(--site-type-language);
  font-weight: var(--site-weight-header-action);
  line-height: 1.5;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .header .language-menu {
    position: fixed;
    top: 80px;
    inset-inline-end: 16px;
  }
}

@media (pointer: coarse) {
  .header .language-menu button {
    min-height: 44px;
  }
}

/* Action labels share the header's light, compact typography. */
body .button,
body .lean-platform-heading > .text-link {
  font-size: var(--site-type-action) !important;
  font-weight: var(--site-weight-header-action) !important;
}

body .button {
  min-height: 44px;
  padding: 8px 18px;
}


/* The cover actions keep their original button scale. */
body #hero .hero-actions .button {
  font-size: 0.9375rem !important;
  font-weight: var(--site-weight-action) !important;
  min-height: 48px;
  padding: 13px 24px;
}

@media (max-width: 600px) {
  body #hero .hero-actions .button {
    font-size: 0.85rem !important;
    padding: 13px 19px;
  }
}

/* Words are never hyphenated; long lines wrap at word boundaries in every locale. */
html:not([lang="zh-CN"]) body *,
html:not([lang="zh-CN"]) body *::before,
html:not([lang="zh-CN"]) body *::after {
  hyphens: manual !important;
}

/* Latin-script cover headlines use a calmer scale and balanced lines. */
html:is([lang="en"], [lang="fr"], [lang="de"], [lang="es"]) #hero.lean-opening .hero-content h1 {
  max-width: min(820px, 100%);
  font-size: clamp(1.75rem, 2.5vw, 2.45rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
}

html:not([lang="zh-CN"]) #hero.lean-opening .hero-content h1 > span {
  display: block;
  text-wrap: balance;
}

html:is([lang="en"], [lang="fr"], [lang="de"], [lang="es"]) #hero.lean-opening .hero-content h1 > span + span {
  margin-top: 0.18em;
}

@media (max-width: 600px) {
  html:is([lang="en"], [lang="fr"], [lang="de"], [lang="es"]) #hero.lean-opening .hero-content h1 {
    font-size: clamp(1.45rem, 6vw, 1.9rem);
  }
}

/* The platform heading entry uses the blue pill action style. */
body .lean-platform-heading > .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 18px !important;
  border: 0 !important;
  border-radius: 999px;
  background: var(--blue, #0966d8);
  color: #fff !important;
  text-decoration: none;
}

body .lean-platform-heading > .text-link::after {
  display: none;
}

body .lean-platform-heading > .text-link:hover {
  background: #0754b6;
}

/* Hero "watch demo" matches the underlined "book a demo" link. */
body #hero .hero-actions .button {
  min-height: 44px;
  padding: 0 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid #cbdbf1 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
}

body #hero .hero-actions .button:hover {
  border-bottom-color: #fff !important;
}

@media (max-width: 600px) {
  body #hero .hero-actions .button {
    font-size: 16px !important;
  }
}

/* Brand emphasis and quiet entries share consistent underline geometry. */
body #hero.lean-opening .eyebrow strong {
  font-weight: var(--site-weight-cover-brand);
}

body #hero.lean-opening .hero-actions {
  align-items: stretch;
}

body #hero.lean-opening .hero-actions :is(.button, .hero-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-block: 0 4px !important;
  line-height: 1.5;
  font-weight: var(--site-weight-cover-entry) !important;
}

body #hero.lean-opening .journey-role-links a {
  font-weight: var(--site-weight-cover-entry);
  border-bottom: 0;
  text-decoration: none;
}

body #hero.lean-opening .journey-role-links a::after {
  display: none;
}

/* Compact role entries retain complete labels and a short directional cue. */
body #hero.lean-opening .journey-role-links {
  width: fit-content;
  max-width: min(var(--cover-entry-width, 100%), 100%) !important;
  gap: 8px var(--cover-role-gap, 16px) !important;
  flex-wrap: wrap;
}

body #hero.lean-opening .journey-role-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: calc(0.95rem - 2px);
  line-height: 1.8;
  white-space: nowrap;
  text-decoration: none !important;
}

body #hero.lean-opening .journey-role-links a > span {
  display: inline-flex;
  width: 12px;
  justify-content: center;
  font-size: 0;
}

body #hero.lean-opening .journey-role-links a > span::before {
  content: "↗";
  font-size: 12px;
  line-height: 1;
}

/* Individual translate preserves existing control and icon transforms. */
body :is(button, .button, .text-link, .hero-link, .journey-role-links a,
  summary, [role="button"]) {
  transition: translate 190ms ease, filter 190ms ease, color 190ms ease,
    background-color 190ms ease, border-color 190ms ease;
}

@media (hover: hover) and (pointer: fine) {
  body :is(button, .button, .text-link, .hero-link, .journey-role-links a,
    summary, [role="button"]):not(:disabled):not([aria-disabled="true"]):hover {
    translate: 0 -5px;
    filter: brightness(0.94);
  }
}

body :is(button, .button, .text-link, .hero-link, .journey-role-links a,
  summary, [role="button"]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  body :is(button, .button, .text-link, .hero-link, .journey-role-links a,
    summary, [role="button"]) {
    transition: none;
    translate: none !important;
  }
}