/* ── Theme ── */
:root {
  --color-primary: #BD5D38;
  --color-primary-dark: #824027;
  --color-text: #868e96;
  --color-heading: #343a40;
  --color-icon-bg: #495057;
  --sidebar-width: 17rem;
  --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  padding-top: 54px;
  line-height: 1.6;
}

@media (min-width: 992px) {
  body { padding-top: 0; padding-left: var(--sidebar-width); }
}

a { color: var(--color-primary); text-decoration: none; }
a:hover, a:focus { color: var(--color-primary-dark); }
ul { list-style: disc; padding-left: 1.5rem; }

/* ── Typography ── */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
}

h1 { font-size: 4rem; line-height: 1.1; margin-bottom: 1rem; }
h2 { font-size: 2.5rem; margin-bottom: 2rem; }
h3 { font-size: 1.5rem; }

@media (max-width: 576px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
}

p.lead { font-size: 1.15rem; font-weight: 400; }

.subheading {
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.03rem;
  color: var(--color-heading);
}

.text-primary { color: var(--color-primary); }

/* ── Sidebar / Nav ── */
#sideNav {
  background-color: var(--color-primary);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

#sideNav .brand {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

#sideNav .brand img {
  display: none;
}

.menu-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

.menu-toggle:focus { outline-color: #d48a6e; }

.nav-links {
  display: none;
  width: 100%;
  flex-direction: column;
  padding: 0.5rem 0;
  list-style: none;
}

.nav-links.open { display: flex; }

.nav-links a {
  color: rgba(255,255,255,0.75);
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  padding: 0.5rem 0;
  text-decoration: none;
  font-size: 1.2rem;
}

.nav-links a:hover,
.nav-links a.active { color: #fff; }

@media (min-width: 992px) {
  #sideNav {
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    padding: 0;
    justify-content: flex-start;
    text-align: center;
  }

  #sideNav .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0.5rem;
    margin: 0;
    font-size: 0;
  }

  #sideNav .brand img {
    display: block;
    max-width: 10rem;
    max-height: 10rem;
    border-radius: 50%;
    border: 0.5rem solid rgba(255,255,255,0.2);
  }

  .menu-toggle { display: none; }

  .nav-links {
    display: flex;
    width: 100%;
    padding: 0;
  }

  .nav-links a {
    display: block;
    padding: 0.75rem 1rem;
  }
}

/* ── Sections ── */
section {
  padding: 3rem 1.5rem;
  max-width: 75rem;
}

@media (min-width: 768px) {
  section { padding: 5rem 3rem; }
}

@media (min-width: 992px) {
  section { padding: 3rem 3rem; }
}

section + section { border-top: 1px solid #dee2e6; }

/* ── About ── */
.about-section h1 span { color: var(--color-primary); }

/* ── Social Icons ── */
.social-icons { display: flex; gap: 1rem; margin-top: 1.5rem; }

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--color-icon-bg);
  color: #fff;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.social-icons a:hover { background-color: var(--color-primary); }
.social-icons a svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

/* ── Resume Items (Experience / Education) ── */
.resume-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;
}

.resume-item .resume-date {
  color: var(--color-primary);
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .resume-item {
    flex-direction: row;
    justify-content: space-between;
  }

  .resume-item .resume-date {
    min-width: 18rem;
    text-align: right;
    margin-bottom: 0;
  }
}

.resume-item h3 { margin-bottom: 0.25rem; }
.resume-item .subheading { margin-bottom: 0.75rem; }
.resume-item .company-desc { color: #b0a090; font-style: italic; font-size: 0.92rem; margin-bottom: 0.5rem; }
.resume-item .desc { margin-bottom: 0.5rem; }

/* ── Skills ── */
.skills-category { margin-bottom: 2rem; }
.skills-category ul { margin-top: 0.5rem; line-height: 1.4; }
.skills-category li { margin-bottom: 0.1rem; }