/* =========================================================================
   PER main nav — priority+ collapse
   Replaces every `nav div.navigation-bar-*` rule in pers.css / pers.new.css.
   See django/README.md for the exact list of rules to delete.
   ========================================================================= */

.per-nav {
  background: #35383A;
  position: relative;           /* the compact panel overlays from here */
}

.per-nav__inner {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;     /* the width steps below are container widths */
  margin: 0 auto;
  padding: 0 15px;
  min-height: 44px;
  position: relative;
  /* NO overflow:hidden here — it would clip the MORE dropdown. The measure
     pass is contained by the list's own overflow instead (below). */
}

/* Track Bootstrap's .container steps so the bar shrinks with the page content
   at every breakpoint instead of staying at a flat 1170px. */
@media (min-width: 768px)  { .per-nav__inner { width: 750px; } }
@media (min-width: 992px)  { .per-nav__inner { width: 970px; } }
@media (min-width: 1200px) { .per-nav__inner { width: 1170px; } }

/* pers.new.css widens div.container padding to 25px here; match it. */
@media only screen and (max-width: 768px) { .per-nav__inner { padding: 0 25px; } }

/* Italic subtitle. JS hides it the moment a link needs its space. */
.per-nav__title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin: 0;
  color: #fff;
  font: italic 13px/1.2 Helvetica, sans-serif;
  white-space: nowrap;
}
.per-nav__title[hidden] { display: none; }

@media only screen and (max-width: 560px) {
  .per-nav__title {
    margin-left: 28px;
    margin-top: 0.5em;
  }
}

/* Every .per-nav__list rule is scoped to .per-nav — the same partial renders in
   the footer, where these styles must not apply. */
.per-nav .per-nav__list {
  display: flex;
  align-items: stretch;
  flex: 0 1 auto;             /* don't stretch — MORE sits next to the last link */
  min-width: 0;
  margin: 0 0 0 auto;         /* links + MORE hug the right edge, as the old
                                 `float: right` did; the subtitle stays left */
  padding: 0;
  list-style: none;
  overflow: hidden;           /* contains the one-frame measure pass */
}
.per-nav .per-nav__list > li { display: flex; }
.per-nav .per-nav__list > li[hidden] { display: none; }

.per-nav a,
.per-nav__more-btn,
.per-nav__burger {
  display: flex;
  align-items: center;
  padding: 12px 11px;
  border: 0;
  background: none;
  color: #fff;
  font: 500 13px/1 Helvetica, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.per-nav a:hover,
.per-nav a:focus-visible,
.per-nav__more-btn:hover,
.per-nav__more-btn:focus-visible { color: #F7941E; text-decoration: none; }

.per-nav a.active,
.per-nav__more-btn.is-active { color: #F7941E; font-weight: 700; }

.per-nav :focus-visible { outline: 2px solid #F7941E; outline-offset: -2px; }

/* ---- MORE button + its dropdown ------------------------------------- */

.per-nav__more { position: relative; flex: 0 0 auto; display: flex; align-items: stretch; }
.per-nav__more[hidden] { display: none; }
.per-nav__more-btn::after {
  content: "\25BE";
  margin-left: 7px;              /* a leading space in `content` collapses here */
  margin-bottom: 2px;            /* KEEP — optical centering of the caret */
}

.per-nav__panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  min-width: 220px;
  padding: 6px;
  background: #3E4245;
  border: 1px solid #55595c;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.per-nav__panel[hidden] { display: none; }
.per-nav__panel ul { margin: 0; padding: 0; list-style: none; }
.per-nav__panel a { padding: 12px; }
.per-nav__panel a:hover { background: rgba(255, 255, 255, .08); }

/* ---- Hamburger (< 550px) -------------------------------------------- */

.per-nav__burger {
  flex: 0 0 auto;
  margin-left: auto;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
}
.per-nav__burger[hidden] { display: none; }
.per-nav__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
}

/* row-gap: 0 — the inner gap would otherwise show a 24px dark stripe between
   the bar and the panel row. */
.per-nav.is-compact .per-nav__inner { flex-wrap: wrap; gap: 0 24px; padding: 0; width: 100%; }
.per-nav.is-compact .per-nav__list { display: none; }
.per-nav.is-compact .per-nav__burger { margin-right: 15px; }

/* The panel drops to its own full-width row under the bar. */
.per-nav.is-compact .per-nav__more { flex: 1 0 100%; }

.per-nav.is-compact .per-nav__panel {
  position: absolute;                    /* overlay, like the desktop dropdown */
  top: 100%;
  right: 0;
  left: auto;                            /* width comes from the content */
  z-index: 1000;
  min-width: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #55595c;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.per-nav.is-compact .per-nav__panel a {
  padding: 17px 25px;
  line-height: 14px;                     /* 17 + 14 + 17 = 48px row */
  border-left: 3px solid transparent;
}
.per-nav.is-compact .per-nav__panel a.active { border-left-color: #F7941E; }
/* Back to a block: as a flex item the panel would size to its content instead
   of filling the bar. */
.per-nav.is-compact .per-nav__more { position: static; display: block; }
.per-nav.is-compact .per-nav__more-btn { display: none; }

/* The footer gets NO rules from this file. `footer div.footer-navigation
   div.footer-links ul li` in pers.css already styles the plain <ul>, and every
   selector above is scoped under .per-nav so none of it reaches the footer. */

/* ---- Header user / logout links -------------------------------------
   pers.new.css spaces these with `display: inline-block` + `padding-right`,
   which gives no row spacing at all — so when they wrap at narrow widths the
   lines sit right on top of each other. A flex row with a row-gap fixes it. */

header div.header-login-links {
  /* pers.new.css uses `padding-top: 25px`, a fixed offset tuned for a single
     line — when the name wraps, the block grows downward and the top padding
     stays, so it looks top-heavy. Center it instead. */
  padding-top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 80px;              /* header is 120px tall, less its 20px padding */
}

header div.header-login-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 20px;
  text-align: right;
  float: none;                   /* pers.new.css floats it right */
  margin: 0;
  padding: 0;
  list-style: none;
}
header div.header-login-links ul li {
  display: block;
  padding-right: 0;              /* the gap handles it */
}

/* ---- No-JS / pre-enhancement ----------------------------------------
   `js` is set on <html> in the head. Without JS the list simply wraps to
   as many lines as it needs — ugly at 400px, but every link still works. */

.js .per-nav .per-nav__list { visibility: hidden; }
.js .per-nav.is-ready .per-nav__list { visibility: visible; }

html:not(.js) .per-nav__inner { flex-wrap: wrap; overflow: visible; }
html:not(.js) .per-nav .per-nav__list { flex-wrap: wrap; }