/* ========== SHARED UTILITIES ========== */
/* Base utility classes used across multiple pages.
   Page-specific overrides should use scoped selectors
   (e.g. .assistenza-page .eyebrow) in their own files. */

/* ── Eyebrow / label ── */
.eyebrow {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin-bottom: 12px;
}

/* ── Section heading ── */
.section-heading {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 28px);
  color: var(--color-text);
  margin-bottom: 12px;
  line-height: 1.1;
}
.section-heading-lg {
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--color-text);
  margin-bottom: 16px;
  line-height: 1.1;
}

/* ── Section description text ── */
.desc-text {
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* ── Section header wrapper ── */
.section-header {
  max-width: 600px;
  margin: 0 auto 48px;
}

/* ── Flex center ── */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Focus styles ── */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}