/* =========================================================
 * components.css — shared styles for navbar (sticky + mobile)
 * Used by all pages via <link rel="stylesheet">. Edit here to
 * update header/footer styling across the whole site.
 * ========================================================= */

/* Sticky header wrapper (white background, soft shadow) */
#site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000;
  min-height: 88px;
  display: block;
  background-color: #fff !important;
  box-shadow: 0 1px 8px rgba(1,5,45,0.05);
}

#site-header .navbar {
  position: relative !important;
  top: auto !important;
  z-index: 1000;
  background-color: #fff !important;
  box-shadow: none;
}

#site-footer { display: block; }

/* Hamburger toggle button (hidden on desktop) */
.navbar-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: #01052d;
  background: transparent !important;
  border: none;
}
.navbar-menu-button:hover,
.navbar-menu-button:focus,
.navbar-menu-button:active { background: transparent !important; outline: none; }
.navbar-menu-button svg { width: 26px; height: 26px; display: block; }

/* Mobile-collapse breakpoint */
@media (max-width: 1120px) {
  .navbar-menu-button { display: flex; }
  #site-header .navbar { position: relative !important; }
  .navbar-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 80px) !important;
    margin: 0 !important;
    padding: 1rem 5% 1.5rem !important;
    background: #fff !important;
    border-top: 1px solid #eff0f6 !important;
    box-shadow: 0 8px 24px rgba(1,5,45,.08) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
  }
  .navbar.is-open .navbar-menu { display: flex !important; }
  .navbar-menu-left,
  .navbar-menu-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .navbar-menu-right {
    margin-top: 0.5rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #eff0f6 !important;
    gap: 0.75rem !important;
  }
  .navbar-link {
    width: 100% !important;
    padding: 0.85rem 0 !important;
    font-size: 1rem !important;
    color: #01052d !important;
  }
  .navbar-link.w--current { color: #8992fa !important; font-weight: 600 !important; }
  .navbar-menu-right .button { width: 100% !important; text-align: center !important; }
}