/* Public announcement popup (1.23.20A redesign, "curved banner" shape).
   Two-tone card: colored top banner with a concave scoop into a white body
   below. Owner-chosen background_color drives the banner; button_color drives
   the CTA pill. Same z-index layering as before (1100, below the AI widget
   and the accessibility button). All existing behavior (data, dates, enabled,
   once-per-session, auto-close, scroll) is unchanged; only the shape and
   sizing are new. The shape uses an inline SVG curve at the banner/body
   junction so the concave bite is crisp at any card width.

   Animation choreography (load-blur in + exit-blur out) lands in 1.23.20B.
*/
.pp-anno {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}
.pp-anno[hidden] { display: none; }

.pp-anno__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 22, 20, 0.58);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.pp-anno__card {
    position: relative;
    width: min(420px, 100%);
    max-height: calc(100vh - 44px);
    overflow: auto;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(8, 20, 18, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-overflow-scrolling: touch;
    /* The blur+fade in/out animations are driven by public/js/announcement.js
       via an inline SVG filter (X-only Gaussian blur) so the directional
       motion blur is true horizontal, not the symmetric CSS filter:blur().
       JS sets opacity and filter inline during the animation, then clears
       them. No CSS keyframe entrance is used. */
}

/* Banner: colored top half. Background uses the inline-style background-color
   from PHP for backward compat AND a CSS custom property (--pp-anno-banner)
   set on the outer card so the same color can drive other accents (eyebrow). */
.pp-anno__banner {
    position: relative;
    background-color: var(--pp-anno-banner, #0d4f4a);
    color: #fff;
    padding: 38px 28px 56px;
    text-align: center;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.pp-anno__title {
    margin: 0;
    color: var(--pp-anno-title, #fff);
    font-family: "Fraunces", "Source Serif 4", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: 0.005em;
}

/* Countdown label "Closing in N", JS-injected into the banner just before the
   close X when auto_close is on. Subtle so it does not compete with the title. */
.pp-anno__countdown {
    position: absolute;
    top: 22px;
    right: 64px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
    z-index: 5;
}

/* Circular close button at the top-right of the banner. */
.pp-anno__close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 5;
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    cursor: pointer;
    font-size: 20px;
    color: #fff;
    background: rgba(0, 0, 0, 0.22);
    transition: background 0.18s ease, transform 0.18s ease;
}
.pp-anno__close:hover { background: rgba(0, 0, 0, 0.42); transform: scale(1.08) rotate(90deg); }

/* The concave scoop. White curve sits at the bottom of the banner, eating
   upward into the colored area. Bottom: -1 hides anti-aliasing seam. */
.pp-anno__curve {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 28px;
    display: block;
    pointer-events: none;
}
.pp-anno__curve path { fill: #fff; }

/* Body: white area below the curve. Holds eyebrow, body, divider, CTA. */
.pp-anno__bodyzone {
    background: #fff;
    color: #1f2530;
    padding: 8px 30px 30px;
    text-align: center;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.pp-anno__eyebrow {
    margin: 0 0 14px;
    color: var(--pp-anno-banner, #0d4f4a);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.pp-anno__body {
    margin: 0 0 18px;
    font-size: 15.5px;
    line-height: 1.62;
    color: #2a3340;
    /* Allow the floated body image to be contained so subsequent siblings
       (divider, actions) don't try to wrap around it as well. */
    overflow: hidden;
}

/* Body image (1.23.25): floated left, body text wraps around. Always left
   aligned in this popup style; max-width is conservative so text stays
   readable next to it. Mobile stacks: float drops below 360px. */
.pp-anno__bodyimg {
    float: left;
    max-width: 40%;
    max-height: 160px;
    margin: 2px 14px 8px 0;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    display: block;
    object-fit: cover;
}
@media (max-width: 420px) {
    .pp-anno__bodyimg {
        float: none;
        max-width: 100%;
        max-height: 200px;
        margin: 0 auto 12px;
    }
}

.pp-anno__rule {
    display: block;
    width: 76%;
    height: 1px;
    margin: 0 auto 20px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.14), transparent);
}

.pp-anno__actions { margin: 0; }

.pp-anno__btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #fff;
    background-color: var(--pp-anno-btn, #e0a82e);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 70%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    text-align: center;
}
/* 1.23.26: hover uses --pp-anno-btn-hover when the admin set one, otherwise
   falls back to --pp-anno-btn so legacy announcements still hover correctly. */
.pp-anno__btn:hover,
.pp-anno__btn:focus,
.pp-anno__btn:active {
    /* Keep the label white in every interactive state. The button is an <a>, so
       the site-wide `a:hover { color: navy }` rule (higher specificity than the
       base .pp-anno__btn color) was turning the label dark on hover. */
    color: #fff;
}
.pp-anno__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    filter: brightness(1.04);
    background-color: var(--pp-anno-btn-hover, var(--pp-anno-btn, #e0a82e));
}

@media (max-width: 560px) {
    .pp-anno { padding: 14px; }
    .pp-anno__banner { padding: 32px 22px 50px; }
    .pp-anno__title { font-size: 26px; }
    .pp-anno__bodyzone { padding: 8px 22px 24px; }
    /* Countdown stays readable but tucks closer to the close X on phone. */
    .pp-anno__countdown { top: 20px; right: 56px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-anno__card { animation: none; }
    .pp-anno__close:hover { transform: scale(1.08); }
}