/* header-style.css */
/* loading state */
html.header-loading .site-header {
  visibility: hidden;
}

/* Keep hash targets visible below the fixed header */
html {
  scroll-padding-top: 76px;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


header.site-header {
  background-color: rgba(17, 17, 17, 0); /* transparent black */
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  box-sizing: border-box; /*adding padding-right: 3rem inside a width: 100% block, padding gets added outside the 100% */
  padding: 1rem 1rem;
  padding-bottom: 0.2rem;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 1000;
  font-family: "Nunito", sans-serif !important;
  font-size: 1em;
      padding-bottom: 1rem;

}
header.site-header.scrolled {
  background-color: rgba(17, 17, 17, 0.8); /* 80% opacity */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto; /* centers container */
  box-sizing: border-box;
}

.header-logo img {
  padding-left: 8px;
  padding-bottom: 4px;
  height: 40px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 4px;
}

.nav-toggle span {
  height: 3px;
  width: 25px;
  background-color: white;
  display: block;
}

.nav {
  list-style: none;
  /* padding: 0 3rem;  provides gutters at any breakpoint */
  margin: 0;
  display: flex;
  gap: 2px;
  /* gap: 0.5rem; */

}

.nav li {
  box-sizing: border-box; /* ← ensure consistent sizing */
}

.nav-link {
    display: inline-block; /* ← give links block-like spacing */
  padding: 0.5rem 0.75rem; /* ← add explicit padding */
  text-decoration: none;
  color: white;
  /*font-weight: bold;*/
  letter-spacing: 0.2pt;
  transition: color 0.3s;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: rgba(17, 17, 17, 0.8); /* 80% opacity */
  padding: 0.5rem 0;
  display: none;
  flex-direction: column;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  min-width: max-content;
  list-style: none;
  margin: 0;
  font-size: 1em;
}

.dropdown-menu .nav-link {
  display: block;
  padding: 0.75rem 1rem; /* more vertical and horizontal space */
  color: #ccc;
  background-color: transparent;
  transition: background-color 0.3s, color 0.3s;
}

/* Dropdown arrow */
.dropdown > .nav-link::after {
  content: " ▾"; /* Arrow symbol */
  font-size: 1em;
  margin-left: 0.2em;
  border: 0; /* override bootstrap dropdown caret */
  /*         float: right;         /* Align to the right 
        font-size: 1em;       /* Optional sizing 
        line-height: 1;       /* Prevent extra vertical space 
        margin-left: 0.5em;   /* Space between text and arrow */
}

.nav-link.active {
  color: #00bfff;
  font-weight: bold;
}

/* Pressed/focus states */
.nav-link:active,
.nav-link:focus {
  color: #00e5ff;          /* or white */
  background-color: transparent;
  outline: none;
  box-shadow: none;
}

/* Optional: remove mobile tap flash */
.nav-link {
  -webkit-tap-highlight-color: transparent;
}

/* override bootstrap - hide border caret, keep text arrow */
.dropdown-toggle::after {
  border: 0 !important;
  width: auto;
  height: auto;
  margin-left: 0;
  vertical-align: 0;
}

/* Hover on large displays*/
@media (min-width: 768px) and (hover: hover) {
  .nav-link:hover {
    color: #00bfff;
  }
  .dropdown:hover .dropdown-menu {
    display: flex;
  }
  .dropdown-menu li:hover {
    background-color: rgba(17, 17, 17, 0.8); /* 80% opacity */
  }

  .dropdown-menu li:hover .nav-link {
    padding: 0.75rem 1rem;
    color: #00bfff;
    /*color: white;*/
  }
}
/* Adjust header/nav padding for medium screens (~900px) */
@media (max-width: 924px) {
  .nav {
    padding: 0; /* remove extra horizontal padding */
    gap:0; /* reduce gap between items */
  }

  .nav-link {
    padding:0 0.5rem; /* narrower links */
    /* letter-spacing: 0; */
  }
}

/* Mobile Styles */
@media (max-width: 806px) { /*792*/
    body {
    overflow-x: hidden;
  }
  
  .site-header {
    overflow-x: hidden;
  }

  /* Show hamburger at the far right */
  .nav-toggle {
    display: flex;
    margin-left: auto; /* Push it to the right */
    background: transparent;
    padding-right: 1rem;
    z-index: 1001;
  }

  /* Stack menu items, full width, no extra gutter */
  .nav {
    flex-direction: column;
    width: 100%;
    max-height: 0; /* start fully collapsed */
    overflow-y: hidden; /* hide when closed */
    transition: max-height 0.3s ease;
    background-color: rgba(17, 17, 17, 0.8);
    /*padding-right: 1rem;*/
    /*margin-top: 0.5rem;*/
    flex-wrap: nowrap; /* ← prevent wrapping on mobile */
    padding:0 10px; /* add horizontal padding for mobile menu */
  }
  /* When open, clip to viewport and allow scroll */
  .nav.active {
    max-height: 90vh; /* allow up to 90% of screen height */
    overflow-y: auto; /* scroll if content overflows */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
    border-top: 1px solid #002e33;
    /* padding-top: 2rem;
    padding-bottom: 1rem; */
    /*gap: 1rem;*/
  }

  /* to clip closed */
  .nav:not(.active) {
    max-height: 0;
    overflow: hidden;
  }

  /* N A V   L I N K S */

  /* Each <li> is full-width */
  .nav li {
    width: 100%;
    /*padding-left: 3rem;*/
  }

  /* Big tappable area + separator */
  .nav-link {
    display: block;
    border-bottom: 1px solid #727272;
    padding: 1rem 0.5rem;
    color: white;
  }

  .nav-link:hover {
    background-color: rgba(17, 17, 17, 0.8); /* 80% opacity */
    color: #00bfff;
  }

  /* Dropdowns */
  .dropdown-menu {
    position: static;
    max-height: none;
    overflow: visible;
    transition: max-height 0.3s ease;
    background-color: transparent; /*rgba(17, 17, 17, 0.8);*/
    box-shadow: none;
    display: none; /* hidden by default */
    flex-direction: column;
    min-width: 100%; /* ← override max-content */
    white-space: normal; /* ← override nowrap */
  }

  /* When open (initial or clicked) */
  .dropdown.open .dropdown-menu {
    display: flex;
  }

  /* Indent submenu links */
  .dropdown-menu .nav-link {
    padding-left: 2.5rem;
  }

  /* Dropdown link appearance */
  .dropdown > .nav-link {
    cursor: pointer;
    border-bottom: 1px solid #727272;
  }

  /* Dropdown arrow */
  .dropdown > .nav-link::after {
    content: "▾"; /* Arrow symbol */
    float: right; /* Align to the right */
    font-size: 1em; /* Optional sizing */
    line-height: 1; /* Prevent extra vertical space */
    margin-left: 0.5em; /* Space between text and arrow */
    border: 0; /* override bootstrap dropdown caret */
  }
}