/* Toolspot4u Child Theme — Navigation Component
   H-001B: Premium header experience. Paper & Ember system.
   All values reference tokens from tokens.css. */

/* ── Sticky container ────────────────────────────────────────────────────── */

nav.site {
  position:        sticky;
  top:             0;
  z-index:         var(--z-nav);
  background:      color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom:   1px solid var(--ink-12);
  transition:      background 0.22s var(--ease-out),
                   border-color 0.22s var(--ease-out),
                   box-shadow 0.22s var(--ease-out),
                   transform 0.3s var(--ease-out);
}

/* Scrolled — richer border + compound shadow */
nav.site.scrolled {
  background:          color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom-color: var(--ink-30);
  box-shadow:          0 1px 0 0 var(--ink-12), var(--shadow-md);
}

/* Hide on scroll-down (JS adds .hide) */
nav.site.hide { transform: translateY(-100%); }

/* ── Inner row ───────────────────────────────────────────────────────────── */

.nav-in {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          var(--nav-height);
  gap:             20px;
}

/* ── Logo ────────────────────────────────────────────────────────────────── */

.logo {
  font-family:     var(--disp);
  font-weight:     700;
  font-size:       1.4rem;
  letter-spacing:  -0.025em;
  white-space:     nowrap;
  color:           var(--ink);
  text-decoration: none;
  transition:      opacity 0.18s var(--ease-out);
  flex:            0 0 auto;
}
.logo b, .logo strong { color: var(--ember); font-weight: inherit; }
.logo:hover { opacity: 0.75; }

/* ── Primary nav links ───────────────────────────────────────────────────── */

/*
 * wp_nav_menu() outputs <ul class="nav-links"><li class="menu-item"><a>…</a></li></ul>.
 * display:contents on <li> removes the box from the flex context so each <a>
 * behaves as a direct flex child. role="list" preserves AT list semantics.
 */

ul.nav-links,
.nav-links {
  display:        flex;
  gap:            28px;
  font-family:    var(--body);
  font-weight:    500;
  font-size:      0.9rem;
  letter-spacing: 0.01em;
  list-style:     none;
  padding:        0;
  margin:         0;
}

.nav-links li,
.nav-links .menu-item { display: contents; }

.nav-links a {
  color:           var(--ink-60);
  position:        relative;
  padding:         4px 0;
  text-decoration: none;
  transition:      color 0.18s var(--ease-out);
  white-space:     nowrap;
}

/* Underline — scaleX from center. Avoids layout-thrashing width animation. */
.nav-links a::after {
  content:          '';
  position:         absolute;
  left:             0;
  bottom:           -2px;
  width:            100%;
  height:           2px;
  background:       var(--ember);
  border-radius:    2px;
  transform:        scaleX(0);
  transform-origin: center;
  transition:       transform 0.2s var(--ease-out);
}

.nav-links a:hover             { color: var(--ink); }
.nav-links a:hover::after      { transform: scaleX(1); }

/* Active / current page */
.nav-links a.on,
.nav-links .current-menu-item > a,
.nav-links .current-menu-parent > a,
.nav-links .current_page_item > a {
  color:       var(--ink);
  font-weight: 600;
}
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after,
.nav-links a.on::after { transform: scaleX(1); }

/* Focus */
.nav-links a:focus-visible {
  outline:        2px solid var(--ember);
  outline-offset: 4px;
  border-radius:  2px;
}

/* ── CTA cluster ─────────────────────────────────────────────────────────── */

.nav-cta {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex:        0 0 auto;
}

/* Icon button (search, cart, account) */
.icon-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
  width:           36px;
  height:          36px;
  border-radius:   var(--r-md);
  color:           var(--ink-60);
  border:          1px solid transparent;
  background:      transparent;
  cursor:          pointer;
  transition:      background 0.18s var(--ease-out),
                   color 0.18s var(--ease-out),
                   border-color 0.18s var(--ease-out),
                   transform 0.18s var(--ease-out);
  text-decoration: none;
  flex:            0 0 auto;
}
.icon-btn:hover {
  background:   var(--linen);
  color:        var(--ink);
  border-color: var(--ink-12);
  transform:    translateY(-1px);
}
.icon-btn:active  { transform: translateY(0); }
.icon-btn:focus-visible {
  outline:        2px solid var(--ember);
  outline-offset: 2px;
}

/* Cart count badge */
.cart-count {
  position:      absolute;
  top:           3px;
  right:         3px;
  min-width:     16px;
  height:        16px;
  background:    var(--ember);
  color:         #fff;
  font-family:   var(--mono);
  font-size:     0.58rem;
  font-weight:   500;
  border-radius: var(--r-pill);
  display:       flex;
  align-items:   center;
  justify-content: center;
  padding:       0 4px;
  line-height:   1;
}

/* Nav-context CTA button refinements */
.nav-cta .btn.small.dark {
  font-size:      0.875rem;
  letter-spacing: 0.01em;
  padding:        9px 18px;
  border-radius:  var(--r-md);
}

/* ── Expanding search bar ─────────────────────────────────────────────────── */

.searchbar {
  max-height:    0;
  overflow:      hidden;
  transition:    max-height 0.28s var(--ease-out),
                 border-color 0.22s;
  background:    color-mix(in srgb, var(--paper) 96%, transparent);
  border-bottom: 1px solid transparent;
}

.searchbar.open {
  max-height:          80px;
  border-bottom-color: var(--ink-12);
}

.searchbar .in {
  display:     flex;
  gap:         12px;
  align-items: center;
  padding:     16px 0;
}

/* Form wrapper — flex so submit sits beside input */
.t4u-search-form {
  flex:    1;
  display: flex;
  gap:     10px;
}

.searchbar input[type="search"] {
  flex:               1;
  font-size:          0.975rem;
  border-radius:      var(--r-md);
  height:             44px;
  padding:            0 16px;
  background:         var(--paper);
  border:             1.5px solid var(--ink-12);
  color:              var(--ink);
  transition:         border-color 0.18s var(--ease-out),
                      box-shadow 0.18s var(--ease-out),
                      background 0.18s;
  outline:            none;
  -webkit-appearance: none;
}
.searchbar input[type="search"]:hover {
  border-color: var(--ink-30);
}
.searchbar input[type="search"]:focus {
  border-color: var(--ember);
  box-shadow:   var(--f-focus-ring);
  background:   #fff;
}
.searchbar input[type="search"]::placeholder {
  color:          var(--ink-30);
  letter-spacing: 0.005em;
}

.searchbar button[type="submit"] {
  height:          44px;
  padding:         0 22px;
  background:      var(--ink);
  color:           var(--paper);
  border:          0;
  border-radius:   var(--r-md);
  font-family:     var(--mono);
  font-size:       0.75rem;
  font-weight:     500;
  letter-spacing:  0.07em;
  text-transform:  uppercase;
  cursor:          pointer;
  transition:      background 0.18s var(--ease-out),
                   transform 0.18s var(--ease-out),
                   box-shadow 0.18s var(--ease-out);
  white-space:     nowrap;
  flex:            0 0 auto;
}
.searchbar button[type="submit"]:hover {
  background: var(--ember);
  transform:  translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.searchbar button[type="submit"]:active { transform: translateY(0); }
.searchbar button[type="submit"]:focus-visible {
  outline:        2px solid var(--ember);
  outline-offset: 2px;
}

.searchbar-hint {
  font-family:    var(--mono);
  font-size:      0.68rem;
  letter-spacing: 0.04em;
  color:          var(--ink-30);
  white-space:    nowrap;
  user-select:    none;
}

/* ── Hamburger toggle button ─────────────────────────────────────────────── */

.mob-toggle {
  display:         none;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  background:      transparent;
  border:          1px solid transparent;
  border-radius:   var(--r-md);
  cursor:          pointer;
  color:           var(--ink);
  flex:            0 0 auto;
  transition:      background 0.18s var(--ease-out),
                   border-color 0.18s var(--ease-out);
  order:           2;
}
.mob-toggle:hover {
  background:   var(--linen);
  border-color: var(--ink-12);
}
.mob-toggle:focus-visible {
  outline:        2px solid var(--ember);
  outline-offset: 2px;
}

/* Three-line hamburger via box model */
.hbg,
.hbg::before,
.hbg::after {
  display:       block;
  width:         18px;
  height:        1.5px;
  background:    currentColor;
  border-radius: 2px;
  transition:    transform 0.2s var(--ease-out), opacity 0.18s;
}
.hbg { position: relative; }
.hbg::before,
.hbg::after { content: ''; position: absolute; left: 0; }
.hbg::before { top: -5px; }
.hbg::after  { top:  5px; }

/* Animate to × when open */
.mob-toggle[aria-expanded="true"] .hbg          { background: transparent; }
.mob-toggle[aria-expanded="true"] .hbg::before  { transform: translateY(5px) rotate(45deg); }
.mob-toggle[aria-expanded="true"] .hbg::after   { transform: translateY(-5px) rotate(-45deg); }

/* ── Mobile nav drawer ───────────────────────────────────────────────────── */

.mob-drawer {
  position:    fixed;
  inset:       var(--nav-height) 0 0 0;
  background:  var(--paper);
  transform:   translateX(100%);
  opacity:     0;
  transition:  transform 0.24s var(--ease-out),
               opacity 0.2s ease;
  z-index:     calc(var(--z-nav) - 1);
  overflow-y:  auto;
  display:     none;
}

.mob-drawer.open {
  transform: translateX(0);
  opacity:   1;
}

.mob-drawer-inner {
  display:        flex;
  flex-direction: column;
  padding:        24px 20px 48px;
  min-height:     100%;
}

/* Mobile nav link list */
ul.mob-nav-links {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        2px;
}
ul.mob-nav-links li { display: block; }

ul.mob-nav-links a {
  display:         flex;
  align-items:     center;
  padding:         12px 14px;
  min-height:      44px;
  font-size:       1.05rem;
  font-weight:     500;
  letter-spacing:  0.005em;
  color:           var(--ink-60);
  text-decoration: none;
  border-radius:   var(--r-md);
  transition:      background 0.18s var(--ease-out),
                   color 0.18s var(--ease-out);
}
ul.mob-nav-links a:hover,
ul.mob-nav-links .current-menu-item > a {
  background: var(--linen);
  color:      var(--ink);
}
ul.mob-nav-links .current-menu-item > a { font-weight: 600; }

/* Mobile CTA cluster */
.mob-cta {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-top:     auto;
  padding-top:    28px;
  border-top:     1px solid var(--ink-12);
}
.mob-cta .btn,
.mob-cta .btn-ghost {
  width:           100%;
  text-align:      center;
  justify-content: center;
  min-height:      48px;
}

/* Prevent body scroll when drawer is open */
body.mob-nav-open { overflow: hidden; }

/* ── Mobile: hide desktop nav links, show hamburger ─────────────────────── */

@media (max-width: 900px) {
  .nav-links  { display: none; }
  .mob-toggle { display: flex; }
  .mob-drawer { display: block; }
  .nav-cta .btn.small.dark { display: none; }
}

/* ── Responsive: tighten CTA cluster on small screens ───────────────────── */

@media (max-width: 480px) {
  .nav-cta { gap: 6px; }
}

/* ── Accessibility: prefers-reduced-motion ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  nav.site,
  .nav-links a,
  .nav-links a::after,
  .icon-btn,
  .mob-toggle,
  .mob-drawer,
  .searchbar,
  .searchbar input[type="search"],
  .searchbar button[type="submit"],
  .hbg,
  .hbg::before,
  .hbg::after {
    transition: none !important;
    animation:  none !important;
  }
}