/* ==========================================================================
   The shared shell: navigation and footer.

   The nav markup is byte-identical on every page. The active item is driven
   by body[data-page] matching a[data-nav], so there is no per-page edit to
   forget and no way for the five copies to drift apart.
   ========================================================================== */

/* --- navigation ----------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav { background: var(--bg); }
}
.nav.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* --- navbar over the home hero video --------------------------------------
   While the hero is in view the bar sits transparent on the footage and its
   contents go white. js/site.js adds .is-stuck once the hero scrolls past,
   which returns the bar to its normal paper state. The mobile menu forces the
   solid state too, since the open panel needs an opaque bar above it.
   ------------------------------------------------------------------------- */
body[data-page="home"]:not([data-nav-open="true"]) .nav:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
body[data-page="home"]:not([data-nav-open="true"]) .nav:not(.is-stuck) .nav__link {
  color: rgba(255, 255, 255, 0.84);
}
body[data-page="home"]:not([data-nav-open="true"]) .nav:not(.is-stuck) .nav__link:hover,
body[data-page="home"]:not([data-nav-open="true"]) .nav:not(.is-stuck) .nav__link[data-nav="home"] {
  color: #fff;
}
/* knocks the green-and-gold lockup back to solid white without a third asset */
body[data-page="home"]:not([data-nav-open="true"]) .nav:not(.is-stuck) .nav__brand img {
  filter: brightness(0) invert(1);
}
body[data-page="home"]:not([data-nav-open="true"]) .nav:not(.is-stuck) .nav__toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
body[data-page="home"]:not([data-nav-open="true"]) .nav:not(.is-stuck) :focus-visible {
  outline-color: #fff;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--nav-h);
}

.nav__brand { display: flex; align-items: center; flex-shrink: 0; }
.nav__brand img { width: 152px; height: 59px; }
.nav__brand:focus-visible { outline-offset: 4px; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.1rem + 1.4vw, 1.75rem);
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: var(--space-2) 0;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }

/* the whole active-state system, in one list per state */
body[data-page="home"]          .nav__link[data-nav="home"],
body[data-page="about"]         .nav__link[data-nav="about"],
body[data-page="research"]      .nav__link[data-nav="research"],
body[data-page="project"]       .nav__link[data-nav="project"],
body[data-page="gallery"]       .nav__link[data-nav="gallery"],
body[data-page="opportunities"] .nav__link[data-nav="opportunities"],
body[data-page="contact"]       .nav__link[data-nav="contact"] {
  color: var(--text);
  font-weight: 600;
}
body[data-page="home"]          .nav__link[data-nav="home"]::after,
body[data-page="about"]         .nav__link[data-nav="about"]::after,
body[data-page="research"]      .nav__link[data-nav="research"]::after,
body[data-page="project"]       .nav__link[data-nav="project"]::after,
body[data-page="gallery"]       .nav__link[data-nav="gallery"]::after,
body[data-page="opportunities"] .nav__link[data-nav="opportunities"]::after,
body[data-page="contact"]       .nav__link[data-nav="contact"]::after {
  transform: scaleX(1);
}

.nav__cta { flex-shrink: 0; }
.nav__cta .btn { padding: 0.6rem 1.25rem; min-height: 42px; }

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }

/* --- mobile navigation ---------------------------------------------------- */
@media (max-width: 880px) {
  .nav__toggle { display: inline-flex; }

  .nav__menu {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    display: block;
    padding: var(--space-5) var(--gutter) var(--space-7);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility var(--dur);
  }
  .nav__menu[data-open="true"] {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li + li { border-top: 1px solid var(--line-soft); }
  .nav__link {
    display: block;
    padding: var(--space-4) 0;
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--text);
  }
  .nav__link::after { display: none; }
  body[data-page="home"]          .nav__link[data-nav="home"],
  body[data-page="about"]         .nav__link[data-nav="about"],
  body[data-page="research"]      .nav__link[data-nav="research"],
  body[data-page="project"]       .nav__link[data-nav="project"],
  body[data-page="gallery"]       .nav__link[data-nav="gallery"],
  body[data-page="opportunities"] .nav__link[data-nav="opportunities"],
  body[data-page="contact"]       .nav__link[data-nav="contact"] { color: var(--brand-700); }

  .nav__cta { display: block; margin-top: var(--space-5); }
  .nav__cta .btn { width: 100%; min-height: 50px; }
}
@media (min-width: 881px) {
  .nav__menu {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
}
@media (max-width: 420px) {
  .nav__brand img { width: 124px; height: 48px; }
}

body[data-nav-open="true"] { overflow: hidden; }

/* --- footer --------------------------------------------------------------- */
.footer {
  background: var(--brand-950);
  color: var(--text-on-dark);
  padding-block: var(--space-10) var(--space-6);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-8) var(--space-6);
}
/* On tablets the brand blurb takes the full width and the three link columns
   line up under it, rather than Explore sitting beside the blurb and
   Programmes starting a new row on its own. */
@media (max-width: 960px) {
  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7) var(--space-5);
  }
  .footer__grid > :nth-child(1) { grid-column: 1 / -1; }
}

/* On phones the two short link columns (Explore, Programmes) sit side by side,
   with the brand blurb and the contact block spanning the full width. */
@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-5);
  }
  .footer__grid > :nth-child(1),
  .footer__grid > :nth-child(4) { grid-column: 1 / -1; }
}

.footer__brand img { width: 150px; height: 58px; margin-bottom: var(--space-4); }
.footer__brand p {
  color: var(--text-on-dark-muted);
  font-size: var(--step--1);
  line-height: var(--lh-relaxed);
  max-width: 34ch;
}

.footer h2 {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--space-4);
}

.footer ul { list-style: none; }
.footer li + li { margin-top: var(--space-3); }
.footer a {
  color: var(--text-on-dark-muted);
  font-size: var(--step--1);
  text-decoration: none;
}
.footer a:hover { color: var(--gold-400); text-decoration: underline; }

.footer__contact li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--text-on-dark-muted);
  font-size: var(--step--1);
  line-height: var(--lh-normal);
}
/* the two phone numbers are separate links, so they get separate lines; a
   flex column keeps the hover underline the width of each number, not the
   whole column */
.footer__contact li > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.footer__contact svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--gold-400);
}

.footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-full);
  color: var(--text-on-dark);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.footer__social a:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: #24160A;
}
.footer__social svg { width: 19px; height: 19px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--step--2);
  color: rgba(255, 255, 255, 0.55);
}
.footer__bottom p { color: inherit; }
.footer__bottom a { font-size: inherit; color: inherit; }

/* the credit line sits with the other footer-bottom items */
.footer__credit a {
  color: rgba(255, 255, 255, 0.72);
  font-size: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.footer__credit a:hover {
  color: var(--gold-400);
  border-bottom-color: var(--gold-400);
  text-decoration: none;
}

/* --- footer link hover: underline grows from the left ---------------------- */
.footer ul a,
.footer__contact a {
  position: relative;
  display: inline-block;
}
.footer ul a::after,
.footer__contact a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.footer ul a:hover,
.footer__contact a:hover { text-decoration: none; }
.footer ul a:hover::after,
.footer__contact a:hover::after { transform: scaleX(1); }

/* the bottom row centres on small screens so the three lines stack cleanly */
@media (max-width: 720px) {
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-2);
  }
}

/* Footer links are 22px tall, which clears WCAG 2.2 only via the spacing
   exception. On touch screens that is still fiddly, so give them real height
   and take the difference back out of the gap. */
.footer ul a,
.footer__contact a { padding-block: 5px; }
.footer ul a::after,
.footer__contact a::after { bottom: 3px; }
@media (max-width: 860px) {
  .footer li + li { margin-top: var(--space-2); }
}