/* Shared Nightshift footer.
   One component is used on every public page; only its layout adapts by viewport. */
.site-footer {
  padding: 0;
  border-top: 1px solid var(--line);
  background: rgba(16, 11, 28, 0.92);
  text-align: left;
}

.site-footer .footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 28px var(--gutter) 0;
}

.site-footer .site-footer-inner {
  /* Must match the page content rail (main > section > .wrap, footer > .wrap in
     assets/scss/layout/_rails.scss) or footer copy sits on a different left
     edge than the content above it. --ns-rail is the canonical width. */
  width: min(calc(100% - 2 * var(--ns-gutter, 24px)), var(--ns-rail, 1120px));
  max-width: var(--ns-rail, 1120px);
  margin-inline: auto;
  padding: 28px 0 30px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.9fr);
  align-items: start;
  gap: 24px 48px;
}

.site-footer .footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

/* The footer reuses the same Nightshift logo component as the header. */
.site-footer .logo {
  position: relative !important;
  z-index: 1;
  left: auto !important;
  top: auto !important;
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 2px 8px 3px 1px;
  color: #fff !important;
  font:
    400 1.78rem/0.82 "Yellowtail",
    cursive;
  letter-spacing: -0.045em;
  transform: rotate(-2deg) !important;
  transform-origin: center;
}

.site-footer .logo em {
  color: #fff !important;
  font-style: normal;
}

.site-footer .logo:hover,
.site-footer .logo:focus-visible {
  color: #fff !important;
  transform: rotate(2deg) scale(1.04) !important;
}

.site-footer .logo .star,
.site-footer .logo .moon {
  position: absolute;
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease;
  pointer-events: none;
  font-size: 0 !important;
  color: transparent !important;
}

.site-footer .logo .star {
  width: 8px;
  height: 8px;
}

.site-footer .logo .star.s1 {
  top: -7px;
  left: -4px;
}
.site-footer .logo .star.s2 {
  top: -11px;
  left: 40px;
  width: 6px;
  height: 6px;
}
.site-footer .logo .star.s3 {
  bottom: -6px;
  left: 38px;
  width: 5px;
  height: 5px;
}

.site-footer .logo .star::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(
    50% 0,
    61% 39%,
    100% 50%,
    61% 61%,
    50% 100%,
    39% 61%,
    0 50%,
    39% 39%
  );
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.site-footer .logo .moon {
  top: -18px;
  right: -10px;
  width: 16px;
  height: 16px;
}

.site-footer .logo .moon::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: transparent;
  box-shadow: -4px 0 0 0 #fff;
}

.site-footer .logo:hover .star,
.site-footer .logo:hover .moon,
.site-footer .logo:focus-visible .star,
.site-footer .logo:focus-visible .moon {
  opacity: 1;
  transform: scale(1);
}

.site-footer .footer-brand p,
.site-footer .copyright {
  margin: 0;
  color: var(--muted);
}

.site-footer .footer-brand p {
  max-width: 31ch;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* footer-contact is a <section>, so it also matched the site-wide
   `section { padding: 72px 0 }` meant for page sections. That added 144px of
   padding, which pushed the phone and email well below the logo and made
   the footer 359px tall instead of 215px. */
.site-footer .footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  padding: 0;
  text-align: right;
}

.site-footer .footer-contact a {
  /* Phone and email are the only routes to the band from the footer, so give
     them a 44px tap target instead of the 19px of bare text they had. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(247, 243, 237, 0.86);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
}

.site-footer .footer-contact a:hover,
.site-footer .footer-contact a:focus-visible {
  color: #fff;
}

.site-footer .copyright {
  grid-column: 1 / -1;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid rgba(223, 178, 255, 0.12);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.035em;
}

.site-footer .copyright .footer-year {
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

@media (max-width: 760px) {
  .site-footer .footer-social {
    padding-top: 24px;
  }

  .site-footer .site-footer-inner {
    /* Match the mobile content rail in assets/scss/layout/_responsive.scss.
       The old min(100% - 40px, 620px) cap put the footer 52px further in than
       the content above it on small screens. */
    width: calc(100% - 36px);
    max-width: none;
    padding: 24px 0 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
  }

  .site-footer .footer-brand,
  .site-footer .footer-contact {
    align-items: center;
    text-align: center;
  }

  .site-footer .footer-brand p {
    max-width: 34ch;
  }

  .site-footer .copyright {
    padding-top: 18px;
    text-align: center;
  }
}

/* Closing enquiries are one clear action, with supporting copy alongside. */
@media (min-width: 901px) {
  main > .wrap > .footer-cta,
  main .home-cta .footer-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    max-width: 1040px;
    align-items: center;
    gap: 10px 40px;
    padding: 28px 32px;
    text-align: left;
  }
  main .footer-cta .mini-title,
  main .footer-cta h2,
  main .footer-cta p,
  main .home-cta .footer-cta h2,
  main .home-cta .footer-cta p {
    grid-column: 1;
    margin: 0;
    text-align: left;
  }
  main .footer-cta .mini-title {
    font-size: 0.72rem;
  }
  main .footer-cta p {
    max-width: 58ch;
  }
  main .footer-cta > .button {
    grid-column: 2;
    grid-row: 1 / 4;
    margin: 0;
  }

  .site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0 24px;
    /* Inset by the same rail the content above uses. This used to be a hardcoded
       1040px column, which is narrower than the 1120px content rail, so the
       social row and footer copy drifted 80px in from the page content. */
    padding: 24px max(32px, calc((100% - var(--ns-rail, 1120px)) / 2)) 0;
  }
  .site-footer .footer-social {
    justify-content: flex-start;
    padding: 0;
  }
  .site-footer .a11y-footer-entry {
    justify-content: flex-end;
    margin: 0;
  }
  .site-footer .site-footer-inner {
    grid-column: 1 / -1;
    width: 100%;
    padding-top: 24px;
  }
}

@media (max-width: 760px) {
  .site-footer .a11y-footer-entry {
    margin: 8px 0 0;
  }
  .site-footer .site-footer-inner {
    padding-top: 18px;
    gap: 16px;
  }
}

/* Tablet / narrow-laptop bridge: shared closing CTAs and the footer should not
   jump from a wide desktop split directly to the phone stack. */
@media (min-width: 761px) and (max-width: 900px) {
  main > .wrap > .footer-cta,
  main .home-cta .footer-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 44rem);
    max-width: 44rem;
    margin-inline: auto;
    gap: 12px;
    padding: 26px 28px;
    text-align: center !important;
  }

  main > .wrap > .footer-cta > :is(.mini-title, h2, p, .button),
  main .home-cta .footer-cta > :is(.mini-title, h2, p, .button) {
    grid-column: 1;
    margin-inline: auto;
    text-align: center !important;
  }

  .site-footer .site-footer-inner {
    width: min(calc(100% - clamp(48px, 7vw, 72px)), 44rem);
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    text-align: center;
  }

  .site-footer .footer-brand,
  .site-footer .footer-contact {
    align-items: center;
    text-align: center;
  }

  .site-footer .copyright {
    text-align: center;
  }
}