/* ===================================================================
   LAYOUT
   Page shell shared by every page: background, nav bar, footer.
   Page-specific content styling lives in its own CSS file.
   =================================================================== */

/*
  Fixed photographic ground, matching the main site: a darkening gradient over
  the photo, plus a warm gold glow in the top right. `fixed` keeps it still
  while the page scrolls, which is what makes the panels read as glass.
*/
body {
  background-image: linear-gradient(
      180deg,
      rgba(6, 8, 10, 0.52) 0%,
      rgba(6, 8, 10, 0.82) 58%,
      #080a0d 100%
    ),
    radial-gradient(circle at 78% 8%, rgba(235, 174, 70, 0.16), transparent 35%),
    url("../img/site-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-header-bg);
  /* Frosts whatever scrolls underneath, so the bar sits on the page
     rather than covering it. */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  font-family: var(--font-display);
}

/* Crest sits in its own tile, as on the main site. */
.site-header__logo {
  height: 44px;
  width: 44px;
  object-fit: contain;
  padding: var(--space-1);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Regiment name over a quieter descender, rather than one run-on line. */
.site-header__names {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.site-header__names strong {
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
}

.site-header__names span {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.site-nav {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav {
  align-items: center;
  gap: var(--space-2);
}

.site-nav a {
  display: block;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.site-nav a:hover {
  color: var(--color-text);
  background-color: var(--color-bg-soft);
  text-decoration: none;
}

/* The current page is a raised tile with a gold rule under it, matching the
   main site rather than the plain underline this used to have. */
.site-nav a[aria-current="page"] {
  color: var(--color-text);
  background-color: var(--color-bg-soft);
  border-bottom-color: var(--color-gold);
  text-decoration: none;
}

/* Signed-in officer + logout, pinned to the right of the bar. */
.site-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
}

.site-header__user-name {
  color: var(--color-gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-header__logout {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-header__logout:hover {
  color: var(--color-gold-bright);
}

.page-shell {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-7);
}

.page-title {
  font-size: var(--fs-xl);
  text-transform: uppercase;
  color: var(--color-gold-bright);
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-6);
}

.site-footer {
  text-align: center;
  padding: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 720px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .site-header__brand {
    font-size: var(--fs-md);
    flex-wrap: wrap;
  }

  .site-nav {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .site-header__user {
    align-self: flex-start;
  }
}