/* ══════════════════════════════════════════════════════════════════════════════
   xmasLightsOrigStyles.css
   TNT | Tool Time | Xmas Lights — Entry #7 (Python Processing)
   Created: 11/02/2026
   Palette: Christmas forest green · holiday red · gold star · snow cream
   Code display: green-banded Python paper (matches GraysonsSong Python panel)
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
    --xm-dark:      #070f0a;
    --xm-card:      #0e1a10;
    --xm-forest:    #1a5c1a;
    --xm-red:       #cc2200;
    --xm-gold:      #f2a800;
    --xm-cream:     #f0ebe0;
    --xm-cream-dim: rgba(240,235,224,0.65);
    --xm-green:     #27ae3d;
    --xm-border:    rgba(39,174,61,0.28);
    /* Python code paper (green-banded) */
    --py-paper:     #f0fdf4;
    --py-header-bg: #14532d;
    --py-header-fg: #dcfce7;
    --py-border:    #16a34a;
    --py-stripe:    rgba(22,163,74,0.05);
    --py-text:      #0a2010;
}

body {
    background-color: var(--xm-dark);
    color: var(--xm-cream);
    font-family: 'Inter', sans-serif;
}

/* ── Back bar ──────────────────────────────────────────────────────────────── */
.xm-back-bar {
    background: rgba(7,15,10,0.96);
    border-bottom: 1px solid var(--xm-border);
    padding: 0.45rem 1.2rem;
    display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.5px;
}
.xm-back-bar a            { color: var(--xm-green); text-decoration: none; transition: color 0.18s; }
.xm-back-bar a:hover      { color: var(--xm-cream); }
.xm-back-bar span         { color: rgba(240,235,224,0.28); margin-left: auto; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
#hero {
    min-height: 40vh;
    background:
        linear-gradient(160deg, rgba(7,15,10,0.86) 0%, rgba(15,40,18,0.60) 100%),
        url('../images/xmasTree2.png') center 30% / cover no-repeat;
    padding: 4rem 1rem 3rem;
    display: flex; align-items: center; justify-content: center;
}
.hero-content       { text-align: center; max-width: 760px; margin: 0 auto; }
.hero-eyebrow       { display: block; font-size: 0.78rem; font-weight: 600;
                       letter-spacing: 2.5px; text-transform: uppercase;
                       color: var(--xm-gold); margin-bottom: 0.65rem; }
.hero-title         { font-family: 'Boogaloo', sans-serif;
                       font-size: clamp(2rem, 5vw, 3.2rem);
                       color: var(--xm-cream); margin-bottom: 0.55rem; line-height: 1.15; }
.hero-subtitle      { font-size: 1rem; color: var(--xm-cream-dim);
                       max-width: 600px; margin: 0 auto; line-height: 1.65; }

/* ── Main section ──────────────────────────────────────────────────────────── */
#mainSection { background: var(--xm-dark); padding: 3rem 1rem 5rem; }

/* ── Intro card ────────────────────────────────────────────────────────────── */
.intro-card {
    background: var(--xm-card);
    border: 1px solid var(--xm-border);
    border-left: 4px solid var(--xm-green);
    border-radius: 10px;
    padding: 1.6rem 2rem;
    margin-bottom: 1.75rem;
    color: var(--xm-cream-dim);
    line-height: 1.72;
}
.intro-card h2    { font-family: 'Boogaloo', sans-serif; font-size: 1.5rem;
                    color: var(--xm-gold); margin-bottom: 0.75rem; }
.intro-card code  { color: var(--xm-green); background: rgba(39,174,61,0.12);
                    padding: 1px 5px; border-radius: 4px; font-size: 0.87em; }
.intro-card a     { color: var(--xm-green); font-weight: 600; }
.intro-card a:hover { color: var(--xm-cream); }

.stage-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    background: rgba(39,174,61,0.14); color: var(--xm-green);
    border: 1px solid rgba(39,174,61,0.35); border-radius: 4px;
    padding: 2px 10px; margin-bottom: 0.7rem;
}

/* ── Showcase card ─────────────────────────────────────────────────────────── */
.showcase-card {
    background: var(--xm-card);
    border: 1px solid var(--py-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.75rem;
}

/* ── Python code terminal header ───────────────────────────────────────────── */
.code-terminal-header {
    background: var(--py-header-bg);
    border-bottom: 1px solid rgba(22,163,74,0.35);
    padding: 0.55rem 1rem;
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.terminal-dots          { display: flex; gap: 6px; align-items: center; }
.td                     { width: 12px; height: 12px; border-radius: 50%; }
.td-red                 { background: #ff5f56; }
.td-yellow              { background: #ffbd2e; }
.td-green               { background: #27c93f; }
.terminal-filename      { font-family: 'Source Code Pro', monospace;
                           font-size: 0.80rem; color: var(--py-header-fg); opacity: 0.80; }
.terminal-tag           { font-size: 0.72rem; color: rgba(220,252,231,0.45); margin-left: 0.25rem; }
.copy-btn               { margin-left: auto; display: flex; align-items: center;
                           gap: 0.4rem; padding: 0.28rem 0.9rem;
                           background: rgba(22,163,74,0.18);
                           border: 1px solid rgba(22,163,74,0.50);
                           border-radius: 6px; font-size: 0.75rem; font-weight: 700;
                           color: var(--py-header-fg); cursor: pointer;
                           transition: background 0.18s; }
.copy-btn:hover         { background: rgba(22,163,74,0.35); }

/* ── Green-banded Python code paper ────────────────────────────────────────── */
.code-paper {
    background: var(--py-paper);
    overflow-x: auto;
    counter-reset: code-line;
    font-family: 'Source Code Pro', 'Courier New', monospace;
    font-size: 0.83rem;
    line-height: 1.65;
    padding: 0.6rem 0;
}
.code-paper ol  { margin: 0; padding: 0; list-style: none; }
.code-paper li  {
    padding: 1px 0;
    white-space: pre;
    display: block;
    counter-increment: code-line;
    color: var(--py-text);
}
.code-paper li:nth-child(even) { background: var(--py-stripe); }
.code-paper li::before {
    content: counter(code-line);
    display: inline-block;
    min-width: 36px;
    padding: 0 12px 0 10px;
    color: rgba(22,163,74,0.45);
    user-select: none;
    text-align: right;
    border-right: 1px solid rgba(22,163,74,0.18);
    margin-right: 12px;
}

/* ── Attribution strip ─────────────────────────────────────────────────────── */
.attr-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
    padding: 0.55rem 1rem;
    background: var(--py-header-bg); opacity: 0.85;
    border-top: 1px solid rgba(22,163,74,0.25);
    font-size: 0.75rem; color: var(--py-header-fg); opacity: 0.70;
}
.attr-name { color: var(--xm-gold); font-weight: 700; }

/* ── Your Turn card ────────────────────────────────────────────────────────── */
.your-turn-card {
    background: #0c1a0d;
    border: 1px solid var(--xm-border);
    border-radius: 10px;
    padding: 1.6rem 2rem;
    color: var(--xm-cream-dim);
}
.your-turn-card h3   { font-family: 'Boogaloo', sans-serif; font-size: 1.3rem;
                        color: var(--xm-gold); margin-bottom: 0.75rem; }
.your-turn-card h4   { font-size: 0.97rem; font-weight: 700; color: var(--xm-cream);
                        margin: 1.3rem 0 0.4rem; }
.your-turn-card code { color: var(--xm-green); background: rgba(39,174,61,0.10);
                        padding: 1px 5px; border-radius: 4px; font-size: 0.87em; }
.your-turn-card pre  { background: var(--py-paper); border: 1px solid rgba(22,163,74,0.30);
                        border-radius: 6px; padding: 0.75rem 1rem;
                        font-family: 'Source Code Pro', monospace;
                        font-size: 0.82rem; color: var(--py-text);
                        overflow-x: auto; margin: 0.65rem 0; }
.your-turn-card a    { color: var(--xm-green); font-weight: 600; }
.your-turn-card a:hover { color: var(--xm-cream); }

.lang-idea-strip { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1rem 0; }
.lang-idea {
    padding: 0.3rem 0.75rem; border-radius: 20px;
    background: rgba(39,174,61,0.12);
    border: 1px solid rgba(39,174,61,0.30);
    font-size: 0.78rem; font-weight: 600; color: var(--xm-green);
}

.craft-callout {
    background: rgba(242,168,0,0.07);
    border-left: 3px solid var(--xm-gold);
    border-radius: 0 8px 8px 0;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    color: rgba(240,235,224,0.68);
    margin-top: 1.2rem;
}
.craft-callout a { color: var(--xm-gold); }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .hero-title        { font-size: 1.8rem; }
    .intro-card,
    .your-turn-card    { padding: 1.1rem 1rem; }
    .code-paper        { font-size: 0.75rem; }
    .xm-back-bar span  { display: none; }
}