/* =========================================================
   responsive.css (Fixed) — POPUP MODE (Correct)
   - Mobile / Tablet / Small screens
   - Keep it light to avoid conflicts with style.css
   - Fix header + brand shrink
   - Desktop: hide popup (mnav)
   - Mobile: popup centered (use .mnav__panel, not .mnav)
========================================================= */

/* ========== Large Tablets / Small Laptops (≤ 1100px) ========== */
@media (max-width: 1100px){
  .container{
    width:min(1050px, calc(100% - 32px));
  }
}

/* ========== Tablets (≤ 992px) ========== */
@media (max-width: 992px){

  /* Hero */
  .hero__content{
    text-align:center;
    justify-items:center;
  }
  .hero__text{
    max-width: 900px;
  }
  .hero__desc{
    max-width: 780px;
  }
  .hero__cta,
  .hero__features{
    justify-content:center;
  }

  /* Split */
  .split{
    grid-template-columns:1fr;
  }

  /* Grids */
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--6{ grid-template-columns:repeat(3,1fr); }

  /* Steps (حتى لو القسم انحذف ما تضر) */
  .steps{
    justify-content:center;
  }

  /* Certificate card */
  .cert-card{
    grid-template-columns: 1fr;
  }
  .cert-card__media{
    min-height: 260px;
  }
}

/* ========== Mobiles (≤ 768px) ========== */
@media (max-width: 768px){

  /* Header */
  .header__wrap{
    gap:12px;
    align-items:center;
  }

  /* ✅ brand shouldn't reserve big width on mobile */
  .brand{
    min-width:0 !important;
    flex:1 1 auto;
  }
  .brand__logo{
    width:44px;
    height:44px;
  }
  .brand__text{
    min-width:0;
  }
  .brand__name,
  .brand__tag{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* ✅ keep nav at the edge and avoid shifts in RTL */
  .nav{
    margin-inline-start:0;
    flex:0 0 auto;
  }

  /* ensure header allows popup overlays */
  .header{
    overflow:visible;
  }

  /* (Legacy) navList panel width (حتى لو مخفي بالـ style.css) */
  .nav__list{
    width: min(520px, calc(100vw - 24px));
    max-width: 100%;
    margin-inline:auto;
  }

  /* Hero */
  .hero{
    min-height: 72vh;
  }
  .hero__content--center{
    padding-top: 58px;
    padding-bottom: 52px;
  }
  .hero__title{
    font-size:32px;
    line-height:1.25;
  }
  .hero__desc{
    font-size:14px;
  }

  /* Sections */
  .section{
    padding:52px 0;
  }
  .sec-title{
    font-size:26px;
  }

  /* All grids -> 1 column */
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--6{
    grid-template-columns:1fr;
  }

  /* Project cards */
  .project-card img{
    height:210px;
  }

  /* Partners logos */
  .partners-logos{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* Modal */
  .modal{
    width:min(560px, 94%);
    max-height: 86vh;
  }

  /* Footer */
  .footer__wrap{
    flex-direction:column;
    text-align:center;
    gap:14px;
  }
  .footer__social{
    justify-content:center;
  }

  /* Back to top */
  .backtop{
    width:44px;
    height:44px;
    border-radius: 14px;
  }

  /* =========================================================
     ✅ POPUP NAV (mnav) on mobile
     - IMPORTANT: keep .mnav as overlay container (from style.css)
     - only adjust the popup panel (.mnav__panel)
  ========================================================= */

  .mnav__panel{
    width: min(420px, 94vw);
    max-height: 86vh;
  }

  /* backdrop handled in style.css, only keep smoothness */
  .mnav-backdrop{
    opacity: 0;
    pointer-events: none;
  }
  .mnav-backdrop.is-open{
    opacity: 1;
    pointer-events: auto;
  }

  /* ✅ Services buttons on mobile */
  .service-card__actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .service-card__actions .btn{
    width:100%;
    justify-content:center;
  }
  .service-card__actions .btn i{
    margin:0;
  }
}

/* ========== Small Phones (≤ 480px) ========== */
@media (max-width: 480px){

  /* Brand text */
  .brand__name{
    font-size:14px;
  }
  .brand__tag{
    font-size:11px;
  }

  /* Hero */
  .hero{
    min-height: 68vh;
  }
  .hero__title{
    font-size:26px;
  }

  /* Buttons */
  .btn{
    padding:10px 14px;
    font-size:13px;
  }

  /* Media */
  .media-card img{
    height:300px;
  }

  /* Partners */
  .partners-logos{
    grid-template-columns: 1fr;
  }
  .partner-badge__circle{
    width: 160px;
    height: 160px;
  }

  /* Modal */
  .modal{
    padding:16px;
    border-radius: 22px;
  }

  /* Tiny fix: nav panel slightly narrower for very small screens */
  .nav__list{
    width: calc(100vw - 18px);
  }

  /* Popup panel narrower */
  .mnav__panel{
    width: calc(100vw - 18px);
    max-height: 88vh;
    border-radius: 20px;
  }
}

/* =========================================================
   ✅ Desktop/Laptop (≥ 769px)
   - Hide Popup (mnav) completely
   - Ensure desktop nav list is normal
========================================================= */
@media (min-width: 769px){
  .mnav,
  .mnav-backdrop{
    display:none !important;
  }

  .nav__toggle{
    display:none !important;
  }

  .nav__list{
    display:flex !important;
    position:static !important;
    width:auto !important;
    padding:0 !important;
    box-shadow:none !important;
    border:0 !important;
    background:transparent !important;
  }
}

.nav__item--dropdown:not(.open):hover > .nav__dropdown{
  opacity:0;
  visibility:hidden;
  transform: translateY(10px);
}

/* ✅ Force center container on all sizes (override any file) */
.container{
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
}