/*
  Shared navigation menu styles.
  Colours, fonts and sizes come from assets/css/theme.css.
  Optional --nav-* custom properties in theme.css change the look of the
  links (letter case, size, current-page style) without editing this file;
  the fallbacks below are the template's defaults.

  Breakpoint: the mobile menu applies under 768 px. This must match
  DESKTOP_QUERY in nav.js.

  Do not add transform, filter or backdrop-filter to .site-header: they
  would trap the fixed mobile panel inside the header.
*/

/*
  Sections reached from a link (in the menu, in the page, or from another
  page) stop just below the sticky header instead of underneath it.
  Set on elements with an id rather than as scroll-padding on <html>:
  scroll-padding makes the page jump when the header itself gets focus.
*/
:where([id]:not(.site-nav__panel)) {
  scroll-margin-top: calc(var(--nav-bar-height) + var(--space-4));
}

/* Reserve the bar's space before the script runs, so the page does not jump. */
[data-site-nav] {
  min-height: var(--nav-bar-height);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--colour-paper);
  border-bottom: 1px solid var(--colour-line);
  font-family: var(--font-body);
}

.site-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--nav-bar-height);
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/*
  Skip link: clipped out of sight (but still read by screen readers) until it
  receives keyboard focus. Do not hide it by moving it above the page instead:
  iPhones bounce past the top of the page when you scroll back up, which
  would reveal it as a blue bar above the header.
*/
.site-nav__skip {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
  padding: var(--space-2) var(--space-4);
  background: var(--colour-accent);
  color: var(--colour-on-accent);
  border-radius: var(--radius);
  white-space: nowrap;
  clip-path: inset(50%);
}

.site-nav__skip:focus {
  clip-path: none;
  color: var(--colour-on-accent);
}

.site-nav__brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--colour-ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.site-nav__brand:hover {
  color: var(--colour-accent-strong);
}

.site-nav__logo {
  display: block;
  width: var(--nav-logo-width, 150px);
  max-width: 100%;
  height: auto;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  color: var(--colour-ink);
  font-size: var(--nav-link-size, inherit);
  letter-spacing: var(--nav-link-tracking, normal);
  text-transform: var(--nav-link-transform, none);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--nav-current-radius, var(--radius));
}

.site-nav__link:hover {
  color: var(--colour-accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.site-nav__link[aria-current="page"] {
  color: var(--colour-accent);
  font-weight: var(--nav-current-weight, 600);
  text-decoration: var(--nav-current-decoration, underline);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.4em;
  border: var(--nav-current-border, 1px solid transparent);
}

.site-nav__skip:focus-visible,
.site-nav__brand:focus-visible,
.site-nav__link:focus-visible,
.site-nav__toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Optional action button (for example "Call"), shown at every width */
.site-nav__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  min-height: 2.75rem;
  margin-left: auto;
  padding: 0 var(--space-4);
  border-radius: var(--nav-action-radius, var(--radius));
  background: var(--colour-accent);
  color: var(--colour-on-accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__action:hover {
  background: var(--colour-accent-strong);
  color: var(--colour-on-accent);
}

.site-nav__action:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.site-nav__action-icon {
  width: 1.05em;
  height: 1.05em;
  fill: currentColor;
}

.site-nav__action-short {
  display: none;
}

/* The long label needs room beside the full menu, so it waits for wide screens */
@media (max-width: 1099.98px) {
  .site-nav__action-long {
    display: none;
  }

  .site-nav__action-short {
    display: inline;
  }
}

/* Hamburger button */
.site-nav__toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: calc(var(--space-2) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--colour-ink);
  cursor: pointer;
}

.site-nav__icon,
.site-nav__icon::before,
.site-nav__icon::after {
  display: block;
  width: 1.375rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--duration-fast) var(--easing),
    background-color var(--duration-fast) var(--easing);
}

.site-nav__icon {
  position: relative;
}

.site-nav__icon::before,
.site-nav__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-nav__icon::before {
  transform: translateY(-7px);
}

.site-nav__icon::after {
  transform: translateY(7px);
}

/* Bars become a cross while the menu is open */
.site-nav__toggle[aria-expanded="true"] .site-nav__icon {
  background-color: transparent;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__icon::before {
  transform: rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__icon::after {
  transform: rotate(-45deg);
}

/* Desktop: 768 px and wider */
@media (min-width: 768px) {
  .site-nav__panel {
    margin-left: auto;
  }

  .site-nav__action {
    margin-left: var(--nav-link-gap);
  }

  .site-nav__list {
    display: flex;
    gap: var(--nav-link-gap);
  }

  .site-nav__link {
    display: inline-block;
    padding: var(--nav-link-padding, var(--space-2) var(--space-1));
    white-space: nowrap; /* a label never breaks over two lines */
  }
}

/* Mobile: under 768 px */
@media (max-width: 767.98px) {
  .site-nav__toggle {
    display: inline-flex;
  }

  /* The panel fills the screen below the bar and scrolls on its own */
  .site-nav__panel {
    position: fixed;
    top: var(--nav-bar-height);
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-4) var(--page-gutter) var(--space-7);
    background: var(--colour-surface);
    border-top: 1px solid var(--colour-line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity var(--duration-fast) var(--easing),
      transform var(--duration-fast) var(--easing),
      visibility 0s linear var(--duration-fast);
  }

  .site-header.is-open .site-nav__panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--duration-fast) var(--easing),
      transform var(--duration-fast) var(--easing),
      visibility 0s linear 0s;
  }

  .site-nav__list li {
    border-bottom: 1px solid var(--colour-line);
  }

  .site-nav__link {
    display: block;
    padding: var(--space-4) var(--space-1);
    font-size: var(--text-lg);
  }

  .site-nav__link,
  .site-nav__link[aria-current="page"] {
    border: 0;
  }
}

/*
  Stops the page behind the open mobile menu from scrolling.
  Lock <html> only: putting overflow: hidden on <body> as well makes the body
  its own scroll container, which breaks the sticky header on scrolled pages.
*/
html.site-nav-lock {
  overflow: hidden;
}