/* Page banner shared by every page (staff, client portal, reporter portal, public pages).
   A 110px band: the law-header image under a navy gradient. The side menu below it starts in exactly the
   banner's navy (#172554) and the banner's bottom-left corner is filled with that same colour, so the two
   read as one piece with no visible seam. */
:root { --ms-navy:#172554; --ms-side:232px; }

.ms-hdr {
  position:relative; height:110px; max-height:110px; display:flex; align-items:center; color:#fff;
  background:
    linear-gradient(90deg,rgba(23,37,84,.88) 0%,rgba(30,58,138,.66) 55%,rgba(30,64,175,.42) 100%),
    linear-gradient(0deg,rgba(23,37,84,.75) 0%,rgba(23,37,84,0) 35%),
    url("../img/law-header-banner.jpg") center 30% / cover no-repeat;
}
/* the bottom-left of the banner melts into the side menu's top colour, then fades away to the right of it */
.ms-hdr.has-side::after {
  content:""; position:absolute; left:0; bottom:0; height:80%; width:calc(var(--ms-side) + 220px); pointer-events:none;
  background:linear-gradient(0deg,var(--ms-navy) 0%,rgba(23,37,84,.85) 22%,rgba(23,37,84,0) 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 var(--ms-side),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 var(--ms-side),transparent 100%);
}
.ms-hdr-in {
  position:relative; z-index:1; width:100%; max-width:1240px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.ms-hdr.full .ms-hdr-in { max-width:none; }
.ms-brand {
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.4px; font-size:1.25rem; line-height:1.15;
  text-transform:uppercase; text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.ms-brand:hover { color:#fff; }
.ms-brand { position:relative; padding-left:64px; min-height:52px; display:flex; flex-direction:column; justify-content:center; }
.ms-brand::before {
  content:""; position:absolute; left:0; top:50%; width:52px; height:52px; transform:translateY(-50%);
  background:url("../img/logo-mark.png") center / contain no-repeat; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.ms-brand small { display:block; font-weight:600; font-size:.72rem; letter-spacing:.9px; opacity:.92; margin-top:3px; }
.ms-who { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; font-size:.85rem; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.ms-who a:not(.btn) {
  color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.55); border-radius:6px; padding:3px 10px;
  font-size:.8rem; background:rgba(255,255,255,.08);
}
.ms-who a:not(.btn):hover { background:rgba(255,255,255,.2); }
.ms-who .btn { text-shadow:none; }

/* side menu: same navy as the banner at the top, fading to the dark slate */
.ms-side {
  background:linear-gradient(180deg,var(--ms-navy) 0%,#15224f 14%,#111d42 45%,#111827 100%) !important;
}
.ms-side .brand, .ms-side .nav-link { color:#d6e0f5; }
.ms-side .nav-link:hover { background:rgba(255,255,255,.08); color:#fff; }
.ms-side .nav-link.active { background:rgba(255,255,255,.13); color:#fff; box-shadow:inset 3px 0 0 #60a5fa; }

/* staff: the existing links on the banner's navy, directly under it */
.ms-snav { background:linear-gradient(180deg,var(--ms-navy) 0%,#14204a 100%); border-top:1px solid rgba(255,255,255,.08); }
.ms-snav-in { max-width:1320px; margin:0 auto; padding:0 24px; display:flex; flex-wrap:wrap; gap:2px; }
.ms-snav a { color:#d6e0f5; font-size:.85rem; padding:10px 12px; text-decoration:none; border-bottom:3px solid transparent; }
.ms-snav a:hover { color:#fff; background:rgba(255,255,255,.06); }
.ms-snav a.active { color:#fff; border-bottom-color:#60a5fa; background:rgba(255,255,255,.08); }

@media (max-width:768px) {
  .ms-brand { font-size:1.05rem; padding-left:54px; }
  .ms-brand::before { width:42px; height:42px; }
  .ms-hdr.has-side::after { width:100%; -webkit-mask-image:none; mask-image:none; }
  .ms-hdr-in { padding:0 16px; }
}
@media print { .ms-hdr, .ms-snav { display:none !important; } }