/**
 * HaiTechnologies — Modern Standards Layer (public-modern.css)
 * 2025–2026 Web Standards: Fluid Typography, Modern CSS Logical Properties,
 * Container Queries, WCAG 2.2 AA Focus Rings & 48px Touch Targets.
 */

:root {
  /* Fluid typography clamp tiers: Maxima preserve exact current desktop px */
  --fluid-h1: clamp(2rem, 1.4rem + 2.8vw, 3.75rem);       /* 32px -> 60px */
  --fluid-h2: clamp(1.625rem, 1.2rem + 2.1vw, 3rem);      /* 26px -> 48px */
  --fluid-h3: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem); /* 22px -> 30px */
  --fluid-h4: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);     /* 19.2px -> 24px */
  --fluid-h5: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem); /* 17px -> 20px */
  --fluid-h6: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);     /* 15px -> 16px */
  --fluid-body: clamp(0.96875rem, 0.9375rem + 0.2vw, 1.0625rem);

  /* Fluid Spacing & Section Padding */
  --section-space-y: clamp(3.5rem, 6vw, 6.5rem);
  --section-space-sm: clamp(2rem, 4vw, 4rem);

  /* Focus Indicator System (WCAG 2.4.7 / 2.4.11) */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: #fd7801;

  /* Touch Target Dimension (WCAG 2.5.8) */
  --touch-target-min: 48px;
}

/* ── Typography & Measure ─────────────────────────────────────────────────── */
h1, .h1 { font-size: var(--fluid-h1) !important; line-height: 1.15; }
h2, .h2 { font-size: var(--fluid-h2) !important; line-height: 1.2; }
h3, .h3 { font-size: var(--fluid-h3) !important; line-height: 1.25; }
h4, .h4 { font-size: var(--fluid-h4) !important; line-height: 1.3; }
h5, .h5 { font-size: var(--fluid-h5) !important; line-height: 1.35; }
h6, .h6 { font-size: var(--fluid-h6) !important; line-height: 1.4; }

body {
  font-size: var(--fluid-body);
  overflow-x: clip;
}

/* Optimal reading length for editorial & article text (65ch) */
article p,
.blog-details-content p,
.about-hero-modern p,
.rts-service-details-area p,
.prose-text {
  max-inline-size: 65ch;
  line-height: 1.65;
}

/* ── Skip Link (WCAG 2.4.1) ───────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -9999px;
  left: 1rem;
  z-index: 999999;
  padding: 0.75rem 1.25rem;
  background-color: #141416;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 2px solid #fd7801;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: top 0.15s ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  outline: var(--focus-ring-width) solid #fd7801;
  outline-offset: var(--focus-ring-offset);
}

/* ── Global Accessible Focus Rings (WCAG 2.4.7 / 2.4.11) ─────────────────── */
:where(a, button, input, select, textarea, [tabindex="0"], summary, .rts-btn, .btn, .nav-link):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
  outline-offset: var(--focus-ring-offset) !important;
}

/* ── Touch Target System (WCAG 2.5.8) ─────────────────────────────────────── */
.menu-btn,
.close-icon-menu,
.swiper-btn,
.rts-read-more,
.social-three-wrapper a,
.whatsapp-float,
.icon-btn,
.btn-icon {
  min-inline-size: var(--touch-target-min);
  min-block-size: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Container Queries for Responsive Component Grids ─────────────────────── */
.container-query-grid,
.rts-service-area,
.rts-project-area,
.rts-blog-area {
  container-type: inline-size;
}

@container (min-width: 36rem) {
  .service-card-auto,
  .project-card-auto {
    display: flex;
    flex-direction: column;
  }
}

@container (min-width: 48rem) {
  .service-card-auto-horizontal {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 1.5rem;
  }
}

/* ── Utility Classes & Screen-Reader Helpers ──────────────────────────────── */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── High Contrast & Forced Colors Mode (WCAG 1.4.11 / 1.4.3) ─────────────── */
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [tabindex="0"]):focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 3px !important;
  }
  .skip-link {
    border: 2px solid Highlight;
    background: Canvas;
    color: CanvasText !important;
  }
}

/* ── Reduced Motion Preference (WCAG 2.3.3) ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}