/* Upgrade 08 — Accessibility + Final Mobile QA
   Non-visual polish layer: focus states, skip link, safe mobile overflow, tap targets,
   reduced-motion support, and form readability. It is intentionally conservative so it
   preserves the current Elboubakry UI and brand identity. */

:root {
  --ea-focus-ring: rgba(60, 91, 255, 0.46);
  --ea-focus-border: rgba(42, 70, 220, 0.82);
  --ea-tap-target: 44px;
}

html {
  scroll-padding-top: clamp(76px, 10vw, 112px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  touch-action: manipulation;
}

@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

img, video, canvas {
  height: auto;
}

.ea-skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 999999;
  transform: translateY(-140%);
  opacity: 0;
  pointer-events: none;
  padding: 12px 16px;
  border-radius: 999px;
  background: #ffffff;
  color: #102047;
  border: 1px solid rgba(16, 32, 71, 0.14);
  box-shadow: 0 16px 44px rgba(16, 32, 71, 0.18);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.ea-skip-link:focus,
.ea-skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  outline: 3px solid var(--ea-focus-ring);
  outline-offset: 4px;
}

#main-content:focus {
  outline: none;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ea-focus-ring);
  outline-offset: 4px;
  border-color: var(--ea-focus-border);
}

:where(.rs-btn, .ea-footer-lead-btn, .elb-mockup-open, .meanmenu-reveal, .bar-icon):focus-visible {
  box-shadow: 0 0 0 4px var(--ea-focus-ring);
}

:where(a, button, input, textarea, select) {
  -webkit-tap-highlight-color: rgba(60, 91, 255, 0.16);
}

:where(button, .rs-btn, input[type="submit"], input[type="button"], .ea-footer-lead-btn) {
  min-height: var(--ea-tap-target);
}

:where(input, textarea, select) {
  font-size: 16px;
}

:where(.container, .container-fluid, .row, [class*="col-"]) {
  min-width: 0;
}

:where(p, li, h1, h2, h3, h4, h5, h6, .rs-section-title, .rs-section-description, .insight-card-title, .article-title, .diagnostic-copy) {
  overflow-wrap: break-word;
}

:where(.insights-grid, .insights-list, .article-grid, .elb-carousel-shell, .elb-carousel-rail, .elb-mockup-track, .ea-growth-system, .ea-roadmap-system) {
  max-width: 100%;
}

.elb-carousel-rail:focus-visible {
  outline: 3px solid var(--ea-focus-ring);
  outline-offset: 8px;
  border-radius: 28px;
}

.elb-mockup-open {
  cursor: pointer;
}

[aria-disabled="true"],
:disabled {
  cursor: not-allowed;
}

/* Keep article reading comfortable on phones without changing the design language. */
@media (max-width: 575.98px) {
  html { scroll-padding-top: 82px; }

  body { width: 100%; }

  :where(.rs-btn, button, .ea-footer-lead-btn, input, textarea, select) {
    min-height: var(--ea-tap-target);
  }

  :where(input, textarea, select) {
    width: 100%;
  }

  :where(.rs-section-title, h1) {
    max-width: 100%;
  }

  :where(.insights-grid, .article-grid) {
    gap: 18px;
  }

  :where(.elb-carousel-shell, .elb-carousel-rail) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .elb-mockup-track {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .ea-skip-link,
  :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid CanvasText;
  }
}