/* ============================================================
   mobile.css — shared responsive / mobile UX polish
   Loaded AFTER each page's inline <style> so these rules win.
   All rules are scoped to small screens so the desktop design
   is untouched. CSS variables use fallbacks so pages that don't
   define the full theme token set still render correctly.
   ============================================================ */

/* Never let anything cause sideways scrolling on phones/tablets */
@media (max-width: 991.98px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  img { max-width: 100%; height: auto; }
}

/* Prevent iOS auto-zoom when focusing form fields (needs >=16px) */
@media (max-width: 991.98px) {
  .form-control, .form-select,
  .form-control-dark, .form-select-dark,
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ---------- Mobile navigation: a clear, tappable dropdown ---------- */
@media (max-width: 991.98px) {
  .navbar-toggler { padding: 0.3rem 0.55rem; }
  .navbar-toggler:focus { box-shadow: none; }

  .navbar-collapse {
    margin-top: 0.75rem;
    padding: 0.9rem;
    background: var(--card-bg-solid, #141a2e);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    box-shadow: 0 14px 34px var(--shadow-color, rgba(0, 0, 0, 0.4));
  }
  .navbar-nav { gap: 0.15rem !important; margin-bottom: 0.5rem; }
  .navlink {
    display: block;
    padding: 0.7rem 0.85rem !important;
    border-radius: 10px;
  }
  .navlink:hover,
  .navlink:focus { background: var(--glass-medium, rgba(255, 255, 255, 0.08)); }

  /* Stack action buttons full-width so they're easy to hit */
  .navbar-collapse .btn {
    width: 100%;
    margin: 0.3rem 0 !important;
    justify-content: center;
  }
  /* Keep the language + theme controls on their own tidy row */
  .navbar-collapse .lang-pill { flex: 0 0 auto; }
}

/* ---------- Comfortable touch targets ---------- */
@media (max-width: 767.98px) {
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-sm { min-height: 38px; }
  .lang-pill a, .theme-toggle { min-height: 40px; }
}

/* ---------- Headings & hero scaling ---------- */
@media (max-width: 767.98px) {
  .hero-section { padding: 74px 0 48px !important; }

  .display-1 { font-size: 2.4rem !important; }
  .display-2 { font-size: 2.2rem !important; }
  .display-3 { font-size: 2.0rem !important; }
  .display-4 { font-size: 1.9rem !important; }
  .display-5 { font-size: 1.7rem !important; }
  .display-6 { font-size: 1.5rem !important; }

  .hero-subtitle { font-size: 1.05rem !important; }

  .fs-1 { font-size: 1.9rem !important; }
  .fs-2 { font-size: 1.55rem !important; }
  .fs-3 { font-size: 1.3rem !important; }
}

/* ---------- Decorative hero graphic ---------- */
@media (max-width: 991.98px) {
  .hero-graphic { height: 260px !important; }
}
@media (max-width: 575.98px) {
  .hero-graphic { height: 200px !important; }
  .g-circle-1 { width: 170px; height: 170px; }
  .g-circle-2 { width: 140px; height: 140px; }
}

/* ---------- Vertical rhythm on small phones ---------- */
@media (max-width: 575.98px) {
  section { padding-top: 2.6rem !important; padding-bottom: 2.6rem !important; }
  .py-5 { padding-top: 2.6rem !important; padding-bottom: 2.6rem !important; }
  .glass-card, .card { border-radius: 16px !important; }
  .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- 4-step progress indicator (Register / Payment flows) ---------- */
@media (max-width: 575.98px) {
  .row.text-center .col-3 {
    font-size: 0.6rem !important;
    letter-spacing: 0 !important;
    padding: 0 2px !important;
    line-height: 1.25;
  }
}

/* ---------- Tables scroll instead of squishing ---------- */
@media (max-width: 767.98px) {
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ---------- Floating CTA: keep clear of the very bottom ---------- */
@media (max-width: 575.98px) {
  .floating-register-btn { bottom: 16px !important; right: 16px !important; }
}

/* ============================================================
   Simple page <header> (login / register / payment / success /
   certificate) — brand on the left, lang + theme on the right.
   Keep it a tidy single row that never overflows on phones.
   ============================================================ */
@media (max-width: 767.98px) {
  header > .container.d-flex { gap: 0.6rem; }

  /* Brand may shrink; its text truncates instead of pushing controls */
  header .brand {
    font-size: 1.02rem;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
  }
  header .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  header .brand img { height: 28px !important; }

  /* Controls stay intact and never wrap under the logo */
  header > .container .d-flex.align-items-center { flex: 0 0 auto; }
}

@media (max-width: 575.98px) {
  header { padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; }
  header .brand { font-size: 0.92rem; gap: 0.4rem !important; }
  header .brand img { height: 24px !important; }
  /* Centered certificate header title scales down cleanly */
  header .container.text-center .fs-4 { font-size: 1.1rem !important; }
}

/* ============================================================
   Navbar-based header (index / courses / dashboard) — keep the
   brand from crowding the hamburger toggler on small screens.
   ============================================================ */
@media (max-width: 991.98px) {
  .navbar .brand {
    font-size: 1.05rem;
    min-width: 0;
    overflow: hidden;
  }
  .navbar .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .navbar .brand img { height: 28px !important; }
  .navbar .navbar-toggler { flex: 0 0 auto; }
}