/* ---------- Global Variables ---------- */
/* Define color palette, border radius, font family, and base line height here */
/* Adjust these to change overall theme colors, font style, and spacing */
:root {
  --bg: #263a5a;                  /* Main dark background color */
  --bg-light: #f9fafb;            /* Light background (used for contrast) */
  --card: #0b1220;                /* Card background color */
  --muted: #9aa4b2;               /* Muted text color for less emphasis */
  --accent: #64b5f6;              /* Primary accent color */
  --accent2: #42a5f5;             /* Secondary accent color (hover, gradients) */
  --glass: rgba(255, 255, 255, 0.05); /* Transparent overlay for "glass" effect */
  --radius: 14px;                 /* Border radius for rounded corners */
  
  /* Base font family and line height for the entire document */
  font-family: 'Inter', sans-serif;
  line-height: 1.6;               /* Controls spacing between lines */
}

/* ---------- Base Layout ---------- */
/* Set default page margins, background gradient and text color */
html, body {
  margin: 0;
  background: linear-gradient(160deg, var(--bg), #071024); /* Dark blue gradient background */
  color: #e6eef8;               /* Light text color for contrast */
}

/* Container wrapper for content; max width controls line length */
.wrap {
  max-width: 980px;
  margin: 36px auto;            /* Center horizontally with vertical margin */
  padding: 22px;                /* Inner padding around content */
}

/* ---------- Card Container ---------- */
/* Card styling with background gradient, rounded corners, blur effect */
.card {
  background: linear-gradient(180deg, var(--card), rgba(11, 18, 32, 0.85));
  backdrop-filter: blur(8px);  /* Creates frosted glass effect */
  border-radius: var(--radius);
  padding: 40px;               /* Internal spacing */
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6); /* Soft shadow for depth */
  opacity: 0;                  /* Start invisible for fade-in animation */
  animation: fadeIn 1.2s forwards;
}

/* ---------- Fade In Animation ---------- */
/* Simple fade in animation for cards */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* ---------- Header & Avatar ---------- */
/* Flex container for header content: avatar and title/info */
header {
  display: flex;
  gap: 20px;                  /* Space between avatar and text */
  align-items: center;
  border-bottom: 1px solid var(--glass); /* Thin glass-effect divider */
  padding-bottom: 16px;
  margin-bottom: 20px;
}

/* Avatar circle with gradient background and centered content */
.avatar {
  width: 110px;               /* Avatar size */
  height: 110px;
  border-radius: 50%;         /* Circle shape */
  overflow: hidden;           /* Clip overflow (for images) */
  background: linear-gradient(135deg, var(--accent), var(--accent2)); /* Gradient */
  display: grid;
  place-items: center;        /* Center initials or image */
  font-weight: 700;           /* Bold font for initials */
  font-size: 32px;            /* Large font for initials */
  color: #0f1724;             /* Dark text color for contrast */
}

.avatar img {
  border-radius: 50%;         /* Make images round */
  width: 100%;                /* Full container width */
  height: 100%;               /* Full container height */
  object-fit: cover;          /* Crop image nicely */
}

/* ---------- Typography ---------- */
/* Main title style */
h1 {
  margin: 0;
  font-size: 32px;             /* Large font size for main headings */
  font-family: 'Merriweather', serif; /* Serif font for elegance */
  font-weight: 700;
}

/* Section subtitles */
.section h3 {
  margin: 0 0 12px 0;
  color: var(--accent);        /* Accent color for headings */
  font-size: 20px;             /* Medium-large font size */
  font-family: 'Merriweather', serif;
  letter-spacing: 0.5px;       /* Slight spacing between letters */
}

/* Paragraphs default margin reset */
p {
  margin: 0;
}

/* ---------- Contact Info ---------- */
/* Vertical stack of contact details */
.contact-info {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;             /* Smaller font for secondary info */
}

/* Links styled with accent color */
.contact-info a {
  color: var(--accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Underline links on hover */
.contact-info a:hover {
  text-decoration: underline;
}

/* ---------- Meta (Job title / Location) ---------- */
.meta {
  margin-top: 8px;
  color: var(--muted);          /* Muted color for less emphasis */
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta > div {
  margin: 2px 0;
}

/* ---------- Sections ---------- */
/* Section containers with bottom border for separation */
.section {
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--glass);
}

/* ---------- Badges ---------- */
/* Small pill-shaped badges with background glass effect */
.badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;         /* Fully rounded */
  background: var(--glass);
  color: var(--muted);
  font-size: 13px;              /* Small font size */
  margin: 3px 3px 0 0;
}

/* ---------- Buttons ---------- */
/* Print button styling */
button#print-btn {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #0f1724;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 18px;
  margin-bottom: 20px;
  transition: background 0.3s ease; /* Smooth hover transition */
}

/* Hover color change on button */
button#print-btn:hover {
  background: var(--accent2);
}

/* ---------- Entry Blocks (Experience / Education / Languages / Interests) ---------- */
/* Background and padding for grouped content blocks */
.entry-block {
  background: var(--glass);
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 8px;
  color: var(--bg-light);
  font-weight: 500;
}

/* Space between direct children in entry blocks */
.entry-block > div {
  margin-bottom: 6px;
}

/* Experience entry specifics */
.experience-entry .exp-title {
  font-weight: 700;
  font-size: 16px;          /* Slightly bigger font for job title */
  margin-bottom: 2px;
}

.experience-entry .exp-company {
  color: var(--muted);
  margin-bottom: 4px;
}

.experience-entry .exp-dates {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.experience-entry .exp-description {
  font-weight: 700;
  font-size: 12px;          /* Smaller for job description */
  margin-bottom: 2px;
}

/* Education entry specifics */
.education-entry .edu-degree {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
}

.education-entry .edu-school {
  font-style: italic;
  color: var(--muted);
  margin-bottom: 4px;
}

.education-entry .edu-dates {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

/* ---------- Responsive ---------- */
/* Adjust layout for small screens (mobile) */
@media (max-width: 480px) {
  header {
    flex-direction: column;    /* Stack header items vertically */
    align-items: center;
    text-align: center;
  }
  .avatar {
    width: 90px;               /* Smaller avatar on mobile */
    height: 90px;
  }
  .contact-info {
    flex-direction: row;       /* Horizontal contact info */
    gap: 12px;
    justify-content: center;
  }
}

/* ---------- Print Styles ---------- */
/* Simplify styles for printing: white background, black text */
@media print {
  body {
    background: white !important;
    color: black !important;
    font-family: 'Merriweather', serif;
  }

  #print-btn {
    display: none !important; /* Hide print button */
  }

  .card {
    background: white !important;
    box-shadow: none !important;
    padding: 0 !important;
    opacity: 1 !important;
    animation: none !important;
  }

  a {
    color: black !important;
    text-decoration: none !important;
  }

  .badge {
    background: #eee !important;
    color: black !important;
    border: 1px solid #ccc;
  }

  .section {
    border-bottom: 1px solid #ccc !important;
  }

  header {
    border-bottom: 2px solid black !important;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }

  .avatar img {
    max-width: 100px;
    height: auto;
  }
}