/* ═══════════════════════════════════════════════════════════════
   Dev Atlas — style.css
   Dark theme (default) + Light theme + full responsiveness
   ═══════════════════════════════════════════════════════════════ */

/* ── Custom Properties — Dark (default) ────────────────────── */
:root,
[data-theme="dark"] {
    --bg:           #0f1117;
    --bg-card:      #1a1d27;
    --bg-code:      #12151f;
    --border:       #2a2d3e;
    --accent:       #6c63ff;
    --accent-dim:   rgba(108,99,255,.15);
    --green:        #43d9ad;
    --yellow:       #ffd166;
    --red:          #ff6584;
    --blue:         #56cfff;
    --orange:       #ffb86c;
    --pink:         #ff79c6;
    --text:         #e2e8f0;
    --text-muted:   #8892a4;
    --text-code:    #a9b1d6;
    --nav-bg:       rgba(15,17,23,.92);
    --shadow:       rgba(0,0,0,.4);
    --hamburger:    #e2e8f0;
}

/* ── Custom Properties — Light ──────────────────────────────── */
[data-theme="light"] {
    --bg:           #f8f9fc;
    --bg-card:      #ffffff;
    --bg-code:      #f0f2f8;
    --border:       #d5d9e8;
    --accent:       #5a52e0;
    --accent-dim:   rgba(90,82,224,.1);
    --green:        #12916e;
    --yellow:       #b07d00;
    --red:          #d63060;
    --blue:         #1b7ab8;
    --orange:       #c26b00;
    --pink:         #b5177a;
    --text:         #1a1d27;
    --text-muted:   #525c72;
    --text-code:    #3a4055;
    --nav-bg:       rgba(248,249,252,.95);
    --shadow:       rgba(0,0,0,.12);
    --hamburger:    #1a1d27;
}

/* ── Base reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }

html { scroll-behavior: smooth }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.75;
    transition: background .25s, color .25s;
}

/* prevent body scroll when mobile menu is open */
body.menu-open { overflow: hidden }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: var(--accent) }

/* ── Syntax highlight — light theme overrides ───────────────── */
[data-theme="light"] .ck  { color: #9333ea }
[data-theme="light"] .cs  { color: #047857 }
[data-theme="light"] .cn  { color: #7c3aed }
[data-theme="light"] .cc  { color: #6b7280; font-style: italic }
[data-theme="light"] .cf  { color: #1d4ed8 }
[data-theme="light"] .ct  { color: #b45309 }
[data-theme="light"] .ca  { color: #92400e }
[data-theme="light"] .cv  { color: #1a1d27 }
[data-theme="light"] .co  { color: #dc2626 }
[data-theme="light"] .cprop { color: #1d4ed8 }

/* ══════════════════════════════════════════════════════════════
   TOP NAV
══════════════════════════════════════════════════════════════ */
nav.topnav {
    position: sticky; top: 0; z-index: 300;
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    height: 58px;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    /* prevent nav content from wrapping and breaking height */
    flex-wrap: nowrap;
    overflow: visible;
    transition: background .25s, border-color .25s;
}

/* Logo */
.nav-logo {
    font-size: 1.05rem; font-weight: 800;
    color: var(--text); text-decoration: none;
    display: flex; align-items: center; gap: .4rem;
    flex-shrink: 0;
    white-space: nowrap;
}
.nav-logo span { color: var(--accent) }
.nav-logo:hover { text-decoration: none }

/* ── Nav links — shared base ── */
.nav-links {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    /* desktop: pointer-events always on; mobile: CSS controls via is-open */
    pointer-events: auto;
}
.nav-links a {
    font-size: .78rem; font-weight: 600;
    color: var(--text-muted); text-decoration: none;
    padding: .32rem .6rem; border-radius: 6px;
    white-space: nowrap;
    display: block;
    transition: background .15s, color .15s;
}
.nav-links a:hover,
.nav-links a.active {
    background: var(--accent-dim);
    color: var(--accent);
}

/* ── Desktop: override into horizontal flex row ── */
@media (min-width: 1051px) {
    .nav-links {
        flex-direction: row;
        position: static;
        flex: 1;
        gap: .1rem;
        flex-wrap: nowrap;
        overflow: hidden;
        align-items: center;
        width: auto;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;   /* always clickable on desktop */
        transition: none;
    }
    .nav-links a {
        white-space: nowrap;
    }
    /* hide hamburger on desktop */
    .nav-hamburger { display: none !important }
}

/* ── Theme toggle button ── */
.theme-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.theme-toggle:hover {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: rgba(108,99,255,.4);
}

/* show/hide sun vs moon */
[data-theme="dark"]  .theme-icon--sun  { display: none }
[data-theme="dark"]  .theme-icon--moon { display: block }
[data-theme="light"] .theme-icon--moon { display: none }
[data-theme="light"] .theme-icon--sun  { display: block }

/* ── Hamburger button ── */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px; height: 36px;
    border: none; background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 6px;
    transition: background .15s;
    z-index: 10;
    padding: 4px;
}
.nav-hamburger:hover { background: var(--accent-dim) }
.nav-hamburger span {
    display: block;
    width: 22px; height: 2px;
    background: var(--hamburger);
    border-radius: 2px;
    transition: transform .25s, opacity .25s, width .25s;
    transform-origin: center;
}
/* Animate to X */
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; width: 0 }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

/* Overlay behind mobile menu — always in DOM, visibility toggled */
.nav-overlay {
    position: fixed;
    /* starts below the nav bar so user can still see/tap nav */
    top: 58px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s;
}
.nav-overlay.is-show {
    opacity: 1;
    pointer-events: auto;
}
/* smaller nav on mobile */
@media (max-width: 600px) {
    .nav-overlay { top: 54px }
}

/* ══════════════════════════════════════════════════════════════
   PAGE LAYOUT (3-column grid)
══════════════════════════════════════════════════════════════ */
.page-wrapper {
    display: grid;
    grid-template-columns: 230px 1fr 200px;
    max-width: 1400px;
    margin: 0 auto;
    min-height: calc(100vh - 58px);
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════ */
aside.sidebar {
    border-right: 1px solid var(--border);
    padding: 1.6rem 1rem;
    position: sticky; top: 58px;
    height: calc(100vh - 58px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    transition: border-color .25s;
}
aside.sidebar h3 {
    font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: .6rem; margin-top: 1.4rem;
    padding-left: .4rem;
}
aside.sidebar h3:first-child { margin-top: 0 }
aside.sidebar ul { list-style: none }
aside.sidebar ul li a {
    display: flex; align-items: center; gap: .5rem;
    padding: .32rem .5rem; border-radius: 6px;
    font-size: .82rem; color: var(--text-muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}
aside.sidebar ul li a:hover,
aside.sidebar ul li a.active {
    background: var(--accent-dim);
    color: var(--accent);
}
aside.sidebar .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .4; flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════════════════ */
main.content {
    padding: 2.8rem 3rem;
    max-width: 860px;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   TOC PANEL (right column)
══════════════════════════════════════════════════════════════ */
.toc-panel {
    border-left: 1px solid var(--border);
    padding: 1.8rem 1rem;
    position: sticky; top: 58px;
    height: calc(100vh - 58px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    transition: border-color .25s;
}
.toc-panel h4 {
    font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: .8rem;
}
.toc-panel ul { list-style: none }
.toc-panel li { margin-bottom: .06rem }
.toc-panel li a {
    font-size: .74rem; color: var(--text-muted);
    text-decoration: none; display: block;
    padding: .2rem 0;
    transition: color .15s;
}
.toc-panel li a:hover { color: var(--text) }
.toc-panel li.sub  a { padding-left: .9rem }
.toc-panel li.sub2 a { padding-left: 1.8rem }

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════════════════════ */
.page-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--accent-dim); color: var(--accent);
    border: 1px solid rgba(108,99,255,.3);
    border-radius: 20px; font-size: .72rem; font-weight: 700;
    padding: .28rem .8rem; margin-bottom: 1rem;
    letter-spacing: .06em; text-transform: uppercase;
}

h1.page-title {
    font-size: 2.3rem; font-weight: 800; line-height: 1.2;
    margin-bottom: .5rem;
    background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-subtitle {
    font-size: 1rem; color: var(--text-muted);
    margin-bottom: 2.2rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.8rem;
    transition: border-color .25s;
}

h2.section-h {
    font-size: 1.35rem; font-weight: 700;
    margin: 2.5rem 0 1rem; color: var(--text);
    display: flex; align-items: center; gap: .5rem;
    scroll-margin-top: 72px;
}
h2.section-h::after {
    content: ''; flex: 1; height: 1px;
    background: var(--border); margin-left: .5rem;
    transition: background .25s;
}

h3.sub-h {
    font-size: .95rem; font-weight: 600;
    margin: 1.8rem 0 .6rem; color: var(--accent);
    scroll-margin-top: 72px;
}

p { margin-bottom: .9rem; color: var(--text); font-size: .95rem }

a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }

strong { color: var(--text); font-weight: 600 }
em { color: var(--text-muted) }

/* ── Inline code ── */
p code, li code, td code, h3 code {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px; padding: .1em .4em;
    font-family: 'Cascadia Code','Fira Code',Consolas,monospace;
    font-size: .82em; color: var(--pink);
    transition: background .25s, border-color .25s;
}

/* ══════════════════════════════════════════════════════════════
   CODE BLOCK
══════════════════════════════════════════════════════════════ */
.code-block {
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 1rem 0 1.5rem;
    overflow: hidden;
    transition: background .25s, border-color .25s;
}
.code-block .cb-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.02);
}
[data-theme="light"] .code-block .cb-header {
    background: rgba(0,0,0,.03);
}
.code-block .cb-lang {
    font-size: .65rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted);
}
.code-block .cb-dots { display: flex; gap: .4rem }
.code-block .cb-dot  { width: 10px; height: 10px; border-radius: 50% }
.code-block pre {
    padding: 1.2rem 1.4rem;
    overflow-x: auto;
    margin: 0; background: transparent;
    border: none; border-radius: 0;
}
.code-block code {
    font-family: 'Cascadia Code','Fira Code',Consolas,monospace;
    font-size: .855rem; line-height: 1.85;
    color: var(--text-code);
}

/* Syntax colors — dark (default) */
.ck    { color: #ff79c6 }
.cs    { color: #43d9ad }
.cn    { color: #bd93f9 }
.cc    { color: #6272a4; font-style: italic }
.cf    { color: #56cfff }
.ct    { color: #ffb86c }
.ca    { color: #ffd166 }
.cv    { color: #f8f8f2 }
.co    { color: #ff6584 }
.cprop { color: #56cfff }

/* ══════════════════════════════════════════════════════════════
   CALLOUTS
══════════════════════════════════════════════════════════════ */
.callout {
    border-radius: 10px; padding: 1rem 1.2rem;
    margin: 1.2rem 0; border-left: 4px solid;
    display: flex; gap: .8rem;
    transition: background .25s;
}
.callout-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem }
.callout-body { flex: 1 }
.callout-body p:last-child { margin-bottom: 0 }

.callout.info    { background: rgba(86,207,255,.07);  border-color: var(--blue) }
.callout.tip     { background: rgba(67,217,173,.07);  border-color: var(--green) }
.callout.warning { background: rgba(255,209,102,.07); border-color: var(--yellow) }
.callout.danger  { background: rgba(255,101,132,.07); border-color: var(--red) }
.callout.fun     { background: rgba(255,101,132,.07); border-color: var(--red) }

[data-theme="light"] .callout.info    { background: rgba(86,207,255,.08) }
[data-theme="light"] .callout.tip     { background: rgba(67,217,173,.08) }
[data-theme="light"] .callout.warning { background: rgba(255,209,102,.1) }
[data-theme="light"] .callout.danger  { background: rgba(255,101,132,.08) }
[data-theme="light"] .callout.fun     { background: rgba(255,101,132,.08) }

/* ══════════════════════════════════════════════════════════════
   SECTION LABEL
══════════════════════════════════════════════════════════════ */
.section-label {
    display: flex; align-items: center; gap: .6rem;
    margin: 2rem 0 .8rem;
}
.section-label .sl-icon {
    width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0;
}
.sl-purple { background: rgba(108,99,255,.2) }
.sl-green  { background: rgba(67,217,173,.2) }
.sl-yellow { background: rgba(255,209,102,.2) }
.sl-red    { background: rgba(255,101,132,.2) }
.sl-blue   { background: rgba(86,207,255,.2) }
.section-label span {
    font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════
   CARDS GRID
══════════════════════════════════════════════════════════════ */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem; margin: 1rem 0 1.5rem;
}
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    transition: border-color .2s, transform .2s, background .25s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px) }
.card .card-title {
    font-family: 'Cascadia Code','Fira Code',monospace;
    font-size: .88rem; color: var(--pink);
    font-weight: 700; margin-bottom: .4rem;
}
.card .card-desc {
    font-size: .81rem; color: var(--text-muted); line-height: 1.55;
}
.card .card-badge {
    display: inline-block; font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    border-radius: 4px; padding: .1rem .4rem; margin-bottom: .4rem;
}

.b-purple { background: rgba(108,99,255,.2); color: var(--accent) }
.b-green  { background: rgba(67,217,173,.2); color: var(--green) }
.b-yellow { background: rgba(255,209,102,.2); color: var(--yellow) }
.b-red    { background: rgba(255,101,132,.2); color: var(--red) }
.b-blue   { background: rgba(86,207,255,.2); color: var(--blue) }
.b-orange { background: rgba(255,184,108,.2); color: var(--orange) }

/* ══════════════════════════════════════════════════════════════
   TIMELINE
══════════════════════════════════════════════════════════════ */
.timeline { margin: 1.2rem 0 1.5rem }
.timeline-item { display: flex; gap: 1.2rem; margin-bottom: .8rem }
.timeline-year {
    font-family: 'Cascadia Code',monospace;
    font-size: .72rem; font-weight: 700; color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid rgba(108,99,255,.3);
    border-radius: 6px; padding: .2rem .5rem;
    white-space: nowrap; height: fit-content; margin-top: .2rem;
}
.timeline-text { font-size: .87rem; color: var(--text-muted); padding-top: .2rem }
.timeline-text strong { color: var(--text) }

/* ══════════════════════════════════════════════════════════════
   DIAGRAM
══════════════════════════════════════════════════════════════ */
.diagram {
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.4rem; margin: 1rem 0 1.5rem;
    font-family: 'Cascadia Code','Fira Code',monospace;
    font-size: .84rem; overflow-x: auto;
    transition: background .25s, border-color .25s;
}
.diagram .d-line {
    display: flex; align-items: baseline; gap: .4rem;
    padding: .14rem 0; color: var(--text-code);
}
.diagram .i1 { padding-left: 1.5rem }
.diagram .i2 { padding-left: 3rem }
.diagram .i3 { padding-left: 4.5rem }
.diagram .i4 { padding-left: 6rem }
.d-tag  { color: var(--pink) }
.d-key  { color: var(--accent) }
.d-val  { color: var(--green) }
.d-note {
    font-style: italic; color: #6272a4;
    font-family: 'Segoe UI',sans-serif;
    font-size: .76rem; margin-left: .5rem;
}
[data-theme="light"] .d-note { color: #64748b }

/* ══════════════════════════════════════════════════════════════
   BLOCKQUOTE
══════════════════════════════════════════════════════════════ */
blockquote {
    border-left: 3px solid var(--accent);
    padding: .8rem 1.2rem; margin: 1.2rem 0;
    background: var(--accent-dim);
    border-radius: 0 8px 8px 0;
    font-style: italic; color: var(--text);
    transition: background .25s;
}
blockquote cite {
    display: block; margin-top: .5rem;
    font-size: .78rem; color: var(--text-muted); font-style: normal;
}

/* ══════════════════════════════════════════════════════════════
   LISTS
══════════════════════════════════════════════════════════════ */
ul.lst, ol.lst { padding-left: 1.3rem; margin-bottom: 1rem }
ul.lst li, ol.lst li {
    margin-bottom: .4rem; color: var(--text); font-size: .92rem;
}

/* ══════════════════════════════════════════════════════════════
   TABLE
══════════════════════════════════════════════════════════════ */
.tbl-wrap { overflow-x: auto; margin: 1rem 0 1.5rem }
table { width: 100%; border-collapse: collapse; font-size: .86rem }
th {
    text-align: left; padding: .6rem .9rem;
    background: var(--bg-card);
    border-bottom: 2px solid var(--border);
    color: var(--text-muted); font-size: .72rem;
    letter-spacing: .07em; text-transform: uppercase;
    transition: background .25s;
}
td {
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--border);
    color: var(--text); vertical-align: top;
    transition: border-color .25s;
}
tr:hover td { background: var(--accent-dim) }

/* ══════════════════════════════════════════════════════════════
   SUMMARY BOX
══════════════════════════════════════════════════════════════ */
.summary-box {
    background: linear-gradient(135deg, rgba(108,99,255,.1), rgba(67,217,173,.05));
    border: 1px solid rgba(108,99,255,.3);
    border-radius: 12px; padding: 1.5rem; margin: 2rem 0;
    transition: background .25s;
}
[data-theme="light"] .summary-box {
    background: linear-gradient(135deg, rgba(90,82,224,.07), rgba(18,145,110,.04));
}
.summary-box h4 {
    font-size: .75rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: .8rem;
}
.summary-box ul { list-style: none }
.summary-box ul li {
    font-size: .87rem; color: var(--text-muted);
    padding: .28rem 0;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: baseline; gap: .6rem;
    transition: border-color .25s;
}
.summary-box ul li:last-child { border-bottom: none }
.summary-box ul li::before {
    content: '✓'; color: var(--green);
    font-weight: 700; font-size: .78rem;
}

/* ══════════════════════════════════════════════════════════════
   TWO-COL
══════════════════════════════════════════════════════════════ */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem; margin: 1rem 0 1.5rem;
}
.two-col .half {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; padding: 1.2rem;
    transition: background .25s, border-color .25s;
}
.two-col .half h4 {
    font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    margin-bottom: .8rem; color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════
   STEPS
══════════════════════════════════════════════════════════════ */
.steps { margin: 1rem 0 1.5rem }
.step { display: flex; gap: 1rem; margin-bottom: 1.2rem; align-items: flex-start }
.step-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-dim);
    border: 1px solid rgba(108,99,255,.4);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 800;
    flex-shrink: 0; margin-top: .1rem;
}
.step-body { flex: 1 }
.step-body strong { display: block; margin-bottom: .3rem; font-size: .9rem; color: var(--text) }
.step-body p { font-size: .86rem; margin-bottom: 0 }

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
footer.page-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    padding: 2rem 2.5rem;
    margin-top: auto;
    transition: background .25s, border-color .25s;
}
.footer-inner {
    max-width: 1400px; margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
}
.footer-brand .nav-logo { font-size: .95rem; margin-bottom: .3rem }
.footer-brand p { font-size: .78rem; color: var(--text-muted); margin: 0 }
.footer-links {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem;
    justify-content: center;
}
.footer-links a {
    font-size: .78rem; color: var(--text-muted);
    text-decoration: none;
    transition: color .15s;
}
.footer-links a:hover { color: var(--accent); text-decoration: none }
.footer-copy { font-size: .76rem; color: var(--text-muted); white-space: nowrap }

/* ══════════════════════════════════════════════════════════════
   LANDING (index.html)
══════════════════════════════════════════════════════════════ */
.hero {
    text-align: center;
    padding: 5rem 2rem 3rem;
    max-width: 700px; margin: 0 auto;
}
.hero h1 {
    font-size: 3rem; font-weight: 900; line-height: 1.15;
    background: linear-gradient(135deg, var(--text) 0%, var(--accent) 60%, var(--green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}
.hero p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem }

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.2rem;
    max-width: 1100px; margin: 0 auto 4rem;
    padding: 0 2rem;
}
.module-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px; padding: 1.4rem;
    text-decoration: none;
    transition: border-color .2s, transform .2s, box-shadow .2s, background .25s;
    display: block;
}
.module-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(108,99,255,.15);
    text-decoration: none;
}
.module-card .mc-icon  { font-size: 1.8rem; margin-bottom: .8rem; display: block }
.module-card .mc-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: .4rem }
.module-card .mc-desc  { font-size: .82rem; color: var(--text-muted); line-height: 1.55; margin-bottom: .8rem }
.module-card .mc-count { font-size: .72rem; color: var(--accent); font-weight: 600; letter-spacing: .05em }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — hamburger breakpoint at 1050px
   (11 nav items overflow before that)
══════════════════════════════════════════════════════════════ */

/* ── XL: 1400px+ — TV / large monitors ── */
@media (min-width: 1400px) {
    .page-wrapper { grid-template-columns: 260px 1fr 220px }
    main.content  { padding: 3rem 4rem }
    .hero h1      { font-size: 3.6rem }
    .modules-grid { grid-template-columns: repeat(4, 1fr) }
}

/* ── LG: 1051px – 1399px — desktop ── */
@media (max-width: 1399px) and (min-width: 1051px) {
    .page-wrapper { grid-template-columns: 230px 1fr 200px }
    main.content  { padding: 2.8rem 3rem }
    .nav-links a  { font-size: .72rem; padding: .28rem .45rem }
}

/* ── MD: hamburger kicks in at 1050px ── */
/* ── Applies to: tablet landscape, tablet portrait, mobile ── */
@media (max-width: 1050px) {

    /* ── Hamburger: show ── */
    .nav-hamburger { display: flex }

    /* ── Nav links: full-width dropdown panel below the nav bar ── */
    .nav-links {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 58px;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--bg-card);
        border-bottom: 2px solid var(--accent);
        padding: .5rem .75rem .75rem;
        z-index: 250;
        gap: 0;
        overflow: visible;
        /* start hidden above viewport */
        transform: translateY(-110%);
        opacity: 0;
        /* closed panel must not intercept clicks */
        pointer-events: none;
        transition: transform .28s cubic-bezier(.4, 0, .2, 1),
                    opacity .22s ease,
                    background .25s, border-color .25s;
        flex: none;
        flex-wrap: nowrap;
        align-items: stretch;
        box-shadow: 0 8px 24px var(--shadow);
    }

    /* Open: slide into view and enable interaction */
    .nav-links.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-links li { width: 100% }

    .nav-links a {
        font-size: .88rem;
        font-weight: 600;
        /* compact vertical padding so all 11 links fit without scrolling */
        padding: .45rem .75rem;
        border-radius: 7px;
        white-space: nowrap;
        display: block;
        width: 100%;
    }

    /* ── Hide sidebar (hamburger replaces it) ── */
    aside.sidebar { display: none }

    /* ── Kill right TOC panel ── */
    .toc-panel { display: none }

    /* ── 2-col → 1-col layout ── */
    .page-wrapper {
        display: block;
        max-width: 100%;
    }
    .two-col { grid-template-columns: 1fr }
    main.content { padding: 2rem 1.75rem; max-width: 100% }
}

/* ── SM: 601px – 768px — tablet portrait ── */
@media (max-width: 768px) {
    main.content  { padding: 1.5rem 1.25rem }
    h1.page-title { font-size: 1.75rem }
    .hero h1      { font-size: 2rem }
    .hero          { padding: 3rem 1.25rem 2rem }
    .modules-grid { padding: 0 1.25rem }
    .cards-grid   { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) }

    .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.25rem;
    }
    .footer-links      { justify-content: center }
    footer.page-footer { padding: 1.5rem 1.25rem }
}

/* ── XS: up to 600px — mobile portrait ── */
@media (max-width: 600px) {
    nav.topnav    { padding: 0 .875rem; gap: .5rem; height: 54px }

    /* dropdown panel starts right below the shorter nav */
    .nav-links    { top: 54px; padding-top: .5rem }

    main.content  { padding: 1.25rem .9rem }
    h1.page-title { font-size: 1.5rem }
    h2.section-h  { font-size: 1.15rem }
    .hero h1      { font-size: 1.65rem }
    .hero          { padding: 2.5rem .9rem 1.5rem }
    .modules-grid { grid-template-columns: 1fr; padding: 0 .9rem; gap: .85rem }
    .cards-grid   { grid-template-columns: 1fr }

    .code-block code { font-size: .78rem }
    .code-block pre  { padding: .85rem .9rem }
    .summary-box     { padding: 1rem }
    .tbl-wrap        { font-size: .8rem }
    table            { font-size: .78rem }
    th, td           { padding: .38rem .55rem }

    footer.page-footer { padding: 1.2rem .9rem }
    .footer-inner      { gap: 1rem }
}

/* ── XXS: up to 380px — very small phones ── */
@media (max-width: 380px) {
    .nav-logo       { font-size: .9rem }
    h1.page-title   { font-size: 1.35rem }
    h2.section-h    { font-size: 1.05rem }
    main.content    { padding: 1rem .75rem }
    .code-block pre { padding: .7rem .75rem }
    .code-block code{ font-size: .74rem }
}

/* ── Print ── */
@media print {
    nav.topnav, aside.sidebar, .toc-panel, .nav-hamburger,
    .theme-toggle, footer.page-footer, .nav-overlay { display: none !important }
    .page-wrapper { display: block }
    main.content  { padding: 0; max-width: 100% }
    h2.section-h  { page-break-after: avoid }
    .code-block   { page-break-inside: avoid }
    body          { background: #fff; color: #000 }
}