/* ───────── GLOBAL BASE ───────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 40px;
  font-family: Arial, sans-serif;
  background: #121212; /* dark base */
  color: #e0e0e0; /* light text */
  min-height: 100vh;
}

/* ───────── LAYOUT CONTAINER ──────────────── */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px;
  background: #1e1e1e; /* darker container */
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  line-height: 1.6;
  text-align: left;
}

/* ───────── NAVIGATION BAR ────────────────── */
.topnav {
  background: #003366;
  margin: -40px -40px 40px -40px;
  padding: 0;
}

/* ───────── NAV ROOT (TOP LEVEL UL) ───────── */
/* Make nav-root fill the container width */
.nav-root {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;

  /* Spread top-level items evenly across full width */
  justify-content: space-between;
}

/* Position for top-level list items */
.nav-root > li {
  position: relative;
  /* Make each top-level li a flex item with equal width */
  flex: 1;
  /* Prevent shrinking */
  min-width: 0;
}

/* ───────── TOP LEVEL NAV LINKS ───────────── */
/* top-level links (direct children of .nav-root) */
.nav-root > li > a,
.nav-root > li > span,
.dropbtn {
  display: block;
  color: #ffffff;
  padding: 14px 20px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;

  /* Make each top-level button fill its li width */
  width: 100%;

  text-align: center; /* centered text */
  box-sizing: border-box;
}

/* Hover effect for top-level links */
.nav-root > li > a:hover,
.nav-root > li > span:hover,
.dropbtn:hover {
  background: #002244;
}

/* ───────── SUBMENU LINKS AND TOGGLES ───────── */
/* submenu toggle buttons (level 2 dropdown triggers) */
.subbtn {
  display: block;
  color: #ffffff;
  padding: 14px 20px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;

  /* Equal width: take full width of parent ul */
  width: 100%;

  text-align: left; /* left aligned text */
  box-sizing: border-box;
}

.subbtn:hover {
  background: #002244;
}

/* primary dropdown container */
.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: #003366;
  min-width: 180px;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 999;

  /* Fix dropdown width to fit widest item in submenu */
  width: max-content;
  min-width: 180px;
}

/* submenu links inside dropdown */
.dropdown-content li a {
  padding: 10px 16px;
  white-space: nowrap;

  /* Make submenu buttons fill dropdown width */
  display: block;
  width: 100%;

  text-align: left; /* left aligned text */
  box-sizing: border-box;
}

/* Show primary dropdown on hover */
.dropdown:hover > .dropdown-content {
  display: block;
}

/* second-level dropdown (slide-out) */
.dropdown-sub {
  position: relative;
}

/* second level dropdown container */
.dropdown-content.sub {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: #003366;

  min-width: 180px;

  /* width to fit widest submenu item */
  width: max-content;
}

/* Show second-level dropdown on hover */
.dropdown-sub:hover > .dropdown-content {
  display: block;
}

/* ───────── PROFILE & HEADINGS ────────────── */
.profile-pic {
  display: block;
  margin: 0 auto 20px auto;
  width: 300px;
  max-width: 100%;
  border-radius: 50%;
}

h1.title {
  color: #66aaff;
  text-align: center;
  margin-bottom: 30px;
}

h1,
h2,
h3 {
  color: #66aaff;
  margin-bottom: 10px;
}

/* ───────── TYPOGRAPHY & LISTS ────────────── */
ul {
  padding-left: 20px;
  margin: 0 0 20px 0;
}

p,
li {
  font-size: 1.05em;
}

/* ───────── LINKS & BUTTONS ───────────────── */

/* Button-style links only if class="btn" */
a.btn {
  display: inline-block;
  color: #66aaff;
  font-weight: bold;
  text-decoration: none;
  padding: 10px 20px;
  border: 2px solid #66aaff;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

a.btn:hover {
  background: #66aaff;
  color: #1e1e1e;
}

/* Normal inline links (no button style) */
a:not(.btn) {
  color: #66aaff;
  font-weight: normal;
  text-decoration: underline;
  padding: 0;
  border: none;
  cursor: pointer;
  transition: color 0.3s;
}

a:not(.btn):hover {
  color: #aaccee;
  text-decoration: underline;
}

/* ───────── RESPONSIVE IMAGES (NON-HEADSHOT) ───────── */
.container img:not(.profile-pic) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}