/* ============================================================
   ACCESSIBILITY — WCAG 2.1 AA Compliance
   ============================================================ */

/* Skip link */
.skip-link:focus { top: 0 !important; outline: 3px solid #1a1a2e; }

/* Focus rings — visible on all interactive elements */
:focus-visible {
  outline: 3px solid #FFD338;
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid #FFD338;
  outline-offset: 2px;
}

/* Ensure sufficient color contrast */
.text-muted { color: #4b5563 !important; } /* Upgraded from Bootstrap's low-contrast gray */
.section-sub { color: #4b5563 !important; }
.plan-period { color: #4b5563 !important; }
.plan-desc { color: #4b5563 !important; }

/* Minimum tap target size (44x44px) for mobile */
.btn-gold, .btn-dark, .btn-wa-sm, .btn-view-detail,
.btn-submit-ticket, .btn-order-wa, .btn-start-wa,
.btn-get-start, .btn-contact-wa, .btn-search,
.btn-form-submit, .btn-company-profile,
.footer-social-btn, .testimonial-nav-btn {
  min-height: 44px;
  min-width: 44px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --lcs-gold: #e6ae00;
    --lcs-amber: #e6ae00;
  }
  .btn-gold { border: 2px solid #1a1a2e; }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .trust-marquee { animation: none; }
  #wa-float { animation: none; }
}

/* Print styles */
@media print {
  #wa-float, #cookie-banner, #popup-overlay, .page-transition-overlay,
  #main-navbar, #top-bar { display: none !important; }
  body { font-size: 12pt; }
  a[href]::after { content: " (" attr(href) ")"; }
}

/* Screen reader only utility */
.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;
}

/* Image aspect ratio preservation */
img { height: auto; }
img[width][height] { aspect-ratio: attr(width) / attr(height); }