/* DESSAR site navigation - one header, one menu and one breadcrumb trail
   for every page. Pixel units and explicit resets, because the pages it
   sits on (including the full-screen concept models) carry their own
   global styles. Markup is written by tools/update_site_nav.py. */

.sn,.sn *,.sn-crumbs,.sn-crumbs *{box-sizing:border-box}
.sn-embedded .sn,.sn-embedded .sn-crumbs{display:none !important}

/* ------------------------------------------------ header bar */
.sn{
  position:sticky; top:0; z-index:30; display:block; margin:0; padding:0; gap:0;
  background:rgba(231,235,238,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid #C3CAD1; color:#131B24;
  font:400 15px/1.4 "IBM Plex Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:0;
}
.sn-in{
  max-width:1308px; margin:0 auto; padding:12px clamp(16px,5vw,64px);
  display:flex; align-items:center; gap:18px; min-height:62px; position:relative;
}
.sn a{text-decoration:none}
.sn-logo{display:block; flex:0 0 auto; line-height:0; border-radius:2px}
.sn-logo img{display:block; height:36px; width:auto; max-width:none; margin:0}

.sn-nav{display:flex; align-items:center; gap:22px; margin:0 0 0 auto; padding:0; background:none}
.sn-links{display:flex; align-items:center; gap:22px; margin:0; padding:0; list-style:none}
.sn-links li{margin:0; padding:0; list-style:none; background:none; border:0}
.sn-links a{
  display:block; font-size:14px; line-height:1.3; color:#5C6975; padding:2px 0;
  border:0; border-bottom:1px solid transparent; background:none; white-space:nowrap;
}
.sn-links a:hover{color:#131B24; border-bottom-color:#004A80}
.sn-links a[aria-current="page"]{color:#131B24; border-bottom-color:#004A80; font-weight:500}
.sn-links a.sn-parent{color:#131B24}
.sn-home svg{display:none}

.sn-login,.sn-cta{
  display:inline-block; font-size:14px; line-height:1.2; font-weight:500; border-radius:2px;
  border:1px solid #004A80; padding:9px 15px; white-space:nowrap;
}
.sn-login{color:#004A80; background:transparent}
.sn-login:hover{background:rgba(0,74,128,.07)}
.sn-cta{color:#fff; background:#004A80; flex:0 0 auto}
.sn-cta:hover{background:#003960; color:#fff}
.sn :focus-visible,.sn-crumbs :focus-visible{outline:2px solid #1A86D0; outline-offset:2px}

.sn .sn-toggle{
  display:none; align-items:center; gap:8px; margin:0; flex:0 0 auto;
  font:500 14px/1.2 "IBM Plex Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:0; text-transform:none;
  color:#131B24; background:#fff; border:1px solid #9AA6B1; border-radius:2px; padding:9px 12px; cursor:pointer;
}
.sn .sn-toggle:hover{background:#F6F8F9; border-color:#5C6975}
.sn .sn-toggle[hidden]{display:none !important}
.sn-bars{position:relative; width:16px; height:12px; display:inline-block}
.sn-bars i{position:absolute; left:0; right:0; height:2px; background:currentColor; transition:transform .18s ease, opacity .18s ease}
.sn-bars i:nth-child(1){top:0}
.sn-bars i:nth-child(2){top:5px}
.sn-bars i:nth-child(3){top:10px}
.sn-open .sn-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.sn-open .sn-bars i:nth-child(2){opacity:0}
.sn-open .sn-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ------------------------------------------------ compact: menu button */
@media (max-width:1199px){
  .sn-cta{margin-left:auto}
  .sn.sn-js .sn-toggle{display:inline-flex}
  /* with the script: a drop-down panel */
  .sn.sn-js .sn-nav{
    display:none; position:absolute; left:0; right:0; top:100%; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid #C3CAD1; box-shadow:0 14px 30px rgba(10,16,22,.14);
    padding:6px clamp(16px,5vw,64px) 16px; max-height:calc(100vh - 62px); overflow-y:auto;
  }
  .sn.sn-js.sn-open .sn-nav{display:flex}
  .sn.sn-js .sn-links{flex-direction:column; align-items:stretch; gap:0}
  .sn.sn-js .sn-links li{border-bottom:1px solid #E4E8EB}
  .sn.sn-js .sn-links a{font-size:16px; padding:12px 2px; border-bottom:0; color:#131B24; display:flex; align-items:center; gap:10px}
  .sn.sn-js .sn-links a[aria-current="page"]{color:#004A80; font-weight:600}
  .sn.sn-js .sn-links a[aria-current="page"]::after{content:"You are here"; margin-left:auto; font-size:12px; font-weight:400; color:#5C6975}
  .sn.sn-js .sn-home svg{display:inline-block; width:16px; height:16px}
  .sn.sn-js .sn-login{margin-top:14px; text-align:center; padding:11px 15px; font-size:15px}
  /* without the script: the links wrap onto a second row */
  .sn:not(.sn-js) .sn-in{flex-wrap:wrap}
  .sn:not(.sn-js) .sn-nav{order:3; width:100%; margin:0; overflow-x:auto; gap:18px; padding-bottom:2px}
}
@media (max-width:560px){
  .sn-in{gap:10px; min-height:56px; padding-top:10px; padding-bottom:10px}
  .sn-logo img{height:30px}
  .sn-cta{padding:8px 11px; font-size:13px}
  .sn .sn-toggle{padding:8px 10px; font-size:13px}
  .sn.sn-js .sn-nav{max-height:calc(100vh - 56px)}
}
@media (max-width:560px){
  .sn-in{padding-left:16px; padding-right:16px}
  .sn.sn-js .sn-nav{padding-left:16px; padding-right:16px}
  .sn-crumbs ol{padding-left:16px; padding-right:16px}
}
@media (max-width:385px){
  .sn-in{gap:8px}
  .sn-logo img{height:26px}
}
@media (max-width:365px){
  .sn.sn-js .sn-cta{display:none}
  .sn.sn-js .sn-toggle{margin-left:auto}
}

/* ------------------------------------------------ breadcrumbs */
.sn-crumbs{
  display:block; margin:0; padding:0; background:#F6F8F9; border-bottom:1px solid #D6DCE1;
  font:400 13px/1.4 "IBM Plex Sans","Helvetica Neue",Arial,sans-serif; color:#5C6975; letter-spacing:0;
}
.sn-crumbs ol{
  max-width:1308px; margin:0 auto; padding:9px clamp(16px,5vw,64px); list-style:none;
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 0;
}
.sn-crumbs li{display:flex; align-items:center; margin:0; padding:0; list-style:none; background:none; border:0; color:#5C6975; font-size:13px}
.sn-crumbs li + li::before{content:"\203A"; margin:0 9px; color:#9AA6B1; font-size:15px; line-height:1}
.sn-crumbs a{color:#004A80; text-decoration:none; border-bottom:1px solid rgba(0,74,128,.25); display:inline-flex; align-items:center; gap:6px}
.sn-crumbs a:hover{border-bottom-color:#004A80}
.sn-crumbs svg{width:14px; height:14px; flex:0 0 14px}
.sn-crumbs [aria-current="page"]{color:#131B24; font-weight:500}

@media print{.sn,.sn-crumbs{position:static; box-shadow:none}.sn-toggle,.sn-cta,.sn-login{display:none !important}}
@media (prefers-reduced-motion:reduce){.sn-bars i{transition:none}}