/**
 * JaxBeachTech — Navigation
 */

/* ── Primary nav ── */
.primary-nav {
  border-bottom: var(--border);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 999;
}

/* When inside header, override sticky */
.site-header .primary-nav {
  position: static;
  border-bottom: none;
  background: transparent;
}

.primary-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  align-items: center;
}

.primary-nav li { position: relative; }

.primary-nav a {
  display: block;
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 1rem 1.25rem;
  border-bottom: none;
  transition: color var(--duration) var(--ease);
  position: relative;
}

.primary-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1.25rem;
  right: 1.25rem;
  height: 2px;
  background: linear-gradient(to right, var(--gold), var(--gold2));
  transform: scaleX(0);
  transition: transform .3s var(--ease);
  transform-origin: left;
}

.primary-nav a:hover,
.primary-nav .is-active > a,
.primary-nav .active-trail > a {
  color: var(--ink);
}

.primary-nav a:hover::after,
.primary-nav .is-active > a::after,
.primary-nav .active-trail > a::after {
  transform: scaleX(1);
}

/* ── Dropdown menus ── */
.primary-nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--paper);
  border: var(--border);
  border-top: 2px solid var(--gold);
  min-width: 200px;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s var(--ease),
              transform .2s var(--ease),
              visibility .2s;
  z-index: 100;
}

.primary-nav li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-nav ul ul a {
  padding: .75rem 1.25rem;
  font-size: .62rem;
  letter-spacing: .12em;
  border-bottom: 1px solid var(--warm);
}

.primary-nav ul ul a::after { display: none; }

.primary-nav ul ul li:last-child a { border-bottom: none; }

/* ── Breadcrumb ── */
.breadcrumb {
  padding: .75rem 0;
  border-bottom: var(--border);
  margin-bottom: var(--space-lg);
}

.breadcrumb ol {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumb li {
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.breadcrumb li + li::before {
  content: '·';
  margin-right: .5rem;
  color: var(--rule);
}

.breadcrumb a {
  color: var(--muted);
  border-bottom: none;
}

.breadcrumb a:hover { color: var(--gold); }

/* ── Pager ── */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin: var(--space-xl) 0;
  list-style: none;
  padding: 0;
}

.pager__item a,
.pager__item.is-active span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--muted);
  border: var(--border);
  transition: all var(--duration) var(--ease);
  border-bottom: var(--border);
}

.pager__item a:hover,
.pager__item.is-active span {
  background: var(--gold);
  color: var(--paper);
  border-color: var(--gold);
}