/* ═══════════════════════════════════════════════════════════════
   WV STORE NOTICE — WooCommerce store notice banner
   DRAFT — pending designer sign-off
   ═══════════════════════════════════════════════════════════════
   v1 — 2026-09-04
   - Initial build. Styles the WooCommerce store notice
     (.woocommerce-store-notice, output at wp_body_open) as a
     full-width red banner, centered text, sitting in normal flow
     directly below the fixed header (body padding-top offset
     places the first flow element there).
   - Colors: --wv-color-text-inverse on --wv-color-warning — a
     certified pair (A11Y-PATTERNS.md § Contrast-Certified Token
     Pairs, 5.45:1, any size).
   - Typography comes from the .wv-body class added to the notice
     markup via the woocommerce_demo_store filter in functions.php
     (Rule 3 — no local font declarations here).
   - Specificity note: p.woocommerce-store-notice.demo_store
     (0,2,1) deliberately out-specifies WooCommerce core's
     `.woocommerce-store-notice, p.demo_store` (0,1,1), which
     still loads on Woo surfaces and paints the notice as a
     purple position:absolute overlay. All properties WC core
     declares are re-declared here so the banner renders the
     same on Woo and non-Woo pages.
   ═══════════════════════════════════════════════════════════════ */

p.woocommerce-store-notice.demo_store {
  position: static;              /* override WC core position:absolute overlay */
  z-index: auto;
  width: 100%;
  margin: 0;
  padding: 10px 24px;
  box-shadow: none;
  text-align: center;
  background-color: var(--wv-color-warning);
  /* Color inversion on the block root (Rule 3 exception) — the notice
     root and the .wv-body element are the same <p>, so the cascade
     target is declared here. Certified pair: text-inverse on warning. */
  color: var(--wv-color-text-inverse);
}

/* WC core outputs the notice with inline style="display:none"; its
   global JS (woocommerce handle — kept global) reveals it when the
   dismissal cookie is absent. No display rules needed here. */

p.woocommerce-store-notice.demo_store a {
  color: inherit;
  text-decoration: underline;
}

/* Dismiss link — slightly enlarged tap area without inflating the
   banner height.
   TODO(a11y): tap target is below the 44px minimum (WCAG 2.5.5); a
   compliant target would thicken the whole banner — deferred to the
   next periodic a11y pass. */
p.woocommerce-store-notice.demo_store .woocommerce-store-notice__dismiss-link {
  display: inline-block;
  padding: 2px 6px;
  white-space: nowrap;
}