/* ==========================================================================
   Purple Door Security — Site navigation (hamburger flyout)
   ========================================================================== */

.nav-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--pd-ash);
  border-radius: var(--pd-radius-pill);
  background: rgba(28, 22, 48, 0.7);
  color: var(--pd-text);
  cursor: pointer;
  transition: border-color var(--pd-dur-fast) var(--pd-ease-standard);
}

.nav-trigger:hover {
  border-color: var(--pd-purple-400);
}

.nav-trigger__bars,
.nav-trigger__bars::before,
.nav-trigger__bars::after {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.nav-trigger__bars {
  position: relative;
  display: block;
}

.nav-trigger__bars::before,
.nav-trigger__bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.nav-trigger__bars::before {
  top: -6px;
}

.nav-trigger__bars::after {
  top: 6px;
}

/* --- Backdrop -------------------------------------------------------------
   Same opacity/visibility recipe as .contact (contact.css): un-hides
   immediately on open, but only returns to display:none-equivalent after
   the fade-out finishes, via the transition-delay reversal on visibility. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(4, 3, 9, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--pd-dur-base) var(--pd-ease-standard),
    visibility 0s linear var(--pd-dur-base);
}

.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* --- Panel ----------------------------------------------------------------
   Fixed and flush to the trailing edge regardless of .site-header's own
   box: no ancestor between here and the viewport sets transform/filter/
   perspective, so position:fixed measures against the viewport itself
   (the same contract contact.css documents for .contact). */
.nav-panel {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 30;
  width: min(320px, 86vw);
  padding: var(--pd-space-7) var(--pd-space-6);
  border-inline-start: 1px solid rgba(var(--pd-purple-300-rgb), 0.16);
  background: linear-gradient(165deg, rgba(var(--pd-purple-800-rgb), 0.97), rgba(16, 12, 28, 0.99));
  box-shadow: var(--pd-shadow-lg), -40px 0 90px -30px rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--pd-dur-slow) var(--pd-ease-entrance),
    visibility 0s linear var(--pd-dur-slow);
}

.nav-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.nav-panel:focus {
  outline: none; /* a programmatic focus target on open, not a real control */
}

.nav-panel__close {
  position: absolute;
  inset-block-start: var(--pd-space-4);
  inset-inline-end: var(--pd-space-4);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--pd-ash);
  border-radius: var(--pd-radius-pill);
  background: rgba(28, 22, 48, 0.7);
  color: var(--pd-mute);
  cursor: pointer;
  transition: color var(--pd-dur-fast) var(--pd-ease-standard),
    border-color var(--pd-dur-fast) var(--pd-ease-standard);
}

.nav-panel__close:hover {
  color: var(--pd-text);
  border-color: var(--pd-purple-400);
}

.nav-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-2);
  margin-block-start: var(--pd-space-8); /* clears the close button visually */
}

.nav-panel__link {
  display: block;
  padding: var(--pd-space-3) var(--pd-space-2);
  border-radius: var(--pd-radius-md);
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-lg);
  font-weight: 600;
  color: var(--pd-text);
  text-decoration: none;
  transition: background-color var(--pd-dur-fast) var(--pd-ease-standard),
    color var(--pd-dur-fast) var(--pd-ease-standard);
}

.nav-panel__link:hover {
  background: rgba(var(--pd-purple-500-rgb), 0.12);
  color: var(--pd-purple-200);
}

/* --- Forced colors (Windows High Contrast) --------------------------------- */
@media (forced-colors: active) {
  .nav-backdrop {
    display: none; /* dimming has no meaning here; the panel's own border
                       carries the boundary instead */
  }

  .nav-panel {
    border: 2px solid ButtonBorder;
  }

  .nav-trigger,
  .nav-panel__close {
    border: 2px solid ButtonBorder;
  }
}

/* --- No JavaScript ----------------------------------------------------------
   A bare <button> does nothing without a click handler, so the trigger and
   close button are hidden rather than left as dead affordance. The panel
   itself renders in flow instead, as a plain always-visible list of links —
   the same "static illustration, real content below" pattern door.css and
   contact.css use for the rest of the page without JS. */
.no-js .nav-trigger,
.no-js .nav-panel__close {
  display: none;
}

.no-js .nav-backdrop {
  display: none;
}

.no-js .nav-panel {
  position: static;
  width: auto;
  max-width: var(--pd-container);
  margin-inline: auto;
  padding: 0 var(--pd-gutter) var(--pd-space-4);
  border: none;
  background: none;
  box-shadow: none;
  transform: none;
  opacity: 1;
  visibility: visible;
}

.no-js .nav-panel__list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--pd-space-4);
  margin-block-start: 0;
}

.no-js .nav-panel__link {
  padding: var(--pd-space-1) 0;
  font-size: var(--pd-text-sm);
}

/* The no-js header now has two rows (logo, then this link list) instead of
   the one door.css reserved clearance for — a touch more top padding on the
   scene keeps the list from overlapping the door illustration. Same
   selector as door.css's rule, relying on source order (this file loads
   after door.css) to override just this one longhand. */
.no-js .portal {
  padding-block-start: calc(var(--pd-space-8) + var(--pd-space-6));
}

/* --- Responsive -------------------------------------------------------------- */
@media (max-width: 26rem) {
  .nav-panel {
    width: 100vw;
  }
}