/* mobile-nav.css — Shared mobile hamburger menu system.
 *
 * Works with three nav variants:
 *   - .ch-nav  (light/archive pages — oxblood accent)
 *   - .gh-nav  (glasshouse pages — dark/instrument mode)
 *   - .nav     (brew-chai pages — ultramarine accent)
 *
 * Each variant needs a .mobile-nav-toggle button in the HTML.
 * The toggle is hidden on desktop; on mobile it reveals the
 * nav links in a slide-down panel.
 *
 * Requires: mobile-nav.js for the toggle behaviour.
 * Last Updated: 2026-05-24
 */

/* ---- Hamburger button ---- */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-toggle svg {
  display: block;
}

/* ---- Light pages (ch-) ---- */
.mobile-nav-toggle .nav-icon { stroke: var(--ch-ink, #1a1814); }
.mobile-nav-toggle .nav-icon-close { display: none; }
.mobile-nav-toggle[aria-expanded="true"] .nav-icon-open { display: none; }
.mobile-nav-toggle[aria-expanded="true"] .nav-icon-close { display: block; }

/* ---- Dark pages (gh-) ---- */
[data-mode="instrument"] .mobile-nav-toggle .nav-icon { stroke: #f3f0ed; }

/* ---- Brew Chai pages ---- */
[data-product="brew-chai"] .mobile-nav-toggle .nav-icon { stroke: var(--ink, #0a0a0a); }

/* ---- Mobile nav panel (shared structure) ---- */
@media (max-width: 767px) {
  /* Show hamburger */
  .ch-nav .mobile-nav-toggle,
  .gh-nav .mobile-nav-toggle {
    display: flex;
    order: 2;
  }

  /* Keep CTA to the right, hamburger next to it */
  .ch-nav-cta,
  .gh-nav-cta {
    order: 3;
  }

  /* Nav links become a slide-down panel */
  .ch-nav-links,
  .gh-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 1rem 1.5rem 1.5rem;
    gap: 0;
    z-index: 49;
  }

  .ch-nav-links {
    background: var(--ch-surface, #faf8f3);
    border-bottom: 1px solid var(--ch-rule, rgba(154, 148, 138, 0.22));
  }

  .gh-nav-links {
    background: var(--gh-surface, #0E0D0B);
    border-bottom: 1px solid var(--gh-rule, rgba(108, 122, 120, 0.20));
  }

  .ch-nav-links[data-open="true"],
  .gh-nav-links[data-open="true"] {
    display: flex;
  }

  /* Ensure nav row is relative for absolute positioning */
  .ch-nav-row,
  .gh-nav-row {
    position: relative;
  }

  /* Make links full-width with 44px touch targets */
  .ch-nav-link,
  .gh-nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ch-rule, rgba(154, 148, 138, 0.12));
  }

  .gh-nav-link {
    border-bottom-color: var(--gh-rule, rgba(108, 122, 120, 0.12));
  }

  .ch-nav-link:last-child,
  .gh-nav-link:last-child {
    border-bottom: none;
  }

  /* CTA touch target fix */
  .ch-nav-cta,
  .gh-nav-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.15rem;
  }

  /* Active/focus states for touch */
  .ch-nav-cta:active,
  .ch-nav-cta:focus-visible {
    background: transparent;
    color: var(--ch-accent);
  }
  .ch-nav-cta:active .ch-cta-arrow,
  .ch-nav-cta:focus-visible .ch-cta-arrow {
    transform: translateX(3px);
  }
  .ch-nav-link:active,
  .ch-nav-link:focus-visible {
    color: var(--ch-accent, #7c1f2e);
  }
  .gh-nav-cta:active,
  .gh-nav-cta:focus-visible {
    background: transparent;
    color: var(--gh-accent, #18b5ae);
  }
  .gh-nav-link:active,
  .gh-nav-link:focus-visible {
    color: var(--gh-accent, #18b5ae);
  }
}

/* Brew Chai variant (720px breakpoint) */
@media (max-width: 720px) {
  .nav .mobile-nav-toggle {
    display: flex;
    order: 2;
  }

  a.nav-cta {
    order: 3;
    min-height: 44px;
    padding: 12px 18px;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 0.75rem 18px 1.25rem;
    gap: 0;
    background: color-mix(in oklab, var(--bg, #fbfbfb) 96%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 2px solid var(--rule-strong, rgba(0, 0, 0, 0.78));
    z-index: 49;
  }

  .nav-links[data-open="true"] {
    display: flex;
  }

  .nav {
    position: relative;
  }

  .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.18));
  }

  .nav-link:last-child {
    border-bottom: none;
  }

  a.nav-cta:active,
  a.nav-cta:focus-visible {
    background: transparent;
    color: var(--accent, #0033cc);
  }
  .nav-link:active,
  .nav-link:focus-visible {
    color: var(--accent, #0033cc);
    border-bottom-color: var(--accent, #0033cc);
  }
}

/* ---- Desktop: hide hamburger ---- */
@media (min-width: 768px) {
  .ch-nav .mobile-nav-toggle,
  .gh-nav .mobile-nav-toggle {
    display: none;
  }
}
@media (min-width: 721px) {
  .nav .mobile-nav-toggle {
    display: none;
  }
}

/* ---- Footer touch targets (all variants) ---- */
@media (max-width: 767px) {
  .ch-footer-col a {
    padding: 0.45rem 0;
    display: inline-block;
  }
  .ch-footer-col ul {
    gap: 0.25rem;
  }
  .gh-footer-col a {
    padding: 0.45rem 0;
    display: inline-block;
  }
  .gh-footer-col ul {
    gap: 0.25rem;
  }
}

@media (max-width: 720px) {
  .footer-col a {
    padding: 0.35rem 0;
    display: inline-block;
  }
  .footer-col ul {
    gap: 0.15rem;
  }
}