/* EasyGov family navigation. Visual reference: Sagie mockup 11 Nov 2026.
   Dark site-tab bar + white rounded left card. No gradients, no emoji. */
:root{
  --eg-top-h:64px;
  --eg-side-w:248px;
  --eg-side-gap:16px;
  --eg-top-bg:#0B1628;
  --eg-top-fg:#FFFFFF;
  --eg-top-mut:rgba(255,255,255,.72);
  --eg-top-line:rgba(255,255,255,.14);
  --eg-top-hover:rgba(255,255,255,.08);
  --eg-top-on:#163050;
  --eg-top-ring:#7EB8E0;
  --eg-card-bg:#FFFFFF;
  --eg-card-radius:20px;
  --eg-card-shadow:0 8px 28px rgba(15,23,42,.10);
  --eg-nav-fg:#14171F;
  --eg-nav-mut:#555B67;
  --eg-nav-line:#E3E0D7;
  --eg-nav-acc:#1D3557;
  --eg-nav-soft:#E8EEF8;
  --eg-nav-on:#FFFFFF;
  --eg-legal:#4a5060;
}
html{scroll-padding-top:var(--eg-top-h)}
html.eg-nav-lock,html.eg-nav-lock body{overflow:hidden}
body.eg-has-nav{overflow-x:hidden;padding-top:var(--eg-top-h);padding-left:calc(var(--eg-side-w) + var(--eg-side-gap) * 2)}
header.eg-top,aside.eg-side,header.eg-top *,aside.eg-side *,button.eg-scrim{
  box-sizing:border-box;
  text-align:left;
}
header.eg-top,header.eg-top .eg-sites,header.eg-top a,header.eg-top button,
aside.eg-side,aside.eg-side a,aside.eg-side h2,aside.eg-side nav,button.eg-scrim{
  font:500 13px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,"Work Sans",Arial,sans-serif;
}
header.eg-top{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--eg-top-bg);color:var(--eg-top-fg);
  border-bottom:0;padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px;
  height:auto;min-height:0;margin:0;width:auto;max-width:none;
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;
  gap:8px;transform:none;box-shadow:none;
}
header.eg-top .eg-menu-btn{
  display:none;appearance:none;-webkit-appearance:none;
  align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:6px;margin:0;flex:none;
  border:1px solid var(--eg-top-line);background:transparent;color:var(--eg-top-fg);
  border-radius:10px;cursor:pointer;box-shadow:none;text-transform:none;
}
header.eg-top .eg-menu-btn:hover{background:var(--eg-top-hover);border-color:rgba(255,255,255,.35)}
header.eg-top .eg-menu-btn:focus-visible,
header.eg-top .eg-sites a:focus-visible{
  outline:2px solid var(--eg-top-ring);outline-offset:2px;
}
aside.eg-side a:focus-visible{
  outline:2px solid var(--eg-nav-acc);outline-offset:2px;
}
header.eg-top svg{width:16px;height:16px;flex:none;display:block}
aside.eg-side svg{width:16px;height:16px;flex:none;display:block}
header.eg-top .eg-extra{display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex:none;color:var(--eg-top-fg)}
header.eg-top .eg-extra select,header.eg-top .eg-extra label{
  color:var(--eg-top-fg);background:transparent;border-color:var(--eg-top-line);
}
header.eg-top nav.eg-sites{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;
  gap:4px;padding:0;margin:0;
  overflow-x:auto;overflow-y:hidden;height:auto;min-height:0;flex:1 1 auto;min-width:0;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;touch-action:pan-x;
  background:transparent;border:0;width:auto;text-align:left;
}
header.eg-top nav.eg-sites a{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;flex:0 0 auto;
  min-height:44px;padding:6px 12px 6px 6px;margin:0;
  border:1px solid transparent;border-radius:12px;color:var(--eg-top-fg);
  text-decoration:none;background:transparent;font-weight:600;font-size:13px;
  white-space:nowrap;height:auto;line-height:1.2;box-shadow:none;text-transform:none;
  text-align:left;
}
header.eg-top nav.eg-sites a:hover{background:var(--eg-top-hover)}
header.eg-top nav.eg-sites a[aria-current="page"]{
  background:var(--eg-top-on);border-color:var(--eg-top-ring);color:var(--eg-top-fg);
  box-shadow:none;
}
header.eg-top .eg-ico{
  width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none;
}
header.eg-top .eg-ico svg{width:18px;height:18px}
aside.eg-side{
  position:fixed;top:calc(var(--eg-top-h) + var(--eg-side-gap));left:var(--eg-side-gap);
  bottom:var(--eg-side-gap);width:var(--eg-side-w);z-index:35;
  background:var(--eg-card-bg);color:var(--eg-nav-fg);
  border:1px solid var(--eg-nav-line);border-radius:var(--eg-card-radius);
  box-shadow:var(--eg-card-shadow);
  padding:18px 14px 20px;overflow-y:auto;overflow-x:hidden;height:auto;margin:0;transform:none;
  display:flex;flex-direction:column;align-items:stretch;text-align:left;
}
aside.eg-side h2{
  margin:0 8px 12px;padding:0;font-size:11px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--eg-nav-mut);background:transparent;border:0;text-align:left;
}
aside.eg-side nav{
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:2px;margin:0;padding:0;height:auto;
  overflow:visible;background:transparent;border:0;width:auto;text-align:left;
}
aside.eg-side a{
  display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:44px;padding:8px 12px;margin:0;
  border-radius:12px;color:var(--eg-nav-fg);text-decoration:none;font-weight:500;font-size:14px;
  border:0;background:transparent;height:auto;line-height:1.2;box-shadow:none;text-transform:none;
  white-space:normal;text-align:left;
}
aside.eg-side a:hover{background:var(--eg-nav-soft)}
aside.eg-side a[aria-current="page"]{
  background:var(--eg-nav-soft);color:var(--eg-nav-acc);box-shadow:none;font-weight:650;
}
aside.eg-side nav.eg-legal{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--eg-nav-line);
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;
  gap:0;margin-left:-4px;margin-right:-4px;
}
aside.eg-side nav.eg-legal a{
  flex:1 1 33.33%;max-width:33.33%;min-width:44px;min-height:52px;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:6px 2px;margin:0;border-radius:10px;
  font-size:11px;font-weight:500;color:var(--eg-legal);line-height:1.2;
  text-align:center;white-space:nowrap;
}
aside.eg-side nav.eg-legal a svg{width:18px;height:18px}
aside.eg-side nav.eg-legal a:hover{background:var(--eg-nav-soft);color:var(--eg-nav-fg)}
aside.eg-side nav.eg-legal a[aria-current="page"]{background:var(--eg-nav-soft);box-shadow:none;font-weight:650;color:var(--eg-nav-acc)}
button.eg-scrim{display:none;appearance:none;-webkit-appearance:none}
@media(max-width:880px){
  :root{--eg-top-h:68px;--eg-side-gap:12px}
  body.eg-has-nav{padding-left:0}
  header.eg-top .eg-menu-btn{display:inline-flex}
  aside.eg-side{
    transform:translateX(calc(-100% - var(--eg-side-gap) - 8px));transition:transform .16s ease;
    top:calc(var(--eg-top-h) + var(--eg-side-gap));z-index:45;
  }
  aside.eg-side.is-open{transform:none}
  button.eg-scrim{
    display:block;position:fixed;top:var(--eg-top-h);left:0;right:0;bottom:0;
    background:rgba(11,22,40,.45);z-index:44;border:0;padding:0;margin:0;width:auto;height:auto;
    opacity:0;pointer-events:none;transition:opacity .16s ease;border-radius:0;
  }
  button.eg-scrim.is-open{opacity:1;pointer-events:auto}
  @media(prefers-reduced-motion:reduce){aside.eg-side,button.eg-scrim{transition:none}}
}
.eg-pwa{position:relative;z-index:20}