/* ============================================================
  InVaal [016] — Mobile Navigation
  File: css/mobile_nav.css

  Designed to work with components/header.html:
  - button.mobile-menu-toggle
  - div#primary-menu.nav-links > ul > li > a

  JS behavior (navigation.js):
  - toggles .is-open on #primary-menu
  - updates aria-expanded on .mobile-menu-toggle
============================================================ */

/* =========================
  Hamburger Button (Mobile)
========================= */
.mobile-menu-toggle {
  /* Reset button styles */
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;

  /* Layout */
  width: 44px;
  height: 44px;
  border-radius: 12px;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;
  box-shadow: var(--shadow-sm);

  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.mobile-menu-toggle:hover {
  transform: translateY(-1px);
  background: var(--surface-2);
}

/* The 3 lines */
.mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--brand-700);
  border-radius: 2px;

  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}

/* Transform hamburger -> X when aria-expanded is true */
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* =========================
  Menu Container
========================= */

/* Desktop default is visible via root.css (.nav-links ul { display:flex; ... })
   On mobile, we hide it until .is-open is added. */
@media (max-width: 768px) {
  /* Make header wrap so menu can appear below */
  .main-navigation {
    flex-wrap: wrap;
  }

  /* Hide menu by default */
  .nav-links {
    display: none;
    width: 100%;
    margin-top: 10px;
  }

  /* Show menu when open */
  .nav-links.is-open {
    display: block;
  }

  /* Menu panel look */
  .nav-links ul {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 12px;
    border-radius: 14px;

    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }

  /* Bigger tap targets for mobile */
  .nav-links a {
    display: block;
    width: 100%;
    text-align: center;

    padding: 12px 14px;
    border-radius: 12px;

    background: rgba(4, 174, 217, 0.08);
    border: 1px solid rgba(4, 174, 217, 0.16);

    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }

  .nav-links a:hover {
    background: rgba(4, 174, 217, 0.14);
    border-color: rgba(4, 174, 217, 0.25);
  }
}

/* =========================
  Desktop Rules
========================= */
@media (min-width: 769px) {
  /* Hamburger hidden on desktop */
  .mobile-menu-toggle {
    display: none;
  }

  /* Ensure menu is visible */
  .nav-links {
    display: block;
  }
}