/*
 * Path: css/components/header.css
 * Purpose: Header component interactions — nav toggle button and mobile panel behavior
 * Boundaries: No global layout, no global button styling, no typography.
 * Depends on: css/core/tokens.css, css/core/layout.css
 * Version: 0.9.0 (pre-1.0)
 */

/* =========================================
   Nav toggle button (visuals)
   ========================================= */
.nav-toggle{
  display: none; /* shown only on small screens */
  width: var(--btn-size);
  height: var(--btn-size);
  place-items: center;
  background: var(--nav-toggle-bg);
  color: var(--nav-toggle-fg);
  border: 1px solid var(--nav-panel-border);
  border-radius: var(--btn-radius);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-fast) var(--easing),
    box-shadow var(--dur-fast) var(--easing);
}
.nav-toggle i{ font-size: var(--icon-size); line-height: 1; }
.nav-toggle:hover{ transform: translateY(1px); box-shadow: var(--shadow-md); }
.nav-toggle:focus-visible{
  outline: 2px solid var(--btn-secondary-bg);
  outline-offset: 3px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--btn-secondary-bg) 25%, transparent),
    var(--shadow-md);
}

/* =========================================
   Mobile navigation panel and scrim
   ========================================= */
@media (max-width: 768px){
  /* Toggle is visible on small screens */
  .nav-toggle{ display: inline-grid; }

  /* Backdrop scrim when menu open */
  .site-header[data-menu="open"]::after{
    content:"";
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--nav-scrim-bg);
    z-index: -1;
  }

  /* Hide header bottom border while panel is open to avoid double line */
  .site-header[data-menu="open"]{
    border-bottom-color: transparent;
  }

  /* Full-width sheet anchored under the header */
  .site-nav{
    position: absolute;
    left: 0; right: 0;
    top: var(--header-h);
    background: var(--nav-panel-bg);
    color: var(--nav-panel-fg);
    border: 1px solid var(--nav-panel-border);
    border-top: 1px solid var(--nav-panel-border);
    border-radius: 0;
    padding: 10px 12px;
    box-shadow: var(--shadow-lg);
    display: none;             /* default closed */
    flex-direction: column;
    gap: 6px;
    z-index: 1;
  }

  /* Mobile menu items: visible hover/focus, no underline jiggle */
  .site-nav a{
    color: currentColor;
    padding: 12px 8px;
    border-radius: 8px;
    text-decoration: none;
    transition:
      background-color var(--dur-fast) var(--easing),
      transform var(--dur-fast) var(--easing);
  }
  .site-nav a:hover,
  .site-nav a:focus-visible{
    background: color-mix(in srgb, var(--nav-panel-fg) 7%, var(--nav-panel-bg));
    transform: translateY(1px);
    text-decoration: none;
  }

  /* Open state wired to JS-toggled data attribute */
  .site-header[data-menu="open"] #siteNav{ display: flex; }
}

/* =========================================
   Header nav CTA (scoped tweaks, if needed later)
   Base .cta visual rules live in components/buttons.css
   ========================================= */
/* Intentionally minimal: rely on global .cta styles */
/* Example tweak kept for future parity if required:
.site-nav .cta{ padding-inline: 16px; }
*/