/* Template sections: Navbar variants (template-sections/navbar.html). V1 is the live site header (css/sections/navbar.css).
   Each variant has a .ts-nav__drawer for small screens, toggled by [data-ts-menu] in js/library/library.js. */
.ts-nav-note { padding-block: var(--space-12); }
.ts-nav-note__card { display: grid; gap: var(--space-4); padding: var(--space-6); border: 1px dashed var(--border-strong); border-radius: var(--radius-xl); }
.ts-nav-note__card p { margin-top: var(--space-2); color: var(--text-medium); }
.ts-nav-note__card .btn { justify-self: start; }
@media (min-width: 768px) { .ts-nav-note__card { grid-template-columns: auto 1fr auto; align-items: center; } }

/* Demo stage: a slice of page under each header */
.ts-nav-demo { padding-bottom: var(--space-24); background: linear-gradient(var(--base-high), var(--stone-50)); }
.ts-nav-demo--dark { background: var(--ts-surface); }
.ts-nav-demo--photo { padding: var(--space-4) 0 calc(var(--space-20) * 2); background: url(../../assets/img/blog/cover-2.jpg) center / cover; }

.ts-nav { position: relative; }
.ts-nav ul { margin: 0; padding: 0; list-style: none; }
.ts-nav a:not(.btn) { color: var(--text-medium); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
@media (hover: hover) { .ts-nav a:not(.btn):hover { color: var(--text-strong); } }
.ts-nav__bar { display: flex; align-items: center; gap: var(--space-6); min-height: 72px; }
.ts-nav__logo { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 20px; letter-spacing: -0.02em; color: var(--text-strong) !important; flex: none; }
.ts-nav__links, .ts-nav__end > *:not(:last-child), .ts-nav__search { display: none !important; }
.ts-nav__links a { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-medium); font-size: var(--body-md-size); }
.ts-nav__links .ts-svg { width: 14px; height: 14px; }
.ts-nav__links [aria-current] { color: var(--text-strong) !important; }
.ts-nav__end { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.ts-nav__end .btn { display: none; }
.ts-nav__plain { font-weight: var(--fw-medium); font-size: var(--body-md-size); }
.ts-nav__toggle { margin-left: auto; }
.ts-nav__end + .ts-nav__toggle { margin-left: 0; }
.ts-nav__drawer { display: grid; gap: var(--space-6); padding: var(--space-2) var(--space-6) var(--space-6); border-bottom: 1px solid var(--border-thin); background: var(--base-high); animation: ts-nav-in var(--dur-slow) var(--ease-out); }
.ts-nav__drawer[hidden] { display: none; }
.ts-nav__drawer ul { display: grid; }
.ts-nav__drawer li a { display: block; padding-block: var(--space-3); border-bottom: 1px solid var(--border-thin); font-family: var(--font-heading); font-size: var(--h6-size); color: var(--text-strong) !important; }
.ts-nav__drawer-actions { display: grid; gap: var(--space-2); }
@keyframes ts-nav-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ts-nav__drawer { animation: none; } }
@media (min-width: 480px) { .ts-nav__end .btn { display: inline-flex; } }
@media (min-width: 1024px) {
  .ts-nav__links { display: flex !important; gap: var(--space-6); }
  .ts-nav__end > *:not(:last-child) { display: inline-flex !important; }
  .ts-nav__toggle, .ts-nav__drawer { display: none !important; }
}

/* V2 centered logo */
@media (min-width: 1024px) {
  .ts-nav--v2 .ts-nav__bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .ts-nav--v2 .ts-nav__end { justify-self: end; }
}

/* V3 search */
.ts-nav--v3 { border-bottom: 1px solid var(--border-thin); background: var(--base-high); }
.ts-nav__search { position: relative; align-items: center; flex: 1; max-width: 320px; margin-left: auto; }
.ts-nav__search .ts-svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--text-low); pointer-events: none; }
.ts-nav__search input { width: 100%; height: 38px; padding: 0 48px 0 36px; border: 1px solid var(--border-thin); border-radius: var(--radius-pill); background: var(--stone-50); font: inherit; font-size: var(--body-sm-size); color: var(--text-strong); }
.ts-nav__search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ts-nav__search kbd { position: absolute; right: 8px; padding: 1px 6px; border: 1px solid var(--border-thin); border-radius: 6px; background: var(--base-high); font: inherit; font-size: 11px; color: var(--text-low); }
@media (min-width: 1024px) { .ts-nav--v3 .ts-nav__search { display: flex !important; } .ts-nav--v3 .ts-nav__end { margin-left: 0; } }

/* V4 dark pills */
.ts-nav__pills { padding: 4px; border-radius: var(--radius-pill); background: var(--base-medium); gap: 2px !important; }
.ts-nav__pills a { height: 34px; padding-inline: var(--space-4); border-radius: var(--radius-pill); }
.ts-nav__pills [aria-current] { background: var(--base-high); }
.ts-nav--v4 .ts-nav__drawer { background: var(--ts-surface); }
@media (min-width: 1024px) { .ts-nav--v4 .ts-nav__pills { margin-inline: auto; } .ts-nav--v4 .ts-nav__end { margin-left: 0; } }

/* V5 floating glass */
.ts-nav__float { width: min(100% - 2 * var(--space-4), 960px); margin-inline: auto; border: 1px solid color-mix(in srgb, var(--base-high) 60%, transparent); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--base-high) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--shadow-md); }
.ts-nav--v5 .ts-nav__bar { min-height: 60px; padding-inline: var(--space-4) var(--space-2); }
.ts-nav--v5 .ts-nav__drawer { border: 0; border-top: 1px solid var(--border-thin); border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: transparent; }
@media (min-width: 1024px) { .ts-nav--v5 .ts-nav__links { margin-inline: auto; } .ts-nav--v5 .ts-nav__end { margin-left: 0; } }

/* V6 two-tier */
.ts-nav__util { background: var(--footer-bg); color: rgba(255, 255, 255, 0.78); font-size: var(--body-sm-size); }
.ts-nav__util-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 40px; padding-block: var(--space-2); }
.ts-nav__util p { color: inherit; }
.ts-nav__util .link, .ts-nav__util a { color: #fff !important; }
.ts-nav__util ul { display: none; gap: var(--space-5); }
.ts-nav__util ul a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.78) !important; }
.ts-nav__util .ts-svg { width: 14px; height: 14px; }
.ts-nav__new { margin-right: 6px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--accent); font-size: 12px; color: #fff; }
.ts-nav--v6 { border-bottom: 1px solid var(--border-thin); }
@media (min-width: 768px) { .ts-nav__util ul { display: flex; } }
@media (min-width: 1024px) { .ts-nav--v6 .ts-nav__links { margin-left: var(--space-6); } }