/*
    masonsNerdyIconOriginalCodeStyles.css
    Mason's Nerdy Icon — Stage 1: Original Code Showcase
    CSS teaching highlights: nth-child greenbar stripes, CSS counters for line numbers,
    ::before pseudo-element, backdrop-filter fallback pattern, print styles.
*/

:root {
    --mn-yellow:    #f4c430;   /* cheerful golden — matches icon's skin */
    --mn-amber:     #d4921a;   /* deeper amber for hover */
    --mn-navy:      #010256;   /* Mason's own bgcolor — authentically his */
    --mn-navy-lt:   #0a1166;
    --mn-cream:     #fffef5;   /* warm off-white page background */
    --mn-text:      #1a1a2a;

    /* Retro greenbar paper palette */
    --mn-paper-bg:  #f5fdf3;
    --mn-stripe-a:  #cdecc8;   /* classic greenbar — darker stripe */
    --mn-stripe-b:  #eaf8e6;   /* greenbar lighter stripe */
    --mn-ln-col:    #62a85c;   /* line number color */
    --mn-border:    #96cc90;   /* code paper border */

    --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 — same rule set as convQuestPosterStyles.css, yellow accent ══ */
.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.50) 0%, rgba(244,196,48,0.26) 55%, rgba(1,2,86,0.58) 100%),
        url('../images/ComicCon-April-2025-9.webp') center 30%/ cover no-repeat;
    background-color: var(--mn-navy);   /* solid fallback when image absent */
    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;
}

.mason-quote {
    background: #fffbee;
    border-left: 4px solid var(--mn-yellow);
    border-radius: 0 8px 8px 0;
    padding: 0.8rem 1.1rem;
    font-style: italic;
    font-size: 0.9rem;
    color: #4a3a00;
    margin: 1rem 0 0;
}
.mason-quote cite {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    font-style: normal;
    color: #888;
}

/* ── 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);
}

/* Fake terminal header — teaches that context sets expectations */
.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 ─────────────────────────────
   CSS techniques on display:
   1. nth-child(6n±) selector for grouping 3 lines of each color
   2. counter-reset / counter-increment for auto line numbers
   3. ::before pseudo-element as a self-maintaining line-number gutter
   ─────────────────────────────────────────────────────────── */
.code-paper {
    font-family: var(--mono);
    font-size: 0.80rem;
    line-height: 1.65;
    background: var(--mn-paper-bg);
    overflow-x: auto;
    max-height: 540px;
    overflow-y: auto;
}

.code-paper ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: ln;          /* start counter at 0 */
}

.code-paper ol li {
    counter-increment: ln;      /* +1 for every <li> */
    display: flex;
    align-items: stretch;
    min-height: 1.65em;
}

/* Classic greenbar: groups of 3 alternate dark/light */
.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);
}

/* Line number gutter via ::before */
.code-paper ol li::before {
    content: counter(ln);       /* auto-generates "1", "2", "3"… */
    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;          /* can't accidentally select line numbers */
    background: inherit;        /* inherits the greenbar stripe color */
}

/* Code text */
.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 */
.py-comment { color: #3d7a36; font-style: italic; }
.py-string  { color: #9a4e00; }

/* ── 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;
}

/* Frame matches Mason's own bgcolor so background is always correct */
.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);   /* fallback = Mason's bgcolor */
    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; }

/* ── What's Next teaser card ────────────────────────────────── */
.next-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;
}
.next-card h3 {
    font-family: var(--boogaloo);
    font-size: 1.6rem;
    color: var(--mn-yellow);
    margin-bottom: 0.65rem;
}
.next-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, #hero, .intro-card, .next-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;
    }
}