/* Shared header, navigation and footer for timeline.html and student-topics.html (index.html keeps its own copy inline). */
:root {
  --primary-color: #0066cc;
  --secondary-color: #2c4964;
  --text-color: #272829;
  --light-bg: #f8f9fa;
}

body { font-family: 'Inter', sans-serif; color: var(--text-color); line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-family: 'Raleway', sans-serif; }
html { scroll-behavior: smooth; }

#header { background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); z-index: 997; padding: 15px 0; }
#header .logo { font-size: 28px; margin: 0; line-height: 1; font-weight: 700; font-family: 'Raleway', sans-serif; }
#header .logo a { color: var(--secondary-color); text-decoration: none; }

.navbar { padding: 0; }
.navbar ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; }
.navbar li { position: relative; }
.navbar a, .navbar a:focus { display: flex; align-items: center; padding: 10px 0 10px 26px; font-size: 14px; color: var(--secondary-color); white-space: nowrap; transition: 0.3s; text-decoration: none; }
.navbar a:hover, .navbar .active, .navbar li:hover > a { color: var(--primary-color); }

.mobile-nav-toggle { color: var(--secondary-color); font-size: 28px; cursor: pointer; display: none; line-height: 0; }
.mobile-nav-toggle.bi-x { color: #fff; }
@media (max-width: 991px) {
  .mobile-nav-toggle { display: block; }
  .navbar ul { display: none; }
}
.navbar-mobile { position: fixed; overflow: hidden; inset: 0; background: rgba(0, 0, 0, 0.9); z-index: 999; }
.navbar-mobile .mobile-nav-toggle { position: absolute; top: 15px; right: 15px; }
.navbar-mobile ul { display: block; position: absolute; top: 55px; right: 15px; bottom: 15px; left: 15px; padding: 10px 0; background: #fff; overflow-y: auto; }
.navbar-mobile a, .navbar-mobile a:focus { padding: 10px 20px; font-size: 15px; color: var(--secondary-color); }

.footer { padding: 24px 0; font-size: 14px; color: #6c757d; text-align: center; }