/* =========================================================================
 * Announcement Bar — thin strip at the very top of the site (in page flow).
 * Schemes: brand (maroon) / gold / dark / light. Matches the 70y70m tokens.
 * ========================================================================= */

.y70-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000; /* above the header (home fixed = 999, inner sticky = 100) */
  width: 100%;
  font-family: var(--y70-font-base);
  font-size: 14.5px;
  line-height: 1.4;
}

/* When the bar is present, make room for it and push the header below it.
   --y70-bar-h is the measured bar height (JS keeps it in sync; CSS default
   covers first paint and the no-JS case). The body class is added server-side
   (body_class filter) so the offset applies before the first paint — no shift. */
:root{ --y70-bar-h: 48px; }
body.has-y70-bar{ padding-top: var(--y70-bar-h, 48px); }
body.has-y70-bar .y70-header{ top: var(--y70-bar-h, 48px); }

/* Logged-in users: the WordPress admin bar is itself position:fixed at top:0
   (32px desktop / 46px mobile, and WP adds an html margin-top to match). Push
   our fixed bar + the header below it so nothing overlaps. Front-end visitors
   have no admin bar, so these rules simply don't apply to them. */
body.admin-bar .y70-bar{ top: 32px; }
body.admin-bar.has-y70-bar .y70-header{ top: calc(32px + var(--y70-bar-h, 48px)); }
@media screen and (max-width: 782px){
  body.admin-bar .y70-bar{ top: 46px; }
  body.admin-bar.has-y70-bar .y70-header{ top: calc(46px + var(--y70-bar-h, 48px)); }
}

.y70-bar__inner{
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding: 10px 48px; /* room for the close button on the right */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  text-align: center;
}

.y70-bar__text{ font-weight: 600; }
.y70-bar__text a{ text-decoration: underline; color: inherit; }

.y70-bar__link{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  white-space: nowrap;
  padding: 3px 12px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.y70-bar__link:hover{ transform: translateY(-1px); }

.y70-bar__close{
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  /* 40px: iPad and other tablet widths fall outside the <600px "mobile" query
     below, so they were getting the same 26px mouse-sized target as desktop
     even though they're touch-only — bump the base size instead. */
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: inherit;
  background: transparent;
  opacity: .8;
  transition: opacity .18s ease, background .18s ease;
}
.y70-bar__close:hover{ opacity: 1; background: rgba(255,255,255,.18); }

/* ---- Scheme: brand (maroon) ---- */
.y70-bar--brand{
  background: linear-gradient(90deg, var(--primary), var(--primary-600));
  color: #fff;
}
.y70-bar--brand .y70-bar__link{ background: rgba(255,255,255,.16); color: #fff; }
.y70-bar--brand .y70-bar__link:hover{ background: rgba(255,255,255,.28); }

/* ---- Scheme: gold (highlight / special) ---- */
.y70-bar--gold{
  background: linear-gradient(90deg, var(--rank-1-start), var(--rank-1-end));
  color: var(--rank-1-text);
}
.y70-bar--gold .y70-bar__close:hover{ background: rgba(0,0,0,.10); }
.y70-bar--gold .y70-bar__link{ background: rgba(106,67,0,.14); color: var(--rank-1-text); }
.y70-bar--gold .y70-bar__link:hover{ background: rgba(106,67,0,.22); }

/* ---- Scheme: dark ---- */
.y70-bar--dark{
  background: var(--dark);
  color: #fff;
}
.y70-bar--dark .y70-bar__link{ background: rgba(255,255,255,.16); color: #fff; }
.y70-bar--dark .y70-bar__link:hover{ background: rgba(255,255,255,.28); }

/* ---- Scheme: light ---- */
.y70-bar--light{
  background: var(--card);
  color: var(--dark);
  border-bottom: 1px solid var(--border);
}
.y70-bar--light .y70-bar__text a{ color: var(--primary); }
.y70-bar--light .y70-bar__close:hover{ background: rgba(42,44,47,.08); }
.y70-bar--light .y70-bar__link{ background: var(--primary); color: #fff; }
.y70-bar--light .y70-bar__link:hover{ background: var(--primary-600); }

/* ---- Small screens ---- */
@media (max-width: 600px){
  .y70-bar{ font-size: 13px; }
  .y70-bar__inner{ padding: 9px 46px; gap: 4px 10px; }
  .y70-bar__link{ padding: 2px 10px; }
  .y70-bar__close{ right: 8px; }
}