/* ==========================================================================
   navbar.css
   Header, brand, primary nav, icon buttons and the two dropdown menus
   (Discover + user account). Authored mobile-first: the rules below are
   the small-screen baseline (hamburger + accordion + inline dropdowns).
   The ≥56.3125em (901px) desktop treatment — horizontal nav, floating
   glass dropdown panels — is layered on in responsive.css.
   ========================================================================== */

header {
  background: rgba(15, 23, 42, 0.92);
  color: var(--color-on-dark);
  padding-block: clamp(0.875rem, 2.5vw, 1.375rem);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  backdrop-filter: blur(0.875rem);
  box-shadow: 0 0.625rem 2rem rgba(0, 0, 0, 0.16);
}

header .container > nav {
  position: relative;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand img {
  height: 2.625rem;
  background: #ffffff;
  padding: 0.3125rem 0.5rem;
  border-radius: var(--radius-md);
  object-fit: contain;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1);
  transition: transform var(--duration-moderate) ease;
}

.brand:hover img {
  transform: scale(1.04);
}

.brand strong {
  font-size: 0.85rem;
  letter-spacing: 0.03125rem;
}

/* ---- Hamburger toggle (visible by default; hidden ≥901px) ---- */
.nav-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.09);
  border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  color: var(--color-on-dark);
  width: 2.625rem;
  height: 2.625rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--duration-moderate) ease;
}

.nav-toggle svg {
  display: block;
  pointer-events: none;
}

.nav-toggle .icon-line {
  transition: transform var(--duration-moderate) var(--ease-emphasized), opacity var(--duration-fast) ease;
}

.nav-toggle[aria-expanded='true'] .line-top {
  transform: translateY(0.375rem) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .line-mid {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] .line-bot {
  transform: translateY(-0.375rem) rotate(-45deg);
}

/* ---- Collapsible nav panel (mobile/tablet baseline) ---- */
.nav-links {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.625rem);
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(1rem);
  border-radius: var(--radius-lg);
  border: 0.0625rem solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1.25rem 2.8125rem rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    grid-template-rows var(--duration-slow) var(--ease-emphasized),
    opacity var(--duration-moderate) ease,
    transform var(--duration-moderate) var(--ease-emphasized),
    visibility var(--duration-slow);
}

.nav-links.open {
  visibility: visible;
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.nav-links-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 1rem;
}

.nav-links a,
.nav-links button {
  color: var(--color-on-dark);
  background: none;
  border: none;
  text-decoration: none;
  font: inherit;
  font-size: 0.975rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.88;
  padding: 0.5625rem 0.9375rem;
  border-radius: var(--radius-sm);
  transition: opacity var(--duration-fast), background var(--duration-fast);
  white-space: nowrap;
  letter-spacing: 0.01em;
  width: 100%;
  text-align: left;
}

.nav-links a:hover,
.nav-links button:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

/* ---- Icon buttons: dark mode & print/PDF ----
   Mobile baseline shows them as full-width rows with a text label
   (via the data-label attribute); desktop compresses them to square
   icon-only buttons — see responsive.css. */
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: 0.625rem;
  padding: 0.6875rem 0.875rem;
  border-radius: var(--radius-sm);
  color: var(--color-on-dark);
  background: rgba(255, 255, 255, 0.09);
  border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: background var(--duration-fast), transform var(--duration-fast);
  flex-shrink: 0;
}

.nav-icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
  transform: scale(1.02);
}

.nav-icon-btn svg {
  display: block;
  pointer-events: none;
  flex-shrink: 0;
}

.nav-icon-btn::after {
  content: attr(data-label);
  font-size: 0.94rem;
  font-weight: 600;
}

/* ---- Separator: a horizontal nav only needs a divider once items sit
   in a row; hidden in the stacked mobile menu, restored on desktop. ---- */
.nav-sep {
  display: none;
}

/* ---- Discover dropdown & user menu (structure shared by both) ---- */
.nav-discover,
.user-menu {
  position: relative;
  display: inline-flex;
  width: 100%;
}

.discover-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  width: 100%;
  color: var(--color-on-dark);
  background: rgba(14, 165, 164, 0.2);
  border: 0.0625rem solid rgba(14, 165, 164, 0.4);
  text-decoration: none;
  font: inherit;
  font-size: 0.975rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.5625rem 1rem;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.discover-btn:hover {
  background: rgba(14, 165, 164, 0.34);
}

.discover-btn .chevron {
  display: block;
  transition: transform var(--duration-base) ease;
}

.nav-discover:hover .chevron,
.nav-discover.open .chevron {
  transform: rotate(180deg);
}

.user-btn {
  display: inline-flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  gap: 0.625rem;
  background: rgba(255, 255, 255, 0.09);
  border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  padding: 0.6875rem 0.875rem;
  border-radius: var(--radius-sm);
  color: inherit;
  transition: background var(--duration-fast);
}

.user-btn::after {
  content: attr(data-label);
  font-size: 0.94rem;
  font-weight: 600;
}

.user-btn:hover,
.user-menu:hover .user-btn {
  background: rgba(255, 255, 255, 0.2);
}

.user-btn.active {
  transform: rotate(8deg);
}

/* ---- Shared dropdown panel (Discover + user account) ----
   Mobile baseline: a plain inline panel that expands within the
   accordion. The floating "glass" popover treatment used on desktop
   (position, blur, shadow, speech-bubble arrow) lives in responsive.css. */
.dropdown-panel {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.5rem;
  border-radius: var(--radius-lg);
  text-align: left;
  z-index: var(--z-dropdown);
}

.nav-discover.open .dropdown-panel,
.user-menu.open .dropdown-panel {
  display: block;
}

.dropdown-panel::before {
  display: none;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.6875rem 0.875rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-on-dark);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.dropdown-item::before {
  content: '';
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.7;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: opacity 0.18s ease;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dropdown-item:hover::before {
  opacity: 1;
}

/* Discover item icons */
.discover-dropdown .dropdown-item:nth-child(1) {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}
.discover-dropdown .dropdown-item:nth-child(2) {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 21V8l9-5 9 5v13'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E");
}
.discover-dropdown .dropdown-item:nth-child(3) {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.discover-dropdown .dropdown-item:nth-child(4) {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* User item icon */
.user-dropdown .dropdown-item {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
}