/* =========================================================
   Zachary Martin Portfolio - styles.css
   One external stylesheet for index, about, and contact.
   Loaded AFTER Bootstrap so these rules can override it.
   The homework page (CIS515Assignments/homework.html) also uses
   this file without Bootstrap, so the header/nav rules below are
   kept for it.
   ========================================================= */

/* ---------- Universal selector ----------
   Adds a little space below every element so content
   doesn't feel cramped. box-sizing keeps padding and
   borders inside an element's width. */
* {
  box-sizing: border-box;
  margin: 0 0 0.6rem 0;
}

/* Keep the universal spacing out of the Bootstrap navbar */
.navbar,
.navbar * {
  margin-bottom: 0;
}

/* Keep the page itself edge to edge */
html { margin: 0; }

/* ---------- Page background + site font (body) ---------- */
body {
  margin: 0;
  background-color: #E9ECF5;
  color: #2A2E45;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  /* Fades the background when the Change Background button is clicked */
  transition: background-color 0.6s ease;
  /* Keeps the footer at the bottom of the window on short pages */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Header and banner image ---------- */
header {
  background: #141A3A;
  padding: 1.25rem 1rem 0.75rem;
  text-align: center;
  margin: 0;
}

/* Image border: double gold line around the banner image */
header img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border: 6px double #F2B632;
  border-radius: 6px;
}

/* ---------- Header nav bar (homework page) ---------- */
header nav {
  background: #2C3E8F;
  display: inline-block;
  border-radius: 6px;
  padding: 0.3rem;
  margin: 0.5rem 0 0;
}

header nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* Descendant selector: spacing between list items so links are easy to click */
header nav ul li {
  margin: 0 0.3rem;
}

header nav ul li a {
  display: block;
  padding: 0.45rem 1rem;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 0.15s ease, color 0.15s ease;
}

/* Pseudo-class: links grow slightly and change color on hover */
header nav ul li a:hover {
  color: #F2B632;
  transform: scale(1.1);
}

/* Marks the page you're currently on */
header nav ul li a[aria-current="page"] {
  background: #F2B632;
  color: #141A3A;
  font-weight: bold;
}

/* On pages with a Bootstrap container, the container sets the width */
.container-md > main {
  width: auto;
  margin: 2rem 0;
}

/* The page container grows so the footer stays at the bottom */
body > .container-md {
  flex: 1 0 auto;
}

a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #F2B632;
  outline-offset: 2px;
}

/* ---------- Bootstrap navbar ---------- */
/* Navy background to match the header and footer */
.site-navbar {
  background-color: #2C3E8F;
  border-bottom: 3px solid #F2B632;
}

/* On narrow phones, let the links wrap under the name instead of
   running off the screen */
.site-navbar,
.site-navbar > .container-fluid {
  flex-wrap: wrap;
}

.site-navbar .navbar-brand {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  color: #FFFFFF;
}

/* Descendant + pseudo-class: links grow and turn gold on hover */
.site-navbar .nav-link {
  color: #FFFFFF;
  margin: 0 0.2rem;
  border-radius: 4px;
  transition: transform 0.15s ease, color 0.15s ease;
}

.site-navbar .nav-link:hover {
  color: #F2B632;
  transform: scale(1.1);
}

.site-navbar .nav-link.active {
  background: #F2B632;
  color: #141A3A;
  font-weight: bold;
}

/* ---------- Main content ---------- */
main {
  flex: 1 0 auto;
  width: min(760px, 100% - 2rem);
  margin: 2rem auto;
  padding: 2rem;
  background: #FFFFFF;
  border-radius: 8px;
}

/* ---------- Headings: standout color ---------- */
h1 {
  color: #2C3E8F;
  font-family: "Trebuchet MS", Arial, sans-serif;
  line-height: 1.2;
  font-weight: bold;   /* Bootstrap lightens headings; keep them bold */
  font-size: 2rem;
  padding-bottom: 0.3rem;
  border-bottom: 4px solid #F2B632;
  margin-bottom: 1rem;
}

h2 {
  color: #2C3E8F;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  margin-top: 2rem;
}

main a { color: #2C3E8F; }

/* ---------- Class selector: .bio paragraphs ---------- */
.bio {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #3B4060;
  margin-top: 1rem;
}

/* ---------- About page table ---------- */
table {
  width: 100%;
  border-collapse: collapse;
}

caption {
  caption-side: top;   /* Bootstrap moves captions below the table */
  font-weight: bold;
  color: #2C3E8F;
  text-align: left;
}

th, td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #C9CEE0;
  text-align: left;
  margin: 0;
}

thead th {
  background: #141A3A;
  color: #FFFFFF;
}

/* ---------- Home page: school logo, credit, button ---------- */
.school-logo {
  display: block;
  max-width: 100%;   /* shrinks on small screens */
  height: auto;
  margin-top: 1.5rem;
  border: 3px dotted #2C3E8F;
  padding: 4px;
}

.logo-credit {
  font-size: 0.8rem;
  font-style: italic;
  color: #5A5F7A;
}

/* Label under the Change Background button showing the current theme */
.color-message {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-style: italic;
  color: #5A5F7A;
}

/* Recolor Bootstrap's primary button to match the site */
.btn-primary {
  --bs-btn-bg: #2C3E8F;
  --bs-btn-border-color: #2C3E8F;
  --bs-btn-hover-bg: #141A3A;
  --bs-btn-hover-border-color: #141A3A;
  --bs-btn-active-bg: #141A3A;
  --bs-btn-active-border-color: #141A3A;
  transition: transform 0.15s ease;
}

/* Button grows slightly on hover */
.btn-primary:hover {
  transform: scale(1.05);
}

/* ---------- About page: Bootstrap table header colors ---------- */
.table thead th {
  --bs-table-bg: #141A3A;
  --bs-table-color: #FFFFFF;
}

/* ---------- ID selector: footer ----------
   Smaller, italic text in a different font so it stands apart. */
#site-footer {
  background: #141A3A;
  color: #F2B632;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
  padding: 1rem;
  margin: 0;
}

#site-footer p { margin: 0; }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  main {
    margin: 1rem auto;
    padding: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  header nav ul li a,
  .site-navbar .nav-link { transition: none; }
  header nav ul li a:hover,
  .site-navbar .nav-link:hover { transform: none; }
}