/* =====================================================================
   Najahat – Mobile Stylesheet (phones & small tablets)
   Load with: <link rel="stylesheet" href="css/style.mobile.css" media="(max-width: 991px)">
   This file overrides desktop CSS ONLY on viewports <= 991px.
   ===================================================================== */

/* -------- Core safety -------- */
@media (max-width: 991px){
  html, body, #site { width:100%; overflow-x:hidden; }
  * { box-sizing: border-box; }
  img, video { max-width:100%; height:auto; }
}

/* -------- Fluid type & spacing -------- */
@media (max-width: 991px){
  :root{
    --fs-sm: clamp(12px, 2.8vw, 14px);
    --fs-md: clamp(13px, 3.2vw, 16px);
    --fs-lg: clamp(16px, 4.6vw, 22px);
    --fs-xl: clamp(20px, 6.4vw, 30px);
    --fs-2xl: clamp(22px, 7.8vw, 36px);
    --gap: clamp(10px, 3.8vw, 22px);
    --nav-h: 64px;
  }
  body{ font-size: 15px; }
  h1{ font-size: var(--fs-2xl); line-height:1.2; }
  h2{ font-size: var(--fs-xl);  line-height:1.25; }
  h3{ font-size: var(--fs-lg);  line-height:1.3; }
  .nb-btn, .company-btn, .oc-btn, .svc-btn { font-size: var(--fs-md); padding:.5rem .85rem; border-radius:12px; }
}

/* -------- Header (mobile) -------- */
@media (max-width: 991px){
  .top-header{ display:none !important; }                 /* اخفاء الشريط العلوي */
  .nb-nav .nb-links{ display:none !important; }           /* روابط الديسكتوب */
  .nb-actions .company-btn{ display:none !important; }    /* زر مؤسس خارج قائمة الجوال */
  .nb-container, .nb-nav{ padding-inline:12px; }
  .log img{ max-width:140px; height:auto; }
  #nb-menu-btn{ font-size:22px; }
  .search-btn{ transform:scale(.9); margin-inline-start:0; }
}

/* -------- Mobile drawer (from right) -------- */
@media (max-width: 991px){
  body.nb-drawer-open{ overflow:hidden; } /* منع خلفية الصفحة من التمرير */
  /* overlay */
  .nb-drawer-overlay{
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 9998; opacity: 0; visibility: hidden; transition: .25s;
  }
  body.nb-drawer-open .nb-drawer-overlay{ opacity:1; visibility:visible; }

  /* drawer */
  #nb-mobile{
    position: fixed; top:0; right:0; height:100vh; width:min(86vw, 380px);
    background:#0f203d; color:#fff; z-index: 9999;
    transform: translateX(100%); transition: transform .28s ease-in-out;
    display:block; padding: 14px 16px 22px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: -8px 0 28px rgba(0,0,0,.28);
  }
  body.nb-drawer-open #nb-mobile{ transform: translateX(0); }

  #nb-mobile a{ display:block; color:#fff; text-decoration:none; padding:12px 10px; font-size: var(--fs-md); border-bottom: 1px solid rgba(255,255,255,.06); }
  #nb-mobile .company-btn{ display:block; text-align:center; background:#11a09a; color:#0f203d; border-radius:12px; margin-top:10px; border:none; }

  /* header inside drawer (logo + close) if present */
  #nb-mobile .drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
  #nb-mobile .drawer-head img{ max-height:48px; width:auto; }

  /* inline social icons row if exists */
  #nb-mobile .social-nav,
  #nb-mobile .social-inline{ display:flex; gap:10px; align-items:center; padding:8px 2px 12px; border-bottom:1px solid rgba(255,255,255,.06); }
  #nb-mobile .social-nav li{ display:inline-flex; }
  #nb-mobile .social-nav a{ width:34px; height:34px; display:grid; place-items:center; background:#122544; border-radius:50%; }

  /* search icon + burger alignment row at top */
  .nb-nav .nb-actions{ display:flex; align-items:center; gap:10px; }
}

/* -------- Hero -------- */
@media (max-width: 991px){
  .hero-inner{ padding-block: 28px; }
  .hero-title{ font-size: var(--fs-2xl); }
  .hero-sub{ font-size: var(--fs-md); opacity:.95; }
  .hero-cta .nb-btn{ margin:6px; }
}

/* -------- Services (smaller cards) -------- */
@media (max-width: 991px){
  .svc-grid{ gap: var(--gap); }
  .svc-card{ border-radius: 14px; overflow:hidden; }
  .svc-card img{ height: auto; }
  .svc-card .svc-badge{ font-size: var(--fs-sm); padding:.25rem .5rem; }
  .svc-card .svc-overlay h3{ font-size: var(--fs-lg); }
  .svc-card .svc-overlay p{ font-size: var(--fs-sm); }
}

/* -------- Sections spacing -------- */
@media (max-width: 991px){
  .section, .section-dark{ padding-block: clamp(24px, 6vw, 60px); }
  .nb-container, .oc-wrap{ padding-inline:12px; }
  .heading-underline, .section-title, .svc-heading .svc-title { margin-bottom: clamp(12px, 4vw, 22px); }
}

/* -------- Clients / Contact / Stats / Footer -------- */
@media (max-width: 991px){
  .cg-viewport{ overflow-x:auto; overscroll-behavior-inline:contain; }
  .cg-track{ width:max-content; display:inline-flex; }
  .cg-card img{ max-height:56px; }
  .oc-input, .oc-select .oc-input{ font-size: var(--fs-md); padding:.7rem .85rem; }
  .stats .stat-number{ font-size: clamp(22px, 8vw, 36px); }
  .stats .stat-label{ font-size: var(--fs-sm); }
  .footer .links-grid a, .footer-contact a, .footer-text{ font-size: var(--fs-sm); }
}