/* ==========================================================================
   Navigation Component - Nav, Header & Dropdown
   ========================================================================== */

/* ==========================================================================
   Navigation Component
   ========================================================================== */

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-ink);
  color: var(--color-canvas);
  border-bottom: var(--border-thick);
}

.nav a {
  color: var(--color-canvas);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: color var(--transition-fast);
}

.nav a:hover {
  color: var(--color-primary);
}

.nav__brand {
  font-size: var(--font-size-xl);
  font-weight: 900;
  color: var(--color-primary) !important;
}

/* ==========================================================================
   Header Component
   ========================================================================== */

.header {
  background-color: var(--color-ink);
  border-bottom: var(--border-thick);
}

.header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  max-width: 70rem;
  margin: 0 auto;
}

.header__brand {
  font-size: var(--font-size-xl);
  font-weight: 900;
  color: var(--color-primary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.header__brand-full {
  display: inline;
}

.header__brand-short {
  display: none;
}

@media (max-width: 40rem) {
  .header__brand-full {
    display: none;
  }

  .header__brand-short {
    display: inline;
  }
}

.header__brand:hover {
  color: var(--color-accent);
}

.header__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.header__links a {
  color: var(--color-canvas);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
  transition: color var(--transition-fast);
}

.header__links a:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   Dropdown Component
   ========================================================================== */

.dropdown {
  position: relative;
}

.dropdown__trigger {
  background: none;
  border: none;
  color: var(--color-canvas);
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  transition: color var(--transition-fast);
}

.dropdown__trigger:hover {
  color: var(--color-primary);
}

.dropdown__menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 150px;
  background-color: var(--color-ink);
  border: var(--border-thick);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-medium);
  display: none;
  flex-direction: column;
  margin-top: var(--space-sm);
  z-index: 100;
}

.dropdown__menu[data-dropdown-open="true"] {
  display: flex;
  animation: slide-up-fade-in 0.2s ease-out;
}

.dropdown__menu a {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-canvas);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
}

.dropdown__menu a:hover {
  color: var(--color-ink);
  background-color: var(--color-primary);
}

.dropdown__menu a:not(:last-child) {
  border-bottom: 1px solid var(--color-primary);
}