/**
 * Site-wide Community Pick Awards announcement banner.
 * Rendered in PHP directly under the site header (no JS repositioning).
 */

:root {
  --rbv-announce-height: 42px;
}

.site-announce {
  position: relative;
  /* Above main (z-index 1) so the theme’s -54px hero pull-up doesn’t cover
     the bar, but below sticky header (999) so the bar scrolls under it. */
  z-index: 2;
  display: flex !important;
  align-items: center;
  justify-content: center;
  clear: both;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: var(--rbv-announce-height);
  padding: 10px 20px;
  background: #034146;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
}

.site-announce__link {
  display: block;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  color: #fff !important;
  font-family: "Work Sans", "DM Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  text-wrap: balance;
}

.site-announce__cta {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.site-announce__link:hover,
.site-announce__link:focus-visible {
  color: #ffdbd1 !important;
}

.site-announce__link:hover .site-announce__cta,
.site-announce__link:focus-visible .site-announce__cta {
  color: #ffdbd1 !important;
  text-decoration-thickness: 2px;
}

/*
 * Theme (#header-main-site { height: var(--header-height) !important }) freezes
 * the header box after first measure. When the inner nav grows at tablet /
 * narrow-desktop widths it overflows and paints over the announce bar.
 * Allow the header to size to its content while the banner is active.
 *
 * Opaque cream on the sticky header so the teal bar (z-index below 999)
 * cannot show through the transparent nav while scrolling underneath.
 * Do NOT set overflow:hidden here — it breaks position:sticky.
 */
body.rbv-has-announce #header-main-site {
  height: auto !important;
  min-height: var(--header-height, 0px);
  background-color: var(--trb-lightyellow, #faf2e4);
}

body.rbv-has-announce #header-main-site .header--inner {
  background-color: var(--trb-lightyellow, #faf2e4);
}

/* Keep theme / awards headers sticky above the scrolling announce bar. */
body.rbv-has-announce header.header-v2 {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}

body.admin-bar.rbv-has-announce header.header-v2 {
  top: 32px !important;
}

body.rbv-landing.rbv-has-announce .site-header {
  top: 0;
}

body.admin-bar.rbv-landing.rbv-has-announce .site-header {
  top: 32px;
}

/*
 * Keep the Customizer .home/.single-post main margin-top: -54px pull-up.
 * The announce bar sits above main (z-index 2), so the hero tucks flush
 * under the teal strip instead of leaving a cream gap.
 */

@media screen and (max-width: 782px) {
  body.admin-bar.rbv-has-announce header.header-v2 {
    top: 46px !important;
  }

  body.admin-bar.rbv-landing.rbv-has-announce .site-header {
    top: 46px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --rbv-announce-height: 48px;
  }

  .site-announce {
    min-height: var(--rbv-announce-height);
    padding: 10px 14px;
  }

  .site-announce__link {
    font-size: 13px;
    line-height: 1.35;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --rbv-announce-height: auto;
  }

  .site-announce {
    min-height: 0;
    padding: 12px 12px;
  }

  .site-announce__link {
    font-size: 12px;
    line-height: 1.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-announce,
  .site-announce__link {
    transition: none;
  }
}