/* Canonical Burlington News header, search, hamburger, and drawer.
   Loaded last. Neutralizes leftover header systems. */

:root{
  --bn-header-h:56px;
  --bn-gutter:16px;
  --bn-logo:32px;
  --news-banner-h:0px;
}

html.menu-is-open,
html.menu-is-open body,
body.menu-is-open{
  overflow:hidden!important;
  overscroll-behavior:none;
  touch-action:none;
}

.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important
}

html body .menu-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:80!important;
  background:rgba(10,22,34,.36)!important;
  pointer-events:auto!important
}
html body .menu-backdrop[hidden]{display:none!important}

html body .header,
html body .site-header,
html body.publication-shell .header,
html body.home-shell .header{
  position:sticky!important;
  top:var(--news-banner-h,0px)!important;
  z-index:110!important;
  background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid var(--line,#dfe4ea)!important;
  box-shadow:none!important;
  backdrop-filter:blur(12px)
}

html body .header .header-inner,
html body .site-header .header-inner,
html body.publication-shell .header .header-inner,
html body.home-shell .header .header-inner,
html body .masthead.header-inner{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:10px!important;
  min-height:var(--bn-header-h)!important;
  height:var(--bn-header-h)!important;
  padding:0!important;
  grid-template-columns:none!important;
  grid-template-areas:none!important
}

html body .header .brand,
html body .site-header .brand,
html body .news-brand,
html body .brand-mark-only{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  min-width:var(--bn-logo)!important;
  grid-area:unset!important
}

html body .news-brand-logo,
html body .brand-mark-only img,
html body .header .brand img{
  display:block!important;
  width:var(--bn-logo)!important;
  height:calc(var(--bn-logo) * 1.1)!important;
  max-width:var(--bn-logo)!important;
  flex:0 0 var(--bn-logo)!important;
  object-fit:contain!important
}

html body .header-controls{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  min-width:0!important;
  margin-left:auto!important;
  flex:1 1 auto!important;
  justify-content:flex-end!important
}
html body .header-controls .header-weather{order:1}
html body .header-controls .header-search{order:2}
html body .header-controls .menu-icon-button,
html body .header-controls .menu{order:3}

html body .header-search,
html body.publication-shell .header-search,
html body.home-shell .header-search,
html body .site-header .header-search{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  height:40px!important;
  width:min(100%,320px)!important;
  max-width:none!important;
  min-width:0!important;
  border:1px solid var(--line,#d8e2ec)!important;
  border-radius:10px!important;
  background:var(--card,#fff)!important;
  grid-area:unset!important
}
html body .header-search input{
  width:100%!important;height:100%!important;min-width:0!important;
  padding:0 8px 0 12px!important;border:0!important;outline:0!important;
  background:transparent!important;color:inherit!important;
  font:500 13px/1.2 Inter,ui-sans-serif,Arial,sans-serif!important
}
html body .header-search>svg{
  width:16px!important;height:16px!important;margin-right:12px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;flex:0 0 auto
}

html body .menu,
html body .menu-icon-button,
html body.publication-shell .menu-icon-button,
html body.home-shell .menu-icon-button,
html body .header .menu{
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
  font-size:0!important;
  line-height:0!important;
  cursor:pointer
}
html body .menu-icon-button .menu-bars,
html body .menu .menu-bars{
  display:grid!important;gap:5px!important;width:18px!important
}
html body .menu-icon-button .menu-bars i,
html body .menu .menu-bars i{
  display:block!important;height:2px!important;background:currentColor!important
}

html body .header-weather,
html body.publication-shell .header-weather{
  display:none!important
}

html body .now-kicker{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important
}
html body .now-kicker-weather{
  font:600 12px/1 Inter,ui-sans-serif,Arial,sans-serif!important;
  color:var(--muted,#5d7287)!important;
  white-space:nowrap!important;
  pointer-events:none
}

html body .menu-panel,
html body.publication-shell .menu-panel,
html body.home-shell .menu-panel,
html body .nav.menu-panel,
html body .header .nav{
  display:none!important;
  position:fixed!important;
  z-index:90!important;
  top:var(--mobile-menu-top,64px)!important;
  left:var(--bn-gutter)!important;
  right:var(--bn-gutter)!important;
  inset:auto var(--bn-gutter) auto var(--bn-gutter)!important;
  top:var(--mobile-menu-top,64px)!important;
  width:auto!important;
  max-width:none!important;
  max-height:min(72vh,560px)!important;
  height:auto!important;
  min-height:0!important;
  padding:10px 8px 8px!important;
  border:1px solid var(--line,#d8e2ec)!important;
  border-top:1px solid var(--line,#d8e2ec)!important;
  border-bottom:1px solid var(--line,#d8e2ec)!important;
  border-radius:14px!important;
  background:var(--card,#fff)!important;
  box-shadow:0 16px 40px rgba(8,30,47,.16)!important;
  flex-direction:column!important;
  gap:0!important;
  overflow:auto!important
}
html body .menu-panel.open,
html body.publication-shell .menu-panel.open,
html body.home-shell .menu-panel.open,
html body .nav.menu-panel.open{
  display:flex!important
}

html body .menu-heading{
  margin:4px 10px 2px!important;
  padding:0!important;
  border:0!important;
  font:700 10px/1 Inter,ui-sans-serif,Arial,sans-serif!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:var(--muted,#5d7287)!important
}
html body .menu-separator,
html body .menu-panel .menu-separator{
  height:0!important;
  margin:6px 10px!important;
  padding:0!important;
  border:0!important;
  border-top:1px solid var(--line,#d8e2ec)!important;
  border-bottom:0!important;
  background:none!important
}
html body .menu-primary,
html body .menu-secondary,
html body .menu-panel .menu-primary,
html body .menu-panel .menu-secondary,
html body.publication-shell .menu-primary,
html body.publication-shell .menu-secondary{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  border:0!important;
  padding:0!important;
  margin:0!important
}
html body .menu-link,
html body.publication-shell .menu-link,
html body .menu-panel .menu-link,
html body .menu-panel .menu-support-link{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-height:44px!important;
  padding:4px 10px!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--ink,#18344d)!important;
  font:700 17px/1.15 Inter,ui-sans-serif,Arial,sans-serif!important;
  text-decoration:none!important
}
html body .menu-secondary .menu-link,
html body .menu-secondary-link,
html body .menu-panel .menu-secondary .menu-link{
  min-height:40px!important;
  font:600 13px/1.2 Inter,ui-sans-serif,Arial,sans-serif!important;
  color:var(--muted,#5d7287)!important
}
html body .menu-link.is-active,
html body .menu-link[aria-current="page"],
html body .menu-link.is-active span,
html body .menu-link[aria-current="page"] span{
  background:transparent!important;
  color:#0864c7!important
}

html body .menu-drawer-util,
html body .menu-panel .menu-drawer-util{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:10px 6px 0!important;
  padding:8px 4px 2px!important;
  border-top:1px solid var(--line,#d8e2ec)!important
}
html body .menu-drawer-weather{display:none!important}
html body .drawer-weather-line,
html body .menu-drawer-util .drawer-weather-line{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  color:var(--muted,#5d7287)!important;
  font:500 12px/1.3 Inter,ui-sans-serif,Arial,sans-serif!important;
  letter-spacing:0!important;
  text-decoration:none!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important
}
html body .menu-theme-toggle,
html body .menu-panel .menu-theme-toggle,
html body .menu-drawer-util .menu-theme-toggle,
html body .home-theme-choice{
  position:static!important;
  top:auto!important;
  right:auto!important;
  z-index:1!important;
  flex:0 0 44px!important;
  width:44px!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
  cursor:pointer!important;
  display:grid!important;
  place-items:center!important
}
html body .menu-theme-toggle svg,
html body .menu-panel .menu-theme-toggle svg{
  width:20px!important;
  height:20px!important;
  display:block!important
}

html body .drawer-search,
html body .menu-panel .drawer-search{
  display:flex!important;
  width:100%!important;
  max-width:none!important;
  height:44px!important;
  margin:4px 4px 10px!important;
  flex:0 0 auto!important
}
html body .drawer-search input{
  font:500 14px/1.2 Inter,ui-sans-serif,Arial,sans-serif!important
}
html body .search-popover{
  position:absolute;z-index:80;top:calc(100% + 8px);left:0;right:0;
  max-height:65vh;overflow:auto;padding:12px;
  border:1px solid var(--line,#d8e2ec);border-radius:13px;
  background:var(--card,#fff);box-shadow:0 20px 55px rgba(13,36,61,.18)
}
html body .search-popover[hidden]{display:none}
html body .site-search-link{display:none!important}

html body .simple-page main,
html body .feedback-main,
html body .work-main,
html body .explore-main,
html body .article,
html body .article-head,
html body.publication-shell main.feedback-main,
html body.publication-shell main.explore-main{
  scroll-margin-top:calc(var(--bn-header-h) + 8px)
}

@media(max-width:720px){
  :root{--bn-header-h:52px;--bn-logo:32px;--bn-gutter:16px}
  html body .header-weather,
  html body.publication-shell .header-weather,
  html body.home-shell .header-weather,
  html body .site-header .header-weather{display:none!important}
  html body .header-controls{flex:1 1 auto!important}
  html body .header-controls .header-search,
  html body.publication-shell .header-controls .header-search,
  html body.home-shell .header-controls .header-search{
    display:none!important
  }
  html body .desktop-primary-nav,
  html body.publication-shell .desktop-primary-nav,
  html body .home-desktop-nav,
  html body .primary-nav{display:none!important}
  html body .simple-page main,
  html body .feedback-main,
  html body .work-main,
  html body .explore-main{padding-top:12px!important}
  html body .article-head{margin-top:18px!important}
  html body .home-main{padding-top:8px!important}
}

@media(min-width:721px){
  :root{--bn-header-h:64px;--bn-logo:36px;--bn-gutter:20px}
  html body .header-weather,
  html body.publication-shell .header-weather,
  html body.home-shell .header-weather{
    display:inline-flex!important;
    align-items:center!important;
    gap:5px!important;
    white-space:nowrap!important;
    color:var(--navy,#071b35)
  }
  html body .header-weather .weather-chip-icon{width:16px;height:16px;display:grid;place-items:center}
  html body .header-weather .weather-chip-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
  html body .header-weather .weather-chip-temp{font:700 14px/1 Inter,Arial,sans-serif}
  html body .header-weather .weather-chip-condition{font:500 12px/1 Inter,Arial,sans-serif;color:var(--muted,#657083);font-style:normal}
  html body .menu-icon-button,
  html body.publication-shell .menu-icon-button,
  html body.home-shell .menu-icon-button,
  html body .header .menu,
  html body .menu-panel,
  html body.publication-shell .menu-panel,
  html body .menu-backdrop{display:none!important}
  html body .header-controls{flex:0 1 auto!important}
  html body .header-search{width:260px!important;flex:0 0 260px!important}
  html body .desktop-primary-nav,
  html body.publication-shell .desktop-primary-nav{
    display:flex!important;
    flex:1 1 auto;
    justify-content:center;
    align-self:stretch;
    gap:28px;
    margin-left:auto
  }
  html body .desktop-primary-nav a{
    display:flex;align-items:center;
    color:inherit;text-decoration:none;
    font:500 14px/1 Inter,ui-sans-serif,Arial,sans-serif
  }
  html body .desktop-primary-nav a.active,
  html body .desktop-primary-nav a[aria-current="page"]{color:#0864c7}
  html body .desktop-primary-nav a.active::after{display:none}
}

@media(min-width:1100px){
  html body .header-search{width:300px!important;flex-basis:300px!important}
}

html[data-theme="dark"] body .header,
html[data-theme="dark"] body .site-header{
  background:rgba(16,24,32,.98)!important;
  border-color:var(--line,#30404b)!important
}
html[data-theme="dark"] body .menu-panel,
html[data-theme="dark"] body .header-search{
  background:#15212a!important;
  border-color:#30404b!important;
  color:#edf4f8
}
html[data-theme="dark"] body .menu-backdrop{background:rgba(0,0,0,.5)!important}
html[data-theme="dark"] body .menu-link{color:#edf4f8!important}
html[data-theme="dark"] body .menu-secondary .menu-link{color:#aebcc6!important}
html[data-theme="dark"] body .menu-link.is-active span{color:#7eb6ea!important}
html[data-theme="dark"] body .menu-drawer-util{border-color:#30404b!important}
html[data-theme="dark"] body .drawer-weather-line{color:#aebcc6!important}
html[data-theme="dark"] body .news-brand-logo{filter:brightness(0) invert(1)}