.year-nav {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
  gap: 6px; /* matches wide spacing */
  background-color: #f8f6f4; /* off-white background */
  padding: 8px;
  border-radius: 50px;
  max-width: fit-content;
  margin: 0 auto;
}
.year-btn {
  border: none;
  background: transparent;
  padding: 4px 20px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 22px;
  color: #003366;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1.375rem;
}
.year-btn.active {
  background-color: #003d63; /* dark blue */
  color: white;
}
.year-btn:hover {
  color: #02355a;
    background-color: #71a8e3;
}


.year-nav::after {
  content: "";
  position: absolute;
  bottom: 4px;
  height: 3px;
  background-color: #003d63;
  border-radius: 3px;
  width: var(--underline-width, 0px);
  transform: translateX(var(--underline-offset, 0px));
  transition: transform 0.3s ease, width 0.3s ease;
}


  .year-heading {
  text-align: left;
  max-width: 672px; /* keeps it aligned in both views */
  margin: 50px auto 0px auto;
  font-weight: bold;
  font-size: 40px;
}

.accordion-button {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding-left: 0; /* optional: align with year heading */
}

.accordion-button:not(.collapsed) {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Remove accordion item borders except top */
.accordion-item {
  border: none !important;
  border-top: 1px solid #ddd !important;
  border-radius: 0 !important;
}
.year-section {
  padding: 0.25rem 0; /* more top padding prevents overlap */
  scroll-margin-top: 160px; /* ensures clicking year scrolls section below sticky nav */
  z-index: 0;
  position: relative;
}

.year-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.quarter {
  margin-left: 10px;
}

@media (max-width: 576px) {
  .year-btn {
    padding: 6px 12px;
    font-size: 18px;
  }
}