/* ═══════════════════════════════════════════════
   Bulbul Arabic Institute — Mobile Optimisation
   ═══════════════════════════════════════════════ */

/* ── Hamburger Button — hidden on desktop ── */
.hamburger{
  display:none;
  appearance:none;
  border:1px solid var(--line, #e2e8f0);
  background:#fff;
  border-radius:10px;
  padding:7px 8px;
  cursor:pointer;
  flex:0 0 auto;
  line-height:0;
}
.hamburger svg{
  width:22px;
  height:22px;
  stroke:var(--ink, #0f172a);
  stroke-width:2;
  stroke-linecap:round;
  fill:none;
}

/* ── Mobile Menu Drawer — ALWAYS hidden by default, even on desktop ── */
.mobileMenu{
  display:none !important;
  position:fixed;
  inset:0;
  z-index:9990;
  visibility:hidden;
  pointer-events:none;
}
.mobileMenu.open{
  display:block !important;
  visibility:visible;
  pointer-events:auto;
}

.mobileMenuBg{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.mobileMenuPanel{
  position:absolute;
  top:0;
  right:0;
  width:min(300px, 82vw);
  height:100%;
  background:#fff;
  box-shadow:-8px 0 40px rgba(15,23,42,.18);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  animation:mobileSlideIn .22s ease-out;
}
@keyframes mobileSlideIn{
  from{transform:translateX(100%)}
  to{transform:translateX(0)}
}

.mobileMenuHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line, #e2e8f0);
  flex-shrink:0;
}
.mobileMenuHead .name{font-weight:800;font-size:15px}
.mobileMenuCloseBtn{
  appearance:none;
  border:1px solid var(--line, #e2e8f0);
  background:#fff;
  border-radius:10px;
  padding:6px 8px;
  cursor:pointer;
  line-height:0;
}
.mobileMenuCloseBtn svg{
  width:20px;height:20px;
  stroke:var(--ink, #0f172a);
  stroke-width:2;
  stroke-linecap:round;
  fill:none;
}

.mobileMenuLinks{
  display:flex;
  flex-direction:column;
  padding:10px 12px;
  gap:2px;
  flex:1;
}
.mobileMenuLinks a{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  font-weight:700;
  font-size:15px;
  color:var(--muted, #475569);
  text-decoration:none;
  transition:background .12s, color .12s;
}
.mobileMenuLinks a:hover,
.mobileMenuLinks a:active{
  background:rgba(184,137,43,.08);
  color:var(--ink, #0f172a);
}
.mobileMenuLinks a.active{
  background:rgba(184,137,43,.12);
  color:var(--ink, #0f172a);
}

.mobileMenuLang{
  display:flex;
  gap:8px;
  padding:12px 16px 18px;
  border-top:1px solid var(--line, #e2e8f0);
  flex-shrink:0;
}
.mobileMenuLang .pill{
  flex:1;
  text-align:center;
  padding:10px 12px;
  border:1px solid var(--line, #e2e8f0);
  background:#fff;
  color:var(--ink, #0f172a);
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}
.mobileMenuLang .pill.active{
  border-color:rgba(184,137,43,.45);
  background:rgba(184,137,43,.08);
}


/* ═══════════════════════════════
   Responsive Breakpoints
   ═══════════════════════════════ */

@media (max-width: 980px){
  /* Show hamburger, hide desktop nav and lang */
  .hamburger{display:block}
  nav{display:none !important}
  .topbar .lang{display:none !important}

  /* Better brand sizing */
  .brand .name{font-size:14px}

  /* Hero adjustments */
  h1{font-size:28px !important;line-height:1.15 !important}
  .heroMain{flex-direction:column;align-items:flex-start}
  .heroLogo{width:50%;max-width:220px}
  .kpis{grid-template-columns:1fr}

  /* Offer / course grids → single column */
  .offerGrid{grid-template-columns:1fr !important}
  .grid3{grid-template-columns:1fr !important}
  .grid2{grid-template-columns:1fr !important}
  .miniGrid{grid-template-columns:1fr !important}

  /* Section spacing */
  section{padding:28px 0}
  .sectionHead{flex-direction:column;align-items:flex-start;gap:6px}
  h2{font-size:22px !important}
}

@media (max-width: 720px){
  /* Path steps on small screens */
  .pathLine{display:none}
  .pathSteps{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:12px !important;
    justify-content:center;
  }
  .pathStep{
    min-width:0 !important;
    padding:10px 6px;
  }
  .pathCircle{
    width:52px !important;
    height:52px !important;
  }
  .pathCircle .pathIcon{
    width:46px !important;
    height:46px !important;
  }
  .pathName{font-size:13px}
  .pathTag{font-size:11px}

  /* Hero even smaller */
  h1{font-size:24px !important}
  .sub{font-size:14px !important}
  header.hero{padding:52px 0 32px}

  /* Pricing grid */
  .priceGrid{grid-template-columns:1fr !important}

  /* Teacher grid */
  .teacherGrid{grid-template-columns:1fr !important}

  /* Buttons — full width on very small screens */
  .cta{flex-direction:column}
  .cta .btn{width:100%;text-align:center}
  .offerActions{flex-direction:column}
  .offerActions .btn{width:100%;text-align:center}
  .actions .btn{width:100%;text-align:center}

  /* Footer stacking */
  .foot{flex-direction:column;text-align:center;gap:10px}
  .footLinks{justify-content:center}
}

@media (max-width: 480px){
  /* Path steps → single column on very small phones */
  .pathSteps{
    grid-template-columns:1fr !important;
  }
  .pathStep{
    display:grid !important;
    grid-template-columns:52px 1fr !important;
    gap:10px !important;
    align-items:center !important;
    text-align:left !important;
  }
  .pathCircle{margin:0 !important}

  /* Tighter padding */
  .wrap{padding:0 14px}
  .enrollBody,.interestBody{padding:12px}
  .enrollModal,.interestModal{
    width:100% !important;
    max-height:92vh !important;
    border-radius:12px 12px 0 0 !important;
  }

  /* Form fields → single column */
  .enrollForm,.interestForm{
    grid-template-columns:1fr !important;
  }

  /* Smaller card padding */
  .card{padding:12px}
  .courseCard .cardHead{padding:12px}
}

/* ── Touch-friendly improvements ── */
@media (hover: none) and (pointer: coarse){
  .btn,.enrollPayBtn,.interestPayBtn,.enrollGhost,.interestGhost{
    min-height:44px;
    padding:12px 16px;
  }
  .pill{
    min-height:40px;
    min-width:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .faqList summary{
    padding:4px 0;
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .offerCard:hover,.courseCard:hover,.pathStep:hover{
    transform:none;
    box-shadow:none;
  }
}

/* ── Ensure smooth scrolling with sticky header offset ── */
html{scroll-padding-top:80px}