/* tw/assets/style.css — small layer Tailwind can't easily express */
/* Fonts are now loaded via <link> in front/layout.blade.php (with preconnect),
   instead of a render-blocking CSS @import discovered late in the load. */

:root{
  --motion:1;
  --brand:#0A1F3D;
  --on-brand:#FAF7F2;
  --accent:#F58220;
}
html{scroll-behavior:smooth;}
/* Guard against horizontal overflow on mobile — `clip` keeps position:sticky working (unlike overflow:hidden) */
html,body{overflow-x:clip;}
body{font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;max-width:100%;}
/* No media element should ever push the page wider than the viewport */
img,svg,video,canvas{max-width:100%;}
::selection{background:#F58220;color:#fff;}

/* Unified typography — Tajawal covers Arabic + Latin in one family, every page */
body,.font-display,.font-body,.font-serif{
  font-family:"Tajawal",ui-sans-serif,system-ui,sans-serif;
}
/* Tajawal has no true italic — keep faux-italic off for the decorative serif accents */
.font-serif{font-style:normal;}
/* English (LTR) uses Inter for all text; Arabic (RTL) keeps Tajawal */
html[dir="ltr"] body,
html[dir="ltr"] .font-display,
html[dir="ltr"] .font-body,
html[dir="ltr"] .font-serif{
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;
}

/* ============================================================================
   TYPOGRAPHY SYSTEM — single source of truth for the whole public site.
   Applied via semantic classes in the Blade templates (front/**), so a size or
   colour change here lands on every page at once. Layout utilities (mb-*,
   max-w-*, reveal, …) stay on the element; only the type tokens live here.

     class                weight  size                    line-height
     .t-h1                700     69.12px (fluid ≥34px)   1.08  → 74.6496px
     .t-h2                500     56px    (fluid ≥30px)   1.05
     .t-h3                500     28.16px (fluid ≥22px)   1.5   → 42.24px
     .t-h4 / .t-strong    600     20px                    28px
     .t-body              400     18px                    29.25px
     .t-small             400     14px                    22.75px
     .t-justify           justified long-form paragraphs

   Colour is emitted through :where() (zero specificity) so any Tailwind colour
   utility already on the element — text-white, text-cream/80, text-orange-500,
   group-hover:text-orange-500 — still wins. Dark mode swaps the tokens instead.
   ========================================================================== */
:root{
  --t-ink:#0A1224;   /* headings & strong text */
  --t-mute:#5B6982;  /* body & small text      */
}
html.dark{
  --t-ink:#FAF7F2;
  --t-mute:rgba(250,247,242,.72);
}

.t-h1,.t-h2,.t-h3,.t-h4,.t-strong,.t-body,.t-small{
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;
  font-style:normal;
}
/* Inter carries no Arabic glyphs — RTL keeps Tajawal at the same scale */
[dir="rtl"] :is(.t-h1,.t-h2,.t-h3,.t-h4,.t-strong,.t-body,.t-small){
  font-family:"Tajawal",ui-sans-serif,system-ui,sans-serif;
}

:where(.t-h1,.t-h2,.t-h3,.t-h4,.t-strong){color:var(--t-ink);}
:where(.t-body,.t-small){color:var(--t-mute);}

/* 1 — Main / hero heading. 5.4vw hits exactly 69.12px at a 1280px viewport and
       caps there; the 34px floor keeps it readable on a 320px phone. */
.t-h1{font-weight:700;font-size:clamp(34px,5.4vw,69.12px);line-height:1.08;letter-spacing:-.025em;}

/* 2 — Section heading */
.t-h2{font-weight:500;font-size:clamp(30px,4vw,56px);line-height:1.05;letter-spacing:-.025em;}

/* 3 — Sub-section / secondary heading — 28.16px / 42.24px at ≥1280px */
.t-h3{font-weight:500;font-size:clamp(22px,2.2vw,28.16px);line-height:1.5;letter-spacing:-.02em;}

/* 4 — Strong / highlighted text (card titles, FAQ questions, pull quotes) */
.t-h4,.t-strong{font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.01em;}

/* 5 — Body copy */
.t-body{font-weight:400;font-size:18px;line-height:29.25px;}

/* 6 — Small / supporting copy */
.t-small{font-weight:400;font-size:14px;line-height:22.75px;}

/* Arabic sets taller — matches the leading the RTL pages already used */
[dir="rtl"] .t-h1{line-height:1.14;letter-spacing:0;}
[dir="rtl"] .t-h2{line-height:1.14;letter-spacing:0;}
[dir="rtl"] .t-h3{line-height:1.55;letter-spacing:0;}
[dir="rtl"] :is(.t-h4,.t-strong){line-height:1.5;letter-spacing:0;}

/* Justified long-form paragraphs. Never applied to headings, nav, buttons,
   labels or short UI text — and neutralised inside centred blocks, where
   justification would fight the centring. */
.t-justify{text-align:justify;text-justify:inter-word;}
.text-center .t-justify,.t-justify.text-center{text-align:center;}

/* Narrow phones: step the two largest tiers down so long words don't overflow
   or break in unnatural places. Body/small stay at their spec size. */
@media (max-width:479px){
  .t-h3{font-size:20px;line-height:1.45;}
  .t-h4,.t-strong{font-size:18px;line-height:26px;}
}

/* Reveal-on-scroll — fail-open: visible by default, only opacity:0 when JS marks document as ready */
.reveal{opacity:1;transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);}
.js-loaded .reveal:not(.in){opacity:0;transform:translateY(calc(20px * var(--motion)));}
.reveal.in{opacity:1;transform:none;}
.delay-1{transition-delay:.08s;}
.delay-2{transition-delay:.16s;}
.delay-3{transition-delay:.24s;}
.delay-4{transition-delay:.32s;}

/* Marquee — spacing lives on each item (not flex gap) so the two duplicated
   halves are identical width and translateX(-50%) loops seamlessly. */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marquee-track{display:inline-flex;animation:marq 32s linear infinite;white-space:nowrap;will-change:transform;}
.marquee-track > span{margin-inline-end:56px;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* RTL overflows to the left, so scroll the track to the RIGHT (+50%). Starting at translateX(0)
   keeps content on screen the whole cycle — reversing the -50% keyframe left the bar empty. */
@keyframes marq-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
[dir="rtl"] .marquee-track{animation-name:marq-rtl;}

/* Floating hero stamps */
@keyframes float-0{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-8px)}}
@keyframes float-1{0%,100%{transform:rotate(1.5deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(8px)}}
@keyframes float-2{0%,100%{transform:rotate(-1.2deg) translateY(0)}50%{transform:rotate(-1.2deg) translateY(-6px)}}
.float-0{animation:float-0 6s ease-in-out infinite;}
.float-1{animation:float-1 7s ease-in-out infinite;}
.float-2{animation:float-2 8s ease-in-out infinite;}

/* Image placeholder treatment */
.img-ph{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#0B2545,#0A1F3D);
  color:rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
}
.img-ph::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:repeating-linear-gradient(45deg,rgba(245,130,32,.16) 0 1px,transparent 1px 14px);}
.img-ph::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 30% 30%,rgba(245,130,32,.25),transparent 55%);}
.img-ph .ph-label{position:relative;padding:8px 16px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.15);border-radius:999px;backdrop-filter:blur(6px);}

/* Stripe motif */
.stripe-motif{background-image:repeating-linear-gradient(45deg,var(--accent) 0 2px,transparent 2px 8px);opacity:.18;}

/* Dotgrid */
.dotgrid{background-image:radial-gradient(currentColor 1px,transparent 1.4px);background-size:24px 24px;opacity:.18;}

/* Eyebrow */
.eyebrow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--accent);display:inline-block;}
[dir="rtl"] .eyebrow{font-family:"Tajawal",ui-sans-serif,sans-serif;letter-spacing:.04em;text-transform:none;}

/* Btn arrow */
.btn-arrow{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.btn-link:hover .btn-arrow{transform:translateX(4px);}
[dir="rtl"] .btn-arrow{transform:scaleX(-1);}
[dir="rtl"] .btn-link:hover .btn-arrow{transform:scaleX(-1) translateX(4px);}

/* Nav link underline */
.nav-link{position:relative;}
.nav-link::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1);}
[dir="rtl"] .nav-link::after{transform-origin:right;}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1);}

/* Accordion */
.acc-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1), padding .3s ease;}
.acc-item[data-open="true"] .acc-a{max-height:520px;padding-bottom:24px;}
.acc-item[data-open="true"] .acc-toggle{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(45deg);}

/* Service item hover */
.svc-item{transition:padding .3s cubic-bezier(.2,.7,.2,1);}
.svc-item:hover{padding-left:12px;padding-right:12px;}

/* Modal */
.modal-overlay{opacity:0;pointer-events:none;transition:opacity .3s ease;}
.modal-overlay[data-open="true"]{opacity:1;pointer-events:auto;}
.modal-overlay .modal{transform:translateY(20px) scale(.96);transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.modal-overlay[data-open="true"] .modal{transform:none;}

/* Focus */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;}
  .marquee-track,.float-0,.float-1,.float-2{animation:none !important;}
}