html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
* {
  font-family: "Noto Sans JP", "Roboto", "Helvetica Neue", Arial, sans-serif;
}
.contact-text {
  color: #001f3f !important;
}
body {
  padding-top: 95px;
}
nav a {
  margin: 0 10px;
}
.year-btn {
  background:  linear-gradient(to bottom right, #0e33c1, #303552);
  color: #fff !important;
  border: none;

  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 0.375rem;
  /* Equivalent to 6px */
}
.nav-item .nav-link:hover {
  color: #faba03 !important;
}
.fa-brands:hover {
  color: #faba03 !important;
}
.nav-link:hover {
  color: #faba03 !important;
}
.navbar-brand {
  font-family: "Noto Sans JP", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
}
#nav-logo {
  font-family: "Noto Sans JP", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 19px;
}

.year-btn.active {
  background: linear-gradient(to bottom right, #faba03, #e59917f7);
  color: white !important;
}
.navbar-nav.navy {
  flex: 1; /* take up remaining space */
  display: flex;
  justify-content: center; /* keep links centered */
  flex-wrap: wrap; /* wrap links if too many */
}

.upload-btn {
  background: linear-gradient(to bottom right, #ffe7a0f7, #faba03);
  color: white !important;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  text-decoration: none;
}

.upload-btn:hover {
  filter: brightness(0.9);
  color: white !important;
}
.ginger {
  color: #031867;
}
@media (min-width: 1024px) {
  .below-navbar {
    margin-top: 90px;
    /* Adjust based on your navbar height */
  }
}

@media (max-width: 912px) {
  .below-navbar {
    margin-top: 70px;
  }
}

.year-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  padding: 1rem;
  justify-items: center;
}

.year-group figure {
  width: 100%;
  max-width: 320px;
  margin: 0;
  text-align: center;
}

.year-group img {
  width: 100%;
  height: 280px;
  /* 🔼 Increased from 220px */
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.year-group figcaption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #333;
  font-weight: 500;
}

#backToTopBtn {
  position: fixed;
  bottom: 40px;
  right: 20px;
  /* 👉 moved to right */
  z-index: 999;
  font-size: 16px;
  background-color: #031867;
  color: white;
  border: none;
  padding: 12px 25px;
  /* wider button */
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

#backToTopBtn:hover {
  opacity: 1;
}


.shadow-btn {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.shadow-effect {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#lightbox.show {
  display: flex;
}

#lightbox-img {
  max-width: 90%;
  max-height: 90%;
  z-index: 10001;
}

#trash-icon {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 10002;
  cursor: pointer;
}


/* Input focus override */
input.form-control:focus,
input.flatpickr-input:focus {
  border-color: #031867 !important;
  box-shadow: 0 0 0 0.25rem rgba(3, 24, 103, 0.4) !important;
  outline: none !important;
}

/* Input text color */
input.form-control {
  color: #031867;
}

/* Flatpickr month selector style */
.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month:hover {
  background: #c0c5db !important;
  color: white !important;
}

.flatpickr-monthSelect-month {
  border-radius: 6px;
}