/* ==========================================================================
   Sitewide promo bar (markup in templates/header.php)
   Loaded on every page (see lib/framework.php).
   ========================================================================== */

.promo-bar {
  background: #95fdca;
  color: #000;
  text-align: center;
  padding: 12px 20px;
}

.promo-bar__text {
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
}

.promo-bar__link {
  color: #000;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.promo-bar__link:hover {
  text-decoration-color: #14adf9;
}

/* At <=992px and on touch devices the theme makes <header> position:absolute; top:0,
   which would cover the bar. top:auto leaves it absolutely positioned (still
   floating over the hero) but starting where it would sit in the flow — right
   under the bar, however many lines the bar wraps to. No effect on desktop,
   where the header isn't positioned. */
.promo-bar + header {
  top: auto;
}

@media (max-width: 767px) {
  .promo-bar {
    padding: 10px 16px;
  }

  .promo-bar__text {
    font-size: 13px;
  }

  .promo-bar__aside {
    display: none;
  }
}

@media print {
  .promo-bar {
    display: none;
  }
}