/* ─────────────────────────────────────────────────────────
   AL-EJADA — The Global Conduit design system
   Shared styles across Home / About / Services / Contact
   ───────────────────────────────────────────────────────── */

:root{
  /* Palette */
  --primary: #003345;
  --primary-container: #004b63;
  --secondary: #805611;
  --tertiary: #551d00;
  --tertiary-container: #74310e;

  --surface: #fafaf5;
  --surface-lowest: #ffffff;
  --surface-low: #f4f4ef;
  --surface-high: #ebebe5;
  --surface-highest: #e3e3de;

  --on-surface: #1a1c19;
  --on-surface-mute: #5b6066;
  --outline-variant: #c0c7cd;

  --gold: #C9A24A;       /* logo accent */
  --gold-deep: #B08A33;

  /* Type */
  --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: 'Public Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Spacing scale (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px;
}

*{ box-sizing: border-box; }
html, body{ margin: 0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* Type scale */
.display-lg{
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.display-md{
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.headline-md{
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: -0.015em;
  font-weight: 600;
  line-height: 1.15;
}
.headline-sm{
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.body-lg{ font-size: 1.0625rem; line-height: 1.65; color: var(--on-surface); }
.body-mute{ color: var(--on-surface-mute); }

.label-md{
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--secondary);
}
.label-mute{ color: var(--on-surface-mute); }

.accent-word{ color: var(--secondary); font-style: italic; font-weight: 600; }

/* Layout */
.wrap{ max-width: 1280px; margin: 0 auto; padding: 0 var(--s-8); }
@media (max-width: 720px){ .wrap{ padding: 0 var(--s-6); } }

.section{ padding: var(--s-24) 0; }
.section-tight{ padding: var(--s-16) 0; }

/* ── Header (glass nav) ── */
.header{
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) 0;
}
.brand{
  display: flex; align-items: center; gap: var(--s-3);
  text-decoration: none;
  color: var(--primary);
}
.brand-logo-img{
  height: 56px; width: auto; display: block;
  object-fit: contain;
}
.brand-logo-img--footer{
  height: 72px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.nav{
  display: flex; align-items: center; gap: var(--s-8);
}
.nav a{
  font-size: 0.95rem;
  color: var(--on-surface);
  position: relative;
  padding: var(--s-2) 0;
  transition: color .2s;
}
.nav a:hover{ color: var(--primary); }
.nav a.is-active::after{
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 50%; height: 2px; background: var(--secondary);
}
.lang-toggle{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px;
  background: var(--surface-high);
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--on-surface);
  text-transform: uppercase;
}
.lang-toggle .sep{ opacity: 0.35; }
.lang-toggle .lang.is-active{ color: var(--primary); }
.lang-toggle .lang{ color: var(--on-surface-mute); transition: color .2s; }

@media (max-width: 800px){
  .nav{ gap: var(--s-4); }
  .nav a{ font-size: 0.85rem; }
  .brand-name{ display: none; }
}

/* Buttons */
.btn{
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 14px 28px;
  border-radius: 0.75rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform .2s, filter .2s;
}
.btn:hover{ filter: brightness(1.08); }
.btn:active{ transform: translateY(1px); }
.btn-primary{
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
}
.btn-secondary{
  background: var(--surface-high);
  color: var(--on-surface);
}
.btn-tertiary{
  padding: 6px 0;
  color: var(--primary);
  position: relative;
  font-weight: 600;
}
.btn-tertiary::after{
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 50%; height: 2px; background: var(--secondary);
  transition: width .25s;
}
.btn-tertiary:hover::after{ width: 100%; }

/* Footer */
.footer{
  background: var(--primary);
  color: rgba(255,255,255,0.85);
  padding: var(--s-16) 0 var(--s-8);
  margin-top: var(--s-24);
}
.footer .grid{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-12);
}
.footer h5{
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s-4);
  font-weight: 600;
}
.footer ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.footer a{ color: rgba(255,255,255,0.78); transition: color .2s; }
.footer a:hover{ color: #fff; }
.footer .tag{
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-3);
}
.footer-bottom{
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  display: flex; justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}
.footer-bottom-line{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  margin: var(--s-12) 0 var(--s-6);
}
@media (max-width: 800px){
  .footer .grid{ grid-template-columns: 1fr 1fr; }
}

/* Scroll-in animation primitive */
.fade-up{
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.fade-up.is-in{ opacity: 1; transform: none; }

/* Utility */
.kicker{
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--secondary);
  font-weight: 600;
}
.kicker::before{
  content: ''; width: 28px; height: 1px; background: var(--secondary);
}

/* ── Arabic / RTL ─────────────────────────────────────────── */

/* Font: Cairo for Arabic (loaded on demand by shared.js) */
html[lang="ar"],
html[lang="ar"] body {
  font-family: 'Cairo', sans-serif;
}
html[lang="ar"] .display-lg,
html[lang="ar"] .display-md,
html[lang="ar"] .headline-md,
html[lang="ar"] .headline-sm,
html[lang="ar"] h1, html[lang="ar"] h2,
html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] .team-meta .name,
html[lang="ar"] .stat .num {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
}

/* Reset letter-spacing throughout */
html[lang="ar"] .display-lg { letter-spacing: -0.01em; }
html[lang="ar"] .display-md { letter-spacing: -0.01em; }
html[lang="ar"] .kicker,
html[lang="ar"] .label-md,
html[lang="ar"] .team-meta .role,
html[lang="ar"] .value .num,
html[lang="ar"] .stat .label,
html[lang="ar"] .footer h5 {
  letter-spacing: 0.04em;
}

/* Global RTL layout */
[dir="rtl"] { text-align: right; }

/* Kicker line moves to trailing side */
[dir="rtl"] .kicker::before { order: 1; }

/* Nav alignment */
[dir="rtl"] .header-inner { flex-direction: row-reverse; }
[dir="rtl"] .nav { flex-direction: row-reverse; }

/* CTA actions justify to opposite side in grid */
[dir="rtl"] .cta-actions { justify-self: start; }
[dir="rtl"] .cta-grid { direction: rtl; }

/* Buttons */
[dir="rtl"] .btn { flex-direction: row-reverse; }
[dir="rtl"] .btn-tertiary::after { left: auto; right: 0; }

/* Hero grid: reverse column order */
[dir="rtl"] .hero-grid { direction: rtl; }
[dir="rtl"] .hero-grid > * { direction: ltr; text-align: right; }

/* Services grid flip — use ltr on the grid to flip image to left in RTL */
[dir="rtl"] .svc-grid.flip { direction: ltr; }
[dir="rtl"] .svc-grid.flip > * { direction: rtl; }

/* Art num badge — swap side */
[dir="rtl"] .svc-art .art-num { left: auto; right: var(--s-8); }

/* Contact grid */
[dir="rtl"] .contact-grid { direction: rtl; }
[dir="rtl"] .contact-grid > * { direction: rtl; }

/* Form inputs / selects */
[dir="rtl"] .form-row input,
[dir="rtl"] .form-row select,
[dir="rtl"] .form-row textarea { text-align: right; }

/* Team, stats, about grids */
[dir="rtl"] .team-grid,
[dir="rtl"] .stats-grid,
[dir="rtl"] .about-grid,
[dir="rtl"] .story-grid,
[dir="rtl"] .values-grid,
[dir="rtl"] .approach-grid,
[dir="rtl"] .langs-grid,
[dir="rtl"] .cert-layout { direction: rtl; }
[dir="rtl"] .team-grid > *,
[dir="rtl"] .about-grid > *,
[dir="rtl"] .story-grid > *,
[dir="rtl"] .cert-layout > * { direction: rtl; }

/* Footer */
[dir="rtl"] .footer .grid { direction: rtl; }
[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }
[dir="rtl"] .footer ul { text-align: right; }

/* Section-head grid */
[dir="rtl"] .section-head { direction: rtl; }
[dir="rtl"] .section-head > * { direction: rtl; }

/* Service cards */
[dir="rtl"] .service-cards { direction: rtl; }
[dir="rtl"] .svc-card .glyph { right: auto; left: var(--s-8); }

/* Info card (contact page) */
[dir="rtl"] .info-card .extra-line {
  background: linear-gradient(270deg, transparent, rgba(255,255,255,0.2), transparent);
}
[dir="rtl"] .social { justify-content: flex-end; }

/* Lang chip */
[dir="rtl"] .lang-chip { text-align: right; }

/* Cert partner chip */
[dir="rtl"] .cert-partner { flex-direction: row-reverse; }

/* Cert badge position + team role margin */
[dir="rtl"] .cert-badge { left: auto; right: var(--s-4); }
[dir="rtl"] .cert-team-member .m-role { margin-left: 0; margin-right: var(--s-2); }

/* ── Page-load overlay ── */
.page-loader{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--surface);
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.page-loader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader .aejada-loader{ width: min(40vmin, 320px); height: min(40vmin, 320px); }

/* ── Loader animation (from loader.css) ── */
.aejada-loader{
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
.aejada-mark{
  width: 100%; height: 100%;
  animation: aejada-breath 4.2s ease-in-out infinite;
}
@keyframes aejada-breath{
  0%,100%{ transform: scale(1); }
  55%    { transform: scale(1.015); }
}
.aejada-circle{
  fill: none; stroke: #003345; stroke-width: 16; stroke-linecap: round;
  stroke-dasharray: 2388; stroke-dashoffset: 2388;
  animation: aejada-circle-draw 4.2s ease-in-out infinite;
}
@keyframes aejada-circle-draw{
  0%   { stroke-dashoffset: 2388; }
  13%  { stroke-dashoffset: 0; }
  89%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.aejada-line{
  fill: none; stroke: #003345; stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: aejada-line-draw 4.2s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes aejada-line-draw{
  0%   { stroke-dashoffset: var(--len); }
  20%  { stroke-dashoffset: 0; }
  89%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.aejada-dot{
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
  animation: aejada-pop 4.2s cubic-bezier(.3,1.6,.5,1) infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes aejada-pop{
  0%   { transform: scale(0); opacity: 0; }
  24%  { transform: scale(0); opacity: 0; }
  32%  { transform: scale(1); opacity: 1; }
  89%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
.aejada-arrow{
  fill: none;
  stroke: url(#aejada-arrow-grad);
  stroke-width: 22; stroke-linecap: round;
  stroke-dasharray: 1350; stroke-dashoffset: 1350;
  animation: aejada-arrow 4.2s ease-in-out infinite;
}
@keyframes aejada-arrow{
  0%, 28% { stroke-dashoffset: 1350; }
  50%     { stroke-dashoffset: 0; }
  89%     { stroke-dashoffset: 0; opacity: 1; }
  100%    { stroke-dashoffset: 0; opacity: 0; }
}
.aejada-head{
  transform-origin: center;
  transform: scale(0); opacity: 0;
  animation: aejada-head 4.2s cubic-bezier(.3,1.6,.5,1) infinite;
}
@keyframes aejada-head{
  0%, 48% { transform: scale(0); opacity: 0; }
  55%     { transform: scale(1); opacity: 1; }
  89%     { transform: scale(1); opacity: 1; }
  100%    { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .aejada-mark, .aejada-line, .aejada-dot,
  .aejada-arrow, .aejada-head, .aejada-circle{ animation: none; }
  .aejada-line, .aejada-circle, .aejada-arrow{ stroke-dashoffset: 0; }
  .aejada-dot, .aejada-head{ transform: scale(1); opacity: 1; }
}