/*
    claudesRefactoredNerdStyles.css
    Mason's Nerdy Icon — Stage 2: Refactored Code Showcase
    CSS teaching highlights: same greenbar/counter techniques as Stage 1.
    JS teaching highlight: DOM generated from a code string (buildCodeDisplay).
*/

:root {
    --mn-yellow:    #f4c430;
    --mn-amber:     #d4921a;
    --mn-navy:      #010256;
    --mn-navy-lt:   #0a1166;
    --mn-cream:     #fffef5;
    --mn-text:      #1a1a2a;

    /* Retro greenbar paper palette */
    --mn-paper-bg:  #f5fdf3;
    --mn-stripe-a:  #cdecc8;
    --mn-stripe-b:  #eaf8e6;
    --mn-ln-col:    #62a85c;
    --mn-border:    #96cc90;

    --boogaloo: 'Boogaloo', cursive;
    --nunito:   'Nunito', 'Inter', sans-serif;
    --mono:     'Courier New', Courier, 'Lucida Console', monospace;
}

body {
    font-family: var(--nunito);
    background: var(--mn-cream);
    color: var(--mn-text);
}

/* ══ 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;
}
.spark-bar a {
    color: var(--mn-yellow);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
}
.spark-bar a:hover { text-decoration: underline; }
.spark-bar .spark-links { display: flex; gap: 1.2rem; align-items: center; }
.spark-bar span { color: rgba(255,255,255,0.40); font-size: 0.8rem; }

/* ── Stage navigation bar ─────────────────────────────────── */
.stage-nav-bar {
    background: #080415;
    padding: 0.45rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(244,196,48,0.18);
}
.stage-nav-bar a {
    color: var(--mn-yellow);
    font-weight: 700;
    text-decoration: none;
    opacity: 0.85;
}
.stage-nav-bar a:hover { opacity: 1; text-decoration: underline; }
.stage-nav-bar .stage-current { color: var(--mn-yellow); font-weight: 800; letter-spacing: 0.03em; }

/* ── Hero ──────────────────────────────────────────────────── */
#hero {
    min-height: 280px;
    background:
        linear-gradient(135deg, rgba(1,2,86,0.52) 0%, rgba(109,40,217,0.18) 55%, rgba(1,2,86,0.60) 100%),
        url('../images/ComicCon-April-2025-9.webp') center 30% / cover no-repeat;
    background-color: var(--mn-navy);
    padding: 3.5rem 1rem 2.5rem;
}
.hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--mn-yellow);
    margin-bottom: 0.5rem;
}
.hero-title {
    font-family: var(--boogaloo);
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    color: #fff;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}
.hero-subtitle {
    font-size: clamp(0.88rem, 2.2vw, 1.05rem);
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
}

/* ── Main content area ──────────────────────────────────────── */
#mainSection {
    background: var(--mn-cream);
    padding: 2.5rem 0 5rem;
}

/* ── Intro card ─────────────────────────────────────────────── */
.intro-card {
    background: #fff;
    border: 1.5px solid #e4dfcc;
    border-top: 4px solid var(--mn-yellow);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.stage-badge {
    display: inline-block;
    background: var(--mn-yellow);
    color: var(--mn-navy);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.18rem 0.75rem;
    border-radius: 50px;
    margin-bottom: 0.65rem;
}

/* ── What-changed list ─────────────────────────────────────── */
.changed-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}
.changed-list li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    font-size: 0.91rem;
    line-height: 1.6;
    margin-bottom: 0.4rem;
    color: #333;
}
.changed-list li::before {
    content: "→";
    color: var(--mn-yellow);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.05em;
}

/* ── Code showcase card ─────────────────────────────────────── */
.showcase-card {
    background: #fff;
    border: 1.5px solid #d8e8d4;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(0,0,0,0.09);
}
.code-terminal-header {
    background: #1e1e1e;
    padding: 0.65rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.terminal-dots { display: flex; gap: 0.42rem; }
.td { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.td-red    { background: #ff5f57; }
.td-yellow { background: #febc2e; }
.td-green  { background: #28c840; }
.terminal-filename {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: rgba(255,255,255,0.70);
    letter-spacing: 0.5px;
}
.terminal-tag {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.68rem;
    color: rgba(255,255,255,0.38);
}

/* ── ★ Retro greenbar code paper ──────────────────────────────
   Same nth-child/counter techniques as Stage 1.
   The <li> elements are generated by buildCodeDisplay() in JS
   rather than hand-coded — same CSS, different data source.
   ─────────────────────────────────────────────────────────── */
.code-paper {
    font-family: var(--mono);
    font-size: 0.80rem;
    line-height: 1.65;
    background: var(--mn-paper-bg);
    overflow-x: auto;
    max-height: 620px;
    overflow-y: auto;
}
.code-paper ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: ln;
}
.code-paper ol li {
    counter-increment: ln;
    display: flex;
    align-items: stretch;
    min-height: 1.65em;
}
.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-color: var(--mn-stripe-a); }
.code-paper ol li:nth-child(6n+4),
.code-paper ol li:nth-child(6n+5),
.code-paper ol li:nth-child(6n+0) { background-color: var(--mn-stripe-b); }
.code-paper ol li::before {
    content: counter(ln);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 3.2em;
    padding: 0 0.6em;
    color: var(--mn-ln-col);
    border-right: 1px solid var(--mn-border);
    font-size: 0.70rem;
    flex-shrink: 0;
    user-select: none;
    background: inherit;
}
.code-paper ol li code {
    display: block;
    padding: 0 0.85em;
    white-space: pre;
    flex: 1;
    background: transparent;
    color: var(--mn-text);
    border: none;
    border-radius: 0;
    font-size: inherit;
    font-family: inherit;
}

/* Python mini syntax coloring — Stage 2 adds .py-keyword */
.py-comment { color: #3d7a36; font-style: italic; }
.py-string  { color: #9a4e00; }
.py-keyword { color: #1a5276; font-weight: 700; }

/* ── Output image panel ─────────────────────────────────────── */
.output-panel {
    padding: 1.75rem 1.5rem;
    background: #f2f7f0;
    border-left: 1px solid #d8e8d4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.output-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 0.85rem;
    text-align: center;
}
.output-frame {
    border: 3px solid var(--mn-navy);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(1,2,86,0.20);
    background: var(--mn-navy);
    max-width: 280px;
    width: 100%;
}
.output-frame img {
    display: block;
    width: 100%;
    height: auto;
}
.output-caption {
    margin-top: 0.85rem;
    font-size: 0.80rem;
    color: #666;
    text-align: center;
    line-height: 1.5;
    max-width: 260px;
}

/* ── Attribution strip ─────────────────────────────────────── */
.attr-strip {
    background: var(--mn-navy);
    color: rgba(255,255,255,0.72);
    font-size: 0.80rem;
    padding: 0.75rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    align-items: center;
    border-top: 3px solid var(--mn-yellow);
}
.attr-strip .attr-name  { color: var(--mn-yellow); font-weight: 700; }
.attr-strip .attr-note  { color: rgba(255,255,255,0.42); font-style: italic; font-size: 0.74rem; }

/* ── Compare card (links back to Stage 1) ─────────────────── */
.compare-card {
    background: linear-gradient(135deg, var(--mn-navy) 0%, var(--mn-navy-lt) 100%);
    border: 2px solid var(--mn-yellow);
    border-radius: 14px;
    padding: 2rem 2rem 1.75rem;
    margin-top: 2.5rem;
    color: #fff;
}
.compare-card h3 {
    font-family: var(--boogaloo);
    font-size: 1.6rem;
    color: var(--mn-yellow);
    margin-bottom: 0.65rem;
}
.compare-card p {
    color: rgba(255,255,255,0.78);
    font-size: 0.92rem;
    line-height: 1.72;
    margin-bottom: 0;
}

/* ── Print — code only ──────────────────────────────────────── */
@media print {
    #mainNav, .spark-bar, .stage-nav-bar, #hero, .intro-card,
    .compare-card, .output-panel, footer, .attr-strip { display: none !important; }
    body { background: #fff; color: #000; }
    .showcase-card { border: 1px solid #ccc; box-shadow: none; border-radius: 0; }
    .code-terminal-header { background: #333; }
    .code-paper { max-height: none; overflow: visible; border: none; }
    .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-color: #e4f0e2; }
    .code-paper ol li:nth-child(6n+4),
    .code-paper ol li:nth-child(6n+5),
    .code-paper ol li:nth-child(6n+0) { background-color: #f4faf3; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991px) {
    .output-panel { border-left: none; border-top: 1px solid #d8e8d4; }
}