/* ===== Sticky header ===== */
.jt-header{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, #0b0e13 85%, transparent);
  border-bottom:1px solid var(--border);
}

.jt-header__inner{
  max-width:1060px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  gap:20px;
}

/* ===== Brand (logo) ===== */
.jt-brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  color:var(--text);
}

.jt-brand__logo{
  height:96px;            /* nice and visible on desktop */
  width:auto;
  display:block;
  object-fit:contain;
  filter:none;
}

/* ===== Nav (desktop baseline) ===== */
.jt-nav{
  display:flex;
  gap:18px;
  align-items:center;
}

.jt-nav__link{
  font-size:16px;
  text-decoration:none;
  color:var(--muted);
  padding:10px 14px;
  border-radius:12px;     /* default rounded corners */
  border:1px solid transparent;
  transition:
    color .15s ease,
    background .15s ease,
    border-color .15s ease,
    transform .06s ease;
}

.jt-nav__link:hover{
  color:var(--text);
  background:var(--panel);
  border-color:var(--border);
  transform: translateY(-1px);
  border-radius:0;        /* <-- square corners on hover */
}

.jt-nav__link.is-active{
  color:var(--text);
  border-color: var(--accent-2);
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--panel) 85%, transparent),
    transparent
  );
  border-radius:0 !important;   /* <-- square corners for active tab */
}


/* Remove underline from the nav/menu row */
.nav,
.main-nav,
header nav {
  border-bottom: none !important;
}

/* Draw a purple rule across the full header width */
.site-header,
#siteHeader,
header {
  position: relative; /* anchor the pseudo-element */
}

.site-header::after,
#siteHeader::after,
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent-2); /* purple */
  pointer-events: none;
  z-index: 1;
}

/* === Mobile Hamburger (match Filters button exactly) === */
/* Desktop default: hidden */
.jt-nav-toggle{
  display:none;              /* DESKTOP: hidden */
  margin-left:auto;
  padding:6px 12px;
  height:auto;

  /* MATCH FILTERS BUTTON */
  background: var(--accent-2);    /* same purple */
  border: 1px solid var(--accent-2);
  border-radius: 0px;             /* no rounded corners */

  cursor:pointer;
  color:#fff;
  font-size:14px;
  font-weight:500;

  /* Flex layout – only visible on mobile when display:flex is enabled */
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}

.jt-nav-toggle:hover{
  background: color-mix(in oklab, var(--accent-2) 85%, white 10%);
}

.jt-nav-toggle:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:2px;
}

/* bars */
.jt-nav-toggle__bar{
  display:block;
  width:16px;
  height:2px;
  background:#fff;
  border-radius:0;
}

/* ===== Mobile layout ===== */
@media (max-width: 768px) {
  .jt-header__inner{
    max-width:100%;
    padding:12px 16px;
    flex-wrap:wrap;            /* allow nav to sit on its own row */
    align-items:center;
    gap:8px;
  }

  .jt-brand__logo{
    height:64px;               /* bigger logo on phones */
    width:auto;
  }

  /* Show the purple hamburger on mobile */
  .jt-nav-toggle{
    display:flex;              /* MOBILE: visible */
  }

  /* Nav becomes a dropdown that fills the width, hidden by default */
  .jt-nav{
    order:3;                   /* ensure it appears below logo + toggle */
    width:100%;
    display:none;              /* hidden until opened */
    flex-direction:column;
    gap:6px;
    padding:10px 12px 12px;
    position:absolute;
    inset-inline:0;            /* full width under the header */
    top:100%;                  /* drop down below header bar */
background: #141821; /* dark neutral gray */
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .jt-nav.jt-nav--open{
    display:flex;
  }

  .jt-nav__link{
    width:100%;
    padding:8px 10px;
    font-size:15px;
    border-radius:10px;
  }
}