/* ==========================================================================
   CV theme overlay — shared by every CV / resume HTML (and their PDFs).
   Loaded AFTER each file's inline <style>: the inline sheet stays the
   ATS-safe base; this file only adds colour, the header band, org logos
   and the credential strip. Text content and reading order never change.
   Palette mirrors the site: emerald #10b981 · gold #d4af37 · deep navy.
   ========================================================================== */

:root {
  --cv-navy: #0b1220;
  --cv-navy-2: #0f2a3d;
  --cv-emerald: #10b981;
  --cv-emerald-deep: #047857;
  --cv-emerald-ink: #065f46;
  --cv-emerald-wash: #ecfdf5;
  --cv-gold: #d4af37;
  --cv-gold-soft: #fcd34d;
  --cv-ice: #e2e8f0;
  --cv-slate: #cbd5e1;
  --cv-line: #e5e7eb;
}

html, body {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---------- Header band ---------- */
body > header,
.header-wrap {
  position: relative;
  background: linear-gradient(125deg, var(--cv-navy) 0%, var(--cv-navy-2) 55%, #064e3b 100%);
  color: #fff;
  border: none;
  border-bottom: 3px solid var(--cv-gold);
  border-radius: 10px;
  padding: 10px 15px 8px;
  margin-bottom: 10px;
}
body > header h1,
.header-wrap h1 {
  color: #fff;
  letter-spacing: .6px;
}
body > header .tagline,
.header-wrap .target,
body > header .target {
  color: #6ee7b7;
}
body > header .receipts,
.header-wrap .receipts {
  color: var(--cv-slate);
}
body > header .contact,
.header-wrap .contact,
body > header .contact a,
.header-wrap .contact a {
  color: var(--cv-ice);
  border-bottom-color: rgba(226, 232, 240, .35);
}
.header-wrap .name-ar,
.header-wrap .gcc,
.header-wrap .pk,
body > header .elig,
body > header .right {
  color: var(--cv-gold-soft);
}
.header-wrap .photo-box {
  border: 2px solid var(--cv-gold);
  background: rgba(255, 255, 255, .06);
  padding: 2px;
}

/* Credential strip — issuer marks for credentials actually held */
.cred-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.cred-strip .cred-label {
  font-size: 7.6pt;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--cv-gold-soft);
  font-weight: 700;
  margin-right: 2px;
}
.cred-strip img {
  height: 16px;
  width: auto;
  background: #fff;
  border-radius: 4px;
  padding: 2px 4px;
}

/* ---------- Section headings ---------- */
h2 {
  color: var(--cv-emerald-ink);
  border-bottom: none;
  border-left: 4px solid var(--cv-emerald);
  background: linear-gradient(90deg, rgba(16, 185, 129, .16) 0%, rgba(212, 175, 55, .08) 55%, rgba(255, 255, 255, 0) 100%);
  padding: 1px 8px;
  margin: 7px 0 3px;
  border-radius: 0 4px 4px 0;
}

/* ---------- Experience ---------- */
.job {
  border-left: 2px solid var(--cv-line);
  padding-left: 8px;
}
.job-org { color: var(--cv-emerald-deep); }
.job-dates {
  background: var(--cv-emerald-wash);
  color: var(--cv-emerald-ink);
  border-radius: 8px;
  padding: 0 7px;
}
.org-logo {
  height: 13px;
  width: 13px;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 5px;
  object-fit: contain;
}

li::marker { color: var(--cv-emerald); }
strong { color: #0f172a; }
body > header strong, .header-wrap strong { color: #fff; }

/* Toolbar (screen only) */
.toolbar button {
  background: linear-gradient(135deg, var(--cv-emerald), var(--cv-emerald-deep));
  border-color: var(--cv-emerald-deep);
}

/* ---------- RTL (Arabic) ---------- */
[dir="rtl"] h2 {
  border-left: none;
  border-right: 4px solid var(--cv-emerald);
  background: linear-gradient(270deg, rgba(16, 185, 129, .16) 0%, rgba(212, 175, 55, .08) 55%, rgba(255, 255, 255, 0) 100%);
  border-radius: 4px 0 0 4px;
}
[dir="rtl"] .job {
  border-left: none;
  border-right: 2px solid var(--cv-line);
  padding-left: 0;
  padding-right: 8px;
}
[dir="rtl"] .org-logo { margin-right: 0; margin-left: 5px; }
[dir="rtl"] .cred-strip .cred-label { margin-right: 0; margin-left: 2px; }

/* ---------- Pagination ----------
   Let sections flow across pages (no half-empty pages), but never split a
   single job block or bullet, and keep each heading with what follows. */
section, section.allow-break { page-break-inside: auto; break-inside: auto; }
li, .details-grid, .cred-strip { page-break-inside: avoid; break-inside: avoid; }
/* A job may continue onto the next page between bullets, but its title/meta
   line always stays with the first bullet. */
.job { page-break-inside: auto; break-inside: auto; }
.job-head, .job-meta { page-break-after: avoid; break-after: avoid; }
h2 { page-break-after: avoid; break-after: avoid; }

/* References — compact two-column list */
/* flex, not grid: WeasyPrint lays grid lists out unreliably */
.ref-list { list-style: none; padding: 0; margin: 3px 0 2px; display: flex; flex-wrap: wrap; }
.ref-list li { width: 50%; box-sizing: border-box; padding-right: 12px; font-size: 8.3pt; line-height: 1.28; margin: 0 0 3px; }
.ref-list li.ref-list__label { width: 100%; }
.ref-list li::marker { content: none; }
.ref-list a { color: var(--cv-emerald-deep); text-decoration: none; }
.ref-note { margin: 2px 0 0; }