/* Announcement bar (SMS short code + contact card download) — see inc/announcement-bar.php */ body .hern-topbar { display: block; position: relative; z-index: 1000; /* above the hero, below WP admin bar (99999) */ background: #B92B2B; /* deep red — a shade under the kit primary #E74142 so white text clears AA */ color: #fff; text-decoration: none; font-family: "Barlow", sans-serif; -webkit-tap-highlight-color: transparent; /* Full-bleed: the Home page pads by 1rem (0.5rem mobile) to make the red frame, and the bar is a body child. Extend the background sideways with a huge box-shadow clipped to the bar's height — no 100vw math, so no scrollbar-width overflow. Content stays centered in the body box. */ box-shadow: 0 0 0 100vmax #B92B2B; clip-path: inset(0 -100vmax); } body .hern-topbar:hover, body .hern-topbar:focus { color: #fff; text-decoration: none; } body .hern-topbar:focus-visible { outline: 2px solid #fff; outline-offset: -3px; } .hern-topbar__inner { max-width: 1400px; margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; text-align: center; } .hern-topbar__text { font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: 0.01em; } .hern-topbar__text strong, .hern-topbar__text b { font-weight: 700; color: #fff; } .hern-topbar__btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #B92B2B; font-family: "BritishRailDarkNormal", "Barlow", sans-serif; /* matches header "Donate Now" */ font-weight: 300; font-size: 14px; line-height: 1; padding: 8px 14px; border-radius: 10px; /* matches header button */ white-space: nowrap; transition: background-color 0.2s ease, transform 0.2s ease; } .hern-topbar:hover .hern-topbar__btn, .hern-topbar:focus-visible .hern-topbar__btn { background: #F7F7F7; /* kit "Off White" */ transform: translateY(-1px); } .hern-topbar__icon { width: 15px; height: 15px; flex: none; } /* Static variant (no link configured) */ .hern-topbar--static .hern-topbar__inner { padding: 11px 24px; } @media (max-width: 640px) { .hern-topbar__inner { padding: 8px 12px; gap: 8px 12px; } .hern-topbar__text { font-size: 14px; } .hern-topbar__btn { font-size: 13px; padding: 8px 14px; } }