/**
 * Ugobest base layer — containers, type helpers, focus, reduced motion.
 */

/* Prevent narrow-viewport horizontal scroll from off-canvas / sticky chrome. */
html {
  overflow-x: clip;
  max-width: 100%;
}
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Font metric fallbacks reduce CLS while async webfonts swap in. */
body,
button,
input,
select,
textarea {
  font-synthesis: none;
}

.ugb-container {
  width: min(var(--ugb-container-xl), calc(100% - (var(--ugb-gutter) * 2)));
  margin-inline: auto;
  padding-inline: 0;
  max-width: 100%;
}

@media (max-width: 575.98px) {
  :root {
    --ugb-gutter: 1rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --ugb-gutter: 1.5rem;
  }
}

.ugb-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ugb-skip-link {
  position: absolute;
  left: var(--ugb-space-4);
  top: var(--ugb-space-4);
  z-index: calc(var(--ugb-z-toast) + 1);
  padding: var(--ugb-space-3) var(--ugb-space-4);
  background: var(--ugb-color-surface);
  color: var(--ugb-color-ink);
  border-radius: var(--ugb-radius-sm);
  transform: translateY(-200%);
  transition: transform var(--ugb-duration-fast) var(--ugb-ease);
}

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

:where(
  .ugb-btn,
  .ugb-input,
  .ugb-select,
  .ugb-search__input,
  .ugb-icon-btn,
  .ugb-card__link,
  .ugb-nav__list a,
  .ugb-footer a,
  .ugb-announce a,
  .ugb-pagination a,
  .ugb-breadcrumbs a
):focus-visible {
  outline: 2px solid var(--ugb-color-focus);
  outline-offset: 2px;
}

.ugb-type-display { font-family: var(--ugb-font-display); font-size: var(--ugb-fs-display); font-weight: var(--ugb-fw-bold); line-height: 1.1; letter-spacing: -0.02em; color: var(--ugb-color-ink); }
.ugb-type-h1 { font-family: var(--ugb-font-display); font-size: var(--ugb-fs-h1); font-weight: var(--ugb-fw-bold); line-height: var(--ugb-lh-tight); color: var(--ugb-color-ink); }
.ugb-type-h2 { font-family: var(--ugb-font-display); font-size: var(--ugb-fs-h2); font-weight: var(--ugb-fw-bold); line-height: 1.2; color: var(--ugb-color-ink); }
.ugb-type-h3 { font-size: var(--ugb-fs-h3); font-weight: var(--ugb-fw-semibold); line-height: 1.25; color: var(--ugb-color-ink); }
.ugb-type-h4 { font-size: var(--ugb-fs-h4); font-weight: var(--ugb-fw-semibold); line-height: 1.3; color: var(--ugb-color-ink); }
.ugb-type-h5 { font-size: var(--ugb-fs-h5); font-weight: var(--ugb-fw-semibold); line-height: 1.35; color: var(--ugb-color-ink); }
.ugb-type-body-lg { font-size: var(--ugb-fs-body-lg); line-height: var(--ugb-lh-relaxed); color: var(--ugb-color-ink-muted); }
.ugb-type-body { font-size: var(--ugb-fs-body); line-height: var(--ugb-lh-relaxed); color: var(--ugb-color-ink); }
.ugb-type-body-sm { font-size: var(--ugb-fs-body-sm); line-height: var(--ugb-lh-normal); color: var(--ugb-color-ink-muted); }
.ugb-type-caption { font-size: var(--ugb-fs-caption); line-height: 1.4; color: var(--ugb-color-ink-subtle); }
.ugb-type-label { font-size: var(--ugb-fs-label); font-weight: var(--ugb-fw-medium); line-height: 1.2; color: var(--ugb-color-ink); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}