/* =========================================================
   YOSRALISM — Neovim + Catppuccin Mocha themed landing
   ========================================================= */

:root {
    /* Catppuccin Mocha palette */
    --ctp-base: #1e1e2e;
    --ctp-mantle: #181825;
    --ctp-crust: #11111b;

    --ctp-text: #cdd6f4;
    --ctp-subtext1: #bac2de;
    --ctp-subtext0: #a6adc8;
    --ctp-overlay2: #9399b2;
    --ctp-overlay1: #7f849c;
    --ctp-overlay0: #6c7086;

    --ctp-surface2: #585b70;
    --ctp-surface1: #45475a;
    --ctp-surface0: #313244;

    --ctp-blue: #89b4fa;
    --ctp-lavender: #b4befe;
    --ctp-sapphire: #74c7ec;
    --ctp-sky: #89dceb;
    --ctp-teal: #94e2d5;
    --ctp-green: #a6e3a1;
    --ctp-yellow: #f9e2af;
    --ctp-peach: #fab387;
    --ctp-maroon: #eba0ac;
    --ctp-red: #f38ba8;
    --ctp-mauve: #cba6f7;
    --ctp-pink: #f5c2e7;
    --ctp-flamingo: #f2cdcd;
    --ctp-rosewater: #f5e0dc;

    --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace,
        SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --line-h: 1.6rem;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--ctp-base);
    color: var(--ctp-text);
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: var(--line-h);
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* =========================================================
   Bufferline (top tabs)
   ========================================================= */
.bufferline {
    display: flex;
    align-items: stretch;
    background: var(--ctp-mantle);
    border-bottom: 1px solid var(--ctp-crust);
    font-size: 13px;
    min-height: 32px;
    user-select: none;
}

.buffer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    background: var(--ctp-mantle);
    color: var(--ctp-overlay1);
    border-right: 1px solid var(--ctp-crust);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    /* The subscribe buffer is rendered as <a>; strip the browser-default
       underline so it visually matches the static <div> buffers. */
    text-decoration: none;
}

.buffer:hover {
    color: var(--ctp-text);
}

.buffer.active {
    background: var(--ctp-base);
    color: var(--ctp-lavender);
    border-top: 2px solid var(--ctp-mauve);
    padding-top: calc(0.35rem - 2px);
}

.buffer-icon {
    color: var(--ctp-blue);
}

.buffer.active .buffer-icon {
    color: var(--ctp-mauve);
}

.buffer-close {
    margin-left: 0.25rem;
    opacity: 0.6;
}

.bufferline-spacer {
    flex: 1;
}

.bufferline-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.9rem;
    background: var(--ctp-surface0);
    color: var(--ctp-peach);
    border-left: 1px solid var(--ctp-crust);
    font-size: 12px;
}

/* =========================================================
   Editor area
   ========================================================= */
.editor {
    flex: 1;
    display: flex;
    align-items: flex-start;
    min-height: 0;
    padding: 0;
}

/* Gutter — line numbers */
.gutter {
    width: 4ch;
    padding: 1rem 0.5rem 1rem 0.75rem;
    text-align: right;
    color: var(--ctp-overlay0);
    user-select: none;
    border-right: 1px solid var(--ctp-mantle);
    background: var(--ctp-base);
}

.gutter .ln {
    line-height: var(--line-h);
    font-size: 14px;
}

.gutter .ln.current {
    color: var(--ctp-yellow);
}

/* Content */
.content {
    flex: 1;
    padding: 1rem 1.5rem 2rem;
    max-width: 100%;
}

.line {
    line-height: var(--line-h);
    min-height: var(--line-h);
    white-space: pre-wrap;
}

.comment {
    color: var(--ctp-overlay1);
    font-style: italic;
}

/* Title */
.title-line {
    display: flex;
    align-items: baseline;
    gap: 0;
    font-size: 3rem;
    line-height: 1.1;
    margin: 0.5rem 0;
}

.heading-marker {
    color: var(--ctp-mauve);
    font-weight: 700;
    font-size: 2rem;
}

.title {
    color: var(--ctp-lavender);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-shadow: 0 0 24px rgba(180, 190, 254, 0.12);
}

/* Neovim NORMAL-mode block cursor. Painted via background-color rather
   than a Unicode glyph (U+258F was thin + had unpredictable per-font
   metrics). Sized in `em` so the same rule works for the 3rem page
   title, the 1.4rem section-page heading, and the 1.05rem card title.

   Alignment intuition:
     - In flex contexts with `align-items: baseline` (e.g. .title-line),
       an empty inline-block's baseline IS its bottom — so the block
       sits ON the baseline and extends upward by `height`. Picking
       height ~= cap-height (≈0.7em for JetBrains Mono) makes the
       block visually flush with capital letters like YOSRALISM.
     - In flex contexts with `align-items: center` (e.g. .card-head),
       the block is vertically centered with the line, which reads
       better next to mixed-case text like `personal o+x`. */
.caret {
    display: inline-block;
    width: 1ch;
    height: 0.7em;
    background-color: var(--ctp-rosewater);
    margin-left: 0.15em;
    vertical-align: baseline;
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Slogan / blockquote */
.slogan-line {
    font-size: 1.05rem;
}

.quote {
    color: var(--ctp-green);
    font-weight: 700;
}

.slogan {
    color: var(--ctp-subtext1);
    font-style: italic;
}

/* Section cards */
.sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.25rem 0;
}

.section-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--ctp-mantle);
    border: 1px solid var(--ctp-surface0);
    border-left: 3px solid var(--ctp-surface1);
    padding: 0.75rem 1rem;
    transition: background 0.15s ease, border-color 0.15s ease,
        transform 0.15s ease;
}

.section-card:hover {
    background: var(--ctp-surface0);
    border-color: var(--ctp-surface2);
    transform: translateX(2px);
}

.section-card:nth-child(1):hover {
    border-left-color: var(--ctp-pink);
}
.section-card:nth-child(2):hover {
    border-left-color: var(--ctp-yellow);
}
.section-card:nth-child(3):hover {
    border-left-color: var(--ctp-green);
}
.section-card:nth-child(4):hover {
    border-left-color: var(--ctp-sapphire);
}

.card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
}

.bracket {
    color: var(--ctp-overlay1);
}

.card-index {
    color: var(--ctp-peach);
    font-weight: 700;
}

.card-icon {
    color: var(--ctp-mauve);
    margin-left: 0.15rem;
}

.section-card:nth-child(1) .card-icon {
    color: var(--ctp-pink);
}
.section-card:nth-child(2) .card-icon {
    color: var(--ctp-yellow);
}
.section-card:nth-child(3) .card-icon {
    color: var(--ctp-green);
}
.section-card:nth-child(4) .card-icon {
    color: var(--ctp-sapphire);
}

.card-title {
    color: var(--ctp-text);
    font-weight: 500;
}

.card-desc {
    margin-top: 0.25rem;
    font-size: 0.9rem;
}

/* =========================================================
   Status line (lualine) + cmdline
   ========================================================= */
.statusline {
    display: flex;
    align-items: stretch;
    background: var(--ctp-mantle);
    color: var(--ctp-text);
    font-size: 13px;
    min-height: 26px;
    border-top: 1px solid var(--ctp-crust);
}

.sl-left,
.sl-right {
    display: flex;
    align-items: stretch;
}

.sl-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ctp-overlay2);
    padding: 0 1rem;
}

.sl-section {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.85rem;
    background: var(--ctp-surface0);
    color: var(--ctp-subtext1);
    border-right: 1px solid var(--ctp-mantle);
}

.sl-right .sl-section {
    border-right: none;
    border-left: 1px solid var(--ctp-mantle);
}

.sl-section .sl-icon {
    color: var(--ctp-lavender);
}

/* Mode pill */
.mode {
    font-weight: 700;
    color: var(--ctp-crust);
    padding: 0 1rem;
    letter-spacing: 0.06em;
}

.mode-normal {
    background: var(--ctp-blue);
    color: var(--ctp-crust);
}
.mode-insert {
    background: var(--ctp-green);
    color: var(--ctp-crust);
}
.mode-visual {
    background: var(--ctp-mauve);
    color: var(--ctp-crust);
}
.mode-replace {
    background: var(--ctp-red);
    color: var(--ctp-crust);
}
.mode-command {
    background: var(--ctp-peach);
    color: var(--ctp-crust);
}

.mode .sl-icon {
    color: var(--ctp-crust);
}

/* Diagnostics */
.sl-diag {
    gap: 0.85rem;
}
.diag.err {
    color: var(--ctp-red);
}
.diag.warn {
    color: var(--ctp-yellow);
}
.diag.info {
    color: var(--ctp-sky);
}
.diag.hint {
    color: var(--ctp-teal);
}

.sl-branch .sl-icon {
    color: var(--ctp-peach);
}

.sl-pos,
.sl-percent {
    color: var(--ctp-crust);
    font-weight: 700;
}

/* cmdline (very bottom) */
.cmdline {
    background: var(--ctp-base);
    color: var(--ctp-overlay2);
    padding: 0.15rem 0.75rem;
    font-size: 13px;
    border-top: 1px solid var(--ctp-mantle);
    min-height: 22px;
}

.cmd-prompt {
    color: var(--ctp-mauve);
    margin-right: 0.25rem;
}

.cmd-text {
    color: var(--ctp-subtext0);
}

/* =========================================================
   Post body — rendered markdown
   =========================================================
   The `<article class="post-body">` wrapper isolates these rules so
   they only touch user-authored content. Goal: render markdown into
   something that still feels like a Neovim buffer (markers, leading
   glyphs, restrained color).
   ========================================================= */
.post-body {
    color: var(--ctp-text);
    line-height: var(--line-h);
    font-size: 15px;
    max-width: 72ch;
}

.post-body > * + * {
    margin-top: 0.9rem;
}

.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
    margin-top: 1.6rem;
    margin-bottom: 0.4rem;
    font-weight: 700;
    line-height: 1.25;
}

.post-body h1 {
    font-size: 2rem;
    color: var(--ctp-lavender);
    text-shadow: 0 0 18px rgba(180, 190, 254, 0.12);
}
.post-body h1::before {
    content: "# ";
    color: var(--ctp-mauve);
}

.post-body h2 {
    font-size: 1.4rem;
    color: var(--ctp-text);
}
.post-body h2::before {
    content: "## ";
    color: var(--ctp-mauve);
}

.post-body h3 {
    font-size: 1.15rem;
    color: var(--ctp-text);
}
.post-body h3::before {
    content: "### ";
    color: var(--ctp-mauve);
}

.post-body h4::before { content: "#### ";   color: var(--ctp-mauve); }
.post-body h5::before { content: "##### ";  color: var(--ctp-mauve); }
.post-body h6::before { content: "###### "; color: var(--ctp-mauve); }

.post-body p {
    color: var(--ctp-text);
}

.post-body strong {
    color: var(--ctp-yellow);
    font-weight: 700;
}

.post-body em {
    color: var(--ctp-rosewater);
    font-style: italic;
}

.post-body a,
.back-link {
    color: var(--ctp-sapphire);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--ctp-surface2);
    transition: text-decoration-color 0.15s ease;
}

.post-body a:hover,
.back-link:hover {
    text-decoration-color: var(--ctp-sapphire);
}

.post-body code {
    color: var(--ctp-peach);
    background: var(--ctp-surface0);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.92em;
}

.post-body pre {
    background: var(--ctp-crust);
    border-left: 3px solid var(--ctp-mauve);
    padding: 0.8rem 1rem;
    overflow-x: auto;
    border-radius: 4px;
}

.post-body pre code {
    background: transparent;
    padding: 0;
    color: var(--ctp-text);
    font-size: 0.9rem;
}

.post-body ul,
.post-body ol {
    padding-left: 1.5rem;
    color: var(--ctp-text);
}

.post-body ul > li,
.post-body ol > li {
    margin: 0.2rem 0;
}

/* Replace the default disc bullet with a faint dot that matches the
   "comment" tone elsewhere in the design. */
.post-body ul {
    list-style: none;
    padding-left: 0;
}

.post-body ul > li {
    padding-left: 1.2em;
    position: relative;
}

.post-body ul > li::before {
    content: "•";
    color: var(--ctp-overlay1);
    position: absolute;
    left: 0;
    width: 1.2em;
}

/* Ordered lists keep numerals but tint them like line numbers in the
   gutter, reinforcing the Neovim feel. */
.post-body ol {
    list-style: none;
    counter-reset: ol-counter;
    padding-left: 0;
}

.post-body ol > li {
    padding-left: 1.8em;
    position: relative;
    counter-increment: ol-counter;
}

.post-body ol > li::before {
    content: counter(ol-counter) ".";
    color: var(--ctp-overlay1);
    position: absolute;
    left: 0;
    width: 1.6em;
}

.post-body blockquote {
    border-left: 3px solid var(--ctp-green);
    padding: 0.2rem 0 0.2rem 1rem;
    color: var(--ctp-subtext1);
    font-style: italic;
    margin-left: 0;
}

.post-body blockquote p {
    color: inherit;
}

.post-body hr {
    border: none;
    border-top: 1px dashed var(--ctp-surface2);
    margin: 1.5rem 0;
}

.post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--ctp-surface0);
}


/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 720px) {
    .sections {
        grid-template-columns: 1fr;
    }

    .title-line {
        font-size: 2rem;
    }

    /* On narrow viewports the page title shrinks from 3rem → 2rem;
       drop the heading-marker similarly. The caret no longer needs an
       explicit font-size override — it's sized in `em` units now, so
       it scales with its parent automatically. */
    .heading-marker {
        font-size: 1.5rem;
    }

    .sl-center,
    .sl-fileinfo,
    .sl-encoding,
    .sl-lsp {
        display: none;
    }

    .gutter {
        width: 3ch;
    }

    .post-body h1 {
        font-size: 1.5rem;
    }

    .post-body h2 {
        font-size: 1.2rem;
    }
}