/* ============================================================================
   mobile.css - site-wide mobile corrections for aurus.ai
   ----------------------------------------------------------------------------
   Loaded LAST on every page so it wins specificity ties without !important
   everywhere. Desktop is deliberately untouched: everything structural sits
   inside a max-width media query.

   REVISION NOTE - carousel dots
   The previous version listed the bare element selector `button` in the
   44px min-height rule. The hero carousel indicators are
   <button class="carousel-dot"> at 12px square, so a 44px min-height turned
   each circle into a vertical ellipse. Same damage sat on .modal-close,
   .sg-dot, .sw-dot and .rung-dot.

   Styling every button on a site by element name was the mistake. A tap
   target is about the area a finger can hit, not the size of the painted
   control - so small controls now keep their dimensions and gain an
   invisible 44px hit area from a centred pseudo-element. Text buttons, which
   are already wide, still grow normally.
   ========================================================================= */

/* -- global safety nets --------------------------------------------------- */

/* Media must never exceed its container. Cheapest overflow fix there is. */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Long URLs, emails and IDs are the usual cause of a stray horizontal scroll. */
p, li, td, th, dd, dt, blockquote, figcaption, .card, .footer-column a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Preformatted blocks scroll themselves rather than stretching the page. */
pre, code {
  overflow-x: auto;
  max-width: 100%;
}

/* iOS zooms any focused input under 16px and does not zoom back out.
   16px is a hard floor, not a preference. */
input, select, textarea {
  font-size: max(16px, 1rem);
}

/* Sticky and fixed chrome must clear the notch and the home indicator. */
.navbar, .site-header, header[class*="fixed"], .sticky-bar {
  padding-top: env(safe-area-inset-top, 0px);
}
.site-footer, .footer, footer {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* -- tables --------------------------------------------------------------- */
/* Only three of 34 table pages had a scroll wrapper. Rather than edit HTML on
   every page, make the table itself the scroll container below tablet width.
   display:block on a table is a legitimate trick here - it costs column
   alignment across rows, which a phone cannot show anyway. */
@media (max-width: 768px) {
  table:not(.no-mobile-scroll) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table:not(.no-mobile-scroll) th,
  table:not(.no-mobile-scroll) td {
    white-space: nowrap;
  }
}

/* -- footer (components.css had no responsive rules at all) --------------- */
@media (max-width: 768px) {
  .footer-links {
    flex-direction: column;
    gap: 28px;
  }
  /* The vertical divider between columns only makes sense side by side. */
  .footer-column:not(:last-child)::after {
    display: none;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
  }
  .footer-legal {
    flex-wrap: wrap;
    gap: 4px 18px;
  }
  .footer-column a,
  .footer-legal a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* -- tap targets: wide controls ------------------------------------------- */
/* Only controls that carry text. These are already wider than 44px, so
   growing the box cannot distort them. The bare `button` selector is
   deliberately absent - see the revision note at the top of this file. */
@media (max-width: 768px) {
  .btn, .button, .nav-link, .accordion-header,
  a.cta, .btn-primary, .btn-sm, .btn-large,
  .faq-question, .faq-nav-item, .lxv-btn, .pv-gate-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .accordion-header, .faq-question {
    padding: 14px 16px;
    justify-content: space-between;
  }
}

/* -- tap targets: small controls ------------------------------------------ */
/* Dots, closes and icon buttons keep their painted size. The hit area is
   extended by a centred, invisible pseudo-element instead, so a finger gets
   44px while the eye still sees a 12px dot. */
@media (max-width: 768px) {
  .carousel-dot, .sg-dot, .sw-dot, .rung-dot,
  .modal-close, .wl-close, .acct-modal-close,
  .icon-btn, .sg-icon-btn, .pl-cbtn, .cbtn,
  [aria-label*="close" i], [aria-label*="Slide" i] {
    position: relative;
  }
  .carousel-dot::after, .sg-dot::after, .sw-dot::after, .rung-dot::after,
  .modal-close::after, .wl-close::after, .acct-modal-close::after,
  .icon-btn::after, .sg-icon-btn::after, .pl-cbtn::after, .cbtn::after,
  [aria-label*="close" i]::after, [aria-label*="Slide" i]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    /* Purely a hit area - never paints, never affects layout. */
    background: transparent;
    pointer-events: auto;
  }
  /* The dots sit 12px apart; 44px hit areas would overlap and steal each
     other's taps. Widening the gap keeps every target reachable. */
  .carousel-dots {
    gap: 22px !important;
  }
}

/* -- layout containment --------------------------------------------------- */
@media (max-width: 768px) {
  .d-grid, .grid, .grid-2, .grid-3, .grid-4,
  .cards, .card-grid {
    grid-template-columns: 1fr !important;
  }
  .btn-group {
    flex-wrap: wrap;
  }

  /* Modals and popups fill the screen rather than overflowing it. */
  .modal, .modal-content, .popup, .dialog {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
  }
}

/* -- viewport-height correction ------------------------------------------- */
/* 100vh is taller than the visible area on iOS Safari and Chrome Android -
   the browser chrome overlays the bottom. dvh tracks the real viewport. */
@supports (height: 100dvh) {
  .full-height, .hero-full, .vh-100, [class*="min-vh"] {
    min-height: 100dvh;
  }
}

/* -- small phones --------------------------------------------------------- */
@media (max-width: 400px) {
  .btn-group, .hero-actions, .cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-group .btn, .hero-actions .btn, .cta-row .btn {
    width: 100%;
  }
}

/* -- motion and focus ----------------------------------------------------- */
@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;
  }
}

/* Keyboard focus must stay visible - several stylesheets zero out outlines. */
:focus-visible {
  outline: 2px solid #F5A623;
  outline-offset: 2px;
}