/*
    TNT | Styl'n | Mason's Nerdy Icon — Stage 3: Leave No Trace-y
    claudesRefactoredNerd2Styles.css
    Created: 09/09/2026
*/

/* ── Variables ───────────────────────────────────────────────── */
:root {
    --mn-yellow:  #f4c430;
    --mn-navy:    #010256;
    --mn-teal:    #0d6e6e;
    --mn-teal-lt: #e0f4f2;
    --mn-green:   #2e7d32;
    --bg-page:    #fffef5;
    --nunito:     'Nunito', 'Inter', sans-serif;
    --mono:       'Noto Sans Mono', 'Courier New', monospace;
}

body {
    font-family: var(--nunito);
    background: var(--bg-page);
}

/* ── Spark bar ───────────────────────────────────────────────── */
.spark-bar {
    background: #080415;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 2px solid var(--mn-teal);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.45);
}

.spark-links { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.spark-links a {
    color: var(--mn-yellow);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.85rem;
}
.spark-links a:hover { text-decoration: underline; }

/* ── Stage nav bar ───────────────────────────────────────────── */
.stage-nav-bar {
    background: #080415;
    border-bottom: 2px solid var(--mn-teal);
    padding: 0.45rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    font-weight: 600;
}

.stage-nav-bar a {
    color: var(--mn-yellow);
    text-decoration: none;
    opacity: 0.85;
}
.stage-nav-bar a:hover { opacity: 1; text-decoration: underline; }

.stage-current {
    color: var(--mn-yellow);
    font-weight: 800;
    letter-spacing: 0.03em;
}

/* ── Hero ────────────────────────────────────────────────────── */
#hero {
    min-height: 36vh;
    background:
        linear-gradient(150deg, rgba(1,2,86,0.72) 0%, rgba(13,110,110,0.52) 60%, rgba(1,30,28,0.72) 100%),
        url('../images/ComicCon-April-2025-9.webp') center 30% / cover no-repeat;
    background-color: var(--mn-navy);
    padding: 3.5rem 1rem 2.5rem;
    display: flex;
    align-items: flex-end;
}

.hero-eyebrow {
    display: block;
    color: var(--mn-yellow);
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.hero-title {
    font-family: 'Boogaloo', cursive;
    font-size: clamp(1.9rem, 5.5vw, 3rem);
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.15;
}

.hero-subtitle {
    font-size: clamp(0.88rem, 2.2vw, 1.05rem);
    color: rgba(255,255,255,0.78);
    line-height: 1.55;
}

/* ── Main section ────────────────────────────────────────────── */
#mainSection {
    background: linear-gradient(180deg, #f5f9f8 0%, var(--bg-page) 100%);
    padding: 2rem 0 4rem;
}

/* ── Intro card ──────────────────────────────────────────────── */
.intro-card {
    background: #fff;
    border: 1px solid rgba(13,110,110,0.20);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(13,110,110,0.08);
}

.stage-badge {
    display: inline-block;
    background: var(--mn-teal);
    color: #fff;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.2rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.changed-list {
    padding-left: 1.3rem;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.75;
    margin-bottom: 0.5rem;
}
.changed-list li { margin-bottom: 0.3rem; }
.changed-list code {
    background: rgba(13,110,110,0.09);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.84em;
    color: var(--mn-teal);
}

/* "Leave No Trace-y" principle callout box */
.lnt-box {
    background: var(--mn-teal-lt);
    border-left: 4px solid var(--mn-teal);
    border-radius: 0 7px 7px 0;
    padding: 0.85rem 1.1rem;
    margin: 1rem 0 0.5rem;
    font-size: 0.88rem;
    color: #1a3a3a;
    line-height: 1.7;
}
.lnt-box strong { color: var(--mn-teal); }
.lnt-box code {
    background: rgba(13,110,110,0.12);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.84em;
}

/* ── Showcase card (terminal + code + output) ────────────────── */
.showcase-card {
    background: #fff;
    border: 1px solid rgba(13,110,110,0.18);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 18px rgba(13,110,110,0.10);
    margin-bottom: 1.5rem;
}

/* Fake terminal header */
.code-terminal-header {
    background: #1a1a2e;
    padding: 0.5rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 34px;
}

.terminal-dots { display: flex; gap: 5px; }
.td { width: 11px; height: 11px; border-radius: 50%; }
.td-red    { background: #ff5f57; }
.td-yellow { background: #febc2e; }
.td-green  { background: #28c840; }

.terminal-filename {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.3px;
}

.terminal-tag {
    font-size: 0.68rem;
    background: rgba(13,110,110,0.35);
    color: rgba(255,255,255,0.60);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: var(--nunito);
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-left: auto;
}

/* ── Retro greenbar code paper ───────────────────────────────── */
.code-paper {
    background: #eaf8e6;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 620px;
    border-right: 1px solid rgba(13,110,110,0.12);
    min-height: 300px;
}

.code-paper ol {
    counter-reset: ln;
    margin: 0;
    padding: 0.3rem 0;
    list-style: none;
}

.code-paper ol li {
    counter-increment: ln;
    display: flex;
    align-items: baseline;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.65;
    white-space: nowrap;
}

.code-paper ol li::before {
    content: counter(ln);
    min-width: 2.8rem;
    padding: 0 0.55rem 0 0.35rem;
    text-align: right;
    color: #5a8a52;
    font-size: 0.70rem;
    flex-shrink: 0;
    user-select: none;
    border-right: 1px solid rgba(90,138,82,0.30);
    margin-right: 0.55rem;
}

/* Groups of 3 lines alternate (classic greenbar pattern) */
.code-paper ol li:nth-child(6n+1),
.code-paper ol li:nth-child(6n+2),
.code-paper ol li:nth-child(6n+3) { background: #cdecc8; }

.code-paper ol li:nth-child(6n+4),
.code-paper ol li:nth-child(6n+5),
.code-paper ol li:nth-child(6n+6) { background: #eaf8e6; }

.code-paper ol li code {
    padding-right: 1rem;
    display: inline-block;
    white-space: pre;
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    color: #1a2e18;
}

/* Syntax highlighting */
.py-comment { color: #2e7d32; font-style: italic; }
.py-string  { color: #1565c0; }
.py-keyword { color: #6a1b9a; font-weight: 700; }

/* ── Output panel ────────────────────────────────────────────── */
.output-panel {
    padding: 1.25rem 1rem 1rem;
    background: #f8fffe;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.output-label {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mn-teal);
    margin-bottom: 0.65rem;
    align-self: flex-start;
}

.output-frame {
    width: 100%;
    max-width: 380px;
    background: #010256;   /* matches Mason's bgcolor */
    border: 3px solid var(--mn-teal);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(13,110,110,0.22);
}

.output-frame img {
    width: 100%;
    height: auto;
    display: block;
}

.output-caption {
    font-size: 0.80rem;
    color: #5a7a78;
    margin-top: 0.65rem;
    text-align: center;
    line-height: 1.5;
}
.output-caption code {
    background: rgba(13,110,110,0.09);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.84em;
    color: var(--mn-teal);
}

/* ── Attribution strip ───────────────────────────────────────── */
.attr-strip {
    background: #f0faf9;
    border-top: 1px solid rgba(13,110,110,0.15);
    padding: 0.55rem 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    font-size: 0.78rem;
    color: #5a7a78;
}

.attr-name { font-weight: 800; color: var(--mn-teal); }
.attr-note { font-style: italic; }

/* ── Compare / stages card ───────────────────────────────────── */
.stages-card {
    background: #fff;
    border: 1px solid rgba(13,110,110,0.18);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 2px 12px rgba(13,110,110,0.08);
}

.stages-card h3 {
    font-family: 'Boogaloo', cursive;
    font-size: 1.4rem;
    color: var(--mn-navy);
    margin-bottom: 0.5rem;
}

.stages-card p {
    font-size: 0.92rem;
    color: #444;
    line-height: 1.72;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    .code-paper ol li { font-size: 0.70rem; }
    .code-paper ol li::before { min-width: 2rem; font-size: 0.62rem; }
    .output-panel { padding: 0.75rem; }
    .stage-nav-bar { font-size: 0.75rem; gap: 0.75rem; }
    .intro-card, .stages-card { padding: 1.1rem 1.1rem; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
    #hero, .spark-bar, .stage-nav-bar, footer, nav { display: none !important; }
    #mainSection { background: #fff !important; }
    .showcase-card { box-shadow: none; border: 1px solid #ccc; }
    .code-terminal-header { background: #444 !important; }
}