/**
 * Scavenger Hunt Platform — Header Nav (site-wide, self-contained).
 * Loaded on EVERY page by SHP_Nav::enqueue_nav_assets(). Uses the --shp-*
 * tokens emitted site-wide by output_dynamic_styles(). Does NOT depend on
 * shp-frontend.css (which is gated to plugin pages) — so it re-declares its own
 * button styles. Theme-hijackable links/buttons use the design-system §0 pattern
 * (element-qualified, .shp-app-nav-scoped, !important on the color trio only).
 */

/* ================================================================
   Container
================================================================ */
.shp-app-nav {
  font-family: var(--shp-font, "Montserrat", sans-serif);
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

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

/* ================================================================
   Public menu
================================================================ */
.shp-nav-public { display: flex; }

.shp-app-nav .shp-nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.shp-app-nav .shp-nav-menu li { margin: 0; }
.shp-app-nav .shp-nav-menu a {
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  color: var(--shp-dark-text, #1f2933) !important;
  transition: color .15s;
}
.shp-app-nav .shp-nav-menu a:hover,
.shp-app-nav .shp-nav-menu .current-menu-item > a {
  color: var(--shp-primary, #1866a8) !important;
}

/* ================================================================
   Auth zone + buttons (self-contained; §0 theme-beating)
================================================================ */
.shp-nav-auth { display: flex; align-items: center; gap: .6rem; }

.shp-app-nav .shp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1.1rem;
  border-radius: var(--shp-btn-radius, 8px);
  border: 2px solid transparent;
  font-family: inherit;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.shp-app-nav a.shp-btn--primary {
  background: var(--shp-primary, #1866a8) !important;
  color: var(--shp-light-text, #ffffff) !important;
  border-color: var(--shp-primary, #1866a8) !important;
}
.shp-app-nav a.shp-btn--primary:hover {
  background: var(--shp-primary-dark, #12517f) !important;
  border-color: var(--shp-primary-dark, #12517f) !important;
}
.shp-app-nav a.shp-btn--secondary {
  background: transparent !important;
  color: var(--shp-primary, #1866a8) !important;
  border-color: var(--shp-primary, #1866a8) !important;
}
.shp-app-nav a.shp-btn--secondary:hover {
  background: var(--shp-primary, #1866a8) !important;
  color: var(--shp-light-text, #ffffff) !important;
}

/* ================================================================
   Account dropdown
================================================================ */
.shp-nav-account { position: relative; }

.shp-app-nav button.shp-nav-account-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .9rem;
  border-radius: var(--shp-btn-radius, 8px);
  border: 1.5px solid var(--shp-border, #e5e7eb) !important;
  background: var(--shp-card-bg, #ffffff) !important;
  color: var(--shp-dark-text, #1f2933) !important;
  font-family: inherit;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.shp-app-nav button.shp-nav-account-toggle:hover,
.shp-nav-account.is-open button.shp-nav-account-toggle {
  border-color: var(--shp-primary, #1866a8) !important;
  color: var(--shp-primary, #1866a8) !important;
}
.shp-nav-account-caret { font-size: .7rem; transition: transform .15s; }
.shp-nav-account.is-open .shp-nav-account-caret { transform: rotate(180deg); }

.shp-app-nav .shp-nav-account-menu {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: .4rem;
  background: var(--shp-card-bg, #ffffff);
  border: 1px solid var(--shp-border, #e5e7eb);
  border-radius: var(--shp-card-radius, 12px);
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  display: none;
  z-index: 1000;
}
.shp-nav-account.is-open .shp-nav-account-menu { display: block; }
.shp-app-nav .shp-nav-account-menu li { margin: 0; }
.shp-app-nav .shp-nav-account-menu a {
  display: block;
  padding: .55rem .75rem;
  border-radius: var(--shp-btn-radius, 8px);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  color: var(--shp-dark-text, #1f2933) !important;
  transition: background .15s, color .15s;
}
.shp-app-nav .shp-nav-account-menu a:hover {
  background: var(--shp-bg, #f9fafb) !important;
  color: var(--shp-primary, #1866a8) !important;
}
.shp-app-nav .shp-nav-account-menu a.shp-nav-logout { color: var(--shp-muted-text, #6b7280) !important; }
.shp-app-nav .shp-nav-account-menu a.shp-nav-logout:hover {
  color: var(--shp-error, #dc2626) !important;
  background: rgba(220,38,38,.07) !important;
}

/* ================================================================
   Hamburger (mobile only)
================================================================ */
.shp-nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  padding: 9px;
  border: 1.5px solid var(--shp-border, #e5e7eb) !important;
  background: var(--shp-card-bg, #ffffff) !important;
  border-radius: var(--shp-btn-radius, 8px);
  cursor: pointer;
}
.shp-nav-hamburger__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--shp-dark-text, #1f2933);
  transition: transform .2s, opacity .2s;
}
.shp-nav-hamburger[aria-expanded="true"] .shp-nav-hamburger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.shp-nav-hamburger[aria-expanded="true"] .shp-nav-hamburger__bar:nth-child(2) { opacity: 0; }
.shp-nav-hamburger[aria-expanded="true"] .shp-nav-hamburger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ================================================================
   Responsive — mobile (< 768px): one hamburger, vertical panel
================================================================ */
@media (max-width: 767px) {
  .shp-app-nav { flex-wrap: wrap; justify-content: flex-end; }
  .shp-nav-hamburger { display: flex; }

  .shp-nav-panel {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    margin-top: .75rem;
    padding: 1rem;
    background: var(--shp-card-bg, #ffffff);
    border: 1px solid var(--shp-border, #e5e7eb);
    border-radius: var(--shp-card-radius, 12px);
  }
  .shp-nav-panel.is-open { display: flex; }

  .shp-app-nav .shp-nav-menu { flex-direction: column; align-items: flex-start; gap: .25rem; width: 100%; }
  .shp-app-nav .shp-nav-menu a { display: block; width: 100%; padding: .5rem 0; }

  .shp-nav-auth {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    width: 100%;
    padding-top: 1rem;
    border-top: 1px solid var(--shp-border, #e5e7eb);
  }
  .shp-app-nav .shp-btn { width: 100%; }

  /* Account items show inline as a labeled subsection (no floating dropdown). */
  .shp-nav-account { position: static; width: 100%; }
  .shp-app-nav button.shp-nav-account-toggle { width: 100%; justify-content: space-between; }
  .shp-app-nav .shp-nav-account-menu {
    position: static;
    display: block;
    min-width: 0;
    margin-top: .4rem;
    padding: 0 0 0 .5rem;
    border: none;
    box-shadow: none;
    background: transparent;
  }
}