/* --------------------------------------------------------------------------
   Header.

   The live site runs a navy two-row header: logo on the left across both rows,
   then a utility row (search, contact, member log-in, social) above the main
   navigation. Sticky, and it collapses to a drawer under 981px.
   -------------------------------------------------------------------------- */

.rain-header {
  background: var(--rain-brand-dark);
  color: var(--rain-text-invert);
  position: sticky;
  top: 0;
  z-index: 100;
}
.rain-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.rain-header__logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.rain-header__logo img { max-height: 60px; width: auto; }

.rain-header__stack {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
}

/* ---- row 1: search + utility links + social ----------------------------- */
/*
 * One right-aligned cluster, not three groups spread across the row.
 * space-between pushed the search hard left against the logo, left the two
 * utility links floating in the middle of a 230px gap on either side, and put
 * the icons hard right — nothing shared an edge with anything. Justifying to
 * the end gives both rows the same right-hand axis, which is the alignment the
 * eye actually reads.
 *
 * No wrapping: the row must stay one line, or the header grows to three.
 */
.rain-header__utility {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.rain-search { position: relative; display: flex; align-items: center; }
.rain-search__icon {
  position: absolute; left: 12px; color: #6a7a90; pointer-events: none;
}
.rain-search input {
  font: inherit;
  font-size: .82rem;
  padding: 7px 16px 7px 34px;
  width: 230px;
  border: 1px solid transparent;
  border-radius: 100px;
  background: #fff;
  color: #1c2b33;
  transition: width .2s var(--rain-ease);
}
.rain-search input::placeholder { color: #7d8a99; }
.rain-search input:focus { width: 280px; }
@media (prefers-reduced-motion: reduce) {
  .rain-search input, .rain-search input:focus { transition: none; width: 230px; }
}
.rain-search input:focus-visible { outline: 2px solid var(--rain-accent); outline-offset: 2px; }

.rain-header__utilityMenu {
  list-style: none; display: flex; align-items: center; gap: 18px;
  flex-wrap: nowrap;
  margin: 0; padding: 0;
}
.rain-header__utilityMenu a {
  font-size: .82rem;
  color: var(--rain-accent);
  text-decoration: none;
  white-space: nowrap;
}
.rain-header__utilityMenu a:hover,
.rain-header__utilityMenu a:focus-visible { color: #fff; }
.rain-header__utilityMenu a:focus-visible { outline: 2px solid var(--rain-accent); outline-offset: 3px; }

/* ---- row 2: main nav ---------------------------------------------------- */
/* min-width:0 matters: without it the list refuses to shrink, and because the
   row is justified to the end it overflows LEFTWARDS underneath the logo
   rather than wrapping. */
.rain-nav { width: 100%; min-width: 0; display: flex; justify-content: flex-end; }
.rain-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 20px;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rain-nav__list > li { position: relative; }
.rain-nav__list > li > a {
  display: block;
  position: relative;
  padding: 8px 0;
  font-size: .95rem;
  font-weight: 500;
  color: var(--rain-text-invert);
  text-decoration: none;
  white-space: nowrap;
}
.rain-nav__list > li > a:hover,
.rain-nav__list > li.current-menu-item > a,
.rain-nav__list > li.current-menu-ancestor > a { color: var(--rain-accent); }

/* Where am I? Colour alone is easy to miss on a navy bar, and it is the only
   orientation cue a 60-item menu gives. The rule is drawn but transparent on
   every item so nothing shifts when it appears. */
.rain-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
  transition: background .18s var(--rain-ease);
}
.rain-nav__list > li > a:hover::after { background: rgba(0, 167, 232, .45); }
.rain-nav__list > li.current-menu-item > a::after,
.rain-nav__list > li.current-menu-ancestor > a::after,
.rain-nav__list > li.current-menu-parent > a::after { background: var(--rain-accent); }
@media (prefers-reduced-motion: reduce) {
  .rain-nav__list > li > a::after { transition: none; }
}

/* Dropdowns. :focus-within as well as :hover, so the keyboard can reach them. */
.rain-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  /* Aligned to the item's own left edge, less the panel's padding, so the
     first child's text sits directly under the parent's text. */
  left: -20px;
  z-index: 60;
  min-width: 258px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border-top: 3px solid var(--rain-accent);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 54, .55);
  /* display, not visibility. A `visibility: hidden` panel still counts toward
     document.scrollWidth, and eight 258px dropdowns anchored near the right
     edge put a phantom horizontal scrollbar on every page with all the menus
     shut. The fade is not worth that — and it is worth less now the third
     level flies out sideways at left:100%, another 258px past the panel.
     The comment further down this file has claimed display:none was here
     since the header rewrite; it was not. */
  display: none;
}
/* Any depth, not just the top row: "Our Technology > What is RAIN > Tags" is
   three levels, and a `> li` rule opened only the first two. :focus-within on
   the parent li fires from the parent's own link, which opens the panel and
   lets the tab sequence continue into it. */
.rain-nav__list li:hover > .sub-menu,
.rain-nav__list li:focus-within > .sub-menu { display: block; }

.rain-nav__list .sub-menu a {
  display: block;
  padding: 9px 20px;
  font-size: .88rem;
  line-height: 1.35;
  color: #00467f;
  text-decoration: none;
}
.rain-nav__list .sub-menu a:hover,
.rain-nav__list .sub-menu a:focus-visible { background: var(--rain-pale); }

/* --------------------------------------------------------------------------
   The third level, and saying that it IS a third level.

   "Our Technology > What is RAIN > Tags" opened a panel with the same accent
   top rule as a top-level dropdown, sitting detached beside it — two peers,
   with nothing to say the right-hand one belonged to the item on its left.
   Three things fix that: the parent item stays lit and grows a chevron
   pointing at its panel, the panel drops the top rule for an accent EDGE on
   the side it hinges from, and it sits on a tint so the levels are not the
   same surface.
   -------------------------------------------------------------------------- */

.rain-nav__list .sub-menu li.menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.rain-nav__list .sub-menu li.menu-item-has-children > a::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
  opacity: .55;
}
/* Lit while its own panel is open — :hover alone lost the highlight the moment
   the pointer crossed into the panel it opened. */
.rain-nav__list .sub-menu li.menu-item-has-children:hover > a,
.rain-nav__list .sub-menu li.menu-item-has-children:focus-within > a {
  background: var(--rain-pale);
  color: var(--rain-brand);
  font-weight: 600;
}
.rain-nav__list .sub-menu li.menu-item-has-children:hover > a::after,
.rain-nav__list .sub-menu li.menu-item-has-children:focus-within > a::after { opacity: 1; }

/* The flyout hangs off ITS OWN parent item. Only `.rain-nav__list > li` was
   positioned, so a third-level panel was anchored to the top-level item
   instead — `top: -8px` then measured from the wrong box and the panel landed
   8px high and 5px out of line with the one beside it. With the second-level
   item positioned, -8px cancels this panel's own top padding and its first
   row sits exactly on the row that opened it. */
.rain-nav__list .sub-menu li { position: relative; }
.rain-nav__list .sub-menu .sub-menu {
  top: -8px;
  left: 100%;
  background: var(--rain-zebra);
  border-top: 0;
  border-left: 3px solid var(--rain-accent);
  box-shadow: 14px 18px 40px -20px rgba(0, 0, 54, .45);
}

.rain-nav__list a:focus-visible { outline: 2px solid var(--rain-accent); outline-offset: 2px; }

@media (max-width: 1460px) {
  .rain-nav__list { gap: 6px 15px; }
  .rain-nav__list > li > a { font-size: .88rem; }
}
@media (max-width: 1240px) {
  .rain-nav__list { gap: 6px 12px; }
  .rain-nav__list > li > a { font-size: .82rem; }
  .rain-search input { width: 170px; }
}

/*
 * One breakpoint for the whole switch, and it is 1100px rather than 992px.
 *
 * It used to be 980px for the stack and 992px for the nav and burger, so
 * between 981 and 992 the site showed the search and utility links, no
 * navigation, and a burger. Worse, eight top-level items across two levels do
 * not fit on one line below about 1080px: at 1000px the menu wrapped and the
 * header jumped from 124px to 172px, shoving every page down as the window
 * narrowed. The drawer now takes over before that can happen.
 */
@media (max-width: 1100px) {
  .rain-header__stack { display: none; }
  .rain-header__inner { justify-content: space-between; }
}

/* Burger — hidden on desktop. */
.rain-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.rain-burger span {
  display: block;
  height: 2px;
  width: 24px;
  margin-inline: auto;
  background: #fff;
  transition: transform .25s var(--rain-ease), opacity .25s var(--rain-ease);
}
.rain-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rain-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rain-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* A scrim behind the drawer: it dims the page, gives a large click-to-close
   target, and stops the open drawer reading as part of the page under it. */
.rain-scrim {
  position: fixed;
  inset: var(--rain-header-h, var(--rain-header-height)) 0 0 0;
  z-index: 98;
  background: rgba(0, 0, 54, .45);
  opacity: 0;
  transition: opacity .3s var(--rain-ease);
}
.rain-scrim.is-open { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rain-scrim { transition: none; } }

/* Off-canvas drawer, slides in from the right. */
/* --rain-header-h is measured and written by assets/header.js. The static
   --rain-header-height token was 132px against a header that renders at ~104,
   so the drawer opened with a 28px gap under the bar. */
.rain-drawer {
  position: fixed;
  inset: var(--rain-header-h, var(--rain-header-height)) 0 0 auto;
  width: min(360px, 86vw);
  z-index: 99;
  background: var(--rain-card-bg);
  border-left: 1px solid var(--rain-border);
  padding: 32px 28px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s var(--rain-ease);
}
.rain-drawer.is-open { transform: translateX(0); }

.rain-drawer__list { list-style: none; margin: 0; padding: 0; text-align: right; }
.rain-drawer__list li { border-bottom: 1px solid var(--rain-border); }
.rain-drawer__list a { display: block; padding: 14px 0; text-decoration: none; font-size: 1.05rem; }
.rain-drawer__list .sub-menu { list-style: none; margin: 0; padding-right: 16px; }
.rain-drawer__list .sub-menu a { font-size: .95rem; color: var(--rain-text-muted); }

/* Search and the utility links, which only exist in the desktop bar. */
.rain-drawer__search { position: relative; display: flex; align-items: center; margin-bottom: 22px; }
.rain-drawer__search .rain-search__icon { position: absolute; left: 14px; color: #6a7a90; pointer-events: none; }
.rain-drawer__search input {
  font: inherit;
  font-size: .95rem;
  width: 100%;
  padding: 11px 16px 11px 38px;
  border: 1px solid var(--rain-border);
  border-radius: 100px;
  background: #fff;
  color: #1c2b33;
}
.rain-drawer__search input:focus-visible { outline: 2px solid var(--rain-accent); outline-offset: 1px; }

.rain-drawer__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  margin-top: 26px;
}
.rain-drawer__utility { list-style: none; margin: 0; padding: 0; text-align: right; }
.rain-drawer__utility a {
  display: block;
  padding: 7px 0;
  font-size: .95rem;
  color: var(--rain-brand);
  text-decoration: none;
}
.rain-drawer__utility a:hover, .rain-drawer__utility a:focus-visible { text-decoration: underline; }
.rain-drawer__foot .rain-social { display: flex; gap: 8px; }
.rain-drawer__foot .rain-social__link {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rain-border);
  border-radius: 50%;
  color: var(--rain-brand);
}
.rain-drawer__foot .rain-social__link:hover,
.rain-drawer__foot .rain-social__link:focus-visible {
  background: var(--rain-brand);
  border-color: var(--rain-brand);
  color: #fff;
}
.rain-drawer__foot .rain-social__link svg { width: 17px; height: 17px; }

@media (max-width: 1100px) {
  .rain-burger { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .rain-drawer, .rain-burger span { transition: none; }
}

/* the_custom_logo() brings its own <a>; make sure it fills the wrapper. */
.rain-header__logo .custom-logo-link { display: block; line-height: 0; }
.rain-header__logo img { display: block; }

/* Dropdowns on the right-hand items would still run off-screen while OPEN, so
   anchor those to the right edge of their parent. (The scrollWidth half of this
   problem is solved by the display:none above.) */
.rain-nav__list > li:nth-last-child(-n+4) > .sub-menu {
  left: auto;
  right: -20px;
}
.rain-nav__list > li:nth-last-child(-n+4) .sub-menu .sub-menu {
  left: auto;
  right: 100%;
  /* It now hinges from the other side, so the accent edge and the shadow move
     with it and the chevron points the way the panel actually opens. */
  border-left: 0;
  border-right: 3px solid var(--rain-accent);
  box-shadow: -14px 18px 40px -20px rgba(0, 0, 54, .45);
}
.rain-nav__list > li:nth-last-child(-n+4) .sub-menu li.menu-item-has-children > a {
  flex-direction: row-reverse;
}
.rain-nav__list > li:nth-last-child(-n+4) .sub-menu li.menu-item-has-children > a::after {
  border-width: 0 0 1.5px 1.5px;
}

/* Social icons close the utility cluster, separated by a hairline so the row
   reads as two groups of related things rather than one undifferentiated run. */
.rain-header__utility .rain-social {
  display: flex;
  gap: 6px;
  padding-left: 20px;
  position: relative;
}
.rain-header__utility .rain-social::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, .22);
}
.rain-header__utility .rain-social__link {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #fff;
  border-radius: 50%;
  opacity: .9;
}
.rain-header__utility .rain-social__link:hover,
.rain-header__utility .rain-social__link:focus-visible { color: var(--rain-accent); opacity: 1; }
.rain-header__utility .rain-social__link svg { width: 16px; height: 16px; }