/* ============================================================
   Doom Emacs–inspired theme for Org-publish site
   Based on doom-one color palette
   ============================================================ */

/* ---------- Color palette (doom-one) ---------- */
:root {
  --bg:            #282c34;
  --bg-alt:        #21242b;
  --bg-hl:         #2c313a;
  --bg-selection:  #3e4451;
  --fg:            #bbc2cf;
  --fg-alt:        #5b6268;
  --fg-dim:        #73797e;
  --red:           #ff6c6b;
  --orange:        #da8548;
  --green:         #98be65;
  --teal:          #4db5bd;
  --yellow:        #ecbe7b;
  --blue:          #51afef;
  --dark-blue:     #2257a0;
  --magenta:       #c678dd;
  --violet:        #a9a1e1;
  --cyan:          #46d9ff;
  --dark-cyan:     #5699af;
  --white:         #efefef;

  /* Functional tokens */
  --link:          var(--blue);
  --link-hover:    var(--cyan);
  --accent:        var(--magenta);
  --border:        #3f444a;
  --code-bg:       #1c1f24;
  --code-fg:       var(--green);
  --inline-code-bg:#3e4451;
  --scrollbar-bg:  var(--bg-alt);
  --scrollbar-fg:  var(--bg-selection);

  /* Typography */
  --font-mono:     "JetBrains Mono", "Fira Code", "Source Code Pro",
                   "Hack", "Menlo", "Monaco", "Consolas", monospace;
  --font-sans:     "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-size:     16px;
  --line-height:   1.7;
  --content-width: 62rem;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size);
  scroll-behavior: smooth;
  scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  line-height: var(--line-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Scrollbar (Webkit) ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-fg);
  border-radius: 5px;
}

/* ---------- Selection ---------- */
::selection {
  background: var(--bg-selection);
  color: var(--white);
}

/* ---------- Content wrapper ---------- */
#content, .content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  flex: 1;
  width: 100%;
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding: 0.8rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-title a {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--magenta);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.site-title a::before {
  content: "λ ";
  color: var(--blue);
}

.site-title a:hover {
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(70, 217, 255, 0.3);
}

.site-nav {
  display: flex;
  gap: 0.3rem;
}

.site-nav a {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--fg-alt);
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--blue);
  background: var(--bg-hl);
}

.site-nav a::before {
  content: "» ";
  color: var(--yellow);
  opacity: 0;
  transition: opacity 0.2s;
}

.site-nav a:hover::before {
  opacity: 1;
}

/* Hamburger menu (mobile) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--fg);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  font-family: var(--font-mono);
}

/* ============================================================
   HEADINGS
   ============================================================ */
h1.title {
  display: none; /* Org page title; header already shows branding */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  color: var(--white);
  margin: 2rem 0 1rem;
  line-height: 1.3;
  position: relative;
}

h1 { font-size: 1.8rem; color: var(--magenta); }
h2 { font-size: 1.5rem; color: var(--blue); }
h3 { font-size: 1.25rem; color: var(--green); }
h4 { font-size: 1.1rem; color: var(--yellow); }
h5 { font-size: 1rem;  color: var(--teal); }
h6 { font-size: 0.9rem; color: var(--violet); }

/* Doom-style heading prefix */
h2::before { content: "## "; color: var(--fg-alt); font-weight: 400; }
h3::before { content: "### "; color: var(--fg-alt); font-weight: 400; }

/* Outline containers from Org */
.outline-2, .outline-3, .outline-4 {
  margin-bottom: 1.5rem;
}

/* ============================================================
   PARAGRAPHS & TEXT
   ============================================================ */
p {
  margin-bottom: 1rem;
  color: var(--fg);
}

strong, b { color: var(--yellow); font-weight: 600; }
em, i { color: var(--green); font-style: italic; }

/* ============================================================
   LINKS
   ============================================================ */
a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
  text-shadow: 0 0 8px rgba(70, 217, 255, 0.2);
}

/* ============================================================
   LISTS (including blog/certificate post lists)
   ============================================================ */
ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.4rem;
  color: var(--fg);
}

li::marker {
  color: var(--magenta);
}

/* Post list items generated by Babel */
.outline-text-2 > ul {
  list-style: none;
  padding-left: 0;
}

.outline-text-2 > ul > li {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.3rem;
  border-left: 3px solid var(--border);
  border-radius: 0 4px 4px 0;
  background: var(--bg-alt);
  transition: all 0.2s ease;
}

.outline-text-2 > ul > li:hover {
  border-left-color: var(--blue);
  background: var(--bg-hl);
  transform: translateX(4px);
}

.outline-text-2 > ul > li a {
  color: var(--blue);
  border-bottom: none;
}

.outline-text-2 > ul > li a:hover {
  color: var(--cyan);
}

/* ============================================================
   CODE
   ============================================================ */

/* Inline code */
code, .org-string {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--inline-code-bg);
  color: var(--code-fg);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

/* Source code blocks */
.org-src-container {
  margin: 1.5rem 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}

pre.src {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.6;
  background: var(--code-bg);
  color: var(--fg);
  padding: 1.2rem 1.5rem;
  overflow-x: auto;
  margin: 0;
  border: none;
}

/* Language label on code blocks */
pre.src::before {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg-alt);
  background: var(--bg-alt);
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

pre.src-emacs-lisp::before { content: "elisp"; }
pre.src-python::before     { content: "python"; }
pre.src-javascript::before { content: "js"; }
pre.src-typescript::before { content: "ts"; }
pre.src-shell::before      { content: "shell"; }
pre.src-bash::before       { content: "bash"; }
pre.src-css::before        { content: "css"; }
pre.src-html::before       { content: "html"; }
pre.src-java::before       { content: "java"; }
pre.src-c::before          { content: "c"; }
pre.src-cpp::before        { content: "c++"; }
pre.src-rust::before       { content: "rust"; }
pre.src-go::before         { content: "go"; }
pre.src-sql::before        { content: "sql"; }
pre.src-yaml::before       { content: "yaml"; }
pre.src-json::before       { content: "json"; }
pre.src-org::before        { content: "org"; }

/* Syntax highlighting (htmlize classes – doom-one palette) */
.org-keyword       { color: var(--blue);    font-weight: bold; }
.org-function-name { color: var(--magenta); font-weight: bold; }
.org-variable-name { color: var(--red); }
.org-type          { color: var(--yellow); }
.org-constant      { color: var(--orange); }
.org-string        { color: var(--green);   background: none; padding: 0; }
.org-comment,
.org-comment-delimiter { color: var(--fg-alt); font-style: italic; }
.org-doc           { color: var(--dark-cyan); font-style: italic; }
.org-builtin       { color: var(--magenta); }
.org-preprocessor  { color: var(--teal); }
.org-negation-char { color: var(--red); }
.org-warning       { color: var(--red); font-weight: bold; }

/* Example / fixed-width blocks */
pre.example {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  background: var(--code-bg);
  color: var(--fg);
  padding: 1rem 1.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  overflow-x: auto;
}

/* ============================================================
   BLOCKQUOTES
   ============================================================ */
blockquote {
  border-left: 4px solid var(--magenta);
  background: var(--bg-alt);
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-radius: 0 6px 6px 0;
  color: var(--fg);
  font-style: italic;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   TABLES
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

th {
  background: var(--bg-alt);
  color: var(--blue);
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 2px solid var(--border);
}

td {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}

tr:hover td {
  background: var(--bg-hl);
}

/* ============================================================
   HORIZONTAL RULES
   ============================================================ */
hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 2rem 0;
}

/* ============================================================
   IMAGES
   ============================================================ */
img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--border);
  margin: 1rem 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 1.5rem;
  margin-top: auto;
}

.social-icons {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.social-icons li a {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--fg-alt);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.social-icons li a:hover {
  color: var(--cyan);
  border-color: var(--border);
  background: var(--bg-hl);
  text-shadow: 0 0 8px rgba(70, 217, 255, 0.2);
}

.social-icons li a i {
  font-size: 1rem;
}

/* ============================================================
   DOOM-STYLE MODELINE (bottom bar)
   ============================================================ */
.modeline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--bg-alt);
  color: var(--fg-alt);
  border-top: 1px solid var(--border);
  padding: 0.3rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modeline-left,
.modeline-right {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.modeline .ml-major-mode {
  color: var(--magenta);
  font-weight: bold;
}

.modeline .ml-branch {
  color: var(--green);
}

.modeline .ml-position {
  color: var(--blue);
}

/* ============================================================
   CURSOR BLINK ANIMATION
   ============================================================ */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.cursor-blink {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--magenta);
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}

/* ============================================================
   WHICH-KEY STYLE TOOLTIP (optional for interactive elements)
   ============================================================ */
.which-key {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.8rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--fg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 9999;
}

.which-key .key {
  color: var(--blue);
  font-weight: bold;
}

.which-key .desc {
  color: var(--fg-alt);
  margin-left: 0.5rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --font-size: 15px;
  }

  .site-header {
    padding: 0.6rem 1rem;
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
  }

  .site-nav.open {
    display: flex;
  }

  .site-nav a {
    padding: 0.5rem 0.75rem;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
  }

  #content, .content {
    padding: 1.5rem 1rem;
  }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.1rem; }

  .social-icons {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size: 14px;
  }

  pre.src {
    font-size: 0.8rem;
    padding: 0.8rem 1rem;
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .modeline { display: none; }
  a { color: #000; border-bottom: 1px solid #000; }
  pre.src { border: 1px solid #ccc; }
}