/* ========================================
   SPECIAL PAGE CSS - ASCII Background & Layout
   ======================================== */

/* ASCII Background - Default (Terminal Mode) */
.ascii-background {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-family: 'Courier New', monospace;
    font-size: clamp(10px, 5vw, 18px);
    line-height: 1;
    white-space: pre;
    color: #00ff41;
    opacity: 0.5;
    text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
}

/* Clean Mode Override */
body.clean-view .ascii-background {
    color: #333333 !important;
    opacity: 0.1 !important;
    font-weight: bold !important;
    font-size: clamp(10px, 5vw, 18px) !important;
    text-shadow: none !important;
}

/* Content Container - Full Viewport */
.special-content {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    position: relative;
    z-index: 1;
    margin-top: var(--first-section-offset);
}

/* Centered Content */
.centered-content {
    text-align: center;
    max-width: 1200px;
    width: 100%;
    z-index: 2;
}

.centered-content h1 {
    font-size: 6rem;  /* Display style for special cases */
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-lg);
    color: var(--fg);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    line-height: 1.1;
}

body.clean-view .centered-content h1 {
    color: var(--clean-fg);
}

/* Grouped title wrapper for tighter spacing */
.title-group {
    display: inline-block;
}

/* Reset top margin to prevent collapsed spacing between titles */
.title-group h1 {
    margin-top: 0;
}

/* Only tighten space between titles inside the group, not below the last title */
.title-group h1:not(:last-child) {
    margin-bottom: var(--space-xs);
}

.centered-content .hero-subtitle {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-xl);
    color: var(--fg);
    opacity: 0.8;
    line-height: 1.4;
}

body.clean-view .centered-content .hero-subtitle {
    color: var(--clean-fg);
}

.centered-content p {
    font-size: var(--fs-body-large);
    line-height: 1.6;
    color: var(--fg);
    max-width: 900px;
    margin: 0 auto;
    opacity: 0.9;
}

body.clean-view .centered-content p {
    color: var(--clean-fg);
}

/* Remove matrix effect on dark mode for this special page */
body:not(.clean-view) .scan-line {
    display: none !important;
}

/* Increase desktop H1 size and keep strong hierarchy */
@media (min-width: 1025px) {
    .centered-content h1 {
        font-size: 6.5rem; /* Slightly larger than default for desktop */
        line-height: 1.05;
    }
}

/* Next smaller breakpoint (<= 1024px) slightly smaller than desktop */
@media (max-width: 1024px) and (min-width: 769px) {
    .centered-content h1 {
        font-size: 5.25rem; /* Smaller than desktop */
        line-height: 1.08;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ascii-background {
        font-size: clamp(6px, 3vw, 12px);
        opacity: 0.1;
    }

    .special-content {
        padding: var(--space-md);
        margin-top: calc(var(--header-height) + 1rem);
    }

    .centered-content h1 {
        font-size: 4rem; /* Smaller than mid-size for tablet */
        line-height: 1.1;
    }

    /* Mobile: tighten only between titles, not after the last */
    .title-group h1:not(:last-child) {
        margin-bottom: var(--space-tiny);
    }
}

@media (max-width: 480px) {
    .ascii-background {
        font-size: clamp(4px, 2vw, 8px);
        opacity: 0.1;
    }

    .centered-content h1 {
        font-size: 2.5rem; /* Smallest size for mobile phones */
        line-height: 1.15;
    }

    .centered-content .hero-subtitle {
        font-size: var(--fs-body-large);
        margin-bottom: var(--space-lg);
    }

    .special-content {
        padding: var(--space-sm);
        margin-top: calc(var(--header-height) + 0.5rem);
    }
}