/* Site Notice - Non-invasive notifications */

.site-notice {
    background: linear-gradient(135deg, #1a1c23 0%, #292d38 100%);
    border: 1px solid #3d4453;
    border-radius: 12px;
    margin: 2rem auto 3rem;
    max-width: 800px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.site-notice.hiding {
    animation: slideUp 0.3s ease-in forwards;
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.site-notice-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Notice types - colors from site palette */
.site-notice[data-type="info"] {
    border-left: 3px solid #17a2b8; /* --cyan */
}
.site-notice[data-type="info"] .site-notice-icon {
    color: #17a2b8;
}

.site-notice[data-type="warning"] {
    border-left: 3px solid #db6937; /* --secondary */
}
.site-notice[data-type="warning"] .site-notice-icon {
    color: #db6937;
}

.site-notice[data-type="success"] {
    border-left: 3px solid #20c997; /* --teal */
}
.site-notice[data-type="success"] .site-notice-icon {
    color: #20c997;
}

.site-notice[data-type="error"] {
    border-left: 3px solid #e83e8c; /* --pink */
}
.site-notice[data-type="error"] .site-notice-icon {
    color: #e83e8c;
}

.site-notice-content {
    flex: 1;
    color: #e9ecef;
    font-size: 0.9rem;
    line-height: 1.5;
}

.site-notice-content a {
    color: #60a5fa;
    text-decoration: underline;
}

.site-notice-content a:hover {
    color: #93c5fd;
}

.site-notice-close {
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 5px;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.site-notice-close:hover {
    color: #e9ecef;
    transform: scale(1.1);
}

/* Hidden by default, shown via JS */
.site-notice[hidden] {
    display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .site-notice {
        margin: 1.5rem 15px 2.5rem;
        padding: 10px 15px;
        border-radius: 10px;
    }

    .site-notice-content {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .site-notice {
        margin: 1.5rem 10px 2rem;
    }
}