/* =============================================================================
 *  memorial.css — Memorial Day: bigger flag banner + poppy + tribute footer
 * =============================================================================
 *  Memorial Day's tone stays reflective (no animation, no celebration), but
 *  with much more visual presence than the prior thin ribbon. Elements:
 *    1. A thick red/white/blue ribbon under the topbar.
 *    2. A prominent tribute banner with stars background + larger type.
 *    3. A static red poppy (🌺) anchored top-right — traditional Memorial Day
 *       remembrance symbol.
 *    4. A second tribute strip pinned to the bottom-left ("In Memoriam") so
 *       it's also visible on long pages where the user has scrolled past
 *       the top banner.
 *    5. Subtle red/blue edge stripes along the left and right page margins.
 * ============================================================================= */

/* 1. Thick flag-color ribbon */
.theme-memorial-ribbon {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 51;
    pointer-events: none;
    margin-right: var(--nav-width);
    background: linear-gradient(
        to bottom,
        #b22234 0,    #b22234 33%,
        #ffffff 33%,  #ffffff 66%,
        #3c3b6e 66%,  #3c3b6e 100%
    );
    height: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

/* 2. Tribute banner with stars background */
.theme-memorial-message {
    position: sticky;
    top: 14px;
    z-index: 51;
    margin-right: var(--nav-width);
    color: #ffffff;
    text-align: center;
    padding: 0.85rem 1rem;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: auto;
    border-top: 1px solid #3c3b6e;
    border-bottom: 2px solid #3c3b6e;
    /* Layered: stars pattern on top of dark navy fill */
    background:
        radial-gradient(circle 1.5px at 8% 30%,  #ffffff 100%, transparent),
        radial-gradient(circle 1.5px at 18% 70%, #ffffff 100%, transparent),
        radial-gradient(circle 1.5px at 30% 25%, #ffffff 100%, transparent),
        radial-gradient(circle 1.5px at 42% 65%, #ffffff 100%, transparent),
        radial-gradient(circle 1.5px at 55% 30%, #ffffff 100%, transparent),
        radial-gradient(circle 1.5px at 68% 75%, #ffffff 100%, transparent),
        radial-gradient(circle 1.5px at 82% 28%, #ffffff 100%, transparent),
        radial-gradient(circle 1.5px at 93% 68%, #ffffff 100%, transparent),
        linear-gradient(to bottom, #1a1a4a 0%, #0d0d2e 100%);
    background-size: 12% 100%, 12% 100%, 12% 100%, 12% 100%, 12% 100%, 12% 100%, 12% 100%, 12% 100%, 100% 100%;
    background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.theme-memorial-message strong { color: #ff5566; font-weight: 800; }
.theme-memorial-message .small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.75);
}
/* Inline poppy decoration inside the banner */
.theme-memorial-message .poppy {
    display: inline-block;
    font-size: 1.6rem;
    vertical-align: middle;
    margin: 0 0.85rem;
    filter: drop-shadow(0 2px 4px rgba(178, 34, 52, 0.6));
    line-height: 1;
}

/* 4. Footer-anchored remembrance strip (bottom-left) */
.theme-memorial-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: var(--nav-width);
    z-index: 51;
    pointer-events: none;
    padding: 0.6rem 1rem;
    text-align: center;
    background: linear-gradient(to top, rgba(13, 13, 46, 0.95), rgba(13, 13, 46, 0.0));
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    border-bottom: 4px solid #b22234;
}

/* 5. Edge stripes */
.theme-memorial-stripe-left,
.theme-memorial-stripe-right {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 49;
    pointer-events: none;
}
.theme-memorial-stripe-left  { left: 0;  background: #b22234; box-shadow: 2px 0 8px rgba(178, 34, 52, 0.4); }
.theme-memorial-stripe-right { right: var(--nav-width); background: #3c3b6e; box-shadow: -2px 0 8px rgba(60, 59, 110, 0.4); }

@media (max-width: 900px) {
    .theme-memorial-ribbon,
    .theme-memorial-message,
    .theme-memorial-footer { margin-right: 0; }
    .theme-memorial-stripe-right { right: 0; }
}