/*
 * Educ8tors — mobile refinements.
 *
 * The site ships as a compiled React bundle, so these fixes are applied as a
 * late-loading stylesheet rather than in component source. Everything here is
 * scoped to phone widths; desktop layout is deliberately untouched.
 *
 * Each rule addresses a measured problem, noted inline.
 */

@media (max-width: 767px) {
  /* Footer nav links measured 20px tall. Apple HIG and Material both put the
     minimum tap target at 44px, so pad them vertically to reach it. The
     row-gap is zeroed to claw back the vertical space the padding adds, which
     keeps the footer the same overall height. */
  #root footer a {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  #root footer .flex-wrap {
    row-gap: 0;
  }

  /* The brand lockup in the header was a 32px tap target. */
  #root nav a[href="/"]:first-child {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* The footer disclaimer renders at 11.52px, below the floor for legible body
     copy on a phone. The bundle sets it with an inline `font-size: 0.72rem`,
     so !important is the only way to override it from a stylesheet. */
  #root footer p:not([class]) {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  /* Application forms are the site's conversion path and had two real defects
     on phones:

     1. Fields render at 14px. iOS Safari force-zooms the viewport whenever a
        focused field is under 16px, so tapping any input zoomed the page in
        and left the user pinching back out. 16px is the documented threshold.
     2. Fields and their submit buttons were 40px tall, under the 44px minimum.

     The aria-hidden exclusion leaves Radix's visually-hidden native <select>
     alone; giving it a min-height would break the custom dropdown it backs. */
  #root input:not([type="hidden"]):not([aria-hidden="true"]),
  #root select:not([aria-hidden="true"]),
  #root textarea:not([aria-hidden="true"]) {
    font-size: 16px !important;
  }

  #root input:not([type="hidden"]):not([aria-hidden="true"]),
  #root select:not([aria-hidden="true"]),
  #root button,
  #root [role="button"] {
    min-height: 44px;
  }

  /* Helper text under form fields renders at 12px. That is within spec, but it
     is the smallest type in the flow a user has to read while filling out an
     application on a phone, so nudge it up slightly. */
  #root form .text-xs {
    font-size: 13px;
  }

  /* Images inside figures were the only elements extending past the viewport.
     They are clipped by an overflow-hidden ancestor today, so there is no
     scrollbar, but constraining them removes the dependency on that clip. */
  #root figure,
  #root figure img {
    max-width: 100%;
  }
}

/* Respect the OS reduced-motion setting across the compiled bundle's GSAP and
   CSS animations. The bundle does not check this itself. */
@media (prefers-reduced-motion: reduce) {
  #root *,
  #root *::before,
  #root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}