/**
 * Site header.
 *
 * One row: brand, menu, and the two things a visitor is there to do — join, or
 * sign in. Signed in, those two collapse into the member's own name, because
 * once you are in, the header's job changes from selling to navigating.
 */

.wmfh {
  position: sticky;
  top: 0;
  z-index: 9000;
  background: #fff;
  border-bottom: 1px solid var(--wmf-line, #EFEBE2);
  box-shadow: 0 1px 3px rgba(12, 65, 102, .05);
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (max-width: 782px) {
  .admin-bar .wmfh { top: 46px; }
}

.wmfh * { box-sizing: border-box; }

.wmfh__in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 26px;
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* brand ------------------------------------------------------------------ */

.wmfh__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  text-decoration: none;
}

.wmfh__logo {
  display: block;
  height: 56px;
  width: auto;
}

.wmfh__word {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wmf-red, #DE2028);
  line-height: 1.1;
  max-width: 12ch;
}

/* menu ------------------------------------------------------------------- */

.wmfh__panel {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1;
  min-width: 0;
}

.wmfh__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  /* Pushed right so the menu sits with the buttons, not against the logo. */
  margin: 0 0 0 auto;
  padding: 0;
  flex-wrap: nowrap;
}

.wmfh__nav li { margin: 0; position: relative; }

.wmfh__nav a {
  display: block;
  padding: 10px 11px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--wmf-ink, #25303A);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background .15s;
}

.wmfh__nav a:hover,
.wmfh__nav a:focus-visible {
  color: var(--wmf-red, #DE2028);
  background: var(--wmf-red-050, #FDF2F2);
}

.wmfh__nav .current-menu-item > a,
.wmfh__nav .current_page_item > a,
.wmfh__nav .current-menu-ancestor > a { color: var(--wmf-red, #DE2028); }

/* A parent item gets a caret, and its children a panel. */
.wmfh__nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .65;
}

.wmfh__nav .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #E9E5DB;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(12, 65, 102, .06), 0 24px 46px -22px rgba(12, 65, 102, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 10;
}

.wmfh__nav li:hover > .sub-menu,
.wmfh__nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wmfh__nav .sub-menu a { font-size: 14.5px; font-weight: 500; }

/* Submenus open on hover above the breakpoint, so the toggle is not drawn. */
.wmfh__sub { display: none; }

/* actions ---------------------------------------------------------------- */

.wmfh__auth {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}

/* The portal's own button, brought outside #wmf-portal so the header and the
   screens below it are visibly the same system: 15px/600, a 44px pill, and a
   transition on colour alone. No glow and no lift — the design system has
   neither, and a header that invents them stops matching the site. */
.wmfh__join,
.wmfh__sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 26px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}

.wmfh__ico { width: 18px; height: 18px; flex: none; }

.wmfh__join {
  background: var(--wmf-red, #DE2028);
  color: #fff;
}

.wmfh__join:hover,
.wmfh__join:focus-visible {
  background: var(--wmf-red-700, #B5171E);
  color: #fff;
}

.wmfh__sign {
  background: transparent;
  color: var(--wmf-navy, #0C4166);
  border-color: var(--wmf-line-strong, #CFC9B9);
}

.wmfh__sign:hover,
.wmfh__sign:focus-visible {
  border-color: var(--wmf-navy, #0C4166);
  background: var(--wmf-surface-2, #F4F0E9);
  color: var(--wmf-navy, #0C4166);
}

/* account ---------------------------------------------------------------- */

.wmfh__acct { position: relative; }

.wmfh__me {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  cursor: pointer;
  border: 1.5px solid #E4E0D6;
  border-radius: 999px;
  padding: 5px 17px 5px 5px;
  font: inherit;
  line-height: 1;
  transition: border-color .16s, box-shadow .16s;
}

.wmfh__me:hover,
.wmfh__me:focus-visible,
.wmfh__acct.is-open .wmfh__me {
  border-color: var(--wmf-navy, #0C4166);
  background: var(--wmf-surface-2, #F4F0E9);
}

.wmfh__av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #0C4166, #12444F);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.wmfh__nm {
  font-size: 15px;
  font-weight: 700;
  color: var(--wmf-ink, #25303A);
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wmfh__dot {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--wmf-red, #DE2028);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.wmfh__cx {
  width: 0;
  height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5.5px solid var(--wmf-red, #DE2028);
  flex: none;
  transition: transform .16s;
}

.wmfh__me[aria-expanded="true"] .wmfh__cx { transform: rotate(180deg); }

/* dropdown --------------------------------------------------------------- */

.wmfh__drop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 292px;
  z-index: 9001;
  padding: 8px;
  background: #fff;
  border: 1px solid #E9E5DB;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(12, 65, 102, .06), 0 26px 52px -22px rgba(12, 65, 102, .55);
  max-height: min(78vh, 620px);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}

.wmfh__acct.is-open .wmfh__drop { opacity: 1; visibility: visible; transform: none; }

.wmfh__who {
  padding: 11px 14px 13px;
  border-bottom: 1px solid var(--wmf-line, #EFEBE2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wmfh__who strong { font-size: 15px; font-weight: 700; color: var(--wmf-ink, #25303A); }

.wmfh__who span {
  font-size: 12px;
  color: var(--wmf-muted, #6B6459);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wmfh__grp {
  margin: 0;
  padding: 13px 14px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #948D80;
}

.wmfh__list { list-style: none; margin: 0; padding: 0; }
.wmfh__list li { margin: 0; }

.wmfh__drop a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--wmf-ink, #25303A);
  text-decoration: none;
}

.wmfh__drop a:hover,
.wmfh__drop a:focus-visible { background: #F6F2EA; color: var(--wmf-navy, #0C4166); }

.wmfh__list .is-on a { background: var(--wmf-navy, #0C4166); color: #fff; font-weight: 600; }

.wmfh__out {
  border-top: 1px solid var(--wmf-line, #EFEBE2);
  margin-top: 8px;
  padding-top: 6px;
}

.wmfh__out a { color: var(--wmf-red-700, #B5171E); font-weight: 600; }
.wmfh__out a:hover { background: var(--wmf-red-050, #FDF2F2); color: var(--wmf-red-700, #B5171E); }

/* burger ----------------------------------------------------------------- */

.wmfh__chk {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.wmfh__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  cursor: pointer;
  flex: none;
}

.wmfh__burger span {
  display: block;
  height: 2px;
  background: var(--wmf-ink, #25303A);
  border-radius: 2px;
  transition: transform .18s, opacity .18s;
}

.wmfh__chk:focus-visible + .wmfh__burger { outline: 2px solid var(--wmf-red, #DE2028); outline-offset: 3px; }
.wmfh__chk:checked + .wmfh__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wmfh__chk:checked + .wmfh__burger span:nth-child(2) { opacity: 0; }
.wmfh__chk:checked + .wmfh__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1140px) {
  .wmfh__in { min-height: 74px; gap: 14px; }
  .wmfh__logo { height: 46px; }
  .wmfh__word { font-size: 19px; }
  .wmfh__burger { display: flex; }

  .wmfh__panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--wmf-line, #EFEBE2);
    padding: 12px 24px 24px;
    box-shadow: 0 20px 36px -26px rgba(12, 65, 102, .6);
    max-height: 78vh;
    overflow: auto;
  }

  /* Block, not flex: as a flex column the panel overflows its own start edge
     and the first links become unreachable. */
  .wmfh__chk:checked ~ .wmfh__panel { display: block; }

  .wmfh__nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin-left: 0; }
  .wmfh__nav a { padding: 13px 4px; border-radius: 0; border-bottom: 1px solid #F3F0E8; }

  .wmfh__nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 0 16px;
    min-width: 0;
  }

  /* A parent's children are folded away until asked for — but only once the
     toggle that asks for them exists. Without it the panel stays as it was,
     so a browser that runs no script still reaches every page. */
  .wmfh__nav .has-toggle > .sub-menu { display: none; }
  .wmfh__nav .has-toggle.is-open > .sub-menu { display: block; }

  /* The button takes over from the caret drawn on the link, so there is one
     arrow rather than two, and it is the one that can be tapped. */
  .wmfh__nav .has-toggle > a::after { display: none; }

  .wmfh__nav .has-toggle > a {
    display: inline-block;
    width: calc(100% - 52px);
    vertical-align: middle;
    border-bottom: 0;
  }

  .wmfh__sub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    background: none;
    border: 0;
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .wmfh__sub::before {
    content: "";
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    opacity: .65;
    transition: transform .15s;
  }

  .wmfh__sub:hover::before,
  .wmfh__sub[aria-expanded="true"]::before { opacity: 1; }
  .wmfh__sub[aria-expanded="true"]::before { transform: rotate(180deg); }
  .wmfh__sub:focus-visible { outline: 2px solid var(--wmf-red, #DE2028); outline-offset: 2px; }

  /* The row keeps its rule, now that the link no longer draws one. */
  .wmfh__nav .has-toggle { border-bottom: 1px solid #F3F0E8; }

  .wmfh__auth { width: 100%; margin: 18px 0 0; flex-wrap: wrap; }
  .wmfh__join, .wmfh__sign { flex: 1; justify-content: center; }
  .wmfh__acct { width: 100%; }
  .wmfh__me { width: 100%; justify-content: flex-start; }
  .wmfh__nm { max-width: none; }
  .wmfh__cx { display: none; }

  .wmfh__drop {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-top: 1px solid #E9E5DB;
    border-radius: 0;
    margin-top: 10px;
    padding: 6px 0 0;
    max-height: none;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wmfh__join, .wmfh__sign, .wmfh__me, .wmfh__drop, .wmfh__cx, .wmfh__nav a, .wmfh__burger span {
    transition: none;
  }
}

@media print { .wmfh { display: none !important; } }

.wmfh__av--img { object-fit: cover; background: none; padding: 0; }