/* ============================================
   UTILITIES
   Reusable helper classes for all sites
   ============================================ */

/* ---- Fluid Spacing Scale ---- */
:root {
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 0.75rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-lg: clamp(1.5rem, 3vw, 2.5rem);
  --space-xl: clamp(2rem, 5vw, 4rem);
  --space-2xl: clamp(3rem, 7vw, 6rem);
  --space-3xl: clamp(4rem, 10vw, 8rem);
  --space-section: clamp(3rem, 8vw, 7rem);
}

/* ---- Fluid Typography Scale ---- */
:root {
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --text-xl: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --text-2xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  --text-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-4xl: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --text-5xl: clamp(3rem, 2rem + 4vw, 5.5rem);
  --text-hero: clamp(3.5rem, 2rem + 6vw, 7rem);
}

/* ---- Layout ---- */
.container {
  width: 90%;
  max-width: 1200px;
  margin-inline: auto;
}

.container--narrow {
  max-width: 900px;
}

.container--wide {
  max-width: 1400px;
}

/* ---- Flexbox ---- */
.flex { display: flex; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-column { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 2rem; }
.gap-xl { gap: 3rem; }

/* ---- Text ---- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.small-caps {
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* ---- Sections (fluid spacing) ---- */
.section {
  padding-block: var(--space-section);
}

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

.section--lg {
  padding-block: var(--space-3xl);
}

/* ---- Spacing helpers ---- */
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* ---- Full bleed ---- */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ---- Accessibility ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: var(--accent, #1E6BA5);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* ---- Visibility ---- */
.hidden { display: none; }

/* ---- Scroll Reveal (backward compatible) ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* New data-reveal system (per-template animations via CSS) */
[data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.6s var(--ease-out, ease), transform 0.6s var(--ease-out, ease);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* CSS scroll-driven animations (zero JS, modern browsers) */
@supports (animation-timeline: view()) {
  .scroll-reveal {
    animation: scrollReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  @keyframes scrollReveal {
    from { opacity: 0; transform: translateY(2rem); }
    to { opacity: 1; transform: translateY(0); }
  }

  .scroll-reveal-left {
    animation: scrollRevealLeft linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  @keyframes scrollRevealLeft {
    from { opacity: 0; transform: translateX(-2rem); }
    to { opacity: 1; transform: translateX(0); }
  }

  .scroll-reveal-right {
    animation: scrollRevealRight linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  @keyframes scrollRevealRight {
    from { opacity: 0; transform: translateX(2rem); }
    to { opacity: 1; transform: translateX(0); }
  }

  .scroll-reveal-scale {
    animation: scrollRevealScale linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  @keyframes scrollRevealScale {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
  }
}

@supports not (animation-timeline: view()) {
  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-scale {
    opacity: 1;
    transform: none;
  }
}

/* ---- Responsive Visibility ---- */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}