/* ============================================================
   nav.css — Site header & navigation (incl. mobile hamburger)

   Loaded LAST in base.html (after page-specific CSS) so it
   takes precedence over the duplicate nav rules sprinkled
   through styles.css, stats_table.css, season_long_styles.css,
   bestball.css, about.css, results.css, points_against.css,
   and march_madness.css. Edit nav styles here.
   ============================================================ */

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  color: #fff;
  line-height: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nav-toggle:hover,
.nav-toggle:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.9);
  outline: none;
}

.nav-toggle-bars {
  display: inline-block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top: 7px; }

/* Desktop: keep the horizontal nav layout */
@media (min-width: 769px) {
  #nav {
    display: block !important;
  }
}

/* Mobile: collapse nav behind a hamburger */
@media (max-width: 768px) {
  /* Let the header grow vertically when the nav drawer is open and stop
     clipping items that would otherwise overflow horizontally. Scoped
     to mobile so the desktop 95px header (which intentionally clips the
     oversized logo asset) is left alone. */
  .site-header,
  .site-header.container {
    height: auto;
    overflow: visible;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    /* Comfortable tap target */
    min-width: 44px;
    min-height: 40px;
  }

  /* Hide list by default — opens to a full-width drawer below the header */
  #nav {
    flex-basis: 100%;
    order: 3;          /* push below logo + toggle row */
    margin: 0;
    display: none;
  }

  .site-header.container.nav-open #nav {
    display: block;
    animation: nav-slide-down 0.18s ease-out;
  }

  #nav ul {
    width: 100%;
    flex-direction: column;
    display: flex;
    margin: 0.5rem 0 0;
    padding: 0;
    background: var(--brand-dark-blue, #43658b);
    border-radius: 6px;
    overflow: hidden;
  }

  #nav ul li {
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  #nav ul li:last-child {
    border-bottom: none;
  }

  #nav ul li a {
    display: block;
    padding: 0.85rem 1rem !important;
    font-size: 0.95rem !important;
    font-weight: 600;
    color: #fff !important;
    border-radius: 0;
    text-align: left;
    white-space: normal;
  }

  #nav ul li a:hover,
  #nav ul li a:focus {
    background-color: var(--brand-accent, #e76f51);
    color: #fff !important;
  }

  #nav ul li.current a {
    background-color: rgba(231, 111, 81, 0.18);
    border-bottom: none;
    border-left: 4px solid var(--brand-accent, #e76f51);
    padding-left: calc(1rem - 4px) !important;
  }

  /* When the menu is open, rotate the bars into an X */
  .site-header.container.nav-open .nav-toggle-bars {
    background: transparent;
  }
  .site-header.container.nav-open .nav-toggle-bars::before {
    top: 0;
    transform: rotate(45deg);
  }
  .site-header.container.nav-open .nav-toggle-bars::after {
    top: 0;
    transform: rotate(-45deg);
  }
}

@keyframes nav-slide-down {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}