/* ICA — right-side slide-out menus (For Employers / Company / Resources)
   SCOPE: panels only. Nothing here restyles the header or its nav. */

:root{
  --ica-so-blue:#0072bc;
  --ica-so-blue-d:#005b96;
  --ica-so-blue-dd:#00436f;
  --ica-so-navy:#1e2d3b;
  --ica-so-yellow:#ffd240;
  --ica-so-ink-soft:#dcecf8;
  --ica-so-w:min(400px,92vw);
  --ica-so-z:1200;
}

/* the only trigger-side rule: underline the open menu */
.ica-so-trigger[aria-expanded="true"]{color:var(--ica-so-blue);box-shadow:inset 0 -2px 0 var(--ica-so-blue)}

.ica-so{position:fixed;inset:0;z-index:var(--ica-so-z)}
.ica-so[hidden]{display:none}
.ica-so__scrim{position:absolute;inset:0;background:rgba(30,45,59,.5);opacity:0;transition:opacity .28s ease;border:0;padding:0;width:100%;cursor:pointer}
.ica-so__panel{position:absolute;top:0;right:0;bottom:0;width:var(--ica-so-w);background:var(--ica-so-blue);
  box-shadow:-24px 0 60px rgba(30,45,59,.35);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.7,.25,1)}
.ica-so.is-shown .ica-so__scrim{opacity:1}
.ica-so.is-shown .ica-so__panel{transform:none}

/* header block */
.ica-so__head{flex:none;background:var(--ica-so-navy);padding:20px 24px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ica-so__kicker{display:block;font-family:Catamaran,sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ica-so-yellow);margin:0 0 3px}
.ica-so__title{font-family:Catamaran,sans-serif;font-weight:800;font-size:27px;line-height:1.05;letter-spacing:-.01em;color:#fff;margin:0}
.ica-so__close{flex:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:transparent;display:grid;place-items:center;color:#fff;cursor:pointer}
.ica-so__close:hover,.ica-so__close:focus-visible{background:var(--ica-so-yellow);border-color:var(--ica-so-yellow);color:#212124}

/* scrolling list */
.ica-so__body{flex:1;overflow:auto;padding:6px 20px 20px;-webkit-overflow-scrolling:touch}
.ica-so__group{display:flex;flex-direction:column;gap:8px;padding-top:18px}
.ica-so__grouplabel{display:flex;align-items:center;gap:10px;font-family:Catamaran,sans-serif;font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ica-so-yellow)}
.ica-so__grouplabel::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.3)}

.ica-so__link{display:grid;grid-template-columns:minmax(0,1fr) 16px;align-items:center;gap:14px;
  min-height:56px;padding:12px 14px;border-radius:12px;background:var(--ica-so-blue-d);color:#fff;text-decoration:none;
  transition:background .16s ease,box-shadow .16s ease}
.ica-so__link:hover,.ica-so__link:focus-visible{background:var(--ica-so-blue-dd);box-shadow:inset 3px 0 0 var(--ica-so-yellow);color:#fff}
.ica-so__link b{font-family:Catamaran,sans-serif;font-weight:700;font-size:16.5px;line-height:1.2;display:block}
.ica-so__link span{font-size:13px;line-height:1.4;color:var(--ica-so-ink-soft);display:block;margin-top:2px}
.ica-so__link svg{color:currentColor}

/* pinned footer */
.ica-so__foot{flex:none;background:var(--ica-so-blue-d);padding:16px 20px 18px}
.ica-so__cta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:999px;
  background:var(--ica-so-yellow);color:#212124;text-decoration:none;
  font-family:Catamaran,sans-serif;font-weight:800;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase}
.ica-so__cta:hover,.ica-so__cta:focus-visible{background:#fff;color:#212124}

body.ica-so-locked{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .ica-so__panel{transition:opacity .2s ease;transform:none;opacity:0}
  .ica-so.is-shown .ica-so__panel{opacity:1}
}

/* ------------------------------------------------------------------
   ICA build additions, 2026-09-18 (docs/pages/slide-out-menus.md).
   Appended only — nothing above this line is edited, per the rule that
   the design ships in full.
   ------------------------------------------------------------------ */

/* The rule above sets colour on every span inside a row, and `b` sets no
   colour of its own, so the row title inherits the description ink and
   renders #dcecf8 instead of white. Invisible in the design because every
   row had a description under it to compare against. */
.ica-so__link b{color:#fff}

/* Scroll lock. The design locks `body`, but on this site the scrolling
   element is <html> — so body{overflow:hidden} does not lock anything —
   and `body` is position:relative, which makes the design's
   body.style.top = -scrollY shove the whole page up by the scroll offset
   (measured: -400px at 400px scrolled). Lock <html> and never move
   anything, so there is nothing to restore either. */
html.ica-so-locked{overflow:hidden}

/* Panels whose grouping comes from the tree wrap their rows in
   .ica-so__group; Company has no group container at all and its rows land
   directly in the body. Space the body itself so both shapes work without
   a wrapper that only exists to hold a gap. */
.ica-so__body{display:flex;flex-direction:column;gap:8px}

/* Fail open. The panels are ordinary markup until the script upgrades
   them; while `hidden` is still on they are inert anyway, but if the
   script never runs, nothing here may sit over the page and eat clicks. */
.ica-so:not(.is-open){pointer-events:none}
.ica-so.is-open{pointer-events:auto}