/*
 * Warm Refresh — navbar.css
 * Styles the site header: the sticky nav bar, its mobile off-canvas
 * collapse panel, the pure-CSS "Extensions" dropdown, and the global
 * sale banner (a chrome element that sits above the nav bar and pushes
 * it down, so it is owned here rather than by a page-body stylesheet).
 * This file owns navbar/sale-banner styling only — no page-body rules.
 */

/* ==========================================================================
   Sale banner
   ========================================================================== */

.sale {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sale-banner);
  display: block;
  height: 32px;
  text-align: center;
  background: var(--bg-inverse);
  color: var(--ink-inverse);
}

.sale:hover {
  text-decoration: none;
}

.sale > div {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sale p {
  margin: 0;
  font-weight: 700;
  color: var(--ink-inverse);
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

.sale span {
  margin-left: var(--space-2);
  text-decoration: underline;
  color: var(--accent);
  font-weight: 600;
}

.sale code {
  background: var(--bg-inverse-alt);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  color: var(--ink-inverse);
}

.sale-wrapper-spacer {
  height: 32px;
}

.sale-link-break {
  display: none;
}

@media (max-width: 854px) {
  .sale {
    height: 64px;
  }

  .sale-wrapper-spacer {
    height: 64px;
  }

  .sale-link-break {
    display: initial;
  }
}

@media (max-width: 751px) {
  .sale-link-break {
    display: none;
  }
}

@media (max-width: 452px) {
  .sale {
    height: 96px;
  }

  .sale-wrapper-spacer {
    height: 96px;
  }

  .sale-link-break {
    display: initial;
  }
}

@media (max-width: 384px) {
  .sale-link-break {
    display: none;
  }
}

/* ==========================================================================
   Nav bar
   ========================================================================== */

.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--line);
  padding: var(--space-3) 0;
  transition: box-shadow var(--duration-base) var(--ease-standard), top var(--duration-base) var(--ease-standard);
}

.navbar.is-scrolled {
  box-shadow: var(--shadow-sm);
}

/* Pushed down while the sale banner occupies the top of the viewport;
   offsets mirror the .sale height breakpoints above. */
.navbar--with-sale {
  top: 32px;
}

@media (max-width: 854px) {
  .navbar--with-sale {
    top: 64px;
  }
}

@media (max-width: 452px) {
  .navbar--with-sale {
    top: 96px;
  }
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.navbar-brand {
  display: inline-flex;
}

.navbar-brand img {
  height: 35px;
  display: block;
}

/* Mobile toggle button(s): the one in the top bar and the close button
   inside the off-canvas panel share this styling. */
.navbar-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-strong);
  font-size: 1.125rem;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.navbar-toggler:hover,
.navbar-toggler:focus-visible {
  color: var(--accent);
  border-color: var(--accent-soft-border);
}

/* ==========================================================================
   Collapse panel — mobile-first: hidden off-canvas drawer by default,
   reset to a plain inline nav at the desktop breakpoint.
   ========================================================================== */

.navbar-collapse {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  padding: var(--space-5);
  overflow-y: auto;
  z-index: var(--z-navbar);
}

.navbar-collapse.is-open {
  display: block;
}

.navbar-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  border-bottom: 1px solid var(--line);
}

.nav-item:last-child {
  border-bottom: none;
}

.nav-link {
  display: block;
  color: var(--ink);
  font: 600 0.9375rem/1.4 var(--font-sans);
  padding: var(--space-3) var(--space-2);
  text-decoration: none;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--accent);
  text-decoration: none;
}

.nav-link.active {
  color: var(--ink-strong);
  border-bottom: 2px solid var(--accent);
}

/* Dropdown ("Extensions"): a static, always-expanded sub-list on mobile
   (there is no hover on touch, and the off-canvas panel has room to
   spare); an absolutely-positioned, hover/focus-revealed panel on
   desktop. */
.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-4);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  color: var(--ink);
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--ink);
  background: var(--accent-soft);
  text-decoration: none;
}

.dropdown-item i {
  color: var(--ink-muted);
  width: 1.1em;
  text-align: center;
  flex: none;
}

.dropdown-item:hover i,
.dropdown-item:focus i {
  color: var(--accent);
}

/* ==========================================================================
   Desktop layout (>=992px): inline nav, pure-CSS hover/focus dropdown.
   ========================================================================== */

@media (min-width: 992px) {
  .navbar-toggler {
    display: none;
  }

  .navbar-collapse {
    display: block;
    position: static;
    width: auto;
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    margin-left: auto;
  }

  .navbar-collapse-header {
    display: none;
  }

  .navbar-nav {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
  }

  .nav-item {
    border-bottom: none;
  }

  /* Anchor point for the absolutely-positioned dropdown panel. */
  .nav-item.has-dropdown {
    position: relative;
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin-top: var(--space-1);
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--duration-base) var(--ease-standard),
                visibility var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
    z-index: var(--z-dropdown);
  }

  .nav-item.has-dropdown:hover > .dropdown-menu,
  .nav-item.has-dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}