/* --------------------------------------------------------------
   br0qn theme 
   -------------------------------------------------------------- */

/* -------------------- Imports & Font Fallbacks -------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');

@font-face {
    font-family: 'IBM 3270';
    src: url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap'),
         local('3270Medium_Nerd_Font_Complete'),
         local('IBM3270'),
         local('IBM 3270');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --------------- Central color variables  --------------- */
:root {
    --bg-primary:   #0f0f0f;   /* page background */
    --bg-secondary: #0f0f0f;   /* sidebar / secondary panels */
    --accent-main:  #777755;   /* primary actions, links */
    --accent-alt:   #974b46;   /* secondary highlights */
    --border:       #222222;   /* borders, dividers */
    --text-main:    #c1c1c1;   /* body copy */
    --text-muted:   #aa9988;   /* meta, subtitles */

    /* ---------- Base‑16 color palette ---------- */
    --base00: #191A11;   /* default bg */
    --base01: #5f8787;   /* UI bg */
    --base02: #c1c1c1;   /* selection / UI highlight */
    --base03: #888888;   /* comments, invisible */
    --base04: #aaaaaa;   /* dark fg (constants) */
    --base05: #999999;   /* main text */
    --base06: #DC2A22;   /* light fg */
    --base07: #c1c1c1;   /* light bg (line numbers) */
    --base08: #505050;   /* red */
    --base09: #5f8787;   /* orange */
    --base0A: #c1c1c1;   /* yellow */
    --base0B: #888888;   /* green */
    --base0C: #aaaaaa;   /* cyan */
    --base0D: #B29740;   /* blue */
    --base0E: #DC2A22;   /* magenta */
    --base0F: #c1c1c1;   /* brown */

}

/* -------------------------- Reset -------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ------------------------ Base Styles ------------------------ */
body {
    font-family: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Inconsolata',
                 'Fira Code', 'Droid Sans Mono', 'Source Code Pro',
                 'Consolas', 'Courier New', monospace;
    background-color: var(--bg-primary);
    color: var(--text-main);
    line-height: 1.6;
    font-size: 13px;
}

/* Links */
a {
    color: var(--accent-main);
    text-decoration: none;
}
a:hover {
    color: #fff;                     /* keep bright contrast on hover */
    text-decoration: underline;
}

/* ----------------------- Layout Containers ----------------------- */
.container {
    max-width: none;
    margin: 0 auto;
    background-color: var(--bg-primary);
}

/* Header */
.header {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Logo */
.logo,
.logo a {
    display: flex;
    align-items: center;
}
.logo a {
    color: var(--accent-alt);
    font-weight: bold;
    font-size: 16px;
}
.logo-icon { margin-right: 8px; font-size: 18px; }
.site-title { color: var(--accent-main); }

/* Search container */
.search-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
}
.search-container label { color: var(--text-main); }
.search-container input[type="search"] {
    background-color: var(--bg-primary);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 4px 8px;
    font-family: inherit;
    font-size: 12px;
    width: 200px;
}
.search-container input[type="text"],
.search-container label[for="pages"] { display: none; }

/* Go button – unified styling */
#go-btn {
    background-color: var(--bg-primary);
    color: #000;
    border: 1px solid var(--border);
    padding: 4px 8px;
    font-family: inherit;
    font-size: 0;               /* hide text */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
}
#go-btn:hover { background-color: var(--accent-alt); }   /* lighter hover */
#go-btn::after {
    content: "⚲";
    color: var(--text-main);
    font-size: 14px;
    display: inline-block;
}

/* Main content layout */
.main-content {
    display: flex;
    min-height: calc(100vh - 60px);
}

/* Sidebar */
.sidebar {
    width: 200px;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border);
    padding: 20px 0;
    flex-shrink: 0;
}

/* Navigation sections */
.nav-section {
    margin-bottom: 25px;
    padding: 0 15px;
}
.nav-section h3 { display: none; }
.nav-section[data-section="blog"] h3,
.nav-section[data-section="projects"] h3,
.nav-section[data-section="links"] h3 {
    display: block;
    color: var(--accent-main);
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: normal;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}

/* Nav list */
.nav-list {
    list-style: none;
}
.nav-list li { margin-bottom: 4px; }
.nav-list a {
    display: block;
    color: var(--accent-main);
    padding: 2px 0;
    font-size: 12px;
}
.nav-list a:hover {
    color: var(--text-main);
    background-color: var(--bg-primary);
    padding-left: 4px;
    margin-left: -4px;
    text-decoration: none;
}
.nav-list a.current { color: var(--accent-main); font-weight: bold; }

/* Table of contents */

.toc {
    list-style: none;
}
.toc li { margin-bottom: 4px; }
.toc a {
    display: block;
    color: var(--text-muted);
    padding: 2px 0;
    font-size: 12px;
}
.toc a:hover {
    color: var(--text-main);
    background-color: var(--bg-primary);
    padding-left: 4px;
    margin-left: -4px;
    text-decoration: none;
}
.toc a.current { color: var(--text-muted); font-weight: bold; }

/**/
/* .toc { list-style: none; } */
/* .toc li { margin-bottom: 4px; } */
/* .toc ul { margin-left: 15px; margin-top: 4px; } */
/* .toc a { font-size: 12px; } */

/* Tag / tech lists */
.tag-list,
.tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.tag,
.tech {
    background-color: var(--border);
    color: var(--accent-main);
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 2px;
    border: 1px solid #555;
}

/* Content area */
.content {
    flex: 1;
    padding: 20px;
    background-color: var(--bg-primary);
}

/* Page header */
.page-header {
    margin-bottom: 25px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 15px;
}
.page-header h1 {
    color: var(--text-main);
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: normal;
}
.subtitle { color: var(--text-muted); font-size: 14px; font-style: italic; }

/* Meta info */
.page-meta {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.date { color: var(--text-muted); }
.difficulty {
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: bold;
}
.difficulty-beginner      { background-color: #c7eda1; color: #000000; }
.difficulty-intermediate { background-color: #e78a53; color: #000000; }
.difficulty-advanced      { background-color: #8f3732; color: #ffffff; }
.reading-time { color: var(--text-muted); }
.github-link {
    background-color: var(--border);
    color: var(--accent-main);
    padding: 2px 8px;
    border-radius: 2px;
    border: 1px solid #555;
    font-size: 11px;
}
.github-link:hover { background-color: var(--border); text-decoration: none; }

/* Content sections */
.content-section {
    margin-bottom: 30px;
}
.content-section h2 {
    color: var(--text-main);
    font-size: 18px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 5px;
}
.content-section h3 {
    color: var(--text-main);
    font-size: 16px;
    margin-bottom: 10px;
}
.content-section p { margin-bottom: 12px; }

/* Intro & grid */
.intro-section {
    margin-bottom: 30px;
    padding: 15px;
    background-color: #1a1a1a;
    border-left: 4px solid var(--accent-alt);
}
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}
@media (max-width: 768px) {
    .content-grid { grid-template-columns: 1fr; }
}

/* Posts / projects / pages lists */
.post-list,
.project-list,
.pages-list { margin-bottom: 15px; }

.post-item,
.project-item,
.page-preview {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}
.post-item:last-child,
.project-item:last-child,
.page-preview:last-child { border-bottom: none; }

.post-item h3,
.project-item h3,
.page-preview h2 {
    font-size: 14px;
    margin-bottom: 8px;
}
.post-item h3 a,
.project-item h3 a,
.page-preview h2 a { color: var(--accent-main); }

.post-summary,
.project-summary,
.page-summary {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 8px;
}

/* Tags & tech stacks inside items */
.tags,
.tech-stack {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}
.tech-label { color: var(--text-muted); font-size: 11px; margin-right: 4px; }

/* Highlight / more links */
.highlight-link { color: var(--accent-main); font-weight: bold; }
.more-link { color: var(--accent-main); font-size: 12px; font-style: italic; }

/* Social links */
.social-links {
    list-style: none;
    display: flex;
    gap: 15px;
    margin-top: 10px;
}
.social-links a {
    color: var(--accent-main);
    text-decoration: underline;
}

/* Content body (markdown output) */
.content-body {
    line-height: 1.8;
}
.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4 {
    color: var(--text-main);
    margin-top: 25px;
    margin-bottom: 15px;
}
.content-body h1 { font-size: 20px; }
.content-body h2 { font-size: 18px; }
.content-body h3 { font-size: 16px; }
.content-body h4 { font-size: 14px; }
.content-body p { margin-bottom: 15px; }
.content-body ul,
.content-body ol {
    margin-left: 20px;
    margin-bottom: 15px;
}
.content-body li { margin-bottom: 5px; }
.content-body blockquote {
    border-left: 4px solid var(--accent-alt);
    margin-left: 0;
    padding-left: 15px;
    color: var(--accent-alt);
    /* background-color: var(--border); */
    font-style: italic;
    margin-bottom: 15px;
}

/* /* -------------------------------------------------------------- */
/*    Base‑16 code styling – inline code & fenced blocks */
/*    -------------------------------------------------------------- */ */
/**/
/* /* ---------- Inline code (single back‑ticks) ---------- */ */
/* .content-body code { */
/*     background-color: var(--base00);      /* subtle dark background */ */
/*     color:            var(--base0D);      /* default foreground – blue */ */
/*     padding:          2px 4px; */
/*     font-family:      inherit; */
/*     font-size:        12px; */
/* } */
/**/
/* /* ---------- Fenced code block container ---------- */ */
/* .content-body pre { */
/*     background-color: var(--base00);      /* darkest background */ */
/*     color:            var(--base05);      /* default text colour */ */
/*     border:           1px solid var(--base00); */
/*     padding:          15px; */
/*     overflow-x:       auto; */
/*     margin-bottom:    15px; */
/* } */
/**/
/* /* Tokens inside the block – most highlighters add a class per token type. */
/*    Adjust the class prefixes if your highlighter uses something else */
/*    (e.g. .token.*, .prism-*, .syntax-*) */ */
/* .hljs-comment, */
/* .token.comment, */
/* .prism-comment { color: var(--base03); }   /* comments */ */
/**/
/* .hljs-string, */
/* .token.string, */
/* .prism-string { color: var(--base0B); }   /* strings / literals */ */
/**/
/* .hljs-number, */
/* .token.number, */
/* .prism-number { color: var(--base09); }   /* numbers / constants */ */
/**/
/* .hljs-keyword, */
/* .token.keyword, */
/* .prism-keyword { color: var(--base0E); }   /* keywords */ */
/**/
/* .hljs-built_in, */
/* .token.function, */
/* .prism-function { color: var(--base0D); }   /* functions / identifiers */ */
/**/
/* .hljs-type, */
/* .token.class-name, */
/* .prism-class-name { color: var(--base0A); }   /* types */ */
/**/
/* .hljs-operator, */
/* .token.operator, */
/* .prism-operator { color: var(--base0C); }   /* operators */ */
/**/
/* .hljs-meta, */
/* .token.meta, */
/* .prism-meta { color: var(--base0F); }   /* meta / special */ */
/**/
/* .hljs-attribute, */
/* .token.attr-name, */
/* .prism-attr-name { color: var(--base08); }   /* attributes / errors */ */
/**/
/* /* Fallback – any token that didn’t match a rule gets the default fg */ */
/* .hljs, */
/* .token, */
/* .prism { color: var(--base05); } */

/* Tables */
.content-body table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 15px;
    border: 1px solid var(--border);
}
.content-body th,
.content-body td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}
.content-body th {
    background-color: #1a1a1a;
    color: var(--text-main);
    font-weight: bold;
}

/* Lab information box */
.lab-info {
    background-color: #1a1a1a;
    border: 1px solid var(--border);
    padding: 15px;
    margin: 20px 0;
    border-left: 4px solid var(--accent-alt);
}
.lab-info h3 {
    color: var(--text-main);
    margin: 0 0 10px;
}
.lab-info ul {
    margin-left: 0;
    list-style: none;
}
.lab-info li { margin-bottom: 8px; }

/* Page navigation */
.page-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.nav-prev,
.nav-next {
    display: flex;
    flex-direction: column;
    max-width: 45%;
}
.nav-label { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; }
.nav-prev a,
.nav-next a {
    color: var(--accent-main);
    font-size: 14px;
}
.nav-next { text-align: right; }

/* Subsections list */
.subsections-list { margin-top: 30px; }
.subsection-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}
.subsection-item:last-child { border-bottom: none; }
.subsection-item h3 { margin-bottom: 8px; }
.subsection-item h3 a { color: var(--accent-main); }
.page-count { color: var(--text-muted); font-size: 12px; font-style: italic; }

/* Utility helpers */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.hidden { display: none; }

/* Accessibility focus states */
input:focus,
button:focus,
a:focus {
    outline: 2px solid var(--accent-alt);
    outline-offset: 2px;
}

/* --------------------------- Responsive --------------------------- */
@media (max-width: 768px) {
    .main-content { flex-direction: column; }

    .sidebar {
        width: 100%;
        order: 2;
        border-right: none;
        border-top: 1px solid var(--border);
        padding: 15px;
        background-color: var(--bg-secondary);
    }
    .content { order: 1; padding: 15px; }
    .header {
        padding: 10px 15px;
        flex-direction: column;
        gap: 10px;
    }
    .search-container {
        width: 100%;
        justify-content