@charset "UTF-8";
/**
 * ===== Etn Top Banner — Styles =====
 *
 * Owned by the plugin (pautas 3.2 strategy B): an announcement bar is a
 * standalone widget, not part of the theme's visual language.
 *
 * Every colour is read through a custom property with the shipped default as
 * its fallback, which is the override contract in pautas 3.3 — PHP writes the
 * configured values into these same knobs (see etn_top_banner_colour_css()),
 * and a theme can override them too without a specificity fight.
 */
.etn-top-banner {
  --etn-top-banner-background: #333333;
  --etn-top-banner-text: #ffffff;
  --etn-top-banner-link: var(--etn-top-banner-text);
  --etn-top-banner-link-hover: #cccccc;
  --etn-top-banner-z-index: 999;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--etn-top-banner-text);
  background-color: var(--etn-top-banner-background);
  padding: 1em;
  /**
   * The two pinned modifiers, one per placement. `sticky` rather than `fixed`
   * on purpose: it leaves the banner in the normal flow, so the page is still
   * pushed by the banner's own height and nothing has to be measured or
   * corrected anywhere.
   *
   * Caveat worth knowing: an ancestor with `overflow` set to anything but
   * `visible` kills position:sticky, and some themes put `overflow-x: hidden`
   * on the body. The banner still renders in the right place there — it just
   * scrolls away with the page instead of staying put.
   */
}
.etn-top-banner--pinned-top {
  position: sticky;
  top: 0;
  z-index: var(--etn-top-banner-z-index, 999);
}
.etn-top-banner--pinned-bottom {
  position: sticky;
  bottom: 0;
  z-index: var(--etn-top-banner-z-index, 999);
}
.etn-top-banner {
  /**
   * Links have their own colour knob, whose default is the banner's text
   * colour — so leaving it alone keeps them matching the text, and setting it
   * makes them stand out, without the two ever silently disagreeing.
   */
}
.etn-top-banner__link {
  color: var(--etn-top-banner-link);
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .etn-top-banner__link:hover {
    color: var(--etn-top-banner-link-hover);
  }
}
.etn-top-banner strong {
  font-weight: bold !important;
}
@media (min-width: 600px) {
  .etn-top-banner {
    font-size: 15px;
  }
}

/**
 * The admin bar is fixed over the top of the page for logged-in users, so a
 * top-pinned banner would sit underneath it — invisible to exactly the person
 * configuring the thing, and correct for every visitor, which is the worst
 * combination to debug. The bottom-pinned one needs none of this: the admin bar
 * is only ever at the top.
 *
 * The widths are WordPress's own: the bar is 46px tall up to 782px and 32px
 * above that, and below 601px it is positioned absolute and scrolls away with
 * the page, so there is nothing to clear at the base width.
 */
@media (min-width: 601px) {
  .admin-bar .etn-top-banner--pinned-top {
    top: 46px;
  }
}
@media (min-width: 783px) {
  .admin-bar .etn-top-banner--pinned-top {
    top: 32px;
  }
}

/*# sourceMappingURL=top-banner.css.map */