/* CV page — same look as the site on screen (black, white, blue accent); clean A4 when printed / saved as PDF. */
:root {
  --bg: #000; --text: #fff; --muted: #b5b5b5; --dim: #5e5e5e; --line: rgba(255, 255, 255, .14);
  --accent: #2f7bff; --font: Manrope, sans-serif;
}
html[lang="ar"] { --font: Manrope, "IBM Plex Sans Arabic", sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
*:lang(ar) { letter-spacing: 0 !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 400 16px/1.55 var(--font); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
.i18n-pending body { visibility: hidden; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Top bar */
.cv-bar {
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px clamp(16px, 4vw, 40px); background: rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
}
.cv-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 999px;
  background: var(--text); color: #000; border: 1px solid var(--text); font: 600 15px/1 var(--font);
  text-decoration: none; cursor: pointer; transition: transform .15s, background-color .3s, color .3s;
}
.cv-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.cv-btn:active { transform: scale(.97); }
.cv-btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.cv-btn.ghost:hover { border-color: var(--accent); background: transparent; }
[dir="rtl"] .cv-arrow { display: inline-block; transform: scaleX(-1); }

/* Page */
.cv { max-width: 1040px; margin: 0 auto; padding: clamp(36px, 7vw, 80px) clamp(16px, 4vw, 40px) 80px; }
.cv-head { padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.cv-name { font: 600 clamp(56px, 11vw, 120px)/.95 Manrope, sans-serif; letter-spacing: -.05em; }
html[lang="ar"] .cv-name { font-family: Manrope, "Badeen Display", sans-serif; font-weight: 400; line-height: 1.15; }
.cv-role { margin-top: 18px; font-size: clamp(18px, 2.4vw, 24px); font-weight: 500; color: var(--muted); }
html[lang="ar"] .cv-role { font-family: Manrope, Alexandria, sans-serif; font-weight: 600; line-height: 1.6; }
.cv-contact { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; color: var(--muted); font-size: 15px; }
.cv-contact li { display: flex; align-items: center; gap: 22px; }
.cv-contact li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-inline-start: -13px; margin-inline-end: -13px; }
.cv-contact li[hidden] { display: none; }
.cv-contact a { text-decoration: none; border-bottom: 1px solid transparent; }
.cv-contact a:hover { color: var(--text); border-color: var(--accent); }

.cv-grid { display: grid; grid-template-columns: 1fr 340px; gap: 56px; margin-top: 40px; }
.cv-section + .cv-section { margin-top: 40px; }
.cv-title {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.cv-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #2f7bff33; }
html[lang="ar"] .cv-title { font-size: 15px; text-transform: none; }
.cv-text { font-size: 17px; line-height: 1.7; color: var(--text); }
.cv-text.small { font-size: 15px; color: var(--muted); }
html[lang="ar"] .cv-text { line-height: 1.95; }
.cv-strong { font-weight: 600; font-size: 16px; }

.cv-projects { display: flex; flex-direction: column; }
.cv-project { padding: 18px 0; border-top: 1px solid var(--line); }
.cv-project:first-child { border-top: 0; padding-top: 0; }
.cv-project[hidden] { display: none; }
.cv-project-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 6px; }
.cv-project h3 { font-size: 20px; font-weight: 600; letter-spacing: -.03em; margin-inline-end: 4px; }
.cv-tag, .cv-status { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.cv-status { color: var(--text); border-color: #2f7bff66; }
.cv-project p { color: var(--muted); font-size: 15px; line-height: 1.6; }
html[lang="ar"] .cv-project p { line-height: 1.9; }

.cv-sub { font-size: 14px; font-weight: 600; margin: 18px 0 10px; }
.cv-sub:first-of-type { margin-top: 0; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-chips li {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04); font-size: 13px; font-weight: 500; color: var(--muted);
}
.cv-chips img { width: 15px; height: 15px; filter: invert(1); opacity: .85; }
.cv-plain li { padding: 6px 0; color: var(--text); font-size: 15px; }
.cv-plain li + li { border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  .cv-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 479px) {
  .cv-contact { flex-direction: column; gap: 6px; }
  .cv-contact li + li::before { display: none; }
  .cv-btn { padding: 10px 16px; font-size: 14px; }
}

/* Print / Save as PDF: white A4, no toolbar, compact */
@page { size: A4; margin: 14mm 14mm; }
@media print {
  :root { --bg: #fff; --text: #000; --muted: #444; --line: #ddd; }
  html, body { background: #fff !important; }
  body { font-size: 11pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cv-bar { display: none; }
  .cv { max-width: none; padding: 0; }
  .cv-head { padding-bottom: 16px; }
  .cv-name { font-size: 46pt; }
  .cv-role { font-size: 13pt; margin-top: 8px; }
  .cv-contact { margin-top: 10px; font-size: 10pt; }
  .cv-grid { grid-template-columns: 1fr 64mm; gap: 10mm; margin-top: 8mm; }
  .cv-section + .cv-section { margin-top: 7mm; }
  .cv-title { margin-bottom: 8px; font-size: 9pt; }
  .cv-text { font-size: 10.5pt; }
  .cv-text.small, .cv-project p, .cv-plain li { font-size: 9.5pt; }
  .cv-project { padding: 8px 0; break-inside: avoid; }
  .cv-project h3 { font-size: 12.5pt; }
  .cv-chips li { padding: 3px 8px; font-size: 8.5pt; background: #fff; }
  .cv-chips img { filter: none; }
  a { text-decoration: none; }
  /* keep it to one A4 page */
  .cv-section + .cv-section { margin-top: 5mm; }
  .cv-sub { margin: 8px 0 6px; font-size: 9.5pt; }
  .cv-chips { gap: 5px; }
  .cv-plain li { padding: 3px 0; }
  html[lang="ar"] .cv-text, html[lang="ar"] .cv-project p { line-height: 1.6; }
  html[lang="ar"] .cv-name { font-size: 40pt; line-height: 1.1; }
  html[lang="ar"] .cv-role { line-height: 1.4; }
  /* 8 projects: tighter so it still fits one page */
  @page { size: A4; margin: 10mm 12mm; }
  body { font-size: 10pt; }
  .cv-name { font-size: 36pt; }
  .cv-role { font-size: 11.5pt; margin-top: 4px; }
  .cv-head { padding-bottom: 10px; }
  .cv-grid { margin-top: 5mm; gap: 8mm; }
  .cv-project { padding: 5px 0; }
  .cv-project h3 { font-size: 11pt; }
  .cv-project-head { gap: 6px; }
  .cv-project p, .cv-text.small, .cv-plain li { font-size: 8.8pt; line-height: 1.4; }
  .cv-text { font-size: 9.5pt; line-height: 1.45; }
  .cv-tag, .cv-status { font-size: 7.5pt; padding: 1px 7px; }
  html[lang="ar"] .cv-name { font-size: 32pt; }
  html[lang="ar"] .cv-text, html[lang="ar"] .cv-project p { line-height: 1.5; }
}