/* The agreed header — navy utility strip, centred nav, plain dropdowns.

   This was written inside css/current-2.css, because at the time exactly one
   page used it. Three things changed that: Empower chose this header for the
   build that ships, dist/final.html loads it, and the six About Us pages load
   it too. Leaving it where it was meant an About page could only get a working
   header by also pulling in a homepage banner, a chevron strip and a set of
   solution panels it does not have.

   So it lives here, on its own, and every page that uses header-2.html links
   this file. That is also the shape the hand-off wants: in WordPress this is
   one global header block, and this file is the CSS that block needs — not a
   fragment of a page stylesheet.

   PROGRESSIVE ENHANCEMENT CONTRACT, same as css/megamenu.css: components.css
   ships .em-header__menu already positioned, which without JS would stack five
   panels on top of one another under the bar. The panel is returned to normal
   flow here, and only the [data-dropdown="on"] gate that js/dropdown.js sets
   makes it an overlay that starts closed. No JS → five plain link lists inside
   the nav, every destination still reachable.

   A page that includes _shared/header-2.html and does NOT link this file gets
   five permanently open panels covering its hero. There is a test. */

/* ---------- Utility strip ---------- */
/* White on --surface-navy measures 12.6:1. No borders on the navy — see the
   open --border-inverse question in the repo's todo. */
.em-utility{background:var(--surface-navy);color:var(--text-inverse)}
.em-utility__bar{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3) var(--space-6);flex-wrap:wrap;min-height:44px;
  padding:var(--space-2) 0;
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-caption)}
.em-utility__note{margin:0}
/* SC 2.5.8: standalone link, so it carries its own 24x24 target. */
.em-utility__link{display:inline-flex;align-items:center;min-height:24px;min-width:24px;
  color:var(--white);text-decoration:none}
.em-utility__link:hover{text-decoration:underline}

/* ---------- Header bar ---------- */
/* components.css pushes .em-header__nav right with margin-left:auto. Here the
   nav is the centre of a three-part row instead: logo and actions each take an
   equal share of the leftover space, so the nav stays optically centred no
   matter how wide the logo or the actions group gets. */
.em-header--flat .em-header__bar{gap:var(--space-6)}
.em-header--flat .em-header__logo{flex:1 1 0;min-width:0}
.em-header--flat .em-header__nav{flex:0 1 auto;margin:0;gap:var(--space-1);justify-content:center}
.em-header--flat .em-header__actions{flex:1 1 0;justify-content:flex-end}
.em-header--flat .em-header__actions .em-btn{border-radius:var(--radius-pill)}

/* ---------- Split item: a link plus its disclosure ---------- */
/* Our Solutions is a destination AND a group. The words are a link, the caret
   is a button beside them, and the two read as one control: the pair share a
   hover, and the pill background wraps both because the item is what the
   pointer is aiming at. The button is the only half with aria-controls, so
   js/dropdown.js binds to it without a line of change. */
.em-header__item--split{display:flex;align-items:center;gap:0;border-radius:var(--radius-pill)}
.em-header__item--split .em-header__link{padding-right:var(--space-2)}

.em-header__disclosure{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;min-height:32px;padding:0 10px 0 4px;
  border:0;border-radius:var(--radius-pill);background:none;cursor:pointer;
  color:var(--em-blue);
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
/* Hovering either half lights both, so the pair never looks like two controls
   that happen to be adjacent. */
.em-header__item--split:hover,
.em-header__item--open.em-header__item--split{background:var(--blue-100)}
.em-header__item--split:hover .em-header__link,
.em-header__item--split:hover .em-header__disclosure{color:var(--blue-800)}
/* The link's own hover background would paint a second pill inside the first. */
.em-header__item--split .em-header__link:hover{background:none}
.em-header__disclosure:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---------- Dropdown panels ---------- */
.em-header__menu{position:static;min-width:0;padding:0;border:0;box-shadow:none;
  background:none;border-radius:0}
.em-header__menu a span{max-width:32ch}

[data-dropdown="on"] .em-header__menu{position:absolute;top:calc(100% + 10px);left:0;
  z-index:39;min-width:268px;padding:var(--space-3);
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
[data-dropdown="on"] .em-header__menu[hidden]{display:none}
[data-dropdown="on"] .em-header__menu.is-open{opacity:1;transform:none}
/* The nav is centred, so the last panel is the only one close enough to the
   right edge to overflow it on a narrow desktop window. */
[data-dropdown="on"] .em-header__item:last-child .em-header__menu{left:auto;right:0}

@media (prefers-reduced-motion: reduce){
  /* The panels still open — that is content, and gating it would leave a
     reduced-motion user with less of the page. They open INSTANTLY instead:
     a 200px box sliding under the pointer is exactly the movement this query
     exists to stop, and the state change loses nothing by being immediate. */
  [data-dropdown="on"] .em-header__menu,
  [data-dropdown="on"] .em-header__menu.is-open{opacity:1;transform:none;transition:none}
}

/* Below the nav breakpoint js/nav.js's mobile panel owns navigation and
   .em-header__nav is already display:none (css/site.css). This keeps the
   panels out of the way even if the nav is ever shown at that width. */
@media (max-width:960px){
  .em-header__menu{display:none}
}