/* Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #2b2b2b;
  background: #f7f8fa;   /* main page background stays light grey */
  line-height: 1.65;
}

/* Layout */
.container { max-width: 1080px; margin: 0 auto; padding: 28px 20px 48px; }
section { margin: 44px 0; }

/* Headings */
h3 {
  margin: 0 0 18px;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f4c8a;
  padding-left: 10px;
  border-left: 4px solid #0f4c8a;
}

/* Hero */
.hero {
  text-align: center;
  background: #1c2a3a;
  color: #fff;
  padding: 40px 24px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(18, 23, 29, 0.25);
  margin-bottom: 34px;
  animation: fade-in-down .6s ease both;
}
.hero h1 { margin: 0 0 6px; font-size: 2.4rem; letter-spacing: .3px; }
.hero h2 { margin: 0 0 14px; font-weight: 500; color: #cfd8e3; }
.hero .contact-line { margin: 0 0 16px; color: #dde5ef; }
.hero a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.header-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  background: #0f62c8;
  color: #fff;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(8, 32, 80, .25);
}
.btn:hover { background: #0c56ad; transform: translateY(-1px); }
.btn.secondary { background: #3d4754; }
.btn.secondary:hover { background: #2f3742; }

/* Cards (white background + black text) */
.exp-card,
.edu-card,
.skill,
.lang-card,
.footer {
  background: #fff;
  color: #000;
  page-break-inside: avoid;  /* keep cards together in PDF */
  break-inside: avoid;
}

/* Experience */
.exp-card {
  border: 1px solid #e7ebf0;
  border-left: 5px solid #0f4c8a;
  border-radius: 12px;
  padding: 18px 18px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  margin-bottom: 16px;
  animation: fade-up .45s ease both;
}
.exp-head { margin-bottom: 8px; }
.exp-range {
  display: inline-block;
  font-size: .9rem;
  font-weight: 700;
  color: #0f4c8a;
  background: #eef4fb;
  padding: 4px 8px;
  border-radius: 6px;
}
.exp-head h4 { margin: 8px 0 4px; font-size: 1.15rem; }
.exp-company { color: #333; font-size: .95rem; }
.exp-card ul { margin: 8px 0 0 18px; color: #000; }
.exp-card li { margin: 4px 0; }

/* Education */
.edu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.edu-card {
  border: 1px solid #e7ebf0;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: .98rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .05);
  transition: transform .15s ease, border-color .15s ease;
  animation: fade-up .45s ease both;
}
.edu-card:hover { transform: translateY(-2px); border-color: #c9d7e6; }

/* Skills */
.skills { display: flex; flex-wrap: wrap; gap: 10px; }
.skill {
  border: 1px solid #dfe6ee;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .95rem;
  transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  animation: fade-in-right .4s ease both;
}
.skill:hover {
  background: #f4f8fd;
  border-color: #cfe0f3;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

/* Languages */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.lang-card {
  border: 1px solid #e7ebf0;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .05);
  transition: transform .15s ease, border-color .15s ease, background .2s ease;
  animation: fade-up .45s ease both;
}
.lang-card h5 { margin: 0; font-size: 1.05rem; color: #0f4c8a; }
.lang-card p  { margin: 6px 0 0; color: #000; }
.lang-card:hover { transform: translateY(-2px); border-color: #c9d7e6; background: #fbfdff; }

/* Footer */
.footer {
  margin-top: 40px;
  text-align: center;
  border: 1px solid #dde6f0;
  padding: 22px 16px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  animation: fade-in-up .6s ease both;
}
.footer a { color: #0f4c8a; }

/* Animations */
@keyframes fade-in-down { from {opacity:0; transform: translateY(-10px);} to {opacity:1; transform:none;} }
@keyframes fade-in-up   { from {opacity:0; transform: translateY(10px);}  to {opacity:1; transform:none;} }
@keyframes fade-up      { from {opacity:0; transform: translateY(12px);}  to {opacity:1; transform:none;} }
@keyframes fade-in-right{ from {opacity:0; transform: translateX(10px);}  to {opacity:1; transform:none;} }

/* Print/PDF tweaks */
@media print {
  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: #f7f8fa !important; /* keep grey background in PDF */
  }

  /* Make the education grid one column in PDF to prevent odd breaks */
  .edu-grid { display: block !important; }
  .edu-card { margin-bottom: 12px; }

  /* Keep cards intact */
  .exp-card, .edu-card, .lang-card, .skill {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Responsive */
@media (max-width: 720px) {
  .hero h1 { font-size: 2rem; }
  .contact-line { padding: 0 6px; }
}