/* ================================================================
# DACOG Search Engine – System Architecture
# File: error-pages.css
# Path: /static/css/error-pages.css
# Version: 3.0.0
# Description: Mathematical-Unit Exception Screens (Light/Hero)
# ================================================================*/

/* 1. Base Container */
.error-wrapper {
    min-height: 80vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 3.125rem 1.25rem;
}

.error-card {
    max-width: 31.25rem; /* 500px */
    width: 100%;
    text-align: center;
    border: none;
    background-color: transparent;
    position: relative;
    z-index: 2;
}

/* 2. 404 Specific Elements */
.error-code-bg {
    font-size: 10rem;
    font-weight: 900;
    color: var(--dacog-accent-primary);
    line-height: 1;
    opacity: 0.05;
    position: absolute;
    width: 100%;
    top: -2.5rem;
    left: 0;
    z-index: -1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.error-search-box {
    background-color: var(--dacog-bg-nav);
    border: 0.0625rem solid var(--dacog-border-color);
    -webkit-box-shadow: var(--dacog-shadow-sm);
    -moz-box-shadow: var(--dacog-shadow-sm);
    box-shadow: var(--dacog-shadow-sm);
    -webkit-border-radius: 3.125rem;
    -moz-border-radius: 3.125rem;
    border-radius: 3.125rem;
    overflow: hidden;
}

.error-search-box input {
    background-color: transparent;
    color: var(--dacog-text-main);
}

.error-search-box input:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* 3. 500 Specific Elements */
.status-pulse {
    width: 0.75rem; /* 12px */
    height: 0.75rem;
    background: var(--dacog-accent-danger);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
    -webkit-animation: pulse 1.5s infinite;
    -moz-animation: pulse 1.5s infinite;
    -o-animation: pulse 1.5s infinite;
    animation: pulse 1.5s infinite;
}

@-webkit-keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
@-moz-keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
@-o-keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

/* ==========================================================================
   4. MEDIA QUERIES (AFRICAN TARGET OPTIMIZATION)
   ========================================================================== */

@media screen and (max-width: 30em) { /* 480px */
    .error-code-bg {
        font-size: 7.5rem;
        top: -1.875rem;
    }
    
    .error-card h2 {
        font-size: 1.75rem;
    }
    
    .error-card p.text-muted {
        font-size: 0.95rem;
    }
}