/* Shared mobile drawer hierarchy plus traffic-map stacking fixes. */

/* Leaflet uses internal z-index values up to the hundreds. Keep the whole map
   inside its own low stacking context so it can never draw over the site nav. */
.traffic-page .route-map-wrap{
  position:relative!important;
  z-index:0!important;
  isolation:isolate;
}
.traffic-page .route-map{
  position:relative!important;
  z-index:0!important;
  scroll-margin-top:76px;
}
html.menu-is-open .traffic-page .route-map-wrap{
  pointer-events:none;
}

/* Mobile drawer hierarchy. This file is intentionally authoritative so every
   page gets the same drawer even when older page CSS is also present. */
html body .menu-panel .menu-section-divider,
html body .nav.menu-panel .menu-section-divider{
  display:block!important;
  width:auto!important;
  height:1px!important;
  min-height:1px!important;
  margin:10px 8px!important;
  padding:0!important;
  border:0!important;
  background:var(--line,#d8e2ec)!important;
  overflow:visible!important;
}

/* Older shell CSS gives the final span in every menu link a 22px size and uses
   space-between. Reset both here so labels inherit the intended tier size. */
html body .menu-panel .menu-link{
  justify-content:flex-start!important;
}
html body .menu-panel .menu-link > span{
  font-size:inherit!important;
  line-height:inherit!important;
  font-weight:inherit!important;
}

html body .menu-panel > .menu-primary:first-of-type .menu-link{
  min-height:38px!important;
  padding:2px 10px!important;
  font:700 15px/1.15 Inter,ui-sans-serif,Arial,sans-serif!important;
}
html body .menu-panel > .menu-primary:first-of-type .menu-link:not(.is-active):not([aria-current="page"]),
html body .menu-panel > .menu-primary:first-of-type .menu-link:not(.is-active):not([aria-current="page"]) span{
  color:var(--ink,#071b35)!important;
}

html body .menu-panel a[href="/traffic/"],
html body .menu-panel a[href="/development/"]{
  min-height:34px!important;
  padding:2px 10px!important;
  font:650 13.5px/1.2 Inter,ui-sans-serif,Arial,sans-serif!important;
}
html body .menu-panel a[href="/traffic/"]:not(.is-active):not([aria-current="page"]),
html body .menu-panel a[href="/development/"]:not(.is-active):not([aria-current="page"]),
html body .menu-panel a[href="/traffic/"]:not(.is-active):not([aria-current="page"]) span,
html body .menu-panel a[href="/development/"]:not(.is-active):not([aria-current="page"]) span{
  color:#4f6072!important;
}

html body .menu-panel a[href="/feedback/"],
html body .menu-panel a[href="/about/"],
html body .menu-panel a[href="/work-with-us/"]{
  min-height:32px!important;
  padding:2px 10px!important;
  gap:8px!important;
  justify-content:flex-start!important;
  font:600 12.5px/1.2 Inter,ui-sans-serif,Arial,sans-serif!important;
}
html body .menu-panel a[href="/feedback/"]:not(.is-active):not([aria-current="page"]),
html body .menu-panel a[href="/about/"]:not(.is-active):not([aria-current="page"]),
html body .menu-panel a[href="/work-with-us/"]:not(.is-active):not([aria-current="page"]),
html body .menu-panel a[href="/feedback/"]:not(.is-active):not([aria-current="page"]) span,
html body .menu-panel a[href="/about/"]:not(.is-active):not([aria-current="page"]) span,
html body .menu-panel a[href="/work-with-us/"]:not(.is-active):not([aria-current="page"]) span{
  color:#8995a3!important;
}

html body .menu-panel a[href="/feedback/"]::before,
html body .menu-panel a[href="/about/"]::before,
html body .menu-panel a[href="/work-with-us/"]::before{
  content:"";
  display:block;
  width:13px;
  height:13px;
  flex:0 0 13px;
  background:currentColor;
  opacity:.82;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}
html body .menu-panel a[href="/feedback/"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v12H8l-4 4V4Zm2 2v9.17L7.17 14H18V6H6Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v12H8l-4 4V4Zm2 2v9.17L7.17 14H18V6H6Z'/%3E%3C/svg%3E");
}
html body .menu-panel a[href="/about/"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 10h2v7h-2v-7Zm0-3h2v2h-2V7Zm1-5a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 10h2v7h-2v-7Zm0-3h2v2h-2V7Zm1-5a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z'/%3E%3C/svg%3E");
}
html body .menu-panel a[href="/work-with-us/"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 4h6a2 2 0 0 1 2 2v1h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3V6a2 2 0 0 1 2-2Zm0 3h6V6H9v1Zm-5 5v6h16v-6l-7 2v2h-2v-2l-7-2Zm16-3H4v1l7 2v-1h2v1l7-2V9Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 4h6a2 2 0 0 1 2 2v1h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3V6a2 2 0 0 1 2-2Zm0 3h6V6H9v1Zm-5 5v6h16v-6l-7 2v2h-2v-2l-7-2Zm16-3H4v1l7 2v-1h2v1l7-2V9Z'/%3E%3C/svg%3E");
}

html body .menu-panel .menu-secondary,
html body .menu-panel .menu-utility-links,
html body .menu-panel .menu-publication-links{
  margin:0!important;
}

/* When the drawer is open on interior pages, let the dimmed backdrop show
   through the sticky header instead of leaving a bright white bar above it. */
@media(max-width:720px){
  html.menu-is-open body:not(.home-page) .header,
  html.menu-is-open body:not(.home-page) .site-header{
    background:transparent!important;
    border-bottom-color:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

/* Give incident markers a visual pointer so a closure can be located even when
   there is no camera at that exact spot. */
.traffic-page .route-incident{
  overflow:visible!important;
}
.traffic-page .route-incident::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7px;
  width:0;
  height:0;
  margin-left:-5px;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:8px solid #c23b22;
  filter:drop-shadow(0 2px 2px rgba(13,36,61,.18));
}

html[data-theme="dark"] body .menu-panel .menu-section-divider,
html[data-theme="dark"] body .nav.menu-panel .menu-section-divider{
  background:#30414f!important;
}