/* css styles */

/* --- Full white background for the website --- */
body, .page, .content, .main-container, .wrapper, .sidebar, footer {
    background-color: #ffffff !important;  /* force white */
}

/* --- Dark text for readability --- */
body, .content, .sidebar, footer {
    color: #222222 !important;
}

/* Optional: remove subtle shadows that may appear gray */
.navbar, .sidebar, .footer {
    box-shadow: none !important;
}

a {
  text-decoration: none;       /* remove underline */
  color: #007acc;              /* modern blue accent for links */
  transition: color 0.3s ease; /* smooth hover transition */
}

/* Optional: subtle hover effect */
a:hover {
  color: #005f99;              /* slightly darker on hover */
  text-decoration: none;       /* still no underline */
}

/* University name */
.university-name {
  font-size: 1.5rem;       /* moderately large */
  font-weight: bold;        /* bold text */
  color: #000000;           /* black color */
  margin-bottom: 0;         /* no extra space below */
  line-height: 0.1;         /* reduces vertical space */
  text-align: left;         /* align left */
}

/* Instructor/TA line styling */
.instructor-line {
  font-weight: bold;
  color: #000000;           /* black color to match university */
  margin-top: 0.0em;        /* small gap from university */
  margin-bottom: 0.0em;     /* spacing between multiple instructor lines */
  line-height: 0.1;         /* tighter spacing for compact look */
}

/* Teaching list */
.teaching-list {
  list-style: none;          /* remove bullets */
  margin-left: 0;            /* remove default indent */
  padding-left: 0;
}

.teaching-list li {
  display: flex;
  justify-content: space-between;   /* course left, dates right */
  padding: 0.3em 0;                 /* vertical spacing inside each line */
  border-bottom: 1px solid #ccc;    /* line after each course */
}

.teaching-list .course-name {
  font-weight: normal;       /* course text normal */
}

.teaching-list .course-dates {
  color: #003366;            /* deep blue for dates */
  text-align: right;
  min-width: 6em;            /* keep dates aligned */
}

/* Navbar background and text */
.navbar {
  background-color: #0A2540;  /* deep navy/blue */
  color: #ffffff;             /* white text */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* subtle shadow for elegance */
}

/* Navbar links */
.navbar a {
  color: #ffffff;             /* white links */
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* Hover effect for links */
.navbar a:hover {
  color: #4da6ff;             /* lighter blue on hover */
}

/* Active/current page link */
.navbar .active {
  border-bottom: 2px solid #4da6ff; /* subtle underline for active page */
}

/* Optional: adjust padding */
.navbar .nav-item {
  padding: 0.6em 1em;
}

/* H2 section headings */
h2 {
  color: #0A2540;         /* deep elegant navy */
  font-weight: bold;       /* make them stand out */
  border-bottom: 2px solid #0A2540; /* optional underline for emphasis */
  padding-bottom: 0.3em;  /* space below text for underline */
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/* Optional: H3 and H4 subheadings */
h3, h4 {
  color: #0A2540;         /* match main section color */
  font-weight: 600;
}

/* Page title (H1) */
h1 {
  color: #0A2540;                 /* same deep elegant navy as h2 */
  font-weight: 700;               /* slightly heavier than h2 */
  font-size: 2.2rem;              /* larger than h2 for hierarchy */
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  line-height: 1.2;
  text-align: left;               /* align with content */
  position: relative;
}

/* Modern underline for H1 */
h1::after {
  content: "";
  display: block;
  width: 80px;                    /* longer than h2 underline for hierarchy */
  height: 3px;                     /* slightly thicker line */
  background-color: #0A2540;       /* match H1/H2 color */
  opacity: 0.8;
  margin-top: 6px;                 /* space below the title text */
  border-radius: 3px;              /* rounded ends for elegance */
}

/* Make columns stack on small screens */
@media (max-width: 700px) {
  .columns > .column {
    width: 100% !important;   /* each column takes full width */
    margin-bottom: 1em;       /* add some space between stacked columns */
  }
}