/* =========================================================
   NAVIGATION
========================================================= */

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background:
    linear-gradient(
      90deg,
      var(--nav-bg),
      var(--nav-bg-secondary)
    );

  color: var(--nav-text);

  border-bottom:
    1px solid
    rgba(205, 168, 98, 0.22);

  box-shadow:
    0 6px 22px
    rgba(0, 0, 0, 0.17);

}

.mobile-nav {
  display: none;
  position: relative;
  margin-left: auto;
}


.nav-shell {

  width:
    min(1260px, calc(100% - 32px));

  min-height: 72px;

  margin-inline: auto;

  display: flex;

  align-items: center;

  gap: 34px;

}



/* =========================================================
   BRAND
========================================================= */

.brand {

  display: flex;

  align-items: center;

  gap: 11px;

}


.brand-seal {

  width: 40px;

  height: 46px;

  display: grid;

  place-items: center;

  border:
    1px solid
    var(--accent);

  border-radius:
    7px 7px 12px 12px;

  color:
    var(--accent);

  font-family:
    var(--font-display);

  font-size: 17px;

  font-weight: 700;

  box-shadow:
    inset 0 0 0 3px
    rgba(212, 173, 100, 0.06);

}


.brand-copy {

  display: flex;

  flex-direction: column;

  line-height: 1;

  text-transform: uppercase;

  letter-spacing: 0.08em;

}


.brand-copy strong {

  font-family:
    var(--font-display);

  font-size: 14px;

  font-weight: 600;

}


.brand-copy span {

  margin-top: 4px;

  color: var(--accent);

  font-family:
    var(--font-display);

  font-size: 18px;

  font-weight: 700;

}



/* =========================================================
   MAIN NAV
========================================================= */

.main-nav {

  align-self: stretch;

  display: flex;

  align-items: stretch;

  margin-left: 18px;

}


.main-nav a {

  position: relative;

  display: flex;

  align-items: center;

  padding-inline: 17px;

  color:
    var(--nav-muted);

  font-size: 13px;

  font-weight: 600;

  transition:
    color var(--transition-fast);

}


.main-nav a:hover {

  color:
    var(--nav-text);

}


.main-nav a.active {

  color:
    var(--nav-text);

}


.main-nav a.active::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 17px;

  right: 17px;

  height: 2px;

  background:
    var(--accent);

  box-shadow:
    0 0 10px
    var(--glow-gold);

}



/* =========================================================
   ACCOUNT
========================================================= */

.account-area {

  margin-left: auto;

  display: flex;

  align-items: center;

  gap: 9px;

}


.account-name {

  color:
    var(--nav-muted);

  font-size: 12px;

}


/* =========================================================
   THEME SWITCHER
========================================================= */

.theme-control {

  display: flex;

  align-items: center;

  gap: 4px;

  padding: 4px;

  background:
    rgba(255, 255, 255, 0.05);

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius:
    9px;

}


.theme-button {

  width: 32px;

  height: 32px;

  padding: 0;

  display: grid;

  place-items: center;

  border: 0;

  border-radius: 6px;

  color:
    var(--nav-muted);

  background:
    transparent;

  cursor: pointer;

  transition:
    background var(--transition-fast),
    color var(--transition-fast);

}


.theme-button:hover {

  color:
    var(--nav-text);

  background:
    rgba(255, 255, 255, 0.08);

}


.theme-button.active {

  color:
    var(--accent);

  background:
    rgba(212, 173, 100, 0.12);

}


/* =========================================================
   NAVIGATION — MOBILE
========================================================= */

@media (max-width: 760px) {/* =========================================================
   MOBILE NAV
========================================================= */

.mobile-nav {
  display: none;

  position: relative;

  margin-left: auto;
}


.mobile-nav > summary {
  list-style: none;
}


.mobile-nav > summary::-webkit-details-marker {
  display: none;
}


/* Hamburger button */

.mobile-nav-toggle {
  width: 42px;
  height: 42px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 5px;

  padding: 0;

  cursor: pointer;

  color:
    var(--nav-text);

  background:
    rgba(255, 255, 255, 0.05);

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-radius:
    var(--radius-sm);

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}


.mobile-nav-toggle:hover {
  background:
    rgba(255, 255, 255, 0.08);

  border-color:
    rgba(212, 173, 100, 0.25);
}


.mobile-nav-toggle span {
  width: 18px;
  height: 2px;

  display: block;

  background:
    var(--nav-text);

  border-radius: 999px;

  transition:
    transform var(--transition),
    opacity var(--transition);
}


/* Turn hamburger into X */

.mobile-nav[open]
.mobile-nav-toggle span:nth-child(1) {
  transform:
    translateY(7px)
    rotate(45deg);
}


.mobile-nav[open]
.mobile-nav-toggle span:nth-child(2) {
  opacity: 0;
}


.mobile-nav[open]
.mobile-nav-toggle span:nth-child(3) {
  transform:
    translateY(-7px)
    rotate(-45deg);
}


/* =========================================================
   MOBILE DROPDOWN PANEL
========================================================= */

.mobile-nav-panel {
  position: absolute;

  top:
    calc(100% + 13px);

  right: 0;

  width:
    min(330px, calc(100vw - 24px));

  overflow: hidden;

  color:
    var(--text);

  background:
    var(--surface-raised);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--shadow-lg);
}


/* Small gold top accent */

.mobile-nav-panel::before {
  content: "";

  display: block;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--accent),
      transparent
    );
}


/* =========================================================
   MOBILE LINKS
========================================================= */

.mobile-nav-links {
  display: grid;

  padding:
    8px;
}


.mobile-nav-links a {
  min-height: 48px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    0 13px;

  color:
    var(--text-secondary);

  border-radius:
    var(--radius-sm);

  font-size: 13px;

  font-weight: 700;

  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}


.mobile-nav-links a:hover {
  color:
    var(--text);

  background:
    var(--surface-soft);
}


.mobile-nav-links a > span:last-child {
  color:
    var(--text-faint);

  font-size: 13px;
}


.mobile-nav-links a.active {
  color:
    var(--accent-text);

  background:
    var(--accent-soft);
}


.mobile-nav-links a.active
> span:last-child {
  color:
    var(--accent);
}


/* =========================================================
   MOBILE SECTIONS
========================================================= */

.mobile-nav-section {
  padding:
    13px 14px 15px;

  border-top:
    1px solid
    var(--border-soft);
}


.mobile-nav-label {
  display: block;

  margin-bottom: 8px;

  color:
    var(--text-muted);

  font-size: 8px;

  font-weight: 800;

  letter-spacing:
    .13em;

  text-transform: uppercase;
}


/* =========================================================
   MOBILE THEME
========================================================= */

.mobile-theme-control {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 6px;
}


.mobile-theme-control button {
  min-height: 48px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 3px;

  padding: 6px;

  cursor: pointer;

  color:
    var(--text-muted);

  background:
    var(--surface-soft);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-sm);

  font-size: 14px;

  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}


.mobile-theme-control button span {
  font-size: 8px;

  font-weight: 800;

  letter-spacing:
    .04em;

  text-transform: uppercase;
}


.mobile-theme-control button:hover,
.mobile-theme-control button.active {
  color:
    var(--accent-text);

  background:
    var(--accent-soft);

  border-color:
    color-mix(
      in srgb,
      var(--accent) 35%,
      var(--border)
    );
}


/* =========================================================
   MOBILE ACCOUNT
========================================================= */

.mobile-nav-account {
  display: grid;

  gap: 12px;

  padding:
    14px;

  background:
    var(--surface-soft);

  border-top:
    1px solid
    var(--border);
}


.mobile-account-copy {
  display: flex;

  flex-direction: column;
}


.mobile-account-copy
.mobile-nav-label {
  margin-bottom: 2px;
}


.mobile-account-copy strong {
  overflow: hidden;

  color:
    var(--text);

  font-size: 12px;

  font-weight: 700;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.mobile-auth-button {
  width: 100%;

  justify-content: space-between;
}


/* =========================================================
   TABLET / MOBILE SWITCH
========================================================= */

@media (max-width: 760px) {

  .nav-shell {
    width:
      min(100% - 20px, 1260px);

    min-height: 64px;

    gap: 15px;
  }


  /* Hide desktop controls */

  .main-nav,
  .account-area {
    display: none;
  }


  /* Show hamburger */

  .mobile-nav {
    display: block;
  }


  .brand {
    min-width: 0;
  }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 420px) {

  .brand-seal {
    width: 34px;
    height: 40px;

    font-size: 15px;
  }


  .brand-copy strong {
    font-size: 11px;
  }


  .brand-copy span {
    font-size: 15px;
  }


  .mobile-nav-toggle {
    width: 40px;
    height: 40px;
  }

}
}