/* ═══════════════════════════════════════════════════════════════
   HVAC247PRO — Utilities
   ─────────────────────────────────────────────────────────────
   Focused micro-utilities. Components should do the heavy lifting;
   utilities cover only the cross-cutting edge cases.
   ═══════════════════════════════════════════════════════════════ */

/* ── Visibility ─────────────────────────────────────────────── */

.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;
}

.visually-hidden { /* alias for .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;
}

.invisible { visibility: hidden; }

.no-scroll {
  overflow: hidden !important;
  /* prevent iOS rubber-band scroll behind modal */
  touch-action: none;
}

/* ── Spacing utilities (escape hatches — prefer flow utilities) ── */

.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.mx-auto { margin-inline: auto; }

.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* ── Backgrounds ────────────────────────────────────────────── */

.bg-transparent { background: transparent; }
.bg-surface-1   { background: var(--surface-1); }
.bg-surface-2   { background: var(--surface-2); }
.bg-navy-900    { background: var(--color-navy-900); }
.bg-navy-950    { background: var(--color-navy-950); }
.bg-light       { background: var(--surface-light); color: var(--text-on-light); }

/* Subtle texture / noise (use sparingly — atmospheric depth) */
.bg-noise {
  position: relative;
  isolation: isolate;
}
.bg-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='8'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Map-grid background for location pages */
.bg-map-grid {
  background-color: var(--surface-1);
  background-image:
    linear-gradient(rgba(29, 53, 86, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 53, 86, 0.32) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Borders ────────────────────────────────────────────────── */

.border-0 { border: 0; }
.border   { border: 1px solid var(--border-default); }
.border-t { border-top: 1px solid var(--border-subtle); }
.border-b { border-bottom: 1px solid var(--border-subtle); }

.rounded     { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full{ border-radius: var(--radius-pill); }

/* ── Shadows ────────────────────────────────────────────────── */

.shadow-none { box-shadow: none; }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-xl); }
.shadow-glow-gold { box-shadow: var(--glow-gold); }
.shadow-glow-red  { box-shadow: var(--glow-red); }

/* ── Opacity ────────────────────────────────────────────────── */

.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-70  { opacity: 0.7; }
.opacity-100 { opacity: 1; }

/* ── Cursor ─────────────────────────────────────────────────── */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* ── Object fit ─────────────────────────────────────────────── */

.object-cover    { object-fit: cover; }
.object-contain  { object-fit: contain; }
.object-center   { object-position: center; }

/* ── Reduced motion overrides (utility class) ───────────────── */

.motion-safe { /* default — no-op */ }

@media (prefers-reduced-motion: reduce) {
  .motion-reduce-disable,
  .motion-reduce-disable *,
  .motion-reduce-disable *::before,
  .motion-reduce-disable *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print-only / screen-only ───────────────────────────────── */

.screen-only { /* hidden in print, see print.css */ }
.print-only  { display: none; }

/* ── Reveal-on-scroll (paired with IntersectionObserver JS) ─── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--duration-slower) var(--ease-expo-out),
    transform var(--duration-slower) var(--ease-expo-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slow) var(--ease-expo-out),
    transform var(--duration-slow) var(--ease-expo-out);
}

.reveal-stagger.is-visible > *           { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Focus-ring lock for specific surfaces ──────────────────── */

.focus-on-light:focus-visible {
  outline-color: var(--ring-color-on-light);
}

/* ── Aspect helpers (extra, used inline rarely) ─────────────── */

.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-1-1  { aspect-ratio: 1 / 1; }
.aspect-3-2  { aspect-ratio: 3 / 2; }

/* ── ANIMATIONS (lean — only ones actually used) ────────────── */

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.animate-float { animation: float-soft 4s var(--ease-in-out) infinite; }
.animate-fade-up { animation: fade-up var(--duration-slow) var(--ease-expo-out) both; }

@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-fade-up { animation: none; }
}

/* Marquee strip (cert badges, partners) */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.marquee-track {
  display: inline-flex;
  gap: var(--space-10);
  animation: marquee 32s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ── Skip nav link (accessibility) ──────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-3);
  z-index: var(--z-max);
  padding: var(--space-3) var(--space-5);
  background: var(--accent-premium);
  color: var(--color-navy-950);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.skip-link:focus { top: var(--space-3); }