/* ==========================================================
   شركة سهول النهرين للمقاولات — أنماط الموقع
   ========================================================== */

@font-face{font-family:'Tajawal';src:url('../assets/fonts/Tajawal-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Tajawal';src:url('../assets/fonts/Tajawal-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Tajawal';src:url('../assets/fonts/Tajawal-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Tajawal';src:url('../assets/fonts/Tajawal-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}

:root{
  --navy:#0A2540;
  --navy-deep:#071A2E;
  --asphalt:#0E1519;
  --gold:#C9962C;
  --amber:#F5B841;
  --paper:#F7F5F1;
  --line:#E1DDD5;
  --ink:#1C2530;
  --muted:#5B6673;
  --white:#fff;

  --wrap:1180px;
  --r:10px;
  --shadow:0 4px 24px rgba(10,37,64,.08);
  --shadow-lg:0 12px 48px rgba(10,37,64,.14);
  --t:.25s cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.75;
  font-size:16.5px;
  overflow-x:hidden;
}
body[dir="ltr"]{text-align:left}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:22px;padding-right:22px}

/* ===== خط تخطيط الطريق — العنصر المميز ===== */
.road-line{
  height:6px;
  background:repeating-linear-gradient(to right,
    var(--amber) 0 42px, transparent 42px 74px);
  opacity:.9;
}
.road-line.thin{height:4px;background:repeating-linear-gradient(to right,var(--gold) 0 26px,transparent 26px 46px)}

/* ===== الهيدر ===== */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{width:48px;height:48px;border-radius:50%;background:#fff;padding:2px;box-shadow:0 1px 6px rgba(10,37,64,.14)}
.brand-txt strong{display:block;font-size:15.5px;font-weight:800;color:var(--navy);line-height:1.3}
.brand-txt span{display:block;font-size:11.5px;color:var(--muted);letter-spacing:.02em}

.nav{display:flex;align-items:center;gap:3px}
.nav a{
  padding:9px 14px;border-radius:7px;font-size:15px;font-weight:500;color:var(--ink);
  transition:background var(--t),color var(--t);
}
.nav a:hover{background:var(--paper);color:var(--navy)}
.nav a.on{color:var(--navy);font-weight:700;background:rgba(201,150,44,.12)}

.head-act{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lang-btn{
  border:1.5px solid var(--line);border-radius:7px;padding:7px 13px;
  font-size:13.5px;font-weight:700;color:var(--navy);transition:all var(--t);
}
.lang-btn:hover{border-color:var(--gold);background:rgba(201,150,44,.08)}
.burger{display:none;flex-direction:column;gap:5px;padding:9px}
.burger span{width:23px;height:2.5px;background:var(--navy);border-radius:2px;transition:var(--t)}

/* ===== الأزرار ===== */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 27px;border-radius:8px;font-weight:700;font-size:15.5px;
  transition:transform var(--t),box-shadow var(--t),background var(--t);
}
.btn-primary{background:var(--amber);color:var(--asphalt);box-shadow:0 3px 14px rgba(245,184,65,.35)}
.btn-primary:hover{background:#ffcb5c;transform:translateY(-2px);box-shadow:0 6px 22px rgba(245,184,65,.45)}
.btn-ghost{border:1.8px solid rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.13);border-color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep);transform:translateY(-2px)}

/* ===== الهيرو ===== */
.hero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;opacity:.32}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,26,46,.72) 0%,rgba(7,26,46,.88) 65%,var(--navy-deep) 100%);
}
.hero-in{position:relative;z-index:2;padding-top:96px;padding-bottom:84px}
.hero h1{
  font-size:clamp(30px,5.4vw,55px);font-weight:800;line-height:1.24;
  margin-bottom:20px;letter-spacing:-.01em;
  overflow-wrap:break-word;
}
.hero .sub{
  font-size:clamp(15.5px,2vw,19px);color:#C4D2E0;max-width:640px;
  line-height:1.85;margin-bottom:32px;
}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:52px}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:660px}
.hstat{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:9px;padding:15px 18px;
  backdrop-filter:blur(4px);
}
.hstat b{display:block;font-size:26px;font-weight:800;color:var(--amber);line-height:1.2}
.hstat span{font-size:12.5px;color:#AFC0D2}

/* ===== الأقسام ===== */
.sec{padding:78px 0}
.sec-dark{background:var(--navy);color:#fff}
.sec-asphalt{background:var(--asphalt);color:#fff}
.sec-white{background:#fff}

.sec-head{margin-bottom:44px;max-width:720px}
.sec-head h2{
  font-size:clamp(25px,3.6vw,37px);font-weight:800;color:var(--navy);
  line-height:1.32;margin-bottom:13px;
}
.sec-dark .sec-head h2,.sec-asphalt .sec-head h2{color:#fff}
.sec-head p{font-size:16.5px;color:var(--muted);line-height:1.85}
.sec-dark .sec-head p,.sec-asphalt .sec-head p{color:#B8C6D4}
.sec-head .mark{
  display:block;width:52px;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--amber));margin-bottom:17px;
}

/* ===== الشبكات والبطاقات ===== */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px;transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(201,150,44,.4)}
.card h3{font-size:19px;font-weight:800;color:var(--navy);margin-bottom:10px}
.card p{font-size:15px;color:var(--muted);line-height:1.8}
.card .ico{
  width:46px;height:46px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--navy),#16406B);color:var(--amber);
  font-size:21px;margin-bottom:15px;
}

/* بطاقة خدمة */
.svc ul{margin-top:13px}
.svc li{
  font-size:14.5px;color:var(--muted);padding-inline-start:17px;position:relative;
  margin-bottom:7px;line-height:1.72;
}
.svc li::before{
  content:'';position:absolute;inset-inline-start:0;top:10px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}

/* ===== الإحصائيات ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:var(--r);padding:26px 18px;text-align:center;
}
.stat b{display:block;font-size:33px;font-weight:800;color:var(--navy);line-height:1.15}
.stat span{font-size:13.5px;color:var(--muted);display:block;margin-top:6px}

/* ===== الجدول ===== */
.tbl-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:#fff}
table.projects{width:100%;border-collapse:collapse;min-width:620px}
table.projects th{
  background:var(--navy);color:#fff;font-size:14.5px;font-weight:700;
  padding:14px 16px;text-align:start;
}
table.projects td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:middle}
table.projects tr:nth-child(even) td{background:#FAF8F5}
table.projects tr:last-child td{border-bottom:none}
table.projects .p-name{font-weight:700;color:var(--navy)}
table.projects .p-loc{color:var(--muted);font-size:13.5px}
table.projects .p-val{font-weight:700;color:var(--navy);white-space:nowrap}
table.projects .p-no{
  color:var(--gold);font-weight:800;text-align:center;width:48px;font-size:14px;
}

.total-bar{
  margin-top:22px;background:var(--navy);color:#fff;border-radius:var(--r);
  padding:20px 28px;display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;
}
.total-bar span{font-size:15.5px;color:#C4D2E0}
.total-bar b{font-size:22px;font-weight:800;color:var(--amber)}

/* ===== المعرض ===== */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal figure{
  position:relative;border-radius:var(--r);overflow:hidden;background:#000;
  aspect-ratio:4/3;cursor:pointer;
}
.gal img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.4,0,.2,1),opacity var(--t);
}
.gal figure:hover img{transform:scale(1.06);opacity:.85}
.gal figcaption{
  position:absolute;inset-inline:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(7,21,25,.92));
  color:#fff;font-size:13.5px;font-weight:600;
}

/* ===== الشهادات/الهويات ===== */
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.doc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;text-align:center}
.doc img{border-radius:6px;margin-bottom:11px;width:100%}
.doc p{font-size:13.5px;color:var(--muted);font-weight:600}

/* ===== شريط CTA ===== */
.cta-band{
  background:linear-gradient(120deg,var(--navy) 0%,#16406B 100%);
  color:#fff;border-radius:14px;padding:44px 40px;text-align:center;
}
.cta-band h2{font-size:clamp(22px,3vw,31px);font-weight:800;margin-bottom:12px}
.cta-band p{color:#C4D2E0;font-size:16.5px;margin-bottom:26px;max-width:560px;margin-inline:auto}
.cta-band .row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ===== نموذج التواصل ===== */
.form-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:15.5px;background:#fff;color:var(--ink);
  transition:border-color var(--t),box-shadow var(--t);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,150,44,.15);
}
.field textarea{resize:vertical;min-height:132px}
.form-note{font-size:13.5px;color:var(--muted);margin-top:11px}

.contact-list{display:flex;flex-direction:column;gap:14px}
.ci{
  display:flex;gap:14px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  transition:border-color var(--t),box-shadow var(--t);
}
.ci:hover{border-color:rgba(201,150,44,.45);box-shadow:var(--shadow)}
.ci .ci-ico{
  width:42px;height:42px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(10,37,64,.07);color:var(--navy);font-size:19px;
}
.ci b{display:block;font-size:14px;color:var(--muted);font-weight:600;margin-bottom:3px}
.ci a,.ci span.v{font-size:16.5px;font-weight:700;color:var(--navy);word-break:break-word}
.ci a:hover{color:var(--gold)}

/* ===== الفوتر ===== */
.site-foot{background:var(--asphalt);color:#9FB0C0;padding-top:52px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:40px;padding-bottom:38px}
.foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.foot-brand img{width:48px;height:48px;border-radius:50%}
.foot-brand strong{color:#fff;font-size:16.5px;font-weight:800;display:block;line-height:1.35}
.foot-brand span{font-size:12px;color:#7E90A2}
.site-foot p{font-size:14.5px;line-height:1.85;color:#9FB0C0}
.foot-col h4{color:#fff;font-size:16px;font-weight:800;margin-bottom:15px}
.foot-col li{margin-bottom:9px}
.foot-col a{font-size:14.5px;color:#9FB0C0;transition:color var(--t)}
.foot-col a:hover{color:var(--amber)}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.1);padding:19px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13.5px;color:#7E90A2;
}

/* ===== Lightbox ===== */
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(7,21,25,.95);
  display:none;place-items:center;padding:26px;
}
.lb.open{display:grid}
.lb img{max-width:94vw;max-height:88vh;border-radius:8px;box-shadow:0 20px 70px rgba(0,0,0,.6)}
.lb-x{
  position:absolute;top:20px;inset-inline-end:24px;color:#fff;font-size:34px;
  width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);
  display:grid;place-items:center;line-height:1;
}
.lb-x:hover{background:rgba(255,255,255,.22)}

/* ===== أدوات ===== */
.center{text-align:center}
.mt-lg{margin-top:38px}
[hidden]{display:none !important}

/* ===== الاستجابة ===== */
@media(max-width:960px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.gal,.docs{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr;gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .nav{
    position:fixed;inset-block:74px auto;inset-inline:0;background:#fff;
    flex-direction:column;align-items:stretch;padding:14px 20px 20px;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
    transform:translateY(-140%);transition:transform .3s;gap:0;
  }
  .nav.open{transform:translateY(0)}
  .nav a{padding:13px 12px;border-radius:8px;font-size:16px}
  .burger{display:flex}
}
@media(max-width:620px){
  .g2,.g3,.g4,.gal,.docs,.stats,.foot-grid{grid-template-columns:1fr}
  .sec{padding:56px 0}
  .hero-in{padding-top:64px;padding-bottom:56px}
  .hero h1{font-size:clamp(25px,7vw,34px);line-height:1.32}
  .cta-band{padding:34px 22px}
  .hstat{padding:13px 15px}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding:22px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
