/* ═══════════════════════════════════════════════════════
   CV Pass — Design System v5
   Typography: Cormorant Garamond × Tajawal
   Aesthetic: Luxury Emirati · Forest Green × Warm Cream
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Tajawal:wght@300;400;500;700&display=swap');

/* ── Tokens ─────────────────────────────────────────── */
:root {
  --green:        #1A4D35;
  --green-mid:    #1F5C40;
  --green-light:  #2D7A56;
  --green-subtle: rgba(26,77,53,.07);
  --green-line:   rgba(26,77,53,.16);

  --ink:          #0F0F0F;
  --ink-mid:      #2A2A2A;
  --ink-soft:     #585858;
  --ink-ghost:    #999;

  --cream:        #FAFAF7;
  --cream-deep:   #F3EFE6;
  --cream-card:   #FFFFFF;
  --cream-border: #E6DDD2;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Tajawal', sans-serif;

  --r-sm:  5px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 32px;

  --shadow-sm:    0 1px 4px rgba(0,0,0,.06);
  --shadow-md:    0 4px 20px rgba(0,0,0,.09);
  --shadow-lg:    0 14px 50px rgba(0,0,0,.13);
  --shadow-green: 0 4px 18px rgba(26,77,53,.25);
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px; color: var(--ink);
  background: var(--cream); line-height: 1.7;
  direction: rtl; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Typography ─────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600; line-height: 1.15; color: var(--ink);
}
h1 { font-size: clamp(2.8rem, 6vw, 5rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 500; }
h3 { font-size: 1.25rem; font-weight: 600; }
p  { line-height: 1.85; }

/* ── Eyebrow ────────────────────────────────────────── */
.eyebrow {
  display: inline-block; font-family: var(--font-body);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--green); margin-bottom: .7rem;
}

/* ── Accent line ────────────────────────────────────── */
.accent-line {
  width: 36px; height: 2px;
  background: var(--green); opacity: .45;
  margin: .9rem auto;
}
.accent-line.right { margin-right: 0; margin-left: auto; }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  padding: .76rem 1.8rem; border-radius: var(--r-sm);
  border: none; cursor: pointer;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
.btn-primary { background: var(--green); color: white; box-shadow: var(--shadow-green); }
.btn-primary:hover { background: var(--green-mid); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(26,77,53,.32); }
.btn-ghost { background: transparent; color: var(--ink-mid); border: 1.5px solid var(--cream-border); }
.btn-ghost:hover { border-color: var(--green-line); color: var(--green); background: var(--green-subtle); }
.btn-outline-white { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,.4); }
.btn-outline-white:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.75); }
.btn-lg { padding: .92rem 2.3rem; font-size: 1rem; }
.btn-sm { padding: .5rem 1.1rem; font-size: .81rem; }

/* ── Badge ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .36rem .9rem; background: var(--green-subtle);
  border: 1px solid var(--green-line); border-radius: 50px;
  font-size: .71rem; font-weight: 700; color: var(--green); letter-spacing: .06em;
}

/* ── Layout ─────────────────────────────────────────── */
.container    { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.container-sm { max-width: 740px;  margin: 0 auto; padding: 0 2rem; }
.section    { padding: 5.5rem 2rem; }
.section-sm { padding: 3.5rem 2rem; }
.section-head { text-align: center; margin-bottom: 3.5rem; }
.section-head p { color: var(--ink-soft); max-width: 490px; margin: .7rem auto 0; font-size: .93rem; }

/* ── Header ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,250,247,.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--cream-border);
}
.header-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 2rem;
  height: 66px; display: flex; align-items: center;
  justify-content: space-between; gap: 2rem;
}
.logo { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.logo span { color: var(--green); }
.site-header nav ul { display: flex; gap: 1.8rem; align-items: center; }
.site-header nav a { font-size: .84rem; font-weight: 500; color: var(--ink-soft); transition: color .2s; }
.site-header nav a:hover { color: var(--green); }

/* ── Footer ─────────────────────────────────────────── */
.site-footer { background: var(--green); padding: 4rem 2rem 2rem; }
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-logo { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: white; }
.footer-logo span { color: rgba(255,255,255,.45); }
.footer-brand p { font-size: .83rem; color: rgba(255,255,255,.45); line-height: 1.8; margin-top: .8rem; }
.footer-col h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: white; margin-bottom: 1rem; }
.footer-col a { display: block; font-size: .82rem; color: rgba(255,255,255,.42); margin-bottom: .5rem; transition: color .2s; }
.footer-col a:hover { color: rgba(255,255,255,.85); }
.footer-bottom {
  max-width: 1100px; margin: 0 auto; padding-top: 1.5rem;
  font-size: .77rem; color: rgba(255,255,255,.28);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
}

/* ── Forms ──────────────────────────────────────────── */
.form-group { margin-bottom: 1.3rem; }
.form-group label { display: block; font-size: .81rem; font-weight: 700; color: var(--ink-mid); margin-bottom: .45rem; letter-spacing: .02em; }
.opt { font-weight: 400; color: var(--ink-ghost); font-size: .76rem; }
.form-control {
  width: 100%; padding: .7rem 1rem;
  font-family: var(--font-body); font-size: .9rem; color: var(--ink);
  background: var(--cream-card); border: 1.5px solid var(--cream-border);
  border-radius: var(--r-md); outline: none;
  transition: border-color .2s, box-shadow .2s; direction: rtl;
}
.form-control:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26,77,53,.09); }
.form-control::placeholder { color: var(--ink-ghost); }
select.form-control { appearance: none; cursor: pointer; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* ── Choice buttons ─────────────────────────────────── */
.choice-group, .choice-row { display: flex; flex-wrap: wrap; gap: .52rem; }
.choice-item {
  display: flex; align-items: center; gap: .4rem;
  padding: .46rem .95rem; border: 1.5px solid var(--cream-border);
  border-radius: var(--r-sm); font-size: .82rem; cursor: pointer;
  transition: all .2s; color: var(--ink-soft); user-select: none;
}
.choice-item input { display: none; }
.choice-item:hover { border-color: var(--green-line); color: var(--green); }
.choice-item.selected { border-color: var(--green); background: var(--green-subtle); color: var(--green); font-weight: 600; }

/* ── Skills ─────────────────────────────────────────── */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px,1fr)); gap: .5rem; }
.skill-item {
  display: flex; align-items: center; gap: .42rem;
  padding: .5rem .82rem; border: 1.5px solid var(--cream-border);
  border-radius: var(--r-sm); font-size: .8rem;
  cursor: pointer; user-select: none;
  transition: border-color .18s, background .18s;
  color: var(--ink-soft); background: var(--cream-card);
}
.skill-item input { display: none; }
.skill-item:hover { border-color: var(--green-line); color: var(--green); }
.skill-item.checked { border-color: var(--green); background: var(--green-subtle); color: var(--green); font-weight: 600; }

/* ── Languages ──────────────────────────────────────── */
.lang-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .72rem 1rem; border: 1.5px solid var(--cream-border);
  border-radius: var(--r-md); margin-bottom: .52rem; transition: border-color .2s;
}
.lang-row.active { border-color: var(--green-line); }
.lang-name { flex: 1; font-size: .88rem; }
.lang-native-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  background: var(--green-subtle); color: var(--green);
  border: 1px solid var(--green-line); padding: .17rem .62rem; border-radius: 50px;
}
.lang-level-select {
  font-family: var(--font-body); font-size: .8rem;
  padding: .3rem .62rem; border: 1.5px solid var(--cream-border);
  border-radius: var(--r-sm); background: var(--cream); color: var(--ink-mid);
  outline: none; cursor: pointer;
}

/* ── Tip box ────────────────────────────────────────── */
.tip-box {
  display: flex; gap: .62rem; align-items: flex-start;
  padding: .9rem 1.1rem; background: var(--green-subtle);
  border: 1px solid var(--green-line); border-radius: var(--r-md);
  margin-bottom: 1.3rem; font-size: .82rem; color: var(--green); line-height: 1.7;
}

/* ── Experience entry ───────────────────────────────── */
.exp-entry { background: var(--cream); border: 1.5px solid var(--cream-border); border-radius: var(--r-lg); padding: 1.4rem; margin-bottom: .9rem; }
.exp-entry-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; }
.exp-entry-label { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.btn-remove { font-size: .74rem; color: #c0392b; background: none; border: none; cursor: pointer; font-family: var(--font-body); }
.tasks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .38rem; margin-top: .5rem; }
.task-item {
  display: flex; align-items: flex-start; gap: .42rem;
  padding: .46rem .62rem; border: 1.5px solid var(--cream-border);
  border-radius: var(--r-sm); font-size: .77rem; line-height: 1.5;
  cursor: pointer; user-select: none; transition: all .18s; color: var(--ink-soft);
}
.task-item input { display: none; }
.task-item:hover { border-color: var(--green-line); }
.task-item.checked { border-color: var(--green); background: var(--green-subtle); color: var(--green); }

/* ── Legal tabs ─────────────────────────────────────── */
.lang-tabs { display: flex; border: 1.5px solid var(--cream-border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 2.5rem; width: fit-content; }
.lang-tab { padding: .55rem 1.4rem; font-size: .82rem; font-weight: 600; cursor: pointer; background: var(--cream-card); color: var(--ink-ghost); border: none; font-family: var(--font-body); transition: all .2s; }
.lang-tab.active { background: var(--green); color: white; }
.lang-content { display: none; }
.lang-content.active { display: block; }

/* Legal styles */
.legal-body { max-width: 740px; margin: 0 auto; padding: 3.5rem 2rem 5rem; }
.legal-body h2 { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin: 2rem 0 .6rem; padding-top: 1.2rem; border-top: 1px solid var(--cream-border); }
.legal-body h2:first-of-type { border-top: none; padding-top: 0; }
.legal-body p, .legal-body li { color: var(--ink-soft); line-height: 1.9; font-size: .91rem; margin-bottom: .75rem; }
.legal-body ul { padding-right: 1.4rem; margin-bottom: 1rem; }
.legal-body ul li { list-style: disc; }
.legal-body a { color: var(--green); }
.legal-en { direction: ltr; text-align: left; }
.legal-en h2 { font-family: var(--font-display); }
.legal-hero { background: var(--green); padding: 4rem 2rem; text-align: center; }
.legal-hero h1 { color: white; font-size: clamp(1.7rem,3vw,2.4rem); }
.legal-hero p { color: rgba(255,255,255,.42); margin-top: .5rem; font-size: .82rem; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 960px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .grid-2 { grid-template-columns: 1fr; }
  .tasks-grid { grid-template-columns: 1fr; }
  .site-header nav { display: none; }
  .container, .container-sm { padding: 0 1.2rem; }
}