/* =============================================
   AP CS Principles — Student Documentation
   Clean, readable, terminal-friendly aesthetic.
   ============================================= */

:root {
    --bg: #1a1a1a;
    --surface: #242424;
    --text: #e0e0e0;
    --accent: #6cbf6c;
    --accent-dim: #4a8a4a;
    --code-bg: #2d2d2d;
    --border: #3a3a3a;
    --warn: #e8b84b;
    --trap: #e05555;
    --muted: #999;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    font-size: 15px;
}

/* ---- Top Navigation Tabs ---- */
.top-nav {
    background: #161616;
    border-bottom: 1px solid var(--border);
    padding: 0;
    display: flex;
    gap: 0;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 10;
}
.top-nav a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.top-nav a:hover { color: var(--text); }
.top-nav a.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ---- Page wrapper ---- */
/* Full-bleed: the page fills the viewport instead of sitting in an 860px
   column with dead space either side. The gutter still scales with the
   window, so text never runs right up against the edge on a wide monitor. */
.page {
    max-width: none;
    margin: 0;
    padding: 2rem clamp(1.5rem, 4vw, 4rem) 6rem;
}

/* ---- Breadcrumb Navigation ---- */
nav:not(.top-nav) {
    margin-bottom: 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
nav:not(.top-nav) a {
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
}
nav:not(.top-nav) a:hover { text-decoration: underline; }
nav:not(.top-nav) .sep { color: var(--muted); margin: 0 0.5rem; }
nav:not(.top-nav) .here { color: var(--muted); }

/* ---- Headings ---- */
h1 { font-size: 1.8rem; margin-bottom: 0.5rem; color: #fff; }
h2 { font-size: 1.3rem; margin: 2rem 0 0.75rem; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; color: #ccc; }
h4 { font-size: 1rem; margin: 1rem 0 0.25rem; color: var(--muted); }

p { margin-bottom: 0.75rem; }
a { color: var(--accent); }

/* ---- Code ---- */
code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 13px;
    background: var(--code-bg);
    padding: 0.15em 0.4em;
    border-radius: 3px;
}
pre {
    background: var(--code-bg);
    padding: 1rem 1.25rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.75rem 0 1.25rem;
    border: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.5;
}
pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}

/* ---- Callout boxes ---- */
.callout {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin: 1rem 0;
    border-left: 4px solid var(--accent);
    background: rgba(108, 191, 108, 0.08);
}
/* lab callout = tinker-style box for docs experiments */
.callout.lab {
    border-left-color: var(--accent);
}

.callout.trap {
    border-left-color: var(--trap);
    background: rgba(224, 85, 85, 0.08);
}
.callout.warn {
    border-left-color: var(--warn);
    background: rgba(232, 184, 75, 0.08);
}
.callout strong { color: #fff; }

/* ---- Lists ---- */
ul, ol { margin: 0.5rem 0 1rem 1.5rem; }
li { margin-bottom: 0.3rem; }

/* ---- Tables ---- */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0 1.25rem;
}
th, td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
th { color: var(--accent); font-weight: 600; }
tr:hover { background: rgba(255,255,255,0.02); }

/* ---- Hub page ---- */
.unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.unit-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    transition: border-color 0.15s;
}
.unit-card:hover { border-color: var(--accent); }
.unit-card h3 { margin-top: 0; font-size: 1rem; }
.unit-card .num { color: var(--accent); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.unit-card .desc { color: var(--muted); font-size: 0.9rem; margin: 0.5rem 0 0; }
.unit-card a { color: inherit; text-decoration: none; }
.unit-card a:hover h3 { color: var(--accent); }

.unit-card.placeholder {
    opacity: 0.5;
    pointer-events: none;
}

/* ---- Output example ---- */
.output {
    color: var(--muted);
    font-style: italic;
    font-size: 13px;
    margin-top: 0.25rem;
}
.output::before {
    content: "→ output: ";
    font-style: normal;
    color: var(--accent-dim);
}

/* ---- Step numbers ---- */
.step {
    background: var(--accent-dim);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.15em 0.5em;
    border-radius: 3px;
    margin-right: 0.5rem;
    text-transform: uppercase;
}

/* ---- Interactive Learning Patterns ---- */
.socratic {
    padding: 1.25rem 1.5rem;
    border-radius: 6px;
    margin: 1.25rem 0 2rem;
    border-left: 4px solid #5cafff;
    background: rgba(92, 175, 255, 0.04);
    border: 1px solid rgba(92, 175, 255, 0.15);
    border-left-width: 4px;
}
.socratic h3 {
    color: #5cafff;
    margin-top: 0;
    margin-bottom: 0.75rem;
}
.socratic h3:not(:first-of-type) {
    margin-top: 1.5rem;
}

.bug-hunt {
    padding: 1.25rem 1.5rem;
    border-radius: 6px;
    margin: 1.25rem 0 2rem;
    border-left: 4px solid var(--trap);
    background: rgba(224, 85, 85, 0.03);
    border: 1px solid rgba(224, 85, 85, 0.15);
    border-left-width: 4px;
}
.bug-hunt h3 {
    color: var(--trap);
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    body { padding: 1rem 0.75rem 4rem; font-size: 14px; }
    pre { padding: 0.75rem; font-size: 12px; }
    h1 { font-size: 1.4rem; }
}

/* ---- Accessibility ---- */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--accent);
    color: #10231a;
    padding: 0.5rem 1rem;
    border-radius: 0 0 6px 0;
    z-index: 50;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Print ---- */
@media print {
    .top-nav, .search-form, .skip-link { display: none !important; }
    body { background: #fff; color: #000; padding: 0; }
    a { color: #000; text-decoration: none; }
    h1, h2, h3, th, code { color: #000; }
    pre { border: 1px solid #999; background: #f4f4f4; color: #000; }
    .callout { border-color: #999; background: #f4f4f4; }
}