/*
 * Conservative fixes for responsive / accessibility bugs in the legacy theme (loaded after
 * style.css + responsive.css). Only the specific problems found in the audit are addressed;
 * nothing here restyles a page.
 */

/* AOS "fade-left/right" elements start translated sideways, which widened the page on phones
   (e.g. the contact map column sat 100px off-screen until scrolled into view). clip (unlike
   hidden) does not create a scroll container, so position: sticky keeps working. */
body { overflow-x: clip; }

/* Listings (and every Laravel-style) pagination: wrap instead of overflowing narrow screens */
.pagination { flex-wrap: wrap; row-gap: 8px; }

/* About / home counters: on the narrowest phones (< 390px) a label like "Active Members" overflowed
   its half-width column; let the label wrap there, keeping the number + "+" on one line.
   From 390px up the layout is untouched. */
@media (max-width: 389.98px) {
  .counter-area .card-content { min-width: 0; }
  .counter-area .card-content h2 { white-space: nowrap; }
  .counter-area .card-text { overflow-wrap: anywhere; }
}

/* Embedded maps and videos never exceed their column */
.contact-area iframe, .product-single-details iframe, .tinymce-content iframe { max-width: 100%; }

/* DataTables (customer orders / dashboard): scroll the table, not the page */
.dataTables_wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dataTables_wrapper table.dataTable { min-width: 560px; }

/* Bootstrap modals stay inside small viewports */
@media (max-width: 575.98px) {
  .modal-dialog { max-width: calc(100vw - 1rem); margin: 0.5rem auto; }
  .modal-content { max-height: calc(100dvh - 1rem); overflow-y: auto; }
}

/* Keyboard focus is always visible (mouse clicks are unaffected: :focus-visible only) */
a:focus-visible, button:focus-visible, [role='button']:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-primary, #f9725f) !important;
  outline-offset: 2px;
}

/* Respect "reduce motion": no scroll animations, and AOS content is shown immediately */
@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; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}