/* =====================================================================
   File: /assets/css/nav.css
   Purpose: TT bar + main store nav + Turtle search pill
   ===================================================================== */

/* =========================
   STORE UTILITY BAR (LEGACY)
   ========================= */
.tn-utilitybar{
  position: sticky;
  top: 0;
  z-index: 40; /* above mega menu */
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  height: 44px;
  padding: 0 24px;
  background: var(--t-bg);
  border-bottom: 1px solid #e6e6e6;
}
html[data-theme="dark"] .tn-utilitybar{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.tn-utility-left,
.tn-utility-right{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width:0;
}
.tn-utility-left{ justify-content:flex-start; }
.tn-utility-right{ justify-content:flex-end; }

.tn-utility-center{
  display:flex;
  align-items:center;
  justify-content:center;
}

.tn-utility-link{
  color: var(--t-fg);
  font-size: 13px;
  font-weight: 500;
  text-decoration:none;
  white-space:nowrap;
}
.tn-utility-link:hover{ text-decoration:underline; }

.tn-utility-brand{
  color: var(--t-fg);
  font-weight: 700;
  font-size: 14px;
  text-decoration:none;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* icon buttons (used by TT actions, etc.) */
.tn-iconbtn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: var(--t-fg);
}
.tn-iconbtn:hover{ background: rgba(0,0,0,.06); }
html[data-theme="dark"] .tn-iconbtn:hover{ background: rgba(255,255,255,.08); }

.tn-ico{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* keep your existing tn-login style from your stack */
.tn-utility-right .tn-login{
  background: var(--t-green);
  color:#fff;
  border-radius: 22px;
  padding: 8px 16px;
  display:inline-block;
  font-size: 13px;
  font-weight: 700;
  text-decoration:none;
}
.tn-utility-right .tn-login:hover{
  background: var(--t-green-600);
  text-decoration:none;
}

/* =========================
   TT BAR + MAIN NAV BARS
   ========================= */

/* Base bar style (shared by TT + main nav) */
.tn-topbar{
  position: sticky;
  top: 68px; /* default: sits under TT bar */
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  height: 68px;
  padding: 0 24px;
  background: var(--t-bg);
  border-bottom: 1px solid #e6e6e6;
}
html[data-theme="dark"] .tn-topbar{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* TT bar variant (Top Turtle) – same shell, pinned to top */
.tn-topturtle{
  top: 0;       /* top of viewport */
  z-index: 40;  /* above main nav */
}

/* Brand */
.tn-topbar .brand a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--t-fg);
  text-decoration: none;
}

/* Nav */
.tn-nav{
  display:flex;
  align-items:center;
  gap:28px;
  margin-left:0;
  min-width:0;
  flex:1;
}

/* Links */
.tn-link{
  position: relative;
  padding: 10px 2px;
  color: var(--t-fg);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 12.5px;
  white-space: nowrap;
  transition: color .25s ease;
}

/* Hover + active underline (green bar) */
.tn-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:3px;
  border-radius:3px;
  background: var(--t-green);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .25s ease;
}
.tn-link:hover::after{ transform: scaleX(1); }
.tn-link[aria-current="page"]::after{
  transform: scaleX(1);
  transform-origin:left;
}

/* Spacer to push pill to far right */
.tn-nav-spacer{ flex:1; }

/* =========================
   TURTLE SEARCH PILL (RIGHT)
   ========================= */

/*
  Nav pill is canonical TRTL search pill, scaled for the nav bar.
  Uses --pill-bg / --pill-shadow / --ring from base/home.
*/

.tn-nav-search{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}

.tn-nav-search .search-pill{
  display:flex;
  align-items:center;
  gap:12px;
  width:min(360px, 34vw);
  height:44px;            /* fits inside 68px bar */
  padding:10px 16px;
  border-radius:999px;
  background:var(--pill-bg);
  box-shadow:var(--pill-shadow);
  border:0;
}

/* Icon left */
.tn-nav-search .tn-search-icon{
  color:var(--t-green);
  display:inline-flex;
}

/* Input (slightly smaller than home pill) */
.tn-nav-search-input{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:var(--t-fg);
  font-size:14px;
  padding:6px 0;
}

/* Right spacer (for future keyboard hint or icon) */
.tn-nav-search .tn-search-spacer{
  width:22px;
  height:22px;
  flex:0 0 22px;
}

/* Focus ring matches core TRTL pill */
.tn-nav-search .search-pill:focus-within{
  box-shadow:var(--pill-shadow), var(--ring);
}

/* Mobile: allow horizontal scroll and shrink pill */
@media (max-width: 980px){
  .tn-nav{ overflow:auto; scrollbar-width:none; }
  .tn-nav::-webkit-scrollbar{ display:none; }
  .tn-nav-search .search-pill{ width:220px; }
}