/**
 * Mobile Navigation with Container Queries
 *
 * Task: 18.2
 *
 * When navigation items overflow in a narrow container,
 * the nav collapses to a "Navigation" bar that expands
 * to a full-screen overlay when tapped.
 *
 * Uses CSS container queries for responsive behavior
 * (not viewport-based media queries).
 */

/* ============================================
   Container Query Setup
   ============================================ */

.masthead .wrapper_header {
  container-type: inline-size;
  container-name: header-container;
}

/* ============================================
   Toggle Button (hidden by default)
   ============================================ */

.nav-toggle {
  display: none;
  background: #fa00bf;
  border: none;
  color: #fff;
  font-family: 'ChunkFiveRegular', serif;
  font-size: 18px;
  padding: 0 20px;
  cursor: pointer;
  line-height: 51px;
  align-items: center;
}

.nav-toggle:hover,
.nav-toggle:focus {
  background: #deff0b;
  color: #0f000c;
}

/* Toggle text states */
.nav-toggle-close {
  display: none;
}

/* When expanded, swap text visibility */
.nav-expanded .nav-toggle-open {
  display: none;
}

.nav-expanded .nav-toggle-close {
  display: inline;
}

/* ============================================
   Overlay (hidden by default)
   ============================================ */

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #5a4666;
  z-index: 1000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nav-overlay nav {
  float: none;
}

.nav-overlay ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}

.nav-overlay li {
  float: none;
  margin: 0;
}

.nav-overlay a {
  display: block;
  font-family: 'ChunkFiveRegular', serif;
  font-size: 24px;
  color: #fff;
  padding: 15px 30px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.nav-overlay a:hover,
.nav-overlay a:focus {
  background: #fa00bf;
  color: #fff;
}

/* ============================================
   Container Query: Collapse nav on narrow containers
   ============================================ */

@container header-container (max-width: 600px) {
  /* Hide normal nav items */
  .masthead .wrapper_header > nav {
    display: none;
  }

  /* Show toggle button */
  .nav-toggle {
    display: flex;
  }
}

/* ============================================
   Media Query Fallback: Ensure toggle shows on narrow viewports
   This catches cases where container queries don't trigger correctly
   ============================================ */

@media screen and (max-width: 850px) {
  /* Hide normal nav items */
  .masthead .wrapper_header > nav {
    display: none;
  }

  /* Show toggle button */
  .nav-toggle {
    display: flex;
  }

  /* Masthead mobile layout: logo left, toggle right, no top padding */
  .masthead {
    height: auto;
    min-height: 71px;
    padding: 0;
  }

  .masthead .wrapper_header {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    padding: 0;
  }

  /* Logo stays left */
  .masthead .logo {
    float: none;
    margin: 0;
    flex-shrink: 0;
  }

  /* Toggle button fixed at top-right (same spot as when expanded) */
  .nav-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1001;
    margin: 0;
    float: none;
  }
}

/* ============================================
   Expanded State (controlled by JS)
   ============================================ */

.nav-expanded .nav-overlay {
  display: flex;
}

/* Keep toggle visible and styled when expanded */
.nav-expanded .nav-toggle {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1001;
  float: none;
  margin: 0;
}

/* ============================================
   Transitions
   ============================================ */

.nav-overlay {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.nav-expanded .nav-overlay {
  opacity: 1;
}