.global-nav {
  --nav-ink: #122238;
  /* Bright orange only for large accents, borders and focus rings; small orange text uses
     --nav-orange-text and orange fills behind white text use --nav-orange-fill (both WCAG AA). */
  --nav-orange: #f2673a;
  --nav-orange-text: #b9461a;
  --nav-orange-fill: #c4471c;
  --nav-line: #d3d9e0;
  --nav-muted: #4f5b6b;
  display: grid;
  position: relative;
  z-index: 20;
  box-sizing: border-box;
  width: min(1240px, calc(100% - 48px));
  min-height: 0;
  grid-template-areas:
    "brand partners account"
    "pages pages pages";
  grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  grid-template-rows: minmax(66px, auto) auto;
  align-items: center;
  justify-content: normal;
  gap: 12px 20px;
  margin: 0 auto;
  padding: 8px 0 14px;
  border-bottom: 1px solid rgba(18, 34, 56, .12);
  background: transparent;
  font-family: Geist, "Segoe UI", Aptos, sans-serif;
  line-height: 1.3;
}

.global-nav *,
.global-nav *::before,
.global-nav *::after { box-sizing: border-box; }

.global-nav__brand {
  display: flex;
  grid-area: brand;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--nav-ink);
  text-decoration: none;
}

.global-nav__brand > b {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 11px 3px;
  border: 1px solid rgba(18, 34, 56, .13);
  color: var(--nav-ink);
  background: #fff;
  box-shadow: 0 5px 16px rgba(18, 34, 56, .08);
  font-size: 13px;
}

.global-nav__brand > b img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.global-nav__brand > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.global-nav__brand strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .06em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.global-nav__brand small {
  margin-top: 4px;
  color: var(--nav-orange-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
}

.global-nav .global-nav__pages {
  display: flex;
  grid-area: pages;
  width: auto;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.global-nav__partners {
  display: flex;
  grid-area: partners;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(18, 34, 56, .1);
  border-radius: 11px;
  background: rgba(255,255,255,.8);
}

.global-nav__partners img {
  display: block;
  width: auto;
  object-fit: contain;
}

.global-nav__partners img:first-child { height: 34px; border-radius: 3px; }
.global-nav__partners img:last-child { height: 27px; }

.global-nav__pages a,
.global-nav__account-link,
.global-nav__ideas {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--nav-line);
  border-radius: 999px;
  color: var(--nav-ink);
  background: rgba(255, 255, 255, .85);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.global-nav__account-link { font-size: 15px; }

.global-nav__pages a:hover,
.global-nav__account-link:hover,
.global-nav__ideas:hover {
  border-color: var(--nav-orange);
  color: var(--nav-orange-text);
}

/* One "current page" style for every header pill: navy fill, white text. Badges and the avatar
   inside an active pill turn white with navy text. */
.global-nav__pages a.active,
.global-nav__account-link.active,
.global-nav__ideas.active,
.global-nav__user.active {
  border-color: var(--nav-ink);
  color: #fff;
  background: var(--nav-ink);
}

.global-nav__pages a.active:hover,
.global-nav__account-link.active:hover,
.global-nav__ideas.active:hover,
.global-nav__user.active:hover {
  border-color: #1d3352;
  color: #fff;
  background: #1d3352;
}

.global-nav__account {
  display: flex;
  grid-area: account;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.global-nav__ideas {
  gap: 8px;
  cursor: pointer;
}

/* Idea count: a neutral navy count (not an orange "notification" dot). The negative margin
   keeps the pill's right edge snug around the badge; with the badge hidden the pill gets its
   normal 18px padding back. */
.global-nav__ideas b {
  display: grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  margin-right: -8px;
  padding: 0 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--nav-ink);
  font: 700 13px/1 Geist, "Segoe UI", Aptos, sans-serif;
  font-variant-numeric: tabular-nums;
}

.global-nav__ideas.active b {
  color: var(--nav-ink);
  background: #fff;
}

/* global-nav.js marks a zero count; the "0" stays in the DOM but is not shown. */
.global-nav__ideas b[data-zero] { display: none; }

.global-nav__user {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 0 16px 0 7px;
  border: 1px solid var(--nav-line);
  border-radius: 999px;
  color: var(--nav-ink);
  background: rgba(255, 255, 255, .8);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.global-nav__user b {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--nav-ink);
  font: 400 15px/1 Georgia, serif;
}

.global-nav__user span {
  overflow: hidden;
  max-width: 180px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-nav__user:hover {
  border-color: var(--nav-orange);
  color: var(--nav-orange-text);
}

.global-nav__user:hover:not(.active) b { background: var(--nav-orange-fill); }

.global-nav__user.active b {
  color: var(--nav-ink);
  background: #fff;
}

.global-nav__signout {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--nav-line);
  border-radius: 999px;
  color: var(--nav-muted);
  background: transparent;
  font: 700 14px/1.2 Geist, "Segoe UI", Aptos, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}

.global-nav__signout:hover {
  border-color: var(--nav-ink);
  color: var(--nav-ink);
  background: #fff;
}

.global-nav__signout:disabled {
  opacity: .65;
  cursor: progress;
}

/* Elements toggled by global-nav.js use the hidden attribute; the pill rules above set an
   explicit display, so the attribute needs this stronger rule. */
.global-nav [hidden] { display: none !important; }

/* Until CrwApi knows who is signed in, keep the account area invisible (no guest/user flash)
   while still reserving its space. */
.global-nav__account[aria-busy="true"] > * { visibility: hidden; }

.global-nav a:focus-visible,
.global-nav button:focus-visible,
.global-brand-footer a:focus-visible {
  outline: 3px solid #f2673a;
  outline-offset: 2px;
}

/* Live region wrapper: out of the header grid flow, always present for screen readers. It sits
   on the header's bottom edge, so the banner inside it starts just below the header. */
.global-nav__status {
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
}

/* Connection-lost banner. Fixed with top:auto keeps it at its static position, i.e. just below
   the header (computed as if the page were not scrolled), and it stays there while scrolling:
   it never covers the logos or the navigation pills. Phones show it as a bottom bar instead. */
.global-nav__connection {
  display: flex;
  position: fixed;
  top: auto;
  left: 50%;
  z-index: 1000;
  width: max-content;
  max-width: calc(100% - 32px);
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px 18px;
  border-radius: 12px;
  color: #fff;
  background: var(--nav-ink);
  box-shadow: 0 16px 42px rgba(18, 34, 56, .3);
  font: 600 15px/1.45 Geist, "Segoe UI", Aptos, sans-serif;
  transform: translateX(-50%);
}

.global-nav__connection::before {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--nav-orange);
  box-shadow: 0 0 0 4px rgba(242, 103, 58, .25);
  content: "";
  animation: global-nav-pulse 1.4s ease-in-out infinite;
}

.global-nav__connection b { font-weight: 800; letter-spacing: 0; }
.global-nav__connection span { color: rgba(255, 255, 255, .85); }

@keyframes global-nav-pulse {
  50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .global-nav__connection::before { animation: none; }
}

/* The account page shares the same header, so its split layout fills only the
   viewport that remains below the common navigation bar. */
.access-shell,
.access-intro {
  min-height: calc(100vh - 144px);
}

.global-brand-footer {
  display: flex;
  box-sizing: border-box;
  width: min(1240px, calc(100% - 48px));
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 32px auto 0;
  padding: 22px 0 30px;
  border-top: 1px solid rgba(18, 34, 56, .12);
  color: #4f5b6b;
  font: 700 13px/1.5 Geist, "Segoe UI", Aptos, sans-serif;
  letter-spacing: .04em;
}

.global-brand-footer__meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.global-brand-footer__meta > span {
  max-width: 100%;
  text-wrap: balance;
}

.global-brand-footer__meta a {
  display: inline-flex;
  width: max-content;
  min-height: 32px;
  align-items: center;
  color: #4f5b6b;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.global-brand-footer__meta a:hover,
.global-brand-footer__meta a:focus-visible { color: #b9461a; }

.global-brand-footer__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px 20px;
  padding: 12px 18px;
  border: 1px solid rgba(18, 34, 56, .08);
  border-radius: 13px;
  background: rgba(255,255,255,.82);
}

.global-brand-footer__logos img {
  display: block;
  width: auto;
  object-fit: contain;
}

.global-brand-footer__logos img:first-child { height: 46px; }
.global-brand-footer__logos img:last-child { height: 46px; }

.femtech-copyright-text {
  color: #122238;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .02em;
}

/* Wide screens with a single page link (guests and participants): the "Idea form" pill joins
   the first row, next to the account buttons, so the header has no near-empty second row. The
   partner logos then follow the event name. Staff with two or more page links keep the two-row
   header (centred logos, page pills below); on their own pages (admin, review, report) the
   current-page link is still hidden while the roles load, which keeps the two-row header from
   the start. While the account area is still loading, the pill is not shown, so it does not
   jump sideways when the account buttons appear. */
@media (min-width: 1081px) {
  .global-nav:not(:has(.global-nav__pages > a:not([hidden]) ~ a:not([hidden]), .global-nav__pages > a.active[hidden])) {
    grid-template-areas: "brand partners pages account";
    grid-template-columns: minmax(160px, max-content) max-content minmax(max-content, 1fr) max-content;
    grid-template-rows: minmax(66px, auto);
    column-gap: 28px;
  }
  .global-nav:not(:has(.global-nav__pages > a:not([hidden]) ~ a:not([hidden]), .global-nav__pages > a.active[hidden])) .global-nav__pages {
    justify-content: flex-end;
    margin-right: -20px;
  }
  .global-nav:not(:has(.global-nav__pages > a:not([hidden]) ~ a:not([hidden]), .global-nav__pages > a.active[hidden])):has([data-nav-account-area][aria-busy="true"]) .global-nav__pages { visibility: hidden; }
  .global-nav:not(:has(.global-nav__pages > a:not([hidden]) ~ a:not([hidden]), .global-nav__pages > a.active[hidden])) ~ .access-shell { min-height: calc(100vh - 88px); }
}

@media (min-width: 1081px) and (max-width: 1279px) {
  .global-nav:not(:has(.global-nav__pages > a:not([hidden]) ~ a:not([hidden]), .global-nav__pages > a.active[hidden])) .global-nav__user span { max-width: 130px; }
}

@media (max-width: 1080px) {
  .global-nav { gap: 12px 16px; }
  .global-nav__brand { gap: 10px; }
  .global-nav__brand strong { font-size: 14px; letter-spacing: .04em; }
  .global-nav__user span { max-width: 130px; }
}

/* Tablets: the person's name moves into the avatar's tooltip and aria-label so the account
   buttons keep fitting next to the partner logos. */
@media (max-width: 900px) {
  .global-nav__user { padding: 0 6px; }
  .global-nav__user span { display: none; }
}

@media (max-width: 860px) {
  .global-nav__brand > span { display: none; }
  .access-shell,
  .access-intro { min-height: auto; }
  .global-brand-footer { align-items: flex-start; flex-direction: column; gap: 16px; }
  .global-brand-footer__logos { justify-content: flex-start; }
}

/* Phones: logos on the first row, then wrapping rows of finger-sized pills. The page links
   and the account buttons share a row when they fit (guests, participants). Every label stays on
   one line: a staff member's page links grow to fill their row and wrap onto a second row when
   they do not fit, and the account buttons follow. The ::after item forces the break after the
   logos. No `order` on real content: the visual order stays the DOM (focus) order. */
@media (max-width: 720px) {
  .global-nav {
    display: flex;
    width: calc(100% - 32px);
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
    padding: 10px 0 12px;
  }
  .global-nav::after { flex: 0 0 100%; order: 1; height: 0; content: ""; }
  .global-nav .global-nav__pages,
  .global-nav__account { flex: 0 1 auto; order: 2; margin-top: 10px; gap: 6px; }
  .global-nav__partners { margin-left: auto; gap: 8px; padding: 5px 8px; }
  .global-nav__partners img:first-child { height: 28px; }
  .global-nav__partners img:last-child { height: 22px; }
  .global-nav .global-nav__pages { justify-content: flex-start; }
  .global-nav__pages a {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0 10px;
    text-align: center;
    white-space: nowrap;
  }
  .global-nav__account { flex-wrap: wrap; justify-content: flex-start; }
  .global-nav__account-link { min-height: 44px; padding: 0 14px; }
  .global-nav__user { min-height: 44px; min-width: 44px; padding: 0 6px; justify-content: center; }
  .global-nav__ideas { min-height: 44px; padding: 0 14px; }
  .global-nav__ideas b { margin-right: -5px; }
  .global-nav__signout { min-height: 44px; padding: 0 14px; }
  .global-nav__connection {
    top: auto;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 12px 16px;
    transform: none;
  }
  .global-nav__connection span { flex: 1 1 100%; padding-left: 20px; }
  .global-brand-footer { width: calc(100% - 32px); margin-top: 24px; letter-spacing: .02em; }
  .global-brand-footer__meta a { min-height: 44px; }
  .global-brand-footer__logos { width: 100%; }
  .global-brand-footer__logos img { max-width: calc(50% - 10px); }
}

/* Narrow phones (375–400px): slightly tighter pills, so a participant's Idea form, My ideas,
   account and Sign out still share one row, and an administrator's three page links (Idea form,
   Admin dashboard, Executive report) still fit one row in Geist. */
@media (max-width: 400px) {
  .global-nav { column-gap: 6px; }
  .global-nav .global-nav__pages,
  .global-nav__account { gap: 5px; }
  .global-nav__pages a { padding: 0 6px; }
  .global-nav__account-link,
  .global-nav__signout { padding: 0 12px; }
  .global-nav__ideas { gap: 6px; padding: 0 12px; }
  .global-nav__ideas b { margin-right: -4px; }
}

@media (max-width: 380px) {
  .global-nav__partners img:first-child { height: 24px; }
  .global-nav__partners img:last-child { height: 19px; }
}

@media print {
  .global-nav { display: none !important; }
  .global-nav__connection { display: none !important; }
  .global-brand-footer__meta a { display: none; }
  .global-brand-footer { width: 100%; break-inside: avoid; }
}