/* Theme-wide foundations; page components belong in their own files. */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--sem-typography-family-body), sans-serif;
  font-size: var(--sem-typography-body-md-size);
  line-height: var(--sem-typography-body-md-line-height);
}

:root[lang^="ar"] body {
  font-family: var(--sem-typography-family-body), sans-serif;
}

:where(h1, h2, h3, h4) {
  font-family: var(--sem-typography-family-heading), sans-serif;
  text-wrap: balance;
}

:where(h1) { font-size: var(--sem-typography-h1-size); line-height: var(--sem-typography-h1-line-height); }
:where(h2) { font-size: var(--sem-typography-h2-size); line-height: var(--sem-typography-h2-line-height); }
:where(h3) { font-size: var(--sem-typography-h3-size); line-height: var(--sem-typography-h3-line-height); }
:where(h4) { font-size: var(--sem-typography-h4-size); line-height: var(--sem-typography-h4-line-height); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sem-color-focus-ring);
  outline-offset: 2px;
}

.sem-container {
  width: min(calc(100% - 2 * var(--sem-layout-gutter-mobile)), var(--sem-layout-container-max));
  margin-inline: auto;
}

@media (min-width: 834px) {
  .sem-container { width: min(calc(100% - 2 * var(--sem-layout-gutter-tablet)), var(--sem-layout-container-max)); }
}

@media (min-width: 1280px) {
  .sem-container { width: min(calc(100% - 2 * var(--sem-layout-gutter-desktop)), var(--sem-layout-container-max)); }
}

.sem-skip-link {
  position: fixed;
  z-index: 10000;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: var(--sem-space-150) var(--sem-space-200);
  color: var(--sem-color-text-on-brand);
  background: var(--sem-color-bg-brand);
  transform: translateY(-150%);
}

.sem-skip-link:focus-visible { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}