/* ---- Page shell ---- */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-main {
  flex: 1 0 auto;
  width: 100%;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ---- Header ---- */

.site-header {
  background: var(--color-navy);
  color: var(--color-text-on-navy);
  border-bottom: 1px solid var(--color-navy-900);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--header-height);
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  color: var(--color-text-on-navy);
  padding: var(--space-2) 0;
}

.brand:hover {
  color: var(--color-text-on-navy);
  text-decoration: none;
}

.brand__mark {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
}

.brand__sub {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.72);
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-6);
}

.primary-nav__link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.primary-nav__link:hover {
  color: var(--color-text-on-navy);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

.primary-nav__link[aria-current="page"] {
  color: var(--color-text-on-navy);
}

.primary-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -10px;
  height: 2px;
  background: var(--color-red);
  border-radius: 2px;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 2px;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}

.lang-toggle__btn {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}

.lang-toggle__btn:not([aria-pressed="true"]):hover {
  color: var(--color-text-on-navy);
}

.lang-toggle__btn[aria-pressed="true"] {
  background: var(--color-text-on-navy);
  color: var(--color-navy);
}

/* Keyboard focus on the navy header/footer needs a light ring — the default
   navy-tinted ring would all but vanish against the dark bars. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible {
  box-shadow: var(--focus-ring-on-navy);
}

.notif-bell {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-text-on-navy);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notif-bell:hover {
  background: rgba(255, 255, 255, 0.14);
}

.notif-bell__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-red);
  color: var(--color-text-on-navy);
  font-size: 10px;
  font-weight: var(--fw-bold);
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--color-navy);
}

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 4px var(--space-3) 4px 4px;
  color: var(--color-text-on-navy);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
}

.user-pill__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-red);
  color: var(--color-text-on-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}

/* Role context for the demo audience — quiet, no badge chrome. Reads as
   gray against the navy header. Injected by assets/js/nav.js. */
.viewing-as {
  font-size: var(--fs-12);
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.signout-link {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.72);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.signout-link:hover {
  color: var(--color-text-on-navy);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

/* ---- Page heading region ---- */

.page-header {
  padding: var(--space-7) 0 var(--space-5);
}

.page-header__eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.page-header__title {
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
}

.page-header__subtitle {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-15);
}

.page-section {
  padding: var(--space-5) 0 var(--space-7);
}

/* ---- Footer ---- */

.site-footer {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.78);
  margin-top: var(--space-10);
  padding: var(--space-7) 0 var(--space-6);
  font-size: var(--fs-13);
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
}

.site-footer__brand {
  color: var(--color-text-on-navy);
  font-weight: var(--fw-semibold);
}

.site-footer__divider {
  color: rgba(255, 255, 255, 0.32);
}

.site-footer__meta {
  margin-top: var(--space-3);
  font-size: var(--fs-12);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Responsive squeeze ---- */

@media (max-width: 840px) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .primary-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
  }
  .primary-nav__link[aria-current="page"]::after {
    bottom: -6px;
  }
  .header-actions {
    margin-left: auto;
  }
  .container {
    padding: 0 var(--space-4);
  }
}