:root {
  --masthead-height: 88px;
  --masthead-paper: #fbfaf6;
}

html {
  scroll-padding-top: calc(var(--masthead-height) + 20px);
}

.site-masthead,
.site-masthead * {
  box-sizing: border-box;
}

.site-masthead {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  min-height: var(--masthead-height);
  padding: 0 clamp(1.5rem, 5vw, 5rem);
  background: var(--masthead-paper);
  border-bottom: 1px solid rgba(6, 27, 55, 0.12);
}

.masthead-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  text-decoration: none;
}

.masthead-brand img {
  display: block;
  width: auto;
  height: 50px;
}

.masthead-links {
  display: flex;
  flex: 1;
  align-items: center;
  gap: clamp(24px, 2.5vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.masthead-links li:first-child {
  margin-left: auto;
}

.masthead-links li:last-child {
  margin-left: auto;
}

/* Desktop only: centre the nav on the PAGE, not in the gap between the logo and the
   Apply button. The button is wider than the logo, so auto-margins alone put the links
   ~30px left of true centre, visibly out of step with every centred section below.
   Taking both outer elements out of flow lets the links centre on the masthead itself.
   Scoped above the 760px drawer breakpoint so the mobile menu is untouched. */
@media (min-width: 761px) {
  .site-masthead { position: sticky; justify-content: center; }
  .masthead-brand { position: absolute; left: clamp(1.5rem, 5vw, 5rem); }
  .masthead-links { flex: 0 1 auto; justify-content: center; }
  .masthead-links li:first-child { margin-left: 0; }
  .masthead-links li:last-child {
    position: absolute;
    right: clamp(1.5rem, 5vw, 5rem);
    margin-left: 0;
  }
}

.masthead-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #061b37;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  transition: color 0.18s ease;
}

.masthead-links a:hover {
  color: #256877;
}

.masthead-links a:not(.masthead-apply):hover,
.masthead-links a[aria-current="page"],
.masthead-links a[aria-current="location"] {
  text-decoration: underline;
  text-decoration-color: #256877;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

/* Client request: Charities teal. Filled with NAVY text, not white — teal as text on
   paper is 2.66:1 and white on teal is 2.77:1; both fail. Navy on teal is 6.21:1. */
.masthead-links .masthead-apply {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #00a8d6;
  border-radius: 1px;
  background: #00a8d6;
  color: #061b37;
  font-size: 12px;
  font-weight: 700;
}

.masthead-links .masthead-apply:hover {
  border-color: #0093bb;
  background: #0093bb;
  color: #061b37;
}

.site-masthead :focus-visible {
  outline: 2px solid #256877;
  outline-offset: 5px;
}

.masthead-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: #061b37;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
}

.masthead-toggle-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 10px;
}

.masthead-toggle-bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.2s ease;
}

.masthead-toggle-bars i:first-child {
  top: 0;
}

.masthead-toggle-bars i:last-child {
  bottom: 0;
}

.site-masthead.open .masthead-toggle-bars i:first-child {
  transform: translateY(4.5px) rotate(45deg);
}

.site-masthead.open .masthead-toggle-bars i:last-child {
  transform: translateY(-4.5px) rotate(-45deg);
}

@media (max-width: 760px) {
  :root {
    --masthead-height: 76px;
  }

  .masthead-brand img {
    height: 44px;
  }

  .masthead-toggle {
    display: inline-flex;
  }

  .masthead-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - var(--masthead-height));
    margin: 0;
    padding: 10px 24px 24px;
    overflow-y: auto;
    border-bottom: 1px solid rgba(6, 27, 55, 0.16);
    background: var(--masthead-paper);
    box-shadow: 0 14px 22px rgba(9, 19, 22, 0.08);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  .site-masthead.open .masthead-links {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .masthead-links li,
  .masthead-links li:first-child,
  .masthead-links li:last-child {
    margin: 0;
  }

  .masthead-links li + li {
    border-top: 1px solid rgba(6, 27, 55, 0.1);
  }

  .masthead-links a {
    display: flex;
    min-height: 55px;
    padding: 12px 0;
    font-size: 17px;
    font-weight: 500;
  }

  .masthead-links li:last-child {
    padding-top: 17px;
    border-top: 0;
  }

  .masthead-links .masthead-apply {
    justify-content: center;
    min-height: 46px;
    padding: 12px 16px;
    font-size: 13px;
  }

  .masthead-links a[aria-current="page"],
  .masthead-links a[aria-current="location"] {
    color: #256877;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-masthead *,
  .site-masthead *::before,
  .site-masthead *::after {
    transition: none !important;
  }
}