/* ============================================================================
   McBride Digital — Phase II site chrome (navbar + footer)
   Owned by Task 0. The markup these rules style lives once, in js/nav.js.
   ============================================================================ */

/* ============================================================================
   NAVBAR
   ============================================================================ */

/* The bar is fixed, so it takes no space in flow and the placeholder it
   replaces does not need to reserve any. Each page pads its own <main> down
   past --nav-height. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-height);
}

/* The backdrop is its own layer so the bar's text can stay fully opaque while
   the fill behind it fades in and, within the bar, fades out downward:
   solid --dark-blue along the top edge, nothing at all along the bottom. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              var(--dark-blue) 0%,
              rgba(4, 9, 29, 0.92) 45%,
              rgba(4, 9, 29, 0) 100%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

/* js/nav.js sets this past 64px of scroll. */
.nav.is-scrolled::before { opacity: 1; }

.nav__inner {
  position: relative;   /* above ::before */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Wordmark — the horizontal logo lockup. assets/logo-wordmark.png is the 4K
   assets/Logo.png trimmed of its transparent canvas and sized for the bar; the
   name the plaintext used to carry is now the image's alt text. */
.nav__brand {
  display: flex;
  align-items: center;
}

/* Height-driven: the lockup is ~7:1, so 30px puts its cap height a shade above
   the 18px bold text it replaced and leaves the nav links room down to 768px. */
.nav__logo {
  display: block;
  height: 30px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav__link {
  position: relative;
  padding-block: var(--space-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--white);
  transition: opacity var(--dur) var(--ease);
}
.nav__link:hover { opacity: 0.72; }

/* Active page indicator — a 2px electric-blue underline. */
.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--electric-blue);
}

/* --- Hamburger (below 768px) ----------------------------------------------- */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--space-1) * -1);
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav__toggle-bars { position: relative; }

.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: '';
  position: absolute;
}
.nav__toggle-bars::before { transform: translateY(-7px); }
.nav__toggle-bars::after  { transform: translateY(7px); }

.nav__toggle[aria-expanded='true'] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::after  { transform: rotate(-45deg); }

@media (max-width: 767px) {
  .nav__toggle { display: flex; }

  /* Full-screen overlay menu. Kept in the DOM and hidden with visibility so
     the open/close can transition and so nothing inside is tabbable while
     closed. */
  .nav__links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    background: var(--dark-blue);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);
  }

  .nav__links.is-open {
    visibility: visible;
    opacity: 1;
  }

  .nav__link { font-size: var(--fs-h3); }

  /* At 320px the lockup and the 44px toggle have to share the line. */
  .nav__logo { height: 26px; }

  /* Keep the bar itself clickable above the overlay. */
  .nav__inner { z-index: 1; }
  .nav__brand, .nav__toggle { position: relative; z-index: 2; }
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.footer {
  /* Fades upward into whatever section sits above it: transparent along the
     top edge, solid --dark-blue by the bottom. */
  background: linear-gradient(to bottom,
              rgba(4, 9, 29, 0) 0%,
              rgba(4, 9, 29, 0.85) 45%,
              var(--dark-blue) 100%);
  padding-block: var(--space-7) var(--space-4);
  margin-top: auto;
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
}

.footer__brand {
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--white);
}

.footer__descriptor {
  margin-top: var(--space-1);
  max-width: 34ch;
  font-size: var(--fs-small);
  color: var(--ink-subtle);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.footer__nav a {
  font-size: var(--fs-small);
  color: var(--ink-muted);
  transition: color var(--dur) var(--ease);
}
.footer__nav a:hover { color: var(--white); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-subtle);
}

/* Deliberate link out of Phase II — the only one. Removed at cutover along
   with the -a pages themselves (PROJECT.md §11). */
.footer__archive {
  color: var(--ink-subtle);
  transition: color var(--dur) var(--ease);
}
.footer__archive:hover { color: var(--electric-blue); }

@media (max-width: 767px) {
  .footer__top { flex-direction: column; gap: var(--space-4); }
  .footer__bottom { justify-content: flex-start; }
}