/* ═══════════════════════════════════════════
   MOBILE — extendedessayib.com
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Prevent overflow ── */
  html, body { overflow-x: hidden !important; width: 100% !important; }
  .elementor-section { overflow-x: hidden !important; }

  /* ── Default: all columns full width ── */
  .elementor-column,
  .elementor-col-50,
  .elementor-col-33,
  .elementor-col-66 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ── IB Subject circles: 2 per row (2-2-2) ── */
  /* The subject circles are in inner-section col-33 columns */
  .elementor-inner-section > .elementor-container {
    flex-wrap: wrap !important;
    display: flex !important;
    padding: 0 8px !important;
    gap: 0 !important;
  }
  .elementor-inner-section .elementor-col-33 {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  /* ── Counter stats: 2 per row ── */
  .elementor-element-8ea02ce .elementor-column {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    text-align: center !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }

  /* ── Navigating Research Maze:
        ONE horizontal row, 2 cards visible, no wrapping ── */
  .elementor-element-8106ad1 {
    overflow: hidden !important;
    position: relative !important;
  }
  /* Force the container to be a single flex row (no wrap) */
  .elementor-element-8106ad1 > .elementor-container {
    flex-wrap: nowrap !important;
    display: flex !important;
    /* keep the JS-set transform working */
  }
  /* Each card: 48% width so 2 are visible at a time */
  .elementor-element-8106ad1 > .elementor-container > .elementor-column {
    flex: 0 0 calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }

  /* ── Testimonials: 1 card visible at a time on mobile ── */
  .elementor-element-c674cf2 > .elementor-container {
    flex-wrap: nowrap !important;
  }
  .elementor-element-c674cf2 .elementor-column {
    flex: 0 0 90vw !important;
    width: 90vw !important;
    min-width: 90vw !important;
  }

  /* ── Our injected grids: single column ── */
  div[style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:1fr 1fr"]   { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:repeat(5"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ── Text sizing ── */
  h1 { font-size: clamp(1.4rem, 7vw, 2.2rem) !important; }
  h2 { font-size: clamp(1.2rem, 5.5vw, 1.8rem) !important; }
  h3 { font-size: clamp(1rem, 4.5vw, 1.4rem) !important; }
  p  { font-size: clamp(.85rem, 3.5vw, 1rem) !important; }

  /* ── Arrow nav buttons: smaller + inset ── */
  #ee-tp, #ee-tn, #ee-nav-prev, #ee-nav-next, #eeNPrev, #eeNNext {
    width: 30px !important;
    height: 30px !important;
    font-size: .8rem !important;
  }
  #ee-tp  { left: 4px !important; }
  #ee-tn  { right: 4px !important; }
  #ee-nav-prev, #eeNPrev { left: 4px !important; }
  #ee-nav-next, #eeNNext { right: 4px !important; }

  /* ── Why Choose Us image ── */
  .elementor-element-b74e83a .elementor-widget-image img {
    max-height: 220px !important;
    object-fit: cover !important;
  }

  /* ── Depicter slider ── */
  .depicter-wrapper, .depicter-slide {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
}

/* ═══════════════════════════════════════════
   MOBILE HAMBURGER MENU DROPDOWN FIX
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Fix: prevent nav container from clipping the dropdown ── */
  .wpr-mobile-nav-menu-container,
  .wpr-mobile-nav-menu-container * {
    overflow: visible !important;
  }
  /* The section containing the nav must not clip */
  .elementor-section:has(.wpr-mobile-nav-menu-container),
  .elementor-element:has(.wpr-mobile-nav-menu-container) {
    overflow: visible !important;
  }
  /* Ensure all li items in menu are visible */
  .wpr-mobile-nav-menu > li {
    display: list-item !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }
  .wpr-mobile-nav-menu > li > a {
    display: flex !important;
  }


  /* ── Mobile menu container ── */
  .wpr-mobile-nav-menu-container {
    position: relative !important;
    width: 100% !important;
    z-index: 99999 !important;
  }

  /* ── Hamburger toggle button ── */
  .wpr-mobile-toggle-wrap {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
  }
  .wpr-mobile-toggle {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    cursor: pointer !important;
  }
  .wpr-mobile-toggle-line {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: #111 !important;
    border-radius: 2px !important;
  }

  /* ── Main mobile menu — styling only (WPR controls show/hide) ── */
  .wpr-mobile-nav-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-top: 2px solid #3b5cc9 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* ── Top-level menu items ── */
  .wpr-mobile-nav-menu > li {
    border-bottom: 1px solid #eef0f7 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .wpr-mobile-nav-menu > li > a,
  .wpr-mobile-menu-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    text-decoration: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }
  .wpr-mobile-menu-item:hover,
  .wpr-active-menu-item {
    color: #3b5cc9 !important;
    background: #f4f6fd !important;
  }

  /* ── Dropdown arrow ── */
  .dropdown-menu-toggle,
  .wpr-mobile-menu-item .dropdown-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: #f0f2ff !important;
    border-radius: 50% !important;
    font-size: .75rem !important;
    color: #3b5cc9 !important;
    flex-shrink: 0 !important;
    transition: transform .2s !important;
  }

  /* ── Sub-menus — styling only ── */
  .wpr-sub-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f8f9ff !important;
    border-left: 3px solid #3b5cc9 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .wpr-sub-menu li {
    border-bottom: 1px solid #eef0f7 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .wpr-mobile-sub-menu-item {
    display: block !important;
    padding: 11px 20px 11px 32px !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    color: #444 !important;
    text-decoration: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .wpr-mobile-sub-menu-item:hover {
    color: #3b5cc9 !important;
    background: #eef1ff !important;
  }

  /* ── Ensure Elementor hidden-mobile header shows on mobile ── */
  .elementor-hidden-mobile {
    display: none !important;
  }

  /* ── Make WPR mobile nav visible and full-width ── */
  .wpr-main-menu-align--mobilecenter,
  .wpr-nav-menu-bp-mobile {
    width: 100% !important;
  }
}