/* ============================================================
   chrome.css - the shared site shell.

   Loads on EVERY page, including pages that bring their own body
   styles (roadmap, dev, starter pack, parthmax). Contains only:
   reset, body base, .container, header/nav, footer, skip link.

   Page content styling lives in main.css (standard pages) or the
   page's own stylesheet. Design tokens live in theme.css.
   Nothing here may style generic content elements (section, h1,
   .card, ...) or it will leak into pages with their own layout.
   ============================================================ */

/* Border-box only. The aggressive margin/padding reset lives in main.css,
   because pages that bring their own stylesheet (roadmap, dev, starter pack,
   parthmax) were authored against browser default margins - zeroing them
   here collapses their headings into the following paragraph. */
* {
    box-sizing: border-box;
}

/* Chrome components reset their own spacing explicitly instead. */
.site-header,
.site-nav,
.nav-links,
.nav-links li,
.subnav,
.subnav-inner,
.site-footer .footer-grid,
.site-footer .footer-info h3,
.site-footer .footer-info p,
.site-footer .footer-links h4,
.site-footer .footer-links ul,
.site-footer .footer-links li,
.site-footer .footer-bottom p {
    margin: 0;
    padding: 0;
}

html {
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    font-family: var(--sans);
    background:
        radial-gradient(circle at 1px 1px, rgba(9, 9, 9, .09) 1px, transparent 1.4px) 0 0 / 26px 26px,
        var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Scanline overlay */
body::before {
    content: "";
    position: fixed;
    z-index: 20;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .018) 50%);
    background-size: 100% 4px;
    mix-blend-mode: multiply;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
}

/* Lock background scroll while the mobile menu is open */
body.nav-open {
    overflow: hidden;
}

/* Anchor landing offset - the sticky header is 72px tall, so anchor
   targets need clearance or their heading scrolls up underneath it. */
[id] {
    scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Anchor targets receive focus on jump - don't paint a focus ring */
[id]:focus:not(:focus-visible) {
    outline: none;
}

/* ---------- Skip link ---------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--ink);
    color: var(--white);
    font-family: var(--mono);
    font-size: 13px;
    text-decoration: none;
    transition: top .15s ease;
}

.skip-link:focus {
    top: 12px;
}

/* ---------- Header & primary nav ---------- */
header.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    backdrop-filter: blur(14px);
    padding: 0;
}

.site-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--header-h);
    gap: 24px;
}

.logo a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    color: var(--ink);
    letter-spacing: -.03em;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--white);
    font-family: var(--mono);
    font-size: 12px;
    box-shadow: 4px 4px 0 var(--blue);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 24px;
    align-items: center;
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.nav-links a {
    text-decoration: none;
    color: #3a3a3a;
    font-weight: 600;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--blue);
}

/* Active page indicator - underline, not colour alone, so it does not
   rely on colour perception. */
.nav-links a[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--blue);
}

.nav-links .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--ink);
    border-radius: 8px;
    background: var(--ink);
    color: var(--white);
}

.nav-links .nav-cta:hover {
    color: var(--white);
    background: var(--blue);
    border-color: var(--blue);
    box-shadow: 4px 4px 0 var(--ink);
}

.nav-links .nav-cta[aria-current="page"] {
    box-shadow: 4px 4px 0 var(--ink);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .72);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 2px;
    background: var(--ink);
    transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Section sub-nav ----------
   Used by pages with their own internal sections (roadmap, dev).
   Sits directly below the site header. Scrolls horizontally on
   mobile rather than opening a second hamburger. */
.subnav {
    position: sticky;
    top: var(--header-h);
    z-index: 900;
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

.subnav-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 52px;
    overflow-x: auto;
    scrollbar-width: none;
}

.subnav-inner::-webkit-scrollbar {
    display: none;
}

.subnav-label {
    flex: none;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    padding-right: 4px;
    border-right: 1px solid var(--line);
}

.subnav-inner a {
    flex: none;
    padding: 6px 0;
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

.subnav-inner a:hover {
    color: var(--blue);
}

.subnav-inner a[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--blue);
}

/* ---------- Footer ---------- */
footer.site-footer {
    background: var(--paper);
    padding: 48px 0;
    margin-top: 5rem;
    border-top: 1px solid var(--line);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 3rem;
    margin: 0 0 3rem;
}

.footer-info h3 {
    font-family: var(--display);
    letter-spacing: -.055em;
    margin: 0 0 .75rem;
}

.footer-info p {
    color: var(--muted);
}

.footer-links h4 {
    font-family: var(--display);
    letter-spacing: -.03em;
    margin: 0 0 .75rem;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin: 0 0 .4rem;
}

.footer-links a {
    color: var(--blue);
    font-weight: 800;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.875rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1.25rem;
    }

    .site-nav {
        position: relative;
        flex-wrap: wrap;
        min-height: 64px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0;
        background: var(--paper);
        border: 1px solid var(--line);
        border-top: none;
        box-shadow: 0 12px 24px rgba(9, 9, 9, .08);
    }

    .nav-links.is-open {
        display: flex;
    }

    .nav-links li {
        list-style: none;
        width: 100%;
    }

    .nav-links li a {
        display: block;
        padding: 14px 24px;
        border-bottom: 1px solid var(--line);
    }

    .nav-links a[aria-current="page"] {
        box-shadow: inset 3px 0 0 var(--blue);
    }

    .nav-links li:last-child a {
        border-bottom: none;
    }

    .nav-links .nav-cta {
        display: inline-flex;
        margin: 4px 24px;
        justify-content: center;
    }
}