/* =========================================================
   PrepLingo mobile polish + performance layer
   Scope: mobile/tablet stability only. Desktop layout untouched.
   ========================================================= */

html, body { overflow-x: hidden !important; }

/* Keep footer logos/contact blocks from stretching on course pages with different CSS systems. */
.site-footer .footer-brand,
.site-footer .footer-brand p,
.site-footer .footer-brand .preplingo-footer-contact,
.site-footer .footer-brand .preplingo-footer-socials {
  max-width: 100% !important;
}
.site-footer .footer-brand img,
.footer-brand img {
  width: 132px !important;
  max-width: 132px !important;
  height: auto !important;
  max-height: 52px !important;
  object-fit: contain !important;
}

/* Mobile page-speed help: below-fold sections render lazily where supported. */
@supports (content-visibility: auto) {
  section:not(.hero):not(.about-hero):not(.contact-hero):not(.terms-hero):not(#sec-hero),
  .pl-seo-cluster,
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 720px;
  }
}

@media (max-width: 980px) {
  .pl-header-container { min-height: 70px !important; }
  .pl-brand img { width: 120px !important; max-width: 120px !important; max-height: 48px !important; }
  .pl-mobile-panel { max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* Horizontal course journeys looked like broken overflow on phones. Stack only on mobile/tablet. */
  .journey-line,
  .path-track {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    gap: 14px !important;
    padding: 0 !important;
  }
  .journey-step,
  .path-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
  }
  .journey-step::after,
  .journey-step:not(:last-child)::after { display: none !important; }

  /* Decorative blobs/bubbles should not create perceived overlap or side overflow on mobile. */
  .blob,
  .blob.two,
  .blob-one,
  .blob-two,
  .duo-bubble,
  .stat-bubble {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .pl-header-container {
    width: min(100% - 24px, 760px) !important;
    min-height: 66px !important;
    gap: 10px !important;
  }
  .pl-brand img { width: 112px !important; max-width: 112px !important; }
  .pl-header-whatsapp { width: 40px !important; min-height: 40px !important; }
  .pl-mobile-toggle { width: 40px !important; height: 40px !important; }

  /* Duolingo hero: keep all score/map cards visible and separated on phones. */
  body .duo-hero { min-height: auto !important; }
  body .duo-panel {
    min-height: 735px !important;
    overflow: hidden !important;
    padding: 18px !important;
    border-radius: 30px !important;
  }
  body .duo-topbars { left: 44px !important; right: 22px !important; gap: 10px !important; }
  body .duo-owl {
    left: 50% !important;
    top: 78px !important;
    transform: translateX(-50%) scale(.86) !important;
  }
  body .duo-mock-card {
    left: 50% !important;
    top: 34px !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: calc(100% - 38px) !important;
    white-space: normal !important;
  }
  body .duo-score-card {
    left: 18px !important;
    right: 18px !important;
    top: 314px !important;
    width: auto !important;
  }
  body .duo-lesson-card {
    left: 18px !important;
    right: 18px !important;
    top: 458px !important;
    width: auto !important;
  }
  body .duo-speak-card {
    left: 18px !important;
    right: 18px !important;
    bottom: 26px !important;
    width: auto !important;
  }

  /* TOEFL hero: separate mission board floating cards on phones. */
  body .mission-board {
    min-height: 840px !important;
    overflow: hidden !important;
    border-radius: 30px !important;
    padding: 18px !important;
  }
  body .format-pill {
    left: 50% !important;
    right: auto !important;
    top: 42px !important;
    transform: translateX(-50%) !important;
    max-width: calc(100% - 38px) !important;
    white-space: normal !important;
  }
  body .main-task-card {
    left: 18px !important;
    right: 18px !important;
    top: 112px !important;
    width: auto !important;
  }
  body .score-card {
    left: 24px !important;
    right: 24px !important;
    top: 438px !important;
    width: auto !important;
  }
  body .speaking-card {
    left: 24px !important;
    right: 24px !important;
    top: 594px !important;
    width: auto !important;
  }
  body .writing-card {
    left: 24px !important;
    right: 24px !important;
    bottom: 32px !important;
    width: auto !important;
  }

  /* Footer columns should never sit side-by-side on phones. */
  .site-footer .footer-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

@media (max-width: 520px) {
  .pl-brand img { width: 106px !important; max-width: 106px !important; }
  body .duo-panel { min-height: 760px !important; }
  body .mission-board { min-height: 870px !important; }
  .lesson-item { grid-template-columns: 58px 1fr 30px !important; }
}

/* =========================================================
   PrepLingo mobile header/menu v2
   Desktop is intentionally untouched: every rule below is mobile/tablet only.
   ========================================================= */
@media (max-width: 760px) {
  .pl-global-header {
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid rgba(220,235,246,.82) !important;
    box-shadow: 0 8px 22px rgba(0,44,92,.045) !important;
  }

  .pl-header-container {
    width: calc(100% - 28px) !important;
    min-height: 64px !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  .pl-brand {
    min-width: 0 !important;
  }

  .pl-brand img {
    width: 106px !important;
    max-width: 106px !important;
    max-height: 44px !important;
  }

  /* Clean mobile header: logo + menu only. Phone/demo actions stay inside the menu. */
  .pl-header-actions {
    display: none !important;
  }

  .pl-mobile-toggle {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    margin-left: auto !important;
    border-radius: 15px !important;
    background: #eef7ff !important;
    border: 1px solid rgba(220,235,246,.96) !important;
    box-shadow: 0 10px 22px rgba(0,87,125,.08) !important;
    z-index: 99999 !important;
  }

  .pl-mobile-toggle:active {
    transform: scale(.96) !important;
  }

  .pl-mobile-toggle span {
    left: 11px !important;
    width: 20px !important;
    height: 2.2px !important;
    background: #00577d !important;
  }

  .pl-mobile-toggle span:nth-child(1) { top: 13px !important; }
  .pl-mobile-toggle span:nth-child(2) { top: 20px !important; }
  .pl-mobile-toggle span:nth-child(3) { top: 27px !important; }
  .pl-mobile-toggle.active span:nth-child(1) { top: 20px !important; transform: rotate(45deg) !important; }
  .pl-mobile-toggle.active span:nth-child(2) { opacity: 0 !important; }
  .pl-mobile-toggle.active span:nth-child(3) { top: 20px !important; transform: rotate(-45deg) !important; }

  /* Premium off-canvas mobile menu */
  .pl-mobile-panel {
    position: fixed !important;
    top: 76px !important;
    right: 12px !important;
    left: auto !important;
    width: min(86vw, 340px) !important;
    max-height: calc(100vh - 94px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(220,235,246,.96) !important;
    box-shadow: 0 28px 70px rgba(0,44,92,.18) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(18px) translateY(-4px) scale(.98) !important;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
    z-index: 99998 !important;
  }

  .pl-mobile-panel.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) translateY(0) scale(1) !important;
  }

  .pl-mobile-panel a {
    min-height: 44px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: #f7fbff !important;
    border: 1px solid rgba(220,235,246,.82) !important;
    color: #17324d !important;
    font-size: 13.5px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
  }

  .pl-mobile-panel a:active {
    transform: scale(.985) !important;
    background: #eef7ff !important;
  }

  /* Make the contact actions inside the menu look intentional. */
  .pl-mobile-panel a[href*="wa.me"] {
    margin-top: 6px !important;
    background: #eafaf1 !important;
    border-color: rgba(20,160,90,.22) !important;
    color: #087a45 !important;
  }

  .pl-mobile-panel a[href="/contact/"],
  .pl-mobile-panel a[href$="/contact/"] {
    background: #00577d !important;
    border-color: #00577d !important;
    color: #fff !important;
    justify-content: center !important;
    box-shadow: 0 14px 26px rgba(0,87,125,.16) !important;
  }

  /* Mobile readability and friendlier first screen, without changing desktop. */
  .hero,
  .hero-page,
  .course-hero,
  .service-hero,
  .ielts-hero {
    padding-top: 28px !important;
  }

  h1,
  .hero h1,
  .hero-title,
  .course-hero h1,
  .service-hero h1 {
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }

  p,
  .hero p,
  .hero-subtitle,
  .course-hero p,
  .service-hero p {
    line-height: 1.72 !important;
  }

  .btn,
  .button,
  .primary-btn,
  .hero-cta,
  .cta-button,
  a[class*="btn"] {
    min-height: 46px !important;
    border-radius: 999px !important;
    touch-action: manipulation !important;
  }
}

@media (max-width: 420px) {
  .pl-header-container {
    min-height: 62px !important;
  }

  .pl-brand img {
    width: 100px !important;
    max-width: 100px !important;
  }

  .pl-mobile-toggle {
    width: 40px !important;
    height: 40px !important;
  }

  .pl-mobile-panel {
    top: 72px !important;
    right: 10px !important;
    width: min(88vw, 330px) !important;
    border-radius: 24px !important;
  }

  .pl-mobile-panel a {
    min-height: 43px !important;
    font-size: 13px !important;
  }
}