/* Tapps accessibility layer (WCAG 2.1 AA). Loaded on every page after the page's own styles.
   Pairs with /a11y/a11y.js. Safe to remove both files to roll back. */

/* ---------- Skip link, screen-reader-only text ---------- */
.a11y-skip {
  position: fixed; top: 8px; left: 8px; z-index: 10000;
  padding: 10px 16px; border-radius: 8px;
  background: #1A237E; color: #fff; font: 700 0.9rem/1.2 var(--font-display, 'Plus Jakarta Sans', sans-serif);
  text-decoration: none; transform: translateY(-160%); transition: transform .15s ease;
}
.a11y-skip:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px #3D5AFE; }
.a11y-sr {
  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;
}
main#main:focus { outline: none; }

/* ---------- Visible focus (2.4.7) ---------- */
.form-input:focus-visible, .form-input:focus {
  outline: 2px solid #fff !important; outline-offset: 2px; box-shadow: 0 0 0 4px #3D5AFE;
}
#contactForm .form-input:focus, .contact-section .form-input:focus { outline-color: #3D5AFE !important; box-shadow: 0 0 0 4px rgba(61,90,254,.25); }
.nav-link[role="button"]:focus-visible,
.faq-question:focus-visible, .faq-q:focus-visible,
.accordion-btn:focus-visible,
.a11y-scroll:focus-visible,
.a11y-pause:focus-visible,
.post-card:focus-within {
  outline: 3px solid #3D5AFE !important; outline-offset: 2px;
}
.footer .a11y-scroll:focus-visible, .step-section.dark .a11y-scroll:focus-visible { outline-color: #fff !important; }
.post-card:focus-within { border-radius: var(--radius-lg, 20px); }
.post-title a.a11y-sr:focus { outline: none; }

/* ---------- Keyboard-openable nav dropdowns (2.1.1) ---------- */
.nav-item.a11y-open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: opacity .25s ease, transform .25s ease; }
.nav-item.a11y-open .nav-dropdown a { transition-property: background-color, color, opacity, transform; }
.nav-item.a11y-open .nav-link-chevron { transform: rotate(180deg); }

/* ---------- Testimonial pause button (2.2.2) ---------- */
.a11y-pause:not(.t-btn) { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #C5CAE9; background: #fff; color: #1A237E; cursor: pointer; }
.a11y-pause svg { width: 14px; height: 14px; fill: var(--text-dark, #1C1C1E); stroke: none; }
.a11y-pause:hover svg { fill: #fff; }

/* ---------- Contrast (1.4.3) ---------- */
/* cobalt text on lavender -> cobalt-dark (5.6:1) */
.platform-tag, .uc-card-tag, .section-label,
.breadcrumb-inner a, .bc-inner a,
.nav-link.active-page, .nav-link:hover { color: #2a45e8; }
.breadcrumb-inner a, .bc-inner a { text-decoration: underline; text-underline-offset: 2px; }
.platform-tag:hover { color: #fff; }
/* footer on indigo */
.footer-col-title { color: #9aa0d0; }
.footer-copyright, .footer-legal-link { color: #a0a5d2; }
.footer-legal-link:hover { color: #fff; }
.footer-patent, .stat-patent { color: #a0a5d2 !important; }
.stat-patent strong { color: #c9ccec !important; }
#cookie-banner a { color: #8fa2ff !important; }
/* comparison table */
.chk { color: #2e7d32 !important; }
.crs { color: #c62828 !important; }
.swipe-hint { color: #2a45e8 !important; opacity: 1 !important; }
/* feature counts, blog and sample-app tags */
.feat-count { color: #3c4043 !important; }
.post-tag[style*="00C853"], .post-tag[style*="00c853"] { color: #00752f !important; }
.post-tag[style*="F59E0B"], .post-tag[style*="f59e0b"] { color: #8a5a00 !important; }
.post-tag[style*="3D5AFE"], .post-tag[style*="3d5afe"] { color: #2a45e8 !important; }

/* ---------- Limit always-on animation (2.2.2) ---------- */
.phone-frame, .app-mockup, [style*="animation:float"], [style*="animation: float"] { animation-iteration-count: 1 !important; }
.hero-badge-dot, .hero-dot { animation-iteration-count: 2 !important; }

@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;
  }
  .fade-up { opacity: 1 !important; transform: none !important; }
  .a11y-skip { transition: none; }
}

/* ---------- Reflow at 320 CSS px (1.4.10) ---------- */
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .stats-grid > * { min-width: 0; }
  .stat-item { padding-left: 8px !important; padding-right: 8px !important; border-bottom: none !important; }
  .stats-grid .stat-item:nth-child(3) { border-right: none !important; }
  .stat-label { overflow-wrap: anywhere; }
  .stat-patent { overflow-wrap: anywhere; padding-left: 8px; padding-right: 8px; }
  .step-inner > *, .intro-inner > *, .build-inner > *, .casestudy-inner > *, .hero-inner > *, .problem-inner > *, .features-inner > * { min-width: 0; }
  .casestudy-content, .build-content { overflow-wrap: anywhere; }
  .step-progress, .step-progress .container { max-width: 100%; min-width: 0; overflow: hidden; }
  .sp-inner { max-width: 100%; min-width: 0; }
}
@media (max-width: 400px) {
  .design-visual { padding: 20px !important; }
  .design-visual * { min-width: 0; }
  .dv-url-row, .dv-colors { flex-wrap: wrap; }
  .actions-grid > *, .bv-actions-grid > * { min-width: 0; }
  .action-item > * { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .stats-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .stat-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
  .actions-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* 404 outline buttons */
/* They were white on white (invisible); give them the brand outline style. */
.error-wrap .btn-outline { color: #2a45e8; border-color: #3D5AFE; }
.error-wrap .btn-outline:hover { color: #fff; background: #3D5AFE; border-color: #3D5AFE; }