/* Shared layout for all pages — complements terminal.css.
   Replaces the inline styles that were duplicated on every page. */

.root {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* min-height (not height): pages taller than the viewport must grow,
       and fixed 100vh misbehaves on mobile browsers with dynamic toolbars */
    min-height: 100vh;
    padding: 20px;
}

.container {
    width: 100%;
    max-width: 800px;
}

/* Skip link: hidden off-screen until a keyboard user tabs to it, then it
   pops into the top-left so they can jump past the repeated nav. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10;
    padding: 8px 12px;
    background-color: var(--font-color);
    color: var(--invert-font-color);
    text-decoration: none;
}

.skip-link:focus {
    left: 8px;
    top: 8px;
}

/* Profile photo above the name. Class selector beats the generic `img`
   rule below, so the fixed 120px box wins over `height: auto`. */
.profile-photo {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
    border-radius: 50%;
    object-fit: cover;
    /* Low-res Game Boy Camera-style portrait — keep the pixels crisp
       instead of letting the browser blur them when scaling down. */
    image-rendering: pixelated;
    /* Crisp 1px ring in the theme's text color — high-contrast like the
       dithered photo, and it flips automatically in dark mode. */
    border: 1px solid var(--font-color);
}

/* Terminal "selected line" nav.
   The site already speaks command line (the name is a terminal-prompt, the
   articles are terminal-cards), so the menu reads like a row of shell options
   and the page you're on is the *selected* one — inverted, the way a TUI
   highlights the active row (fzf / tmux / htop). One bold element; the rest
   stays quiet. */
nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    padding-left: 0;
    margin: 4px 0 0;
    font-family: monospace;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

nav a {
    display: inline-block;
    padding: 6px 12px;
    text-decoration: none;
    color: var(--secondary-color);
    /* Reserve the box now so hover/active don't shift layout by 1px. */
    border: 1px solid transparent;
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease;
}

/* Hover/keyboard focus reveals the item's outline — like moving the
   selection cursor over a menu entry. */
nav a:hover,
nav a:focus-visible {
    color: var(--font-color);
    border-color: color-mix(in srgb, var(--secondary-color) 55%, transparent);
}

/* The page you're on = the selected line: inverted block. */
nav a[aria-current="page"] {
    color: var(--invert-font-color);
    background-color: var(--font-color);
    border-color: var(--font-color);
}

@media (prefers-reduced-motion: reduce) {
    nav a {
        transition: none;
    }
}

/* The control sits on its own centered line in the footer, under the
   copyright. */
.theme-toggle-row {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* Theme selector — a segmented control injected by theme.js. Borrows the
   nav's "selected line" language: quiet cells in the secondary color, the
   active one inverted into a solid block. Three cells share one border. */
.theme-toggle {
    display: inline-flex;
    overflow: hidden;
    font-family: monospace;
    text-transform: lowercase;
    font-size: 0.85em;
    letter-spacing: 0.02em;
    border: 1px solid color-mix(in srgb, var(--secondary-color) 45%, transparent);
}

.theme-toggle button {
    appearance: none;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--secondary-color);
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    padding: 5px 9px;
    cursor: pointer;
    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

/* Hairline divider between cells, matching the group's border. */
.theme-toggle button + button {
    border-left: 1px solid
        color-mix(in srgb, var(--secondary-color) 45%, transparent);
}

.theme-toggle button:hover,
.theme-toggle button:focus-visible {
    color: var(--font-color);
}

.theme-toggle button[aria-pressed="true"] {
    color: var(--invert-font-color);
    background-color: var(--font-color);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle button {
        transition: none;
    }
}

.sections-grid {
    display: grid;
    grid-template-rows: auto;
    gap: 20px;
    margin-top: 20px;
    padding: 20px;
}

.article-body {
    margin-top: 20px;
    padding: 20px;
    line-height: 1.75;
}

.article-title {
    text-align: center;
}

/* Article cards are real links now (no onclick JS) */
a.card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* --- Responsive guards ------------------------------------------- */

/* Wide tables (About page) scroll inside their box instead of
   stretching the page on phones */
.table-wrap {
    overflow-x: auto;
}

/* Code blocks scroll horizontally instead of overflowing the viewport */
pre {
    overflow-x: auto;
    max-width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

.resource-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-list li {
    overflow-wrap: anywhere; /* long emails/URLs never overflow on phones */
}

/* Reading time on article cards */
.card-meta {
    margin-top: 8px;
    font-size: 0.85em;
    color: var(--secondary-color);
}

/* End-of-article navigation */
.back-link {
    margin-top: 2em;
}

@media (max-width: 600px) {
    .root {
        padding: 12px;
    }
    .sections-grid,
    .article-body {
        padding: 8px;
    }
    h1 {
        font-size: 1.6rem;
    }
}

/* Dark mode — terminal.css's official dark palette.
   Light is the default (from terminal.min.css). The dark palette is applied
   in two situations, and the theme.js selector switches between them:
     1. The visitor explicitly picks "dark"  -> :root[data-theme="dark"]
     2. The visitor is on "system" (or has JS disabled) AND their OS prefers
        dark -> the media query below, which steps aside the moment an
        explicit light/dark choice is set on <html data-theme>.
   This is also why the site still goes dark-by-night with JS turned off.
   The two property blocks are identical — keep them in sync. */
:root[data-theme="dark"] {
    --background-color: #222225;
    --font-color: #e8e9ed;
    --invert-font-color: #222225;
    --secondary-color: #a3abba;
    --tertiary-color: #a3abba;
    --primary-color: #62c4ff;
    --error-color: #ff3c74;
    --progress-bar-background: #3f3f44;
    --progress-bar-fill: #62c4ff;
    --code-bg-color: #3f3f44;
    --input-style: solid;
    --display-text-color: white;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --background-color: #222225;
        --font-color: #e8e9ed;
        --invert-font-color: #222225;
        --secondary-color: #a3abba;
        --tertiary-color: #a3abba;
        --primary-color: #62c4ff;
        --error-color: #ff3c74;
        --progress-bar-background: #3f3f44;
        --progress-bar-fill: #62c4ff;
        --code-bg-color: #3f3f44;
        --input-style: solid;
        --display-text-color: white;
    }
}