/* ==========================================================================
   Cole Lashley — personal site
   A single dark, minimalist design system shared by every page.
   ========================================================================== */

:root {
    /* Surfaces & text */
    --bg:          #121212;
    --fg:          #e0e0e0;  /* soft off-white, not pure white */
    --fg-dim:      #9a9a9a;
    --heading:     #f0f0f0;

    /* Accents */
    --link:        #6bb3ff;  /* light blue, good contrast on dark */
    --link-hover:  #9ccbff;
    --rule:        #4fc3f7;
    --prompt:      #7ee787;  /* terminal green for the fake filesystem */

    /* Code */
    --code-bg:     #1e1e1e;
    --code-fg:     #d4d4d4;
    --border:      #333;

    /* Type — one font for the whole site, plus a dedicated stack for code */
    --font:        'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Courier New', monospace;
    --font-code:   'Fira Code', 'Cascadia Code', 'SF Mono', Consolas, monospace;

    /* Layout */
    --side-col:    18%;
    --content-max: 720px;
    --side-offset: 15vh;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Three-column layout: left nav · centered content · right contact card
   -------------------------------------------------------------------------- */

.layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.col-nav,
.col-contact {
    flex: 0 0 var(--side-col);
    padding: var(--side-offset) 2vw 6vh;
}

.col-contact { text-align: left; transform: translateX(-2vw); }

.col-main {
    flex: 1 1 auto;
    min-width: 0;            /* allow children to shrink instead of overflow */
}

.content {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 8vh 28px 12vh;
}

/* --------------------------------------------------------------------------
   Contact card (right column)
   -------------------------------------------------------------------------- */

.contact-card h3 {
    margin: 0 0 0.6em;
    font-weight: 600;
    color: var(--heading);
}

.contact-card p {
    margin: 0.4em 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.contact-card a {
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.contact-card a:hover {
    color: var(--link);
    border-bottom-color: var(--link);
}

/* --------------------------------------------------------------------------
   Left navigation: fake filesystem + back link
   -------------------------------------------------------------------------- */

.col-nav a {
    display: block;
    font-family: var(--font);
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.col-nav a:hover { color: var(--link); }

.nav-filesystem .dir {
    margin: 1.8em 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.3em;
    cursor: pointer;
}

.nav-filesystem { transform: translateX(2vw); }

.nav-filesystem .dir:first-child { margin-top: 0; }

.nav-filesystem .dir:hover { border-bottom-color: var(--link); }

.back-link {
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.back-link:hover { border-bottom-color: var(--link) !important; }

/* --------------------------------------------------------------------------
   Prose — written content (about me, writeups, poems, project descriptions)
   Mirrors the gatekeeper writeup aesthetic.
   -------------------------------------------------------------------------- */

.prose {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.75;
    color: var(--fg);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5 {
    font-family: var(--font);
    color: var(--heading);
    line-height: 1.3;
}

.prose h1 { font-size: 1.9rem; margin: 0 0 0.8em; }
.prose h2 { font-size: 1.5rem; margin: 1.6em 0 0.6em; }
.prose h3 { font-size: 1.2rem; margin: 1.4em 0 0.5em; }

.prose p { margin: 0 0 1.4em; }

.prose a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px dashed var(--rule);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.prose a:hover {
    color: var(--link-hover);
    border-bottom: 1px solid #f5f5f5;
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.prose code {
    background-color: var(--code-bg);
    color: var(--code-fg);
    font-family: var(--font-code);
    font-size: 0.9em;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.prose pre {
    background-color: var(--code-bg);
    color: var(--code-fg);
    font-family: var(--font-code);
    font-size: 0.9em;
    line-height: 1.5;
    padding: 1em 1.2em;
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow-x: auto;
}

/* Reset inline-code styling when nested inside a block */
.prose pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}

/* --------------------------------------------------------------------------
   Filesystem-flavored components used inside the home subpages
   -------------------------------------------------------------------------- */

/* `cole:~/projects$ ls` style command headers */
.prompt {
    font-family: var(--font);
    font-weight: normal;
    color: var(--prompt);
    margin: 0 0 2.4em;
    font-size: 1.15rem;
}

/* Listing of links that behaves like `ls` output */
.file-link {
    font-family: var(--font);
    font-weight: normal;
    margin: 0.9em 0 0;
}

.file-link a {
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.file-link a:hover {
    color: var(--link);
    border-bottom-color: var(--link);
}

/* About-me education block */
.edu-school {
    margin: 0 0 0.4em;
    text-decoration: underline;
}

.edu-detail {
    margin: 0;
    color: var(--fg-dim);
}

/* Professional experience entries */
.job-name { margin: 1.4em 0 0.2em; }

.job-meta {
    margin: 0 0 0.8em;
    font-weight: normal;
    color: var(--fg-dim);
}

.job-desc { margin: 0 0 1.6em; }

/* --------------------------------------------------------------------------
   noscript notice
   -------------------------------------------------------------------------- */

.noscript-msg {
    max-width: 640px;
    margin: 40vh auto 0;
    padding: 0 6vw;
    text-align: center;
    line-height: 1.6;
}

.noscript-msg h3 { color: var(--heading); }

/* --------------------------------------------------------------------------
   Responsive: stack the columns on narrow screens so every region stays
   reachable instead of being hidden.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
    .layout { flex-direction: column; min-height: 100%; }

    .col-nav,
    .col-contact {
        flex: none;
        width: 100%;
        padding: 6vh 24px 2vh;
    }

    .col-contact { border-top: 1px solid var(--border); }

    .content {
        max-width: 100%;
        padding: 4vh 22px 8vh;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .nav-filesystem .dir { margin: 1.1em 0; }
}