/**
 * Announcement Banner Styles
 *
 * Styles for the admin announcement banner system.
 * Supports multiple banner styles: info, warning, success, error, promo
 */

/* Base banner styles */
.announcement-banner {
    position: relative;
    z-index: 30; /* Below sticky nav (z-40) and dropdowns (z-50), above content */
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Default info style (green - brand color) */
.announcement-banner--info {
    background-color: #257D39;
    color: #ffffff;
}

.announcement-banner--info a {
    color: #ffffff;
    text-decoration: underline;
}

.announcement-banner--info a:hover {
    opacity: 0.9;
}

/* Warning style (orange/amber) */
.announcement-banner--warning {
    background-color: #D97706;
    color: #ffffff;
}

.announcement-banner--warning a {
    color: #ffffff;
    text-decoration: underline;
}

/* Success style (light green) */
.announcement-banner--success {
    background-color: #44A259;
    color: #ffffff;
}

.announcement-banner--success a {
    color: #ffffff;
    text-decoration: underline;
}

/* Error style (red) */
.announcement-banner--error {
    background-color: #DC2626;
    color: #ffffff;
}

.announcement-banner--error a {
    color: #ffffff;
    text-decoration: underline;
}

/* Promo style (gradient) */
.announcement-banner--promo {
    background: linear-gradient(135deg, #257D39 0%, #44A259 50%, #257D39 100%);
    background-size: 200% 200%;
    animation: announcement-gradient 8s ease infinite;
    color: #ffffff;
}

.announcement-banner--promo a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 600;
}

@keyframes announcement-gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Banner icon styling */
.announcement-banner i {
    opacity: 0.9;
}

/* Dismiss button */
.announcement-banner button {
    opacity: 0.8;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.announcement-banner button:hover {
    opacity: 1;
}

.announcement-banner button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .announcement-banner {
        font-size: 0.875rem;
    }

    .announcement-banner .ph-megaphone {
        font-size: 1.125rem;
    }
}

/* Animation for banner appearance */
.announcement-banner[data-animating="true"] {
    animation: announcement-slide-in 0.3s ease-out;
}

@keyframes announcement-slide-in {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Bottom positioned banners */
.announcement-banner[data-position="bottom"] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
}

/* Multiple banners stacking */
#announcement-banners-container .announcement-banner + .announcement-banner {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .announcement-banner--info,
    .announcement-banner--warning,
    .announcement-banner--success,
    .announcement-banner--error,
    .announcement-banner--promo {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .announcement-banner,
    .announcement-banner--promo {
        animation: none;
        transition: opacity 0.15s ease;
    }
}