/* ===== ElProfessor marketing site — mobile + layout-stability layer =====
   Loaded AFTER each page's inline <style> so it wins the cascade.
   Surgical, mobile-first, CSS-only. Desktop (>1024px) is intentionally untouched:
   every rule here is either global-safe (overflow/img safety) or gated behind a
   max-width media query. Tune everything in ONE place from here. */

:root{
  /* Spacing scale — used to normalise mobile section rhythm and kill dead gaps. */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:20px; --space-5:32px; --space-6:48px;
}

/* 1) Horizontal-overflow safety net. `clip` (not hidden) keeps position:sticky working. */
html,body{overflow-x:clip;max-width:100%}
/* Let flex/grid children shrink instead of forcing the row wider than the viewport. */
*{min-width:0}

/* 2) Images never overflow their column and never shift when they load. */
img{max-width:100%;height:auto}

/* 3) Off-screen honeypot/util elements: hide WITHOUT extending the scroll area.
   Replaces `left:-9999px` (which inflates document.scrollWidth → phantom scroll). */
#cf_hp,.hp,.hp input,input[name="website"]{
  position:absolute!important;left:auto!important;top:auto!important;
  width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;border:0!important;
}

/* 4) Fluid typography ≤768px — headings never overflow at 320px, never gigantic. */
@media(max-width:768px){
  h1,.hero-t,.bhero h1,.art h1{font-size:clamp(26px,7vw,40px)!important;line-height:1.4!important}
  h2,.sec-head h2,.blog-head h2,.about h2,.cta-inner h2,.cta-band h2{
    font-size:clamp(22px,5.5vw,32px)!important;line-height:1.45!important}
  h3{line-height:1.5}
  body{line-height:1.75}          /* Arabic body ≥1.6 */
}

/* 5) Mobile section spacing — proportional scale removes the huge empty gaps. */
@media(max-width:768px){
  section.s,.s{padding:var(--space-6) 0!important}   /* 48 vs 72 desktop */
  .wrap{padding:0 var(--space-4)!important}          /* 20 vs 26 */
  .sec-head,.blog-head{margin-bottom:var(--space-5)!important}
}
@media(max-width:420px){
  section.s,.s{padding:var(--space-5) 0!important}    /* tighter on the smallest screens */
}

/* 6) Header — compact (≤64px), balanced (logo pinned right / controls pinned left),
   tap-safe hamburger, and a lighter CTA so it stops out-weighing the brand. */
@media(max-width:768px){
  .nav .in{height:60px!important;gap:12px!important}
  .nav .menu{min-width:44px;min-height:44px;place-items:center}
  .brand-logo{height:32px!important}
  .brand .nm{font-size:20px!important}
  .brand .sl{font-size:9.5px!important}
  /* push the controls group to the far (left) edge → clean space-between with the logo */
  .nav .cta{margin-inline-start:auto}
  /* lighter primary CTA: it was the heaviest thing in the bar and crowded the logo */
  .nav .cta .btn-primary{padding:9px 15px!important;font-size:13.5px!important}
  .nav .cta .btn-primary .ic{width:15px;height:15px}
}
@media(max-width:380px){
  .brand .sl{display:none}                        /* drop the tagline on the tightest phones */
  .nav .cta .btn-primary{padding:8px 12px!important;font-size:12.5px!important;gap:5px}
}

/* 7) Mobile menu panel — large tap rows (≥48px). */
.mobile-links a{min-height:48px;display:flex;align-items:center}

/* 8) Footer — brand full-width on top, link groups in TWO columns below (a single column of
   13 tap-rows made the footer enormous). Rows stay tappable (~40px) but the footer is compact. */
@media(max-width:640px){
  .foot-grid{grid-template-columns:1fr 1fr!important;gap:var(--space-5) var(--space-4)!important;text-align:right}
  .foot-brand{grid-column:1 / -1}                 /* brand + tagline span the full width */
  .foot-brand p{max-width:none!important}
  .foot-col h4{margin-bottom:var(--space-2)!important}
  .foot-col a{min-height:40px;display:flex;align-items:center;padding:0}
  .foot-bot{justify-content:center;text-align:center}
}
@media(max-width:360px){
  .foot-grid{grid-template-columns:1fr!important}  /* single col only on the very tightest */
}

/* 9) Benefit/service cards: 1 col <480px, 2 cols 480–1024px (equal heights via grid). */
@media(max-width:479px){.cards{grid-template-columns:1fr!important}}
@media(min-width:480px) and (max-width:1023px){.cards{grid-template-columns:1fr 1fr!important}}

/* 10) CMS containers — reserve space + shimmer so injected content can't push the page.
   #art is empty until the article injects; .blog-grid/.bgrid hold a loading line first.
   Reserved heights ~ match the filled size, so no shift on load and no desktop gap. */
/* #art starts empty and the whole (variable-length) article injects later. Reserve a FULL
   viewport while empty so no sibling (related/CTA/footer) sits in view to be pushed — the
   article then grows below the fold, which doesn't count toward CLS. Reserve clears the
   moment real content arrives (:empty stops matching). */
#art:empty{min-height:100vh}
.blog-grid,.bgrid{min-height:340px}
.feat{min-height:220px}
.blog-empty{min-height:200px;display:flex;align-items:center;justify-content:center;border-radius:16px}
/* shimmer ONLY while loading — the resolved "لا مقالات منشورة بعد" state (same .blog-empty class,
   no .is-loading) must NOT shimmer forever like a skeleton. */
.blog-empty.is-loading{background:linear-gradient(90deg,#f3efe8 25%,#ffffff 37%,#f3efe8 63%);
  background-size:200% 100%;animation:ep-shimmer 1.5s ease-in-out infinite}
#art:empty::before{content:"";display:block;height:100vh;border-radius:16px;
  background:linear-gradient(90deg,#f3efe8 25%,#ffffff 37%,#f3efe8 63%);
  background-size:200% 100%;animation:ep-shimmer 1.5s ease-in-out infinite}
@keyframes ep-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* 10b) Absorb display-font (Aref Ruqaa) swap reflow inside the hero so it can't push the
   sections below (the real CLS driver once CMS/img shifts are gone). Reserve ≥ the settled
   heading block so both the fallback and the swapped state fit — no cascade either way. */
@media(max-width:768px){
  .hero .in{min-height:340px}
  .bhero{min-height:230px}
}

/* 11) founders.html — form is mobile-thumb-friendly; phone/email read LTR, right-aligned. */
@media(max-width:768px){
  .form-card{padding:24px 18px!important}
}
.field input,.field select{font-size:16px!important}   /* ≥16px stops iOS focus zoom */
#fe_whatsapp,#fe_email{direction:ltr;text-align:right}

/* 12) Homepage «تواصل معنا» is INLINE-styled (2-col `1fr 1.1fr`, no breakpoint anywhere)
   so it never stacked on phones — the form got squeezed to half width and the submit
   button wrapped to 4 lines. `!important` overrides the inline style. */
@media(max-width:880px){
  .contact-grid{grid-template-columns:1fr!important;gap:var(--space-5)!important}
}
/* Contact inputs are inline `font-size:14px` → iOS zoom; force ≥16px. */
#contactForm input,#contactForm select,#contactForm textarea{font-size:16px!important}
/* Name/phone inner row stacks on the smallest screens so both stay comfortably tappable. */
@media(max-width:380px){
  #contactForm div[style*="1fr 1fr"]{grid-template-columns:1fr!important}
}
#cf_phone{direction:ltr;text-align:right}
#cf_email{direction:ltr;text-align:right}

/* ═══════════════════════════════════════════════════════════════════════════
   CONSOLIDATED MOBILE PASS (appended). Every rule below is global-safe (no
   rendered-layout change on desktop) or gated ≤768/≤560/≤480/≤420/≤380/≤360.
   Desktop >1024 stays byte-identical; brand/copy/colors untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 13) Header — normalise collapse across pages + cover the nav-CTA variants the
   earlier .nav .cta rules miss. blog/article: CTA is a BARE .btn-primary (direct
   child of .nav .in, no .cta wrapper) and they only collapse at 760 → broken
   761–768 band. founders: CTA is a ghost <a> ("الموقع الرئيسي"). */
@media(max-width:768px){
  /* collapse the desktop link row + reveal the hamburger by 768 everywhere */
  .nav .links{display:none!important}
  .nav .menu{display:grid!important;place-items:center;min-width:44px;min-height:44px}
  /* keep the opened panel visible in the 761–768 band (blog/article hide it via
     inline @media(min-width:761px); !important + higher specificity wins here) */
  .mobile-links.open{display:flex!important}
  /* blog/article bare CTA: push CTA+hamburger to the left edge, shrink to match */
  .nav .in>.btn-primary{margin-inline-start:auto;padding:9px 15px!important;font-size:13.5px!important}
  .nav .in>.btn-primary .ic{width:15px;height:15px}
  /* founders ghost CTA. a.btn-ghost excludes Company's <button class="menu btn-ghost"> */
  .nav .cta a.btn-ghost{padding:9px 15px!important;font-size:13.5px!important}
  /* primary CTA is the main conversion button → 44px min tap height, never wrap */
  .nav .cta .btn-primary,.nav .in>.btn-primary,.nav .cta a.btn-ghost{min-height:44px;white-space:nowrap}
}
@media(max-width:380px){
  .nav .in>.btn-primary{padding:8px 12px!important;font-size:12.5px!important;gap:5px}
  .nav .cta a.btn-ghost{padding:8px 12px!important;font-size:12.5px!important}
}
@media(max-width:360px){
  /* tightest phones: tighten row + drop the redundant arrow so brand+CTA+menu fit at 320 */
  .nav .in{gap:8px!important}
  .nav .cta .btn-primary .ic,.nav .in>.btn-primary .ic{display:none}
}

/* 14) Hero + closing CTA band kept full desktop vertical padding on phones (neither
   carries .s). Fold into the 48/32 rhythm. .hero = Company+founders <header>;
   .cta-band/.cta-inner = Company/blog/article. */
@media(max-width:768px){
  .hero{padding:40px 0!important}
  .cta-band{padding:40px 0!important}
  .cta-inner{padding:40px 24px!important}
}
@media(max-width:420px){
  .hero{padding:32px 0!important}
  .cta-band{padding:32px 0!important}
  .cta-inner{padding:32px 18px!important}
}

/* 15) founders — the intentionally-tight video block (inline 8px) is inflated to 48px
   by the generic section.s rule → ~100px dead gap under the hero. section.video-sec
   matches section.s's specificity and wins by source order. */
@media(max-width:768px){
  section.video-sec{padding:var(--space-4) 0!important}
}

/* 16) Company trust strip — flex + space-between goes ragged at tight widths → even grid. */
@media(max-width:768px){
  .strip .in{display:grid!important;grid-template-columns:1fr 1fr;gap:16px 12px}
}
@media(max-width:360px){
  .strip .in{grid-template-columns:1fr!important}
}

/* 17) CMS reserves — trim over-reservation on 1-column mobile + add a blog-list shimmer. */
@media(max-width:560px){
  .blog-grid,.bgrid{min-height:200px}   /* single column: the 340 desktop reserve was too tall */
}
@media(max-width:768px){
  .bhero{min-height:150px}              /* blog hero = crumbs + one H1; 230 left ~80px dead space */
}
/* blog list grid: loading affordance while the CMS fetch is in flight (reuses ep-shimmer) */
#grid:empty{border-radius:16px;background:linear-gradient(90deg,#f3efe8 25%,#ffffff 37%,#f3efe8 63%);
  background-size:200% 100%;animation:ep-shimmer 1.5s ease-in-out infinite}

/* 18) blog.html — filter chips to a 44px tap; featured card padding + fluid H2 when stacked. */
@media(max-width:768px){
  .fchip{padding:10px 16px}
  .feat .ft-body{padding:22px 20px!important}
  .feat .ft-body h2{font-size:clamp(22px,5.5vw,29px)!important}
}

/* 19) article.html — 44px share buttons; CMS prose wraps long URLs/case refs (overflow-x:clip
   would otherwise clip them); align body gutter to .wrap; shorter hero media on phones. */
.art .lead-p,.art .body p,.art .body h2,.art .body h3,.crumbs{overflow-wrap:break-word}
@media(max-width:768px){
  .share .sb{width:44px;height:44px}
  .art{padding-left:var(--space-4)!important;padding-right:var(--space-4)!important}
}
@media(max-width:480px){
  .hero-media{height:210px!important}
}

/* 20) founders success-state — copy button to 44px tap; WhatsApp CTA full-width like submit. */
@media(max-width:768px){
  .thanks .refer .mylink button{min-height:44px;padding:8px 14px!important}
  .thanks .refer .wa-btn{width:100%;justify-content:center}
}

/* 21) Legal pages (privacy/terms) — .doc gutter to 20px to match .wrap; tame the generic
   h2 clamp that oversized legal subheads at 480–768; TOC jump-links to ~40px rows; anchor
   jumps clear the sticky header. */
@media(max-width:768px){
  .doc{padding-left:var(--space-4)!important;padding-right:var(--space-4)!important}
  .doc h2{font-size:clamp(19px,4.5vw,22px)!important;line-height:1.5!important}
  .toc{gap:2px 18px!important}
  .toc a{display:inline-flex;align-items:center;min-height:40px;padding:4px 0}
}
.doc h2[id]{scroll-margin-top:76px}   /* jump target lands below the sticky nav; no layout shift */

/* 22) Minimal footers (blog/article/privacy/terms). The rich .foot-grid footers are
   excluded via :not(:has(.foot-grid)). Side padding for the copyright row + tappable
   legal links. */
@media(max-width:768px){
  footer:not(:has(.foot-grid)){padding-left:var(--space-4);padding-right:var(--space-4)}
  footer:not(:has(.foot-grid)) a{display:inline-block;min-height:40px;line-height:40px;padding:0 6px}
}

/* 23) Low-severity polish — Company audience cards 1-col on the tightest phones;
   service-card duo copy to the ≥1.6 Arabic line-height floor; 404 number joins the
   fluid-type system. */
@media(max-width:380px){
  .aud-grid{grid-template-columns:1fr!important}
}
@media(max-width:768px){
  .card .duo .d{line-height:1.62!important}
}
.code{font-size:clamp(60px,22vw,88px)!important}  /* self-limiting: ≥400px viewport caps at 88 (desktop unchanged) */

/* 24) Desktop-immutability fix — the anti-iOS-zoom rules (lines 118 & 128) are UNGATED
   and were enlarging DESKTOP inputs (founders .field 15→16, homepage #contactForm 14→16).
   Restore the original desktop sizes above the mobile breakpoint; anti-zoom stays ≤768. */
@media(min-width:769px){
  .field input,.field select{font-size:15px!important}
  #contactForm input,#contactForm select,#contactForm textarea{font-size:14px!important}
}

/* ═══ 25) VERIFY-ROUND POLISH (adversarial pass findings) ═══════════════════ */

/* 25a) Header overlap risk (MEDIUM): Company's hamburger is <button class="btn btn-ghost menu">
   and kept .btn's 13px 22px padding → a wide button that, next to the nowrap CTA, could
   overlap the logo at ≤400px. Make it a compact 44×44 square. */
@media(max-width:768px){
  .nav .menu{padding:0!important;width:44px;height:44px}
}

/* 25b) Desktop-immutability: the phone/email dir:ltr rules (§11) are ungated and reached
   desktop. Restore the original inherited RTL above the mobile breakpoint. */
@media(min-width:769px){
  #fe_whatsapp,#fe_email,#cf_phone,#cf_email{direction:rtl}
}

/* 25c) overflow-wrap safety for the containers §19 didn't cover (blog excerpts, article title
   + related titles, legal body). Layout-inert → desktop-safe, applied globally. */
.post p,.feat p,.art h1,.doc p,.doc li,.rel-grid h3{overflow-wrap:break-word;word-break:break-word}

/* 25d) Eyebrow pill wraps to a tall "lozenge" (border-radius:999px) at ≤480px → make it a
   rounded rectangle so a 2-line badge reads cleanly. */
@media(max-width:480px){
  .eyebrow{border-radius:14px}
}

/* 25e) blog.html polish — image-less featured thumb was 280px tall on phones; blog hero kept
   desktop 48/30 padding. Fold both into the mobile rhythm. */
@media(max-width:768px){
  .feat .ft-thumb{min-height:180px!important}
  .bhero{padding-top:40px!important;padding-bottom:32px!important}
}

/* 25f) Align header side-gutter to the body gutter (20px) on mobile so the brand and content
   share one edge (privacy/terms nav kept 26px inline → ~6px misalignment). */
@media(max-width:768px){
  .nav .in{padding-left:var(--space-4)!important;padding-right:var(--space-4)!important}
}

/* 25g) Legal/back-link tap target: the bare header back-link on privacy/terms (<a> direct child
   of .nav .in, not .brand) was ~28px tall. Give it a 44px tap box. */
@media(max-width:768px){
  .nav .in>a:not(.brand){min-height:44px;display:inline-flex;align-items:center}
}

/* 26) blog.html filter — 9 category chips wrapped into ~4 rows and pushed the article list
   below the fold, so the reader saw a wall of filters before any content. On phones make the
   filter a SINGLE horizontal swipe strip (one ~40px row) → articles show immediately; the rest
   of the chips are one swipe away. (body has overflow-x:clip; a child scroll container is fine.)
   RTL: the strip starts at the right and swipes left, which is the natural reading direction. */
@media(max-width:768px){
  .filters{
    flex-wrap:nowrap!important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;              /* Firefox: hide the scrollbar */
    padding-top:14px!important;
    padding-bottom:12px!important;
    gap:8px;
  }
  .filters::-webkit-scrollbar{display:none}   /* WebKit: hide the scrollbar */
  .filters .fchip,.filters .lbl{flex:none;white-space:nowrap}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRAND TYPOGRAPHY — one identity across the whole site (desktop + mobile).
   Every heading now uses «الرقعة» (Aref Ruqaa) — the logo + hero font — instead of
   the mix of Cairo/Aref it had. Applies to article titles, article body subheadings
   (e.g. «الأساس القانوني»), card & section titles, related titles, footer headers,
   and the legal-page h2s. Body text is intentionally left as-is (IBM Plex Sans Arabic).
   !important overrides the per-page Cairo heading rules; Aref Ruqaa ships weight 700 only.
   line-height:1.5 floor prevents the taller calligraphic glyphs from clipping at small sizes.
   ═══════════════════════════════════════════════════════════════════════════ */
h1,h2,h3,h4{
  font-family:'Aref Ruqaa',serif!important;
}
/* keep small heading labels from clipping the tall Ruqaa marks (footer/related/card titles) */
.foot-col h4,.aud-card h3,.post h4,.about .frame .row h4{line-height:1.5!important}

/* Aref Ruqaa reads optically smaller than the old Cairo, so nudge the content headings up a
   notch — on DESKTOP and mobile (they looked small in the new font everywhere). Body untouched.
   Desktop gets the slightly larger step; phones bump a bit less to avoid crowding. */
.art .body h2{font-size:27px!important}
.art .body h3{font-size:22px!important}
.card h3{font-size:22px!important}
.post h3{font-size:20px!important}
.related h3,.force h3{font-size:24px!important}
.aud-card h3{font-size:20px!important}
.about .frame .row h4{font-size:18px!important}
.thanks .refer h3{font-size:22px!important}
.foot-col h4{font-size:16px!important}
@media(max-width:768px){
  .art .body h2{font-size:25px!important}
  .related h3,.force h3{font-size:22px!important}
  .card h3{font-size:21px!important}
}