/**
 * Additional Layout Styles - 404 and Single Pages
 * 
 * @package Asivo
 * @version 1.0.0
 */

/* ================================
   404 Error Page
   ================================ */

.section--404 {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-404-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.error-404__title {
    font-size: clamp(6rem, 10vw, 12rem);
    font-weight: var(--font-bold);
    font-family: var(--font-headline);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-3);
    opacity: 0.3;
}

.error-404__subtitle {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.error-404__text {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    font-size: var(--text-lg);
}

/* ================================
   Single Portfolio Entry
   ================================ */

.single-portfolio {
    padding-top: calc(70px + var(--space-12));
    padding-bottom: var(--space-12);
}

.entry-header {
    margin-bottom: var(--space-8);
}

.entry-title {
    font-size: var(--text-4xl);
    font-family: var(--font-headline);
    margin-bottom: var(--space-4);
    text-align: center;
}

.entry-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.entry-content {
    font-size: var(--text-lg);
    line-height: 1.8;
    margin-bottom: var(--space-8);
}

.entry-content h2,
.entry-content h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
}

.entry-content p {
    margin-bottom: var(--space-4);
    max-width: 100%;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin: var(--space-6) 0;
}

.entry-content ul,
.entry-content ol {
    margin-left: var(--space-4);
    margin-bottom: var(--space-4);
    color: var(--color-text-primary);
}

.entry-content li {
    margin-bottom: var(--space-2);
}

.entry-footer {
    text-align: center;
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-card-border);
}

.page-links {
    margin-top: var(--space-6);
    text-align: center;
}

/* ================================
   Additional Header States
   ================================ */

.site-header.scroll-down {
    transform: translateY(-100%);
}

.site-header.scroll-up {
    transform: translateY(0);
    box-shadow: var(--shadow-md);
}

/* ================================
   Responsive Adjustments
   ================================ */

@media (max-width: 768px) {
    .single-portfolio {
        padding-top: calc(70px + var(--space-8));
    }
    
    .entry-title {
        font-size: var(--text-3xl);
    }
    
    .entry-content {
        font-size: var(--text-base);
    }
}