/*
  Resume Page Styles (with Comments)
  Author: Cayleigh Leishman
  Purpose: Styles the resume layout, navigation, and responsive design.
*/

/* ======================================================
   Root Variables: Global color, spacing, and layout values
========================================================= */
:root {
  /* Theme Colors */
  --accent: #2e4bb8;         /* Main accent color (deep blue tone) */
  --muted: #6b7280;          /* Muted gray for secondary text */
  --bg: #f8fafc;             /* Light background color */
  --card: #e6eef8;           /* Card background (soft blue/gray) */

  /* Navigation Colors */
  --nav-bg: #fff7ec;         /* Soft cream background for nav */
  --nav-text: #3e3a5a;       /* Text color for nav links */
  --nav-hover: #b0cab1;      /* Gentle green hover color */

  /* Layout Constants */
  --maxw: 940px;             /* Maximum content width */
  --radius: 14px;            /* Rounded corners */

  /* Typography */
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #0f172a;            /* Default body text color */
}

/* ======================================================
   Top Navigation Bar
========================================================= */
/* ======================================================
   Top Navigation Bar (Updated to Match Invitation Theme)
========================================================= */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--accent); /* Using resume accent (#2e4bb8) or swap to #006EB6 for full match */
  backdrop-filter: blur(10px);
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.top-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  margin: 0;
}

.top-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.top-nav a:hover,
.top-nav a:focus {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.top-nav a.active {
  background-color: var(--card); /* Soft highlight (like silver) */
  color: var(--accent);
}


/* ======================================================
   Global Reset and Base Styles
========================================================= */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

/* ======================================================
   Resume Body Layout
   - Centers resume content
   - Adds background gradient
   - Creates spacing above and below content
========================================================= */
.resume-body {
  margin: 0;
  background: linear-gradient(180deg, #f0f7ff 0%, var(--bg) 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px; /* Top space below nav */
  padding-bottom: 40px;
}

/* ======================================================
   Resume Card Container
   - Sets width, background, and layout grid
========================================================= */
.resume {
  width: 100%;
  max-width: var(--maxw);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(2,6,23,0.08);
  padding: 30px 40px;
  display: grid;
  grid-template-columns: 1fr 310px; /* Main and sidebar */
  gap: 24px;
}

/* ======================================================
   Header Section
   - Contains avatar, name, and tagline
========================================================= */
header {
  grid-column: 1 / -1; /* Span both columns */
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Avatar styling */
.avatar {
  width: 86px;
  height: 86px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), #6ee7b7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-weight: 700;
  font-size: 28px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(37,99,235,0.14);
}

/* Name styling */
h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.3px;
}

/* Tagline under name */
.tagline {
  margin: 4px 0 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* ======================================================
   Layout Columns
========================================================= */
.main {
  padding-right: 12px;
  border-right: 1px dashed var(--card);
}

.side {
  padding-left: 12px;
}

/* ======================================================
   Section Headings and Text
========================================================= */
section {
  margin-bottom: 20px;
}

h2 {
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px 0;
}

p.lead {
  margin: 0 0 10px 0;
  line-height: 1.45;
}

/* ======================================================
   Lists and Items
========================================================= */
ul {
  margin: 0;
  padding-left: 18px;
}

li {
  margin-bottom: 7px;
  line-height: 1.35;
}

/* ======================================================
   Meta Information (contact, etc.)
========================================================= */
.meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.meta a {
  color: var(--accent);
  text-decoration: none;
}

/* ======================================================
   Skills Section
========================================================= */
.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill {
  background: var(--bg);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid rgba(37,99,235,0.08);
}

/* ======================================================
   Projects Section
========================================================= */
.project {
  background: #f8fbff;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid rgba(15,23,42,0.03);
  margin-bottom: 10px;
}

/* ======================================================
   Button Styling
========================================================= */
button {
  background: var(--accent);
  color: var(--bg);
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

/* ======================================================
   Print Styles
   - Simplifies layout and hides nav/buttons when printing
========================================================= */
@media print {
  body {
    background: var(--bg);
    margin: 0;
    padding: 0;
  }

  .resume {
    box-shadow: none;
    border-radius: 0;
    max-width: 100%;
  }

  button, .top-nav {
    display: none; /* Hide non-essential elements */
  }
}

/* ======================================================
   Responsive Layout Adjustments (mobile/tablet)
========================================================= */
@media (max-width: 880px) {
  .resume {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .main {
    border-right: none;
    padding-right: 0;
  }

  .side {
    padding-left: 0;
  }
}

/* ======================================================
   Footer
========================================================= */
footer {
  grid-column: 1 / -1;
  border-top: 1px solid var(--bg);
  padding-top: 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}