/* ════════════════════════════════════════════════════════════════
   STAFFONA mobile.css  —  v49  (complete rewrite, no patches)
   
   RULES:
   • Loaded LAST on every page (after style.css and ar.css).
   • This file OWNS: mobile nav, theme colors, RTL overflow fix.
   • Every rule here uses max specificity so nothing overrides it.
   • To change mobile behavior: edit HERE, not style.css or ar.css.
   ════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────
   SECTION 1 — OVERFLOW PREVENTION
   Must prevent horizontal scroll on both LTR and RTL pages.
   html: needs overflow-x hidden to anchor RTL scroll origin.
   body: also hidden.  Position:relative on body creates scroll context.
   Fixed .nav-wrap is immune to scroll — logo never clips.
   ──────────────────────────────────────────────────────────────── */
html { overflow-x: hidden; }
body { overflow-x: hidden; position: relative; max-width: 100vw; }


/* ────────────────────────────────────────────────────────────────
   SECTION 2 — NAV BAR: MOBILE BREAKPOINT  (≤1024px)
   Show: logo + dark-mode button + hamburger.
   Hide: desktop links, email, lang switcher, CTA gold button.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* --- Hide desktop-only nav items --- */
  .nav-links,
  .nav-email,
  .lang-btn,
  .btn-gold.btn-sm { display: none !important; }

  /* --- Show hamburger --- */
  .hbg {
    display: flex !important;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  /* --- Show dark-mode toggle in nav bar (tappable, z-indexed above all) --- */
  .nav-in .dm-btn {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-shrink: 0 !important;
    z-index: 1001 !important;
    position: relative !important;
    pointer-events: all !important;
    cursor: pointer !important;
  }

  /* --- Nav inner row --- */
  .nav-in {
    gap: 6px;
    overflow: visible;   /* keep dropdowns visible */
  }

  /* --- Nav right cluster (dm-btn + hbg) --- */
  .nav-r {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    z-index: 1001;
    position: relative;
  }
}


/* ────────────────────────────────────────────────────────────────
   SECTION 3 — NAV BAR: LIGHT MODE  (all viewport sizes)
   ──────────────────────────────────────────────────────────────── */
html[data-theme="light"] .nav-wrap {
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 1px 0 rgba(11,31,58,.10), 0 2px 20px rgba(11,31,58,.08) !important;
}
html[data-theme="light"] .nav-logo .nlf     { color: #1A2B40 !important; }
html[data-theme="light"] .nav-logo .nlf em  { color: #C8973A !important; }
html[data-theme="light"] .nav-links a       { color: #1A2B40 !important; }
html[data-theme="light"] .hbg span          { background: #1A2B40 !important; }
html[data-theme="light"] .dm-btn            { color: #1A2B40 !important; background: rgba(11,31,58,.07) !important; }
html[data-theme="light"] .lang-btn          { color: #1A2B40 !important; }
html[data-theme="light"] .ndrop-menu        { background: #fff !important; border-color: rgba(11,31,58,.10) !important; }
html[data-theme="light"] .ndrop-menu a      { color: #1A2B40 !important; }


/* ────────────────────────────────────────────────────────────────
   SECTION 4 — HERO SECTIONS: LIGHT MODE
   .hero     = homepage (index.html, ar.html)
   .ph       = EN inner pages (services, about, laws, pricing…)
   .ph-ar    = AR inner pages (ar-services, ar-about, ar-laws…)
   ──────────────────────────────────────────────────────────────── */

/* Shared light-mode gradient for all hero types */
html[data-theme="light"] .hero,
html[data-theme="light"] .ph,
html[data-theme="light"] .ph-ar {
  background: linear-gradient(150deg, #F4F6FA 0%, #FFFFFF 55%, #F2F5FA 100%) !important;
}

/* Suppress glow blobs in light mode */
html[data-theme="light"] .hero .hglow2,
html[data-theme="light"] .ph   .ph-glow,
html[data-theme="light"] .ph-ar .ph-glow { opacity: 0 !important; }

/* Light-mode grid overlays */
html[data-theme="light"] .hero .hgrid,
html[data-theme="light"] .ph::before,
html[data-theme="light"] .ph-ar::before {
  background-image:
    linear-gradient(rgba(11,31,58,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,31,58,.025) 1px, transparent 1px) !important;
}

/* Headings */
html[data-theme="light"] .hero .h1,
html[data-theme="light"] .hero .h-title,
html[data-theme="light"] .ph h1,
html[data-theme="light"] .ph-ar h1           { color: #0B1F3A !important; }

html[data-theme="light"] .ph h1 span,
html[data-theme="light"] .ph-ar h1 span      { color: #C8973A !important; }

/* Body text */
html[data-theme="light"] .hero .hdesc,
html[data-theme="light"] .hero .h-desc,
html[data-theme="light"] .ph .sub,
html[data-theme="light"] .ph .sub-w,
html[data-theme="light"] .ph p,
html[data-theme="light"] .ph-ar .sub,
html[data-theme="light"] .ph-ar p            { color: #4A5E74 !important; }

/* Breadcrumb */
html[data-theme="light"] .ph .bc,
html[data-theme="light"] .ph .bc a,
html[data-theme="light"] .ph-ar .bc,
html[data-theme="light"] .ph-ar .bc a        { color: #4A5E74 !important; }

/* Pills / tags */
html[data-theme="light"] .hero .pill,
html[data-theme="light"] .hero .h-pill,
html[data-theme="light"] .ph .ph-pill,
html[data-theme="light"] .ph-ar .ph-pill {
  background: rgba(11,31,58,.06) !important;
  border-color: rgba(11,31,58,.14) !important;
}
html[data-theme="light"] .hero .pill span,
html[data-theme="light"] .hero .h-pill-t,
html[data-theme="light"] .ph .ph-pill span,
html[data-theme="light"] .ph-ar .ph-pill span { color: #0B1F3A !important; }

html[data-theme="light"] .ph .ph-tag,
html[data-theme="light"] .ph-ar .ph-tag {
  background: rgba(11,31,58,.07) !important;
  color: #0B1F3A !important;
}

/* Trust row */
html[data-theme="light"] .hero .ht,
html[data-theme="light"] .hero .ht-item       { color: rgba(11,31,58,.50) !important; }
html[data-theme="light"] .hero .ht svg        { color: #C8973A !important; }
html[data-theme="light"] .hero .htrust        { border-top-color: rgba(11,31,58,.12) !important; }

/* Ghost button on light hero */
html[data-theme="light"] .hero .btn-ghost,
html[data-theme="light"] .ph   .btn-ghost,
html[data-theme="light"] .ph-ar .btn-ghost {
  color: #0B1F3A !important;
  border-color: rgba(11,31,58,.30) !important;
  background: transparent !important;
}


/* ────────────────────────────────────────────────────────────────
   SECTION 5 — ALWAYS-DARK SECTIONS: ghost button stays WHITE
   ──────────────────────────────────────────────────────────────── */
html[data-theme="light"] .cta-sec  .btn-ghost,
html[data-theme="light"] .cta-bg   .btn-ghost,
html[data-theme="light"] .why-bg   .btn-ghost,
html[data-theme="light"] .csec     .btn-ghost,
html[data-theme="light"] .sec-navy .btn-ghost,
html[data-theme="light"] .serve    .btn-ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
  background: transparent !important;
}


/* ────────────────────────────────────────────────────────────────
   SECTION 6 — HERO PADDING  (clears 70px fixed nav)
   Base: 130px top. Smaller on mobile so more content shows.
   ──────────────────────────────────────────────────────────────── */
.ph, .ph-ar { padding-top: 130px; padding-bottom: 72px; }

@media (max-width: 768px) {
  .ph, .ph-ar { padding-top: 110px !important; padding-bottom: 56px !important; }
}
@media (max-width: 480px) {
  .ph, .ph-ar { padding-top: 96px  !important; padding-bottom: 48px !important; }
}


/* ────────────────────────────────────────────────────────────────
   SECTION 7 — FAQ: prevent double icon on AR pages
   EN = HTML span.faq-ic  /  AR = CSS ::before pseudo-element.
   ──────────────────────────────────────────────────────────────── */
html[lang="ar"] .faq-item .faq-ic { display: none !important; }


/* ────────────────────────────────────────────────────────────────
   SECTION 8 — RESPONSIVE LAYOUT  (≤768px, ≤480px)
   Desktop wrapper, grids, typography — all collapse cleanly.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Wrapper padding */
  .w { padding-left: 18px !important; padding-right: 18px !important; }

  /* Hero typography */
  .ph h1, .ph-ar h1 {
    font-size: clamp(24px, 6.5vw, 38px) !important;
    line-height: 1.15 !important;
  }
  .ph .sub, .ph-ar .sub { font-size: 15px !important; }

  /* Stacked CTA buttons */
  .ph-btns, .hero-btns {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .ph-btns .btn, .hero-btns .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Named grid classes → 1 column */
  .grid2, .grid3, .grid4,
  .svc-row, .resg, .cin,
  .ftg, .frow2, .res-grid,
  .nbg, .about-grid { grid-template-columns: 1fr !important; }

  /* Inline grid styles → 1 column (catches page-specific grids) */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(auto"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Section spacing */
  .sec, .sec-sm { padding: 56px 0 !important; }

  /* Footer bottom row */
  .ftbtm { flex-direction: column !important; gap: 12px !important; text-align: center !important; }

  /* Tables: horizontal scroll only (don't collapse to block) */
  table { width: 100% !important; display: block !important; overflow-x: auto !important; }
}

@media (max-width: 480px) {
  .w { padding-left: 14px !important; padding-right: 14px !important; }
  .ph h1, .ph-ar h1 { font-size: clamp(21px, 6vw, 30px) !important; }
}