/* Independence Day promo theme. Only linked from base.html while
 * site_promo (app/utils/site_promo.py) is truthy — once the backing coupon's
 * valid_until passes, this file stops being served to new page loads and the
 * whole theme reverts on its own. Navy branding is left untouched; this only
 * layers tricolor accents on top. */

:root {
    --saffron: #FF9933;
    --white: #FFFFFF;
    --green: #138808;
    --navy-ashoka: #000080;
    --tricolor-gradient: linear-gradient(90deg, #FF9933, #FFFFFF, #138808);
}

/* Promo bar + navbar stick together as one unit; .ef-navbar's own
 * position:sticky (style.css) is switched off for the duration so the two
 * don't fight over top offsets. */
body.has-promo-bar .site-sticky-top {
    position: sticky;
    top: 0;
    z-index: 1030;
}
body.has-promo-bar .ef-navbar {
    position: static;
}

.site-promo-bar {
    background: linear-gradient(90deg, var(--saffron), #ffffff 50%, var(--green));
    position: relative;
}
.site-promo-bar::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: var(--tricolor-gradient);
    background-size: 200% 100%;
    animation: promoAccentMove 3s linear infinite;
}

.site-promo-bar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.55rem 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
    color: var(--navy-ashoka);
    font-size: 0.9rem;
}

.site-promo-flag {
    font-size: 1.25rem;
    line-height: 1;
    display: inline-block;
    animation: floatWiggle 2.6s ease-in-out infinite;
}

.site-promo-text {
    margin: 0;
    font-weight: 500;
}
.site-promo-text strong {
    font-weight: 700;
}

.site-promo-coupon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--white);
    color: var(--navy-ashoka);
    border: 1.5px dashed var(--navy-ashoka);
    border-radius: 999px;
    padding: 0.25rem 0.5rem 0.25rem 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.site-promo-coupon:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.site-promo-coupon:active {
    transform: translateY(0);
}
.site-promo-coupon-label {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--muted, #6D7689);
    text-transform: uppercase;
}
.site-promo-copy-icon {
    font-size: 1rem !important;
}
.site-promo-coupon.is-copied {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
}
.site-promo-coupon.is-copied .site-promo-coupon-label {
    color: var(--white);
}

.site-promo-validity {
    font-size: 0.8rem;
    color: var(--navy-ashoka);
    opacity: 0.85;
}

.site-promo-cta {
    margin-left: auto;
    background: linear-gradient(135deg, #FF9933 0%, #FF7700 100%);
    color: var(--white) !important;
    font-weight: 700;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(255, 153, 51, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.site-promo-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 153, 51, 0.45);
    color: var(--white) !important;
}

.site-promo-close {
    background: transparent;
    border: none;
    color: var(--navy-ashoka);
    opacity: 0.6;
    padding: 0.15rem;
    line-height: 1;
    display: inline-flex;
}
.site-promo-close:hover {
    opacity: 1;
}
.site-promo-close .material-symbols-rounded {
    font-size: 1.1rem;
}

@keyframes promoAccentMove {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

@keyframes floatWiggle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(-6deg); }
    75% { transform: translateY(-1px) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
    .site-promo-flag,
    .site-promo-bar::after,
    .festive-flag-decor {
        animation: none !important;
    }
}

/* Festive hover on primary CTAs, scoped to the promo window only. */
body.has-promo-bar .btn-primary:hover,
body.has-promo-bar .btn-primary:focus {
    background: linear-gradient(135deg, #FF9933 0%, #FF7700 100%);
    border-color: #FF7700;
    box-shadow: 0 6px 20px rgba(255, 153, 51, 0.3);
}

/* Festive ribbon used on course cards (course_list.html) and course_detail's
 * coupon panel. */
.festive-coupon-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--tricolor-gradient);
    color: var(--navy-ashoka);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.course-promo-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
}

/* Waving flag decorations for hero sections that opt in with this class. */
.festive-flag-decor {
    position: absolute;
    font-size: 2.5rem;
    opacity: 0.85;
    animation: floatWiggle 3.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 767px) {
    .site-promo-bar-inner {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }
    .site-promo-validity {
        flex-basis: 100%;
        order: 5;
    }
    .site-promo-cta {
        margin-left: 0;
        order: 6;
    }
    .site-promo-close {
        order: 7;
        margin-left: auto;
    }
}