/* ==========================================================================
   SBW SITEWIDE ANNOUNCEMENT BANNER
   The State of Black Wealth in Sacramento — Capital Black Chamber of Commerce
   --------------------------------------------------------------------------
   A slim red promo band that sits directly beneath the site navigation on
   EVERY page, driven by the [sbw_banner] shortcode.

   SELF-CONTAINED BY DESIGN. This is the one plugin stylesheet that loads
   site-wide, while sbw-landing.css only loads on the landing page. So
   nothing here may reference that file's tokens (--red, --ink,
   --font-display, --ease) or its helpers (.sbw-container, .chev-run, .btn)
   — on 99% of pages those simply do not exist. Every value the banner needs
   is re-declared locally as a --sbwb-* custom property on `.sbw-banner`,
   and the chevron motif is rebuilt as .sbw-banner__chev. Colours are the
   same sales-kit values, kept deliberately in sync by hand.

   Scope: every selector starts at `.sbw-banner`, so the banner cannot leak
   styles into the Astra theme, and Astra cannot reach in — the only
   properties it could inherit (font, colour, line-height) are all set here.
   ========================================================================== */

.sbw-banner {
  /* --- local tokens (mirrors of sbw-landing.css / styles.css) ----------- */
  --sbwb-red: #a60404;
  --sbwb-red-deep: #6b0303;
  --sbwb-ink: #14100f;
  --sbwb-display: "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  --sbwb-body: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sbwb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Astra's .ast-container: 1240px max with a 20px gutter. Matched so the
     banner's content lines up with the logo and nav directly above it. */
  --sbwb-container: 1240px;
  --sbwb-gutter: 20px;
  --sbwb-notch: 0.7rem;              /* depth of the 45° cut on the CTA */

  position: relative;
  /* isolation + the negative-z-index ::after below: keeps the decorative
     stripe layer above the banner's own background but behind its text,
     without it escaping into the theme's stacking context. */
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sbwb-red) 0%, var(--sbwb-red-deep) 100%);
  color: #fff;
  font-family: var(--sbwb-body);
  line-height: 1.4;
}

/* Themes vary on box-sizing; the banner owns its own subtree. */
.sbw-banner, .sbw-banner *, .sbw-banner *::before, .sbw-banner *::after { box-sizing: border-box; }

/* JS sets the `hidden` attribute on dismissal. !important because Astra and
   Elementor both ship `display` rules broad enough to resurrect it. */
.sbw-banner[hidden] { display: none !important; }

/* 45° stripe field bleeding in from the right — the sales kit's texture,
   faded out so the CTA never sits on a busy ground. */
.sbw-banner::after {
  content: "";
  position: absolute;
  inset-block: 0;
  right: 0;
  z-index: -1;
  width: min(42%, 460px);
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 0 8px,
    transparent 8px 16px
  );
  -webkit-mask-image: linear-gradient(to right, transparent, #000 85%);
  mask-image: linear-gradient(to right, transparent, #000 85%);
  pointer-events: none;
}

/* --- Row ---------------------------------------------------------------- */

.sbw-banner__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem clamp(0.85rem, 2vw, 1.5rem);
  width: 100%;
  max-width: var(--sbwb-container);
  min-height: 68px;
  margin-inline: auto;
  padding: 0.75rem var(--sbwb-gutter);
}

/* --- Date + chevrons ---------------------------------------------------- */

.sbw-banner__lead {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  margin: 0;
}

/* Local rebuild of .chev-run — see the file header for why it isn't reused. */
.sbw-banner__chev {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  color: #fff;
  font-size: 1.05rem;             /* children scale in em off this */
  line-height: 1;
}
.sbw-banner__chev i {
  display: block;
  width: 0.62em;
  height: 0.7em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.sbw-banner__chev i:nth-child(2) { height: 0.8em; }
.sbw-banner__chev i:nth-child(3) { height: 0.9em; }
.sbw-banner__chev i:nth-child(4) { height: 1em; }

.sbw-banner__date {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Hairline between the date and the headline. */
.sbw-banner__divider {
  flex: none;
  width: 1px;
  align-self: stretch;
  min-height: 1.6rem;
  background: rgba(255, 255, 255, 0.32);
}

/* --- Headline + meta ---------------------------------------------------- */

.sbw-banner__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.7rem;
  /* flex:1 + min-width:0 — takes the slack so the CTA is pushed right, and
     stays shrinkable so a long headline wraps instead of overflowing. */
  flex: 1 1 auto;
  min-width: 0;
}

.sbw-banner__title {
  margin: 0;
  font-family: var(--sbwb-display);
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  font-weight: 400;                /* Anton ships a single weight */
  line-height: 1.05;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.sbw-banner__meta {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}

/* --- CTA ---------------------------------------------------------------- */

.sbw-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  min-height: 44px;                /* tap target */
  padding: 0.6rem 1.35rem;
  border: 2px solid #fff;
  background: #fff;
  color: var(--sbwb-red-deep);
  font-family: var(--sbwb-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  /* Signature bottom-right corner notch, matching .btn on the landing page. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sbwb-notch)),
    calc(100% - var(--sbwb-notch)) 100%, 0 100%);
  transition: background-color 0.18s var(--sbwb-ease),
    color 0.18s var(--sbwb-ease), transform 0.18s var(--sbwb-ease);
}
.sbw-banner__cta:hover,
.sbw-banner__cta:focus-visible {
  background: transparent;
  color: #fff;
  transform: translateY(-1px);
}
/* clip-path would crop a normal outline, so the focus ring has to be inset. */
.sbw-banner__cta:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #fff;
}
.sbw-banner__cta-arrow {
  transition: transform 0.18s var(--sbwb-ease);
}
.sbw-banner__cta:hover .sbw-banner__cta-arrow,
.sbw-banner__cta:focus-visible .sbw-banner__cta-arrow {
  transform: translateX(3px);
}

/* --- Dismiss ------------------------------------------------------------ */

.sbw-banner__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background-color 0.18s var(--sbwb-ease), color 0.18s var(--sbwb-ease);
}
.sbw-banner__close:hover { background: rgba(0, 0, 0, 0.22); color: #fff; }
.sbw-banner__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  color: #fff;
}
.sbw-banner__close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
}

/* --- Responsive --------------------------------------------------------- */

/* The meta line is the first thing to go — the date and headline carry it. */
@media (max-width: 1080px) {
  .sbw-banner__meta { display: none; }
}

/* Stacked layout. The close button leaves the flex flow and pins to the top
   corner, so the headline and CTA get the full width; the row reserves
   right-hand padding so long text never slides under it. */
@media (max-width: 700px) {
  .sbw-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding-block: 0.9rem;
    padding-right: calc(var(--sbwb-gutter) + 2.25rem);
  }
  .sbw-banner__divider { display: none; }
  .sbw-banner__title { font-size: 1.05rem; }
  .sbw-banner__cta { width: 100%; justify-content: center; }
  .sbw-banner__close {
    position: absolute;
    top: 0.55rem;
    right: calc(var(--sbwb-gutter) - 0.3rem);
  }
}

/* --- Motion / print ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sbw-banner__cta,
  .sbw-banner__cta-arrow,
  .sbw-banner__close { transition: none; }
  .sbw-banner__cta:hover,
  .sbw-banner__cta:focus-visible { transform: none; }
  .sbw-banner__cta:hover .sbw-banner__cta-arrow,
  .sbw-banner__cta:focus-visible .sbw-banner__cta-arrow { transform: none; }
}

@media print {
  .sbw-banner { display: none; }
}