/* ──────────────────────────────────────────────────────────────────────────
   M2 — Academy mobile polish
   Purely additive overrides for the Academy LMS frontend on phones.
   Every rule lives inside @media (max-width: 768px) so desktop is
   untouched by construction. Loaded from m2-core.php next to the
   teaser-override enqueue.

   Scope: student-facing surfaces only — course archive, course detail,
   lesson player, quizzes, login/registration. Admin dashboard ignored.

   Goals:
     - Tap targets ≥44×44px (WCAG / iOS HIG)
     - Inputs ≥16px font-size to prevent iOS Safari zoom-on-focus
     - Quiz answer controls comfortably tappable
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* 1) Form inputs across all Academy frontend surfaces. SFB-style
          16px / 44px floor — kills the iOS zoom-on-focus jump and
          meets the touch-target minimum. Scoped to .academy-* containers
          so it cannot leak into the surrounding theme/page. */
    .academy-wrap input[type="text"],
    .academy-wrap input[type="email"],
    .academy-wrap input[type="password"],
    .academy-wrap input[type="search"],
    .academy-wrap input[type="url"],
    .academy-wrap input[type="tel"],
    .academy-wrap input[type="number"],
    .academy-wrap textarea,
    .academy-wrap select,
    .academy-app input[type="text"],
    .academy-app input[type="email"],
    .academy-app input[type="password"],
    .academy-app input[type="search"],
    .academy-app input[type="url"],
    .academy-app input[type="tel"],
    .academy-app input[type="number"],
    .academy-app textarea,
    .academy-app select,
    .academy-search-component .academy-search-component__input {
        font-size: 16px !important;
        min-height: 44px !important;
    }

    .academy-wrap textarea,
    .academy-app textarea {
        min-height: 88px !important;
    }

    /* 2) Icon-style Academy buttons — `.academy-btn` ships at 30×30 for
          icon-only variants (close, expand, dropdown trigger). Target
          known icon variants by class name + the lesson chrome where
          icon buttons live, so the rectangular text-button variants
          (which already have horizontal padding) aren't affected. */
    .academy-btn.academy-btn--icon,
    .academy-btn[class*="--icon"],
    .academy-btn-close,
    .academy-btn-expand,
    .academy-btn-collapse,
    .academy-lesson-topbar .academy-btn,
    .academy-lesson-sidebar .academy-btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* 3) Quiz answer inputs — these are what students actually touch.
          Bumping radio/checkbox to 22px (and the explicit
          `.academy-lesson-quiz-answer-input` to match) makes wrong-answer
          mis-taps far less common. */
    .academy-wrap input[type="checkbox"],
    .academy-wrap input[type="radio"],
    .academy-app input[type="checkbox"],
    .academy-app input[type="radio"],
    input.academy-lesson-quiz-answer-input {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
    }

    /* Give the quiz answer rows a comfortable hit area beyond the
       checkbox itself — tapping the label text should also work. */
    .academy-lesson-quiz-answer,
    .academy-lesson-quiz-answer label {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* 4) Course card info icon — 28×28 is below the comfort floor on
          glass. The `.is-expanded` toggle Academy already ships handles
          the tap-to-open behavior; this just makes the trigger bigger. */
    .academy-course-card-info__icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* 5) Body text floor on student-facing surfaces — Academy has a few
          spots at 12–13px (helper text, meta lines) that read tiny on
          a phone. Floor at 14px so text stays legible without forcing
          a zoom. Scoped tight so we don't enlarge intentionally-small
          UI labels (counts in pills, etc.). */
    .academy-course-content,
    .academy-lesson-content,
    .academy-course-description,
    .academy-lesson-description {
        font-size: max(14px, 1em) !important;
    }
}