/**
 * Site-wide notice bar — iDEAN design system (Ink 900 ground, Gold 400 CTA).
 *
 * The ground is Ink 900 rather than Navy 700 because the homepage hero is
 * itself a navy gradient, and a Navy 700 bar read as part of it. Ink 900 is
 * the system's "deepest fill" and separates from both that hero and the white
 * grounds everywhere else.
 *
 * position:sticky keeps the bar in normal flow, so the page below is pushed
 * down by exactly its height with nothing to measure. top offsets by the admin
 * bar's own custom property so a logged-in editor does not get the two stacked
 * on top of each other.
 *
 * z-index sits below the site's real overlays (Digits popup 99998, FluentCart
 * checkout modal 999999) on purpose: a login prompt or a checkout should cover
 * the bar, not fight it.
 */

.fex-notice {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 99990;
    background: #080B41;
    color: #fff;
    font-family: 'Poppins', 'Hind Siliguri', 'Segoe UI', system-ui, sans-serif;
    /* Elevation declared once: shadow, no hairline border. Navy-tinted. */
    box-shadow: 0 6px 18px rgba(0, 3, 28, .45);
}

.fex-notice[hidden] {
    display: none;
}

.fex-notice__in {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    /* right padding leaves the close button its own room at every width */
    padding: 8px 48px 8px 24px;
}

/* Colour is re-asserted on the element itself, not left to inherit from
   .fex-notice. The theme styles bare elements — `p, li, blockquote, q, pre,
   code, kbd, samp { color: rgba(10,10,10,.85) }` — and a direct rule beats an
   inherited value however specific the ancestor's rule is, so the copy came
   out near-black on a near-black bar. The two-class selectors below outrank
   it without needing !important. Anything else added to this bar that is a
   bare element (p, a, button, li) needs the same treatment. */
.fex-notice .fex-notice__txt {
    margin: 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    text-align: center;
}

.fex-notice .fex-notice__txt b {
    font-weight: 700;
    color: #FED044;
}

.fex-notice__cta {
    display: inline-block;
    background: #FED044;
    color: #080B41;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    padding: 12px 20px;
    border-radius: 10px;
    transition: transform 150ms cubic-bezier(.22, .61, .36, 1),
                box-shadow 150ms cubic-bezier(.22, .61, .36, 1);
}

.fex-notice__cta:hover,
.fex-notice__cta:focus {
    color: #080B41;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 3, 28, .45);
}

.fex-notice__cta:focus-visible {
    outline: 3px solid rgba(0, 29, 196, .45);
    outline-offset: 2px;
}

.fex-notice__x {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    opacity: .6;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: opacity 150ms cubic-bezier(.22, .61, .36, 1);
}

.fex-notice__x:hover,
.fex-notice__x:focus {
    opacity: 1;
}

.fex-notice__x:focus-visible {
    outline: 3px solid rgba(0, 29, 196, .45);
    outline-offset: 2px;
}

/* Live state: a small pulsing gold dot ahead of the copy. The one place motion
   is spent here — it is the signal that the stream is actually running. */
.fex-notice__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #FED044;
    animation: fex-notice-pulse 1600ms cubic-bezier(.22, .61, .36, 1) infinite;
}

@keyframes fex-notice-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.78); }
}

@media (prefers-reduced-motion: reduce) {
    .fex-notice__dot { animation: none; }
    .fex-notice__cta { transition: none; }
    .fex-notice__cta:hover,
    .fex-notice__cta:focus { transform: none; }
}

/* `narrow` segments are phone-only; `wide` is the reverse. */
.fex-notice__narrow {
    display: none;
}

/* Below the system's 768 breakpoint the event name goes and the date shortens.
   The desktop line fits one row down to 769px but wrapped to THREE at 375px on
   live, making the bar 118px — 15% of the screen, on every page, for the
   eleven days it is up. Measured on the real page, not in a harness: a local
   harness loads different font files and under-measured this by 40px. */
@media (max-width: 768px) {
    .fex-notice__wide {
        display: none;
    }

    .fex-notice__narrow {
        display: inline;
    }

    .fex-notice__in {
        gap: 6px 12px;
        padding: 8px 40px 8px 14px;
    }

    .fex-notice .fex-notice__txt {
        font-size: 14px;
        line-height: 1.35;
    }

    .fex-notice__cta {
        padding: 10px 18px;
    }
}

/* WordPress drops the admin bar to 46px at 782px and stops fixing it at 600px,
   and does not reliably carry those into --wp-admin--admin-bar--height — which
   is why a logged-in editor on a phone saw the bar tuck under the admin bar.
   Logged-out visitors never match these rules. */
@media screen and (max-width: 782px) {
    body.admin-bar .fex-notice {
        top: 46px;
    }
}

@media screen and (max-width: 600px) {
    body.admin-bar .fex-notice {
        top: 0;
    }
}