/*
 * Same promo-bar reserve as css/site.css, for blog, school, and product pages
 * that never load site.css. Scripts-off and dismissed visits clear it.
 */
html.js {
  --announcement-bar-height: 48px;
}

@media (max-width: 768px) {
  html.js {
    --announcement-bar-height: 80px;
  }
}

html.announcement-dismissed,
html:not(.js),
body.registration-page {
  --announcement-bar-height: 0px;
}

body {
  padding-top: var(--announcement-bar-height, 0px);
}

.header,
body.has-announcement-bar .header {
  top: var(--announcement-bar-height, 0px);
}

.announcement-bar {
  min-height: var(--announcement-bar-height, 48px);
  box-sizing: border-box;
}