/* Header with background image */
header.has-background-image {
  background-image: url('/public/images/top-image.jpg');
  background-size: cover;
  background-position: bottom center;
  background-attachment: scroll;
  position: relative;
}

header.has-background-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 0;
}

header.has-background-image .container { position: relative; z-index: 1; }

/* Logo text contrast */
header.has-background-image h1,
header.has-background-image h2 {
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Small-screen header layout (<=600px) */
@media screen and (max-width: 600px) {
  header.has-background-image { padding: 1.5rem 0 !important; }
  header.has-background-image h1 { font-size: 1.75rem !important; margin-bottom: 0.25rem !important; }
  header.has-background-image h2 { margin-bottom: 2rem !important; margin-top: 0.5rem !important; }
  header.has-background-image .navbar { justify-content: center !important; gap: 1rem !important; font-size: 0.9rem; padding: 0.75rem !important; width: 100%; max-width: 100%; }
  header.has-background-image .navbar-item { padding: 0.5rem 0.5rem !important; }
  header.has-background-image .title img { height: 1.3em !important; }
}

/* Mobile hamburger menu */
.mobile-menu-button {
  display: none;
  color: white;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0; right: 0; width: 100%;
  background-color: rgba(0, 0, 0, 0.92);
  padding: 1rem 1.25rem;
  border-radius: 0 0 0.75rem 0.75rem;
  z-index: 2;
}

#mobile-menu-toggle:checked + .mobile-menu { display: flex; }

@media screen and (max-width: 600px) {
  .desktop-menu { display: none !important; }
  .mobile-menu-button { display: inline-flex; align-items: center; justify-content: center; }
  .header-top { flex-wrap: wrap; gap: 1rem; }
  .header-top > div { min-width: 0; }
}

.mobile-menu a { color: white; text-decoration: none; padding: 0.5rem 0; }

#mobile-menu-toggle:checked + .mobile-menu { display: flex; }