/*
 * All foundation rules are opt-in through ut-* classes. Activating the child
 * theme therefore leaves existing Astra and WooCommerce layouts unchanged.
 */
.ut-page {
  background: var(--ut-bg-light);
  color: var(--ut-text-dark);
  font-family: var(--ut-font-main);
  font-size: var(--ut-text-base);
  line-height: var(--ut-leading-body);
  overflow: clip;
}

.ut-page *,
.ut-page *::before,
.ut-page *::after {
  box-sizing: border-box;
}

.ut-container {
  inline-size: min(calc(100% - var(--ut-gutter) - var(--ut-gutter)), var(--ut-container-main));
  margin-inline: auto;
}

.ut-container--wide {
  max-inline-size: var(--ut-container-wide);
}

.ut-container--reading {
  max-inline-size: var(--ut-container-reading);
}

.ut-section {
  padding-block: var(--ut-space-section);
}

.ut-section--light {
  background: var(--ut-bg-light);
  color: var(--ut-text-dark);
}

.ut-section--light-alt {
  background: var(--ut-bg-light-alt);
  color: var(--ut-text-dark);
}

.ut-section--dark {
  background: var(--ut-bg-dark);
  color: var(--ut-text-light);
}

.ut-section--dark-alt {
  background: var(--ut-bg-dark-alt);
  color: var(--ut-text-light);
}

.ut-eyebrow {
  color: var(--ut-cyan-ink);
  font-size: var(--ut-text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ut-section--dark .ut-eyebrow,
.ut-section--dark-alt .ut-eyebrow {
  color: var(--ut-cyan);
}

.ut-title {
  max-inline-size: 18ch;
  margin: 0;
  color: inherit;
  font-family: var(--ut-font-display);
  font-size: var(--ut-text-2xl);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: var(--ut-leading-tight);
  text-wrap: balance;
}

.ut-heading {
  margin: 0;
  color: inherit;
  font-family: var(--ut-font-display);
  font-size: var(--ut-text-xl);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}

.ut-copy {
  max-inline-size: 64ch;
  margin: 0;
  color: var(--ut-text-muted);
}

.ut-section--dark .ut-copy,
.ut-section--dark-alt .ut-copy {
  color: color-mix(in srgb, var(--ut-text-light) 72%, transparent);
}

.ut-link {
  color: var(--ut-cyan-ink);
  font-weight: 700;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.2em;
}

.ut-section--dark .ut-link,
.ut-section--dark-alt .ut-link {
  color: var(--ut-cyan);
}

.ut-link:focus-visible,
.ut-page :where(a, button, input, select, textarea):focus-visible {
  border-radius: var(--ut-radius-sm);
  outline: 0.15rem solid var(--ut-cyan);
  outline-offset: 0.2rem;
  box-shadow: var(--ut-focus-ring);
}

.ut-stack > * {
  margin-block: 0;
}

.ut-stack > * + * {
  margin-block-start: var(--ut-space-3);
}

.ut-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ut-space-2);
  align-items: center;
}