/* =============================================================
   THE CV DOCUMENT — one design, used by three places:
     · resume.html   (the public page)
     · edit.html     (the editable page)
     · the PDF       (generated from resume.html)
   Keeping it in one file is what stops the editor preview from
   silently drifting away from the real page.

   Font / theme / spacing are CSS custom properties, so the editor
   restyles the document by setting a handful of variables.
   ============================================================= */

/* ---------- FONT PAIRINGS ---------- */
.sheet[data-font="classic"]  { --cv-display:"Cormorant Garamond",Georgia,serif; --cv-body:"Inter",system-ui,sans-serif; }
.sheet[data-font="modern"]   { --cv-display:"Instrument Serif",Georgia,serif;   --cv-body:"Inter",system-ui,sans-serif; }
.sheet[data-font="clean"]    { --cv-display:"Inter",system-ui,sans-serif;       --cv-body:"Inter",system-ui,sans-serif; }
.sheet[data-font="arabic"]   { --cv-display:"Tajawal",system-ui,sans-serif;     --cv-body:"Tajawal",system-ui,sans-serif; }
/* Arabic always uses an Arabic-capable face, whatever pairing is chosen */
html[lang="ar"] .sheet[data-font="classic"] { --cv-display:"Amiri",serif;   --cv-body:"IBM Plex Sans Arabic",sans-serif; }
html[lang="ar"] .sheet[data-font="modern"]  { --cv-display:"Tajawal",sans-serif; --cv-body:"Tajawal",sans-serif; }
html[lang="ar"] .sheet[data-font="clean"]   { --cv-display:"IBM Plex Sans Arabic",sans-serif; --cv-body:"IBM Plex Sans Arabic",sans-serif; }

/* ---------- ACCENT THEMES ---------- */
.sheet[data-theme="terracotta"] { --cv-accent:#8B4A32; --cv-accent2:#2E7D74; --cv-rule:#C9A227; }
.sheet[data-theme="navy"]       { --cv-accent:#1F3A5F; --cv-accent2:#3E718C; --cv-rule:#9FB4C7; }
.sheet[data-theme="teal"]       { --cv-accent:#1F6F63; --cv-accent2:#8AA657; --cv-rule:#7FC0B4; }
.sheet[data-theme="plum"]       { --cv-accent:#6B3050; --cv-accent2:#A8577C; --cv-rule:#C99BB4; }
.sheet[data-theme="charcoal"]   { --cv-accent:#333333; --cv-accent2:#666666; --cv-rule:#B0B0B0; }

/* ---------- THE PAGE ---------- */
.sheet {
  --cv-scale: 1;
  --cv-line: 1.6;
  --cv-margin: 1;
  --cv-ink:#1E1A16; --cv-ink2:#4A423A; --cv-line-col:#DED5C7; --cv-paper:#ffffff;

  background: var(--cv-paper);
  color: var(--cv-ink);
  font-family: var(--cv-body);
  font-size: calc(10.6pt * var(--cv-scale));
  line-height: var(--cv-line);
  padding: calc(40px * var(--cv-margin)) calc(46px * var(--cv-margin));
}
html[lang="ar"] .sheet { line-height: calc(var(--cv-line) * 1.15); }

/* ---------- HEADER ---------- */
.sheet header { border-bottom:2px solid var(--cv-ink); padding-bottom:16px; margin-bottom:20px; }
.sheet .eyebrow {
  font-size:.68em; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cv-accent); margin-bottom:8px; font-weight:500;
}
html[lang="ar"] .sheet .eyebrow { letter-spacing:normal; text-transform:none; font-size:.8em; }
.sheet h1 { font-family:var(--cv-display); font-weight:700; font-size:2.5em; line-height:1.02; letter-spacing:-.01em; }
.sheet .role { color:var(--cv-accent2); font-weight:600; font-size:1.02em; margin-top:4px; }
.sheet .contact {
  margin-top:12px; display:flex; gap:16px; flex-wrap:wrap;
  font-size:.8em; color:var(--cv-ink2);
}
.sheet .contact a { color:var(--cv-accent); text-decoration:none; }

/* ---------- SECTIONS ---------- */
.sheet section { margin-top:calc(20px * var(--cv-margin)); }
.sheet h2 {
  font-size:.72em; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--cv-ink2); padding-bottom:6px; border-bottom:1px solid var(--cv-line-col); margin-bottom:12px;
}
html[lang="ar"] .sheet h2 { letter-spacing:normal; text-transform:none; font-size:.9em; }
.sheet .body-text { color:var(--cv-ink2); }

/* ---------- ENTRIES ---------- */
.sheet .job { margin-bottom:14px; border-inline-start:2px solid var(--cv-rule); padding-inline-start:15px; }
.sheet .job__head { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline; }
.sheet .job__title { font-family:var(--cv-display); font-weight:600; font-size:1.28em; line-height:1.2; }
.sheet .job__org { color:var(--cv-accent2); font-weight:500; font-size:.86em; }
.sheet .job__date { font-size:.76em; color:var(--cv-ink2); white-space:nowrap; }
.sheet .job__place { font-size:.76em; color:var(--cv-ink2); }
.sheet .job ul { margin:7px 0 0; padding-inline-start:17px; }
.sheet .job li { color:var(--cv-ink2); margin-bottom:3px; }

/* ---------- SIMPLE ENTRIES (education etc.) ---------- */
.sheet .item { margin-bottom:10px; }
.sheet .item b { font-family:var(--cv-display); font-size:1.1em; font-weight:600; display:block; }
.sheet .item p { font-size:.86em; color:var(--cv-ink2); }

/* ---------- TAGS (skills) ---------- */
.sheet .skills { display:flex; flex-wrap:wrap; gap:7px; }
.sheet .skills span {
  font-size:.8em; background:#F6F1E9; border:1px solid var(--cv-line-col);
  padding:6px 10px; color:var(--cv-ink);
}

/* ---------- BILINGUAL ---------- */
.sheet [data-lang] { display:none; }
html[lang="en"] .sheet [data-lang="en"] { display:revert; }
html[lang="ar"] .sheet [data-lang="ar"] { display:revert; }

/* =============================================================
   PRINT / PDF — clean white, A4, no orphaned sections
   ============================================================= */
@media print {
  @page { size:A4; margin:12mm 14mm; }
  html, body {
    background:#fff !important; margin:0; padding:0;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  /* every bit of app chrome disappears; only the document prints */
  .bar, .top, .tabs, .rail, .secrail, .cv-toolbar, .cv-panel, .addsec, .banner, .draftbar,
  .ph-tip, .entry-tools, .no-print { display:none !important; }
  .sheet {
    box-shadow:none !important; border:none !important; margin:0 !important;
    max-width:none !important; width:auto !important;
    padding:0 !important; transform:none !important;
  }
  .sheet section, .sheet .job, .sheet .item { break-inside:avoid; page-break-inside:avoid; }
  .sheet h1, .sheet h2 { break-after:avoid; page-break-after:avoid; }
  .sheet a { color:var(--cv-ink) !important; text-decoration:none; }
  [contenteditable] { outline:none !important; border:none !important; background:none !important; }
}