/* dev.css — dark-theme overrides for dev.momentum.inc
   Loads after styles.css. Uses .page-dev body class for scrollable dark pages.
   .page-explore (from styles.css) handles the fullscreen terminal. */

/* ── Body ── */
.page-dev {
    background: var(--terminal-deep);
    color: var(--terminal-text);
    scrollbar-color: var(--terminal-scrollbar) transparent;
}

/* Kill paper-grain overlay on dark bg */
.page-dev::after {
    display: none;
}

/* ── Header ── */
.page-dev .site-header {
    background: rgba(12, 11, 10, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.page-dev .site-header.scrolled {
    background: rgba(12, 11, 10, 0.98);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.page-dev .site-header .logo {
    color: var(--terminal-text);
}

.page-dev .site-header .logo:hover {
    color: var(--terminal-dim);
}

.page-dev .site-header .nav-primary a {
    color: var(--terminal-dim);
}

.page-dev .site-header .nav-primary a:hover,
.page-dev .site-header .nav-primary a[aria-current="page"] {
    color: var(--terminal-text);
}

.page-dev .site-header .nav-toggle {
    color: var(--terminal-text);
}

/* ── Hero ── */
.page-dev .hero {
    padding: var(--space-12) 0 var(--space-8);
}

.page-dev .hero-eyebrow {
    color: var(--terminal-accent);
    border-bottom-color: var(--terminal-accent-30);
}

.page-dev .hero-title {
    color: var(--terminal-text);
}

.page-dev .hero-subtitle {
    color: var(--terminal-text-65);
}

/* ── Sections ── */
.page-dev .section-eyebrow {
    color: var(--terminal-accent);
    border-bottom-color: var(--terminal-accent-30);
}

.page-dev .section-title {
    color: var(--terminal-text);
}

.page-dev .section-subtitle {
    color: var(--terminal-text-65);
}

/* ── Resource list ── */
.page-dev .resource-item {
    border-color: var(--terminal-border);
    background: rgba(255, 255, 255, 0.02);
}

.page-dev .resource-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.page-dev .resource-title {
    color: var(--terminal-text);
}

.page-dev .resource-meta {
    color: var(--terminal-dim);
}

/* ── Footer ── */
.page-dev .site-footer {
    background: var(--terminal-bg);
    border-top: 1px solid var(--terminal-border);
}

.page-dev .footer-label {
    color: var(--terminal-dim);
}

.page-dev .footer-contact > a {
    color: var(--terminal-text);
    background-image: linear-gradient(var(--terminal-border), var(--terminal-border));
}

.page-dev .footer-contact > a:hover {
    color: var(--terminal-accent);
    background-image: linear-gradient(var(--terminal-accent-30), var(--terminal-accent-30));
}

.page-dev .footer-secondary {
    color: var(--terminal-dim);
}

.page-dev .footer-nav a {
    color: var(--terminal-dim);
    background-image: none;
}

.page-dev .footer-nav a:hover {
    color: var(--terminal-text);
}

.page-dev .footer-legal {
    border-top-color: var(--terminal-border);
}

.page-dev .footer-legal p {
    color: rgba(154, 150, 147, 0.6);
}

.page-dev .footer-contact-ghost a {
    color: var(--terminal-dim);
}

/* ── Focus & active states ── */
.page-dev .resource-item:focus-visible {
    outline: 2px solid var(--terminal-accent);
    outline-offset: 2px;
}

.page-dev .resource-item:active {
    background: rgba(255, 255, 255, 0.06);
}

.page-dev .site-header .nav-primary a:focus-visible {
    outline: 2px solid var(--terminal-accent);
    outline-offset: 4px;
}

.page-dev .footer-nav a:focus-visible {
    outline: 2px solid var(--terminal-accent);
    outline-offset: 2px;
}

/* ── Selection ── */
.page-dev ::selection {
    background: rgba(184, 159, 130, 0.3);
    color: var(--terminal-text);
}

.page-dev :focus-visible {
    outline-color: var(--terminal-accent);
}

/* ── Skip link ── */
.page-dev .skip-link:focus {
    background: var(--terminal-bg);
    color: var(--terminal-text);
}

/* ── Hero-mode header — transparent over particle canvas ── */
.site-header--hero {
    position: fixed;
    width: 100%;
    z-index: 100;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* ── Mobile nav ── */
@media (max-width: 768px) {
    .page-dev .nav-primary {
        background: rgba(12, 11, 10, 0.98);
    }

    .page-dev .nav-primary a {
        color: var(--terminal-dim);
    }
}

/* ── Explore page header override ──
   explore.html uses page-explore (from styles.css) but loads dev.css
   for the updated nav. Override nav links for the dev site. */
.page-explore .site-header .nav-primary a {
    color: var(--terminal-dim);
}

.page-explore .site-header .nav-primary a:hover,
.page-explore .site-header .nav-primary a[aria-current="page"] {
    color: var(--terminal-text);
}