/* ========== Base ========== */
:root{
  --saudi-green:#006C35;
  --saudi-green-700:#00562a;
  --soft-gray:#f5f7f8;
  --text:#222;
  --muted:#6b7280;
  --border:#e5e7eb;
  --radius:14px;
  --shadow:0 6px 16px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{font-size:16px}
html,body{height:100%}
body{
  margin:0;
  background:var(--soft-gray);
  color:var(--text);
  font-family:'Tajawal','Cairo',system-ui,-apple-system,Segoe UI,Roboto,'Noto Naskh Arabic',sans-serif;
  line-height:1.6;
  direction: rtl;
}

img{max-width:100%;height:auto;display:block;border-radius:var(--radius)}

a{color:var(--saudi-green);text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:min(1100px, 92%);
  margin-inline:auto;
}

/* ========== Header ========== */
.site-header{
  background:linear-gradient(0deg, rgba(0,108,53,0.92), rgba(0,108,53,0.92)), url('https://images.unsplash.com/photo-1544989164-31dc3c645987?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  color:#fff;
  padding: clamp(20px, 4vw, 30px) 0 48px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.5px;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
}

.brand .logo{
  display:inline-grid;
  place-items:center;
  inline-size:42px;
  block-size:42px;
  background:#fff;
  color:var(--saudi-green);
  border-radius:12px;
  font-weight:900;
  box-shadow:var(--shadow);
}

.toplinks a{
  color:#e6ffef;
  font-weight:600;
  padding:.35rem .75rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
}
.toplinks a:hover{background:rgba(255,255,255,.12);text-decoration:none}

.hero{
  display:grid;
  gap:10px;
}

.hero h1{
  margin: 6px 0;
  font-size: clamp(1.4rem, 4.6vw, 2.2rem);
}

.hero p{
  margin:0;
  color:#eafaf0;
  font-size: clamp(.95rem, 2.6vw, 1.05rem);
}

/* ========== Job Cards ========== */
.section{
  padding: 28px 0 48px;
}

.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:18px;
}

@media (min-width:640px){
  .cards{grid-template-columns: repeat(2, 1fr);}
}
@media (min-width:980px){
  .cards{grid-template-columns: repeat(3, 1fr);}
}

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.card h3{
  margin:0;
  font-size:1.1rem;
}

.badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color:#0f5132;
}
.badge{
  background:#e7f7ee;
  border:1px solid #c9eedb;
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
}

.card p{margin:0;color:#374151;min-height:48px}

.cta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
}

.btn{
  appearance:none;
  border:0;
  border-radius:12px;
  padding:.7rem 1rem;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
}

.btn-primary{
  background:var(--saudi-green);
  color:#fff;
  box-shadow: 0 6px 12px rgba(0,108,53,.25);
}
.btn-primary:hover{background:var(--saudi-green-700);transform:translateY(-1px)}

.btn-ghost{
  background:#fff;
  border:1px solid var(--border);
  color:var(--saudi-green);
}
.btn-ghost:hover{background:#f8fafb}

/* ========== Inline Form ========== */
.inline-form{
  display:none;
  margin-top:10px;
  padding:14px;
  border-radius:12px;
  border:1px dashed #cfe9d9;
  background:#f6fbf8;
}

.inline-form.active{display:block}

.form-row{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
  margin-bottom:10px;
}
@media (min-width:560px){
  .form-row{grid-template-columns: repeat(3, 1fr);}
}

.label{
  font-size:.92rem;
  font-weight:700;
  margin-bottom:6px;
  color:#0f5132;
}

.input, .submit-btn{
  width:100%;
  padding:.7rem .85rem;
  border-radius:10px;
  border:1px solid var(--border);
  font-family:inherit;
  font-size:1rem;
}

.input:focus{
  outline:2px solid #cdeee0;
  border-color:#a4dcc0;
}

input[type="email"], input[type="tel"]{
  direction:ltr;
  text-align:left;
}

/* ========== Modal (Thank You) ========== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.48);
  z-index:50;
  padding:20px;
}
.modal.show{display:grid}

.modal-card{
  background:#fff;
  border-radius:16px;
  padding:20px;
  width:min(480px, 94vw);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  text-align:center;
}
.modal-card h4{margin:0 0 8px 0}
.modal-card p{margin:0 0 12px 0;color:#374151}

/* ========== Footer ========== */
.site-footer{
  background:#0b2e1b;
  color:#d9ffe7;
  padding:22px 0;
  margin-top: 24px;
  border-top: 4px solid var(--saudi-green);
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  align-items:center;
}
@media (min-width:720px){
  .footer-grid{
    grid-template-columns: 1fr auto;
  }
}

.footer-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.footer-links a{color:#d9ffe7;font-weight:700}
.footer-links a:hover{text-decoration:underline}

/* ========== Legal Pages ========== */
.legal-wrap{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin: 18px 0 32px;
}

.legal-wrap h1{
  font-size: clamp(1.2rem, 4.8vw, 1.6rem);
  margin:0 0 8px 0;
}
.legal-wrap h2{
  font-size:1.05rem;
  margin:16px 0 8px 0;
}
.legal-wrap p{margin:0 0 10px 0;color:#374151}
.legal-wrap ul{margin:0 0 10px 1.2rem}
.legal-wrap li{margin:6px 0}