/* The chrome: one navbar and one footer, the same on all forty-seven sites.
 *
 * Loaded BEFORE the theme's styles.css, so a theme can override any of it
 * without !important. In practice a theme should not need to: everything
 * here that is a colour, a family or a size reads a custom property, and
 * setting those in styles.css is how a brand paints its bar. See the token
 * list at the bottom of chrome.mjs.
 *
 * The fallbacks below are deliberately plain. A theme that sets no tokens
 * gets a correct, legible, accessible bar in black on white -- never a
 * broken one. That is the difference between a default and a decision.
 */

.sitehead,
.sitefoot {
  --_bg: var(--nav-bg, #fff);
  --_ink: var(--nav-ink, #12161c);
  --_soft: var(--nav-ink-soft, #5b6676);
  --_rule: var(--nav-rule, rgba(18, 22, 28, 0.14));
  --_hover: var(--nav-hover, #0b57d0);
  --_panel: var(--nav-panel, #fff);
  --_cta-bg: var(--nav-cta-bg, #0b57d0);
  --_cta-ink: var(--nav-cta-ink, #fff);
  --_font: var(--nav-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  --_size: var(--nav-size, 0.9375rem);
  --_track: var(--nav-track, 0);
  --_case: var(--nav-case, none);
  --_weight: var(--nav-weight, 500);
  --_h: var(--nav-h, 72px);
  --_radius: var(--nav-radius, 6px);
}

/* ---------------------------------------------------------------- *
 * THE BAR
 * ---------------------------------------------------------------- */

.sitehead {
  /* `relative` and not `static`, so the z-index below actually applies.
   * z-index is ignored on a static element, so on the twenty-six themes that
   * do not pin their bar it was doing nothing -- and Top Source's hero, which
   * is positioned and pulls itself up under the masthead, painted straight
   * over the navbar. The bar was present, 95px tall and completely invisible. */
  position: relative;
  z-index: 100;
  background: var(--_bg);
  border-bottom: 1px solid var(--_rule);
  font-family: var(--_font);
}

/* Following the reader down the page is a per-site decision, not a house
 * rule: a register you scroll wants its heading to stay put, a letter does
 * not. Themes opt out with `sticky: false` in nav.mjs. */
.sitehead--sticky {
  position: sticky;
  top: 0;
}

.sitehead__wrap {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  width: min(100% - 32px, var(--nav-width, 1180px));
  margin-inline: auto;
  min-height: var(--_h);
}

.sitehead__logo {
  flex: none;
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* --logo-h is set per brand on the element: a wide wordmark and a
 * mark-plus-wordmark need different heights to carry the same weight. */
.sitehead__img {
  display: block;
  height: var(--logo-h, 34px);
  width: auto;
}

/* Two brands own no logo file. The name, set in the brand's display face, is
 * the wordmark for those -- never a broken <img> with its alt text showing. */
.sitehead__name {
  color: var(--_ink);
  font-family: var(--_font);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sitenav {
  flex: 1 1 auto;
  min-width: 0;
}

.sitenav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(2px, 1.2vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitenav__item > a,
.sitenav__disclose {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 2px;
  border: 0;
  background: none;
  color: var(--_ink);
  font: inherit;
  font-size: var(--_size);
  font-weight: var(--_weight);
  letter-spacing: var(--_track);
  /* A theme that sets its own small labels in caps gets a bar that matches;
   * one that does not is left alone. Read off the page, not chosen here. */
  text-transform: var(--_case);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.sitenav__item > a:hover,
.sitenav__disclose:hover,
.sitenav__item > a:focus-visible,
.sitenav__disclose:focus-visible {
  color: var(--_hover);
}

/* The page you are on, marked on the link itself rather than only in the
 * accessibility tree -- aria-current is not a visual affordance. */
.sitenav__item.is-here > a,
.sitenav__has.is-here > .sitenav__disclose {
  color: var(--_hover);
  box-shadow: inset 0 -2px 0 currentColor;
}

.sitenav__caret {
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: var(--_soft);
  margin-top: 2px;
  transition: transform 0.15s;
}

/* ---------------------------------------------------------------- *
 * THE SIX ARRANGEMENTS
 *
 * Same markup, same behaviour, six different bars. See the note in
 * chrome.mjs for why these exist. Everything below 900px is deliberately
 * untouched by them: the phone layout is the one part that should not be
 * anybody's design decision.
 * ---------------------------------------------------------------- */

@media (min-width: 900px) {
  /* left -- links beside the wordmark, acts far right (the default) */
  .sitehead--left .sitenav {
    margin-right: auto;
  }

  /* right -- wordmark alone, links and acts travelling together */
  .sitehead--right .sitenav {
    margin-left: auto;
    flex: 0 1 auto;
  }

  /* centre -- links held in the middle of the bar, acts right */
  .sitehead--centre .sitenav__list {
    justify-content: center;
  }

  /* split -- the wordmark in the middle, the links divided round it.
   * `order` moves the first half of the list before the logo; the list is
   * still one <ul> in one order in the document, so the reading order and
   * the tab order are unchanged. */
  .sitehead--split .sitehead__wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .sitehead--split .sitehead__logo {
    order: 2;
    justify-self: center;
  }

  .sitehead--split .sitenav {
    order: 1;
  }

  .sitehead--split .sitehead__acts {
    order: 3;
    justify-self: end;
  }

  .sitehead--split .sitenav__list {
    justify-content: flex-start;
  }

  /* stacked -- wordmark and acts on the top tier, links on their own rule
   * underneath, which is the shape a lot of these brands already had. */
  .sitehead--stacked .sitehead__wrap {
    flex-wrap: wrap;
    padding-top: 14px;
  }

  .sitehead--stacked .sitehead__logo {
    margin-right: auto;
  }

  .sitehead--stacked .sitenav {
    order: 5;
    flex-basis: 100%;
    border-top: 1px solid var(--_rule);
    margin-top: 12px;
  }

  .sitehead--stacked .sitenav__list {
    gap: clamp(8px, 2vw, 30px);
  }

  .sitehead--stacked .sitenav__item > a,
  .sitehead--stacked .sitenav__disclose {
    padding-block: 12px;
  }

  /* rail -- taller, wider-tracked, links right, an outlined button */
  .sitehead--rail .sitehead__wrap {
    min-height: calc(var(--_h) + 22px);
  }

  .sitehead--rail .sitenav {
    margin-left: auto;
    flex: 0 1 auto;
  }

  .sitehead--rail .sitenav__item > a,
  .sitehead--rail .sitenav__disclose {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}

/* An outlined CTA, for the themes whose bar is quieter than a filled block.
 * Still a button, still the same target size. */
.sitehead--outline .sitehead__cta {
  background: none;
  color: var(--_cta-bg);
  border: 1.5px solid currentColor;
  padding-block: 9.5px;
}

.sitehead--outline .sitehead__cta:hover {
  background: var(--_cta-bg);
  color: var(--_cta-ink);
  filter: none;
}

/* ---------------------------------------------------------------- *
 * THE DISCLOSURE
 *
 * Hover and focus-within open it with no JS. The JS adds click, Escape and
 * outside-click, and sets .is-open, which must win over :hover so that a
 * panel closed by Escape does not spring back under a stationary cursor.
 * ---------------------------------------------------------------- */

.sitenav__has {
  position: relative;
}

.sitenav__sub {
  position: absolute;
  top: calc(100% + 1px);
  left: -14px;
  z-index: 10;
  display: grid;
  gap: 1px;
  min-width: 248px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--_panel);
  border: 1px solid var(--_rule);
  border-radius: var(--_radius);
  box-shadow: 0 12px 28px rgba(8, 12, 20, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.14s,
    transform 0.14s,
    visibility 0.14s;
}

.sitenav__has:hover > .sitenav__sub,
.sitenav__has:focus-within > .sitenav__sub,
.sitenav__has.is-open > .sitenav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sitenav__has.is-open > .sitenav__disclose .sitenav__caret {
  transform: rotate(180deg);
}

.sitenav__subitem > a {
  display: block;
  padding: 9px 18px;
  color: var(--_ink);
  font-size: var(--_size);
  font-weight: var(--_weight);
  letter-spacing: var(--_track);
  text-decoration: none;
  white-space: nowrap;
}

.sitenav__subitem > a:hover,
.sitenav__subitem > a:focus-visible {
  color: var(--_hover);
  background: color-mix(in srgb, var(--_hover) 8%, transparent);
}

.sitenav__subitem.is-here > a {
  color: var(--_hover);
  font-weight: 700;
}

/* ---------------------------------------------------------------- *
 * PHONE AND APPLY
 * ---------------------------------------------------------------- */

.sitehead__acts {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 18px);
  margin: 0;
}

.sitehead__tel {
  color: var(--_soft);
  font-size: var(--_size);
  font-weight: 600;
  letter-spacing: var(--_track);
  text-decoration: none;
  white-space: nowrap;
}

.sitehead__tel:hover {
  color: var(--_hover);
}

/* An email address is two or three times a phone number's width. Between the
 * burger breakpoint and a comfortable desktop there is not room for both it
 * and a full set of links, and the links win: the address is in the footer of
 * every page and on the contact page. */
@media (max-width: 1150px) {
  .sitehead__tel--mail {
    display: none;
  }
}

.sitehead__cta {
  display: inline-block;
  padding: 11px 20px;
  background: var(--_cta-bg);
  color: var(--_cta-ink);
  border-radius: var(--_radius);
  font-size: var(--_size);
  font-weight: 700;
  letter-spacing: var(--_track);
  text-decoration: none;
  white-space: nowrap;
}

.sitehead__cta:hover {
  filter: brightness(1.08);
}

/* ---------------------------------------------------------------- *
 * THE BURGER
 *
 * Hidden above 900px. Drawn with one element and two shadows rather than
 * three, so the cross is one transform away.
 * ---------------------------------------------------------------- */

.sitehead__burger {
  display: none;
  flex: none;
  order: 3;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--_ink);
  cursor: pointer;
}

.sitehead__bars,
.sitehead__bars::before,
.sitehead__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition:
    transform 0.18s,
    opacity 0.18s;
}

.sitehead__bars {
  position: relative;
  margin-inline: auto;
}

.sitehead__bars::before,
.sitehead__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.sitehead__bars::before {
  top: -7px;
}

.sitehead__bars::after {
  top: 7px;
}

.sitehead.is-open .sitehead__bars {
  background: transparent;
}

.sitehead.is-open .sitehead__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.sitehead.is-open .sitehead__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------- *
 * THE SMALL LAYOUT
 *
 * The links become a panel under the bar. It is the same <ul> -- there is no
 * second copy of the navigation to drift out of step with the first.
 *
 * The six are always expanded here. A nested accordion on a phone is two
 * taps to reach a product page, and getting to a product page in one is the
 * whole reason this bar exists.
 * ---------------------------------------------------------------- */

@media (max-width: 899px) {
  .sitehead__wrap {
    flex-wrap: wrap;
    gap: 10px;
  }

  .sitehead__logo {
    order: 1;
    margin-right: auto;
  }

  /* `display: contents` so the phone and the CTA become direct children of
   * the wrap and can be ordered independently. Nested inside __acts they
   * could not: the CTA has to leave the bar and become a full-width block in
   * the panel, and a flex item cannot reflow out of its own container. */
  .sitehead__acts {
    display: contents;
  }

  /* The phone number is the one act worth keeping in a 360px bar. */
  .sitehead__tel {
    order: 2;
  }

  .sitehead__burger {
    display: block;
    order: 3;
  }

  .sitenav {
    order: 4;
    flex-basis: 100%;
    display: none;
    border-top: 1px solid var(--_rule);
    margin-inline: -16px;
    padding-inline: 16px;
    max-height: calc(100dvh - var(--_h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sitehead.is-open .sitenav {
    display: block;
  }

  .sitenav__list {
    display: block;
    padding: 6px 0 14px;
  }

  .sitenav__item > a,
  .sitenav__disclose {
    display: block;
    width: 100%;
    padding: 13px 0;
    font-size: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--_rule);
  }

  .sitenav__item.is-here > a,
  .sitenav__has.is-here > .sitenav__disclose {
    box-shadow: inset 3px 0 0 currentColor;
    padding-left: 12px;
  }

  /* Not a control at this width -- a heading over the six. */
  .sitenav__disclose {
    pointer-events: none;
    color: var(--_soft);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .sitenav__caret {
    display: none;
  }

  .sitenav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: none;
  }

  .sitenav__subitem > a {
    padding: 13px 0 13px 14px;
    font-size: 1rem;
    border-bottom: 1px solid var(--_rule);
  }

  /* The CTA leaves the bar and becomes a full-width block at the foot of the
   * open panel, where nothing competes with it. It is display:none while the
   * panel is shut, so it is not a second Apply in the tab order. */
  .sitehead__cta {
    display: none;
    order: 5;
    flex-basis: 100%;
  }

  .sitehead.is-open .sitehead__cta {
    display: block;
    margin-bottom: 14px;
    padding-block: 14px;
    text-align: center;
  }
}

/* The body must not scroll behind an open panel. */
.sitenav-locked,
.sitenav-locked body {
  overflow: hidden;
}

@media (min-width: 900px) {
  .sitenav-locked,
  .sitenav-locked body {
    overflow: visible;
  }
}

/* ---------------------------------------------------------------- *
 * THE FOOTER
 * ---------------------------------------------------------------- */

.sitefoot {
  --_fbg: var(--foot-bg, #12161c);
  --_fink: var(--foot-ink, rgba(255, 255, 255, 0.72));
  --_fhead: var(--foot-head, #fff);
  --_frule: var(--foot-rule, rgba(255, 255, 255, 0.16));
  --_flink: var(--foot-link, #fff);

  background: var(--_fbg);
  color: var(--_fink);
  font-family: var(--_font);
}

.sitefoot__wrap {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(140px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  width: min(100% - 32px, var(--nav-width, 1180px));
  margin-inline: auto;
  padding-block: clamp(36px, 5vw, 60px);
}

/* The brand set in type, not the logo.
 *
 * Only three of the forty-seven brands own a reverse logo, and the other
 * forty-four are dark ink drawn for white paper: printed on this footer they
 * are the navy-wordmark-on-navy mistake ADR-0007 records three separate times.
 * A white silhouette (`filter: brightness(0) invert(1)`) is legible but throws
 * away the mark. The name in the brand's own display face keeps the identity,
 * always reads, and the logo itself is already at the top of every page. */
.sitefoot__name {
  display: inline-block;
  color: var(--_fhead);
  font-family: var(--_font);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.sitefoot__name:hover {
  text-decoration: underline;
}

.sitefoot__blurb,
.sitefoot__contact {
  margin: 14px 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

.sitefoot__contact a {
  color: var(--_flink);
  text-decoration: none;
}

.sitefoot__contact a:hover {
  text-decoration: underline;
}

.sitefoot__h {
  margin: 0 0 14px;
  color: var(--_fhead);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sitefoot__list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitefoot__list a {
  color: var(--_fink);
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
}

.sitefoot__list a:hover {
  color: var(--_flink);
  text-decoration: underline;
}

.sitefoot__list .is-here > a {
  color: var(--_flink);
  font-weight: 700;
}

.sitefoot__fine {
  border-top: 1px solid var(--_frule);
}

.sitefoot__disc,
.sitefoot__copy {
  width: min(100% - 32px, var(--nav-width, 1180px));
  margin-inline: auto;
  font-size: 0.75rem;
  line-height: 1.6;
  opacity: 0.78;
}

.sitefoot__disc {
  padding-top: 22px;
}

.sitefoot__copy {
  padding-block: 10px 26px;
  margin-top: 0;
}

@media (max-width: 899px) {
  .sitefoot__wrap {
    grid-template-columns: 1fr 1fr;
  }

  .sitefoot__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .sitefoot__wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------------------------------------------------------------- *
 * Respect the setting. Everything above animates for polish, not meaning.
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sitenav__sub,
  .sitenav__caret,
  .sitehead__bars,
  .sitehead__bars::before,
  .sitehead__bars::after {
    transition: none;
  }
}