/* ==========================================================
   HACKER — BLUFF_NET Terminal
   "Access granted"

   Palette: Full dark mode — black background, neon green
   phosphor text, CRT terminal aesthetic
   Font: Fira Code (monospace, ligatures)
   Image: hacker1.png

   This site is deliberately the most dramatic departure from
   the other themes — it feels like a hacked terminal.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');

.site-hacker {
    font-family: 'Fira Code', 'Courier New', monospace;

    /* Page background — near-black */
    --color-bg: #0a0a0a;
    --color-body-bg: #0d1117;

    /* Title bar — dark with green glow text */
    --color-title-bar-bg: #000000;
    --color-title-bar-text: #00ff41;

    /* Header image */
    --color-header-bg: #0a0e14;
    --header-image: url('/images/hacker.png');
    --header-height: 300px;

    /* Navigation — dark with green phosphor text */
    --color-menu-bg: #0d1117;
    --color-menu-text: #00ff41;
    --color-menu-hover: #161b22;
    --color-menu-hover-text: #39ff14;

    /* Container border — green terminal border */
    --color-container-border: #00ff41;

    /* Footer */
    --color-footer-bg: #000000;
    --color-footer-text: #00cc33;
    --color-helper-footer-bg: #000000;
    --color-helper-footer-text: #00aa28;
}


/* Body-level overrides — invert the entire page feel */
.site-hacker {
    color: #00ff41;
}

.site-hacker #content {
    color: #b0ffb0;
    line-height: 1.6;
}

.site-hacker #content a {
    color: #39ff14;
}

.site-hacker #content a:hover {
    color: #00ff41;
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
}

.site-hacker #content h1,
.site-hacker #content h2,
.site-hacker #content h3 {
    color: #00ff41;
    font-weight: 700;
}


/* Title bar — terminal prompt styling */
.site-hacker .site-title-bar {
    border-bottom: 1px solid #00ff41;
}

.site-hacker .site-title-bar .title {
    font-family: 'Fira Code', monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.6),
                 0 0 20px rgba(0, 255, 65, 0.3);
}

.site-hacker .site-title-bar .subtitle {
    font-family: 'Fira Code', monospace;
    letter-spacing: 0.08em;
    opacity: 0.7;
    font-size: clamp(0.65rem, 1.8vw, 0.85rem);
}


/* Header image */
.site-hacker .header-image {
    background-size: cover;
    border-bottom: 2px solid #00ff41;
    box-shadow: inset 0 -30px 60px rgba(0, 0, 0, 0.8);
}


/* CRT scanline overlay on the header */
.site-hacker .header-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    pointer-events: none;
}


/* Menu — terminal-style navigation */
.site-hacker .menu {
    border-top: 1px solid #00ff41;
    border-bottom: 1px solid #00ff41;
}

.site-hacker .menu-toggle__bar {
    background-color: #00ff41;
}

.site-hacker .menu-button {
    font-family: 'Fira Code', monospace;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-top-color: rgba(0, 255, 65, 0.2);
}

.site-hacker .menu-button:hover {
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
    box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.1);
}


/* Menu — Desktop alignment fix (3 nav items) */
@media (min-width: 768px) {
    .site-hacker .menu-button {
        flex: 0 1 auto;
        max-width: 240px;
        min-width: 140px;
        padding: 0.25em 1.5em;
        font-size: 1.2em;
    }
}


/* Container — green glow border on desktop */
@media (min-width: 768px) {
    .site-hacker #container {
        box-shadow: 0 0 15px rgba(0, 255, 65, 0.15),
                    inset 0 0 15px rgba(0, 255, 65, 0.05);
    }
}


/* Footer — dim green on black */
.site-hacker #site-footer {
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    border-top: 1px solid rgba(0, 255, 65, 0.3);
}

.site-hacker #helper-footer {
    border-top: 1px solid rgba(0, 255, 65, 0.2);
}


/* First-time modal — dark terminal version */
.site-hacker #first-time-modal {
    background: #0d1117;
    color: #00ff41;
    border: 1px solid #00ff41;
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.2);
}

.site-hacker #first-time-accept {
    background: transparent;
    color: #00ff41;
    border: 2px solid #00ff41;
}

.site-hacker #first-time-accept:hover {
    background: #00ff41;
    color: #0d1117;
}