/* Red Raine Labs - homepage promo banner (Cybersecurity Awareness Month 2026).

   External rather than inside index.html's inline <style>, so adding or
   removing the banner never changes that block's sha256 in public/_headers.
   Uses the design tokens index.html already defines on :root.

   A thin bar stuck to the top of the viewport, above the nav. It renders
   visible straight from the markup (no JS reveal), so it never shifts the page
   down after load; promo.js removes it once dismissed or after the offer ends. */

/* index.html sets `body { overflow-x: hidden }`, which turns <body> into a
   scroll container and silently disables position: sticky for everything
   inside it. `clip` hides horizontal overflow the same way without creating a
   scroll container. Lives here so it leaves with the banner. */
body {
    overflow-x: clip;
}

.promo-bar {
    position: sticky;
    top: 0;
    /* Below the nav (1000), so the mobile nav drawer slides over it. */
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 40px;
    padding: 0.45rem 3rem;
    background: var(--midnight-carbon);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    line-height: 1.4;
    text-align: center;
}

.promo-bar-text {
    margin: 0;
}

.promo-bar-tag {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    background: var(--red-raine);
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.promo-bar strong {
    font-weight: 600;
}

/* White, not red: red on midnight-carbon fails contrast at this size. */
.promo-bar-cta {
    margin-left: 0.5rem;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.promo-bar-cta:hover {
    color: var(--concrete-steel);
}

.promo-bar-cta:focus-visible,
.promo-bar-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.promo-bar-close {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.3rem;
    line-height: 1;
}

.promo-bar-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* Phones: drop the long phrasing so the bar stays one or two short lines. */
@media (max-width: 640px) {
    .promo-bar {
        padding: 0.45rem 2.6rem 0.45rem 0.9rem;
        font-size: 0.8rem;
    }
    .promo-bar-long { display: none; }
    .promo-bar-tag { display: none; }
}