/* ═══════════════════════════════════════════════════════════════════
   Clarity-inspired blog stylesheet for rianborah.com
   Based on https://shikun.io/projects/clarity
   Fonts: Poppins (sans-serif, free equivalent of Athletics),
          Charter (serif, for body text), Fira Code (monospace)
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Computer Modern';
  src: url('https://cdn.jsdelivr.net/gh/dreampulse/computer-modern-web-font@master/font/cmun-rm.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Computer Modern';
  src: url('https://cdn.jsdelivr.net/gh/dreampulse/computer-modern-web-font@master/font/cmun-bx.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Computer Modern';
  src: url('https://cdn.jsdelivr.net/gh/dreampulse/computer-modern-web-font@master/font/cmun-it.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Computer Modern';
  src: url('https://cdn.jsdelivr.net/gh/dreampulse/computer-modern-web-font@master/font/cmun-bi.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

/* ── Reset ── */
a, abbr, address, article, aside, audio, b, big, blockquote, body, canvas,
caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset,
figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object,
ol, p, pre, q, s, samp, section, small, span, strike, strong, sub, summary,
sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu,
nav, section { display: block; }

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

/* ── Base typography ── */
body {
    background-color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, p, a, code, pre, ol, ul, li {
    color: #353535;
    line-height: 1.6;
    font-weight: 300;
    font-size: 18px;
    font-family: 'Computer Modern', Georgia, serif;
}

b, strong { font-weight: 600; }
em { font-style: italic; }

sub {
    font-weight: inherit;
    font-size: 0.65em;
    position: relative;
    top: 0.3em;
}
sup {
    font-weight: inherit;
    font-size: 0.65em;
    position: relative;
    top: -0.5em;
}

::selection { color: white; background: #353535; }
::-moz-selection { color: white; background: #353535; }

/* ── Links ── */
a {
    text-underline-offset: 1px;
    color: inherit;
    font-family: inherit;
}
a:hover { color: inherit; }

/* ── Horizontal rules ── */
hr { border: 0; height: 0; border-top: 1px solid rgba(0,0,0,0.1); }

/* ── Images ── */
img { width: 100%; margin: 0 auto; display: block; }

/* ── Container (vw-based padding, matches Clarity) ── */
.container {
    padding-right: calc(6vw - (100vw - 100%));
    padding-left: 6vw;
    flex: 1;
}
@media screen and (min-width: 769px)  { .container { padding-right: calc(8.5vw - (100vw - 100%)); padding-left: 8.5vw; } }
@media screen and (min-width: 992px)  { .container { padding-right: calc(12vw - (100vw - 100%)); padding-left: 12vw; } }
@media screen and (min-width: 1200px) { .container { padding-right: calc(15vw - (100vw - 100%)); padding-left: 15vw; } }
@media screen and (min-width: 1600px) { .container { padding-right: calc(18vw - (100vw - 100%)); padding-left: 18vw; } }
@media screen and (min-width: 2000px) { .container { padding-right: calc(22vw - (100vw - 100%)); padding-left: 22vw; } }

/* ── Responsive base font sizes ── */
@media screen and (max-width: 769px) {
    a, p, td, th, tr, code, pre, ol, ul, li, div { font-size: 15px; }
    h1 { font-size: 24px; line-height: 1.2; padding: 1em 0; font-weight: 700; }
    h1.title { font-weight: 500; font-size: 24px; }
    h2 { line-height: 1.2; padding: 1em 0; font-weight: 700; font-size: 18px; }
    h3 { font-weight: 700; line-height: 1.2; padding: 1em 0; font-size: 17px; }
}
@media screen and (min-width: 769px) {
    a, p, td, th, tr, code, pre, ol, ul, li, div { font-size: 16px; }
    h1 { font-size: 24px; line-height: 1.2; padding: 1em 0; font-weight: 700; }
    h1.title { padding: 0 0 0.8em; font-weight: 500; font-size: 24px; }
    h2 { line-height: 1.2; padding: 1em 0; font-weight: 700; font-size: 18px; }
    h3 { font-weight: 700; line-height: 1.2; padding: 1em 0; font-size: 17px; }
}
@media screen and (min-width: 1200px) {
    a, p, td, th, tr, code, pre, ol, ul, li, div { font-size: 17px; }
    h1 { font-size: 36px; line-height: 1.2; padding: 1em 0; font-weight: 700; }
    h1.title { padding: 0 0 0.8em; font-weight: 500; font-size: 36px; }
    h2 { line-height: 1.2; padding: 1em 0; font-weight: 700; font-size: 24px; }
    h3 { font-weight: 700; line-height: 1.2; padding: 1em 0; font-size: 18px; }
}
@media screen and (min-width: 1600px) {
    a, p, td, th, tr, code, pre, ol, ul, li, div { font-size: 18px; }
    h1 { font-size: 36px; line-height: 1.2; padding: 1em 0; font-weight: 700; }
    h1.title { padding: 0 0 0.6em; font-weight: 500; font-size: 42px; }
    h2 { line-height: 1.2; padding: 1em 0; font-weight: 700; font-size: 24px; }
    h3 { font-weight: 700; line-height: 1.2; padding: 1em 0; font-size: 18px; }
}

/* ── Nav ── */
.site-nav {
    background-color: transparent;
    padding: 1.5em 0;
}
.site-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-nav .brand {
    font-size: 18px;
    font-weight: 500;
    color: #353535;
    text-decoration: none;
    font-family: 'Computer Modern', Georgia, serif;
}
.site-nav .brand:hover { text-decoration: none; }
.site-nav .nav-links {
    display: flex;
    gap: 0;
}
.site-nav .nav-links a {
    display: block;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    color: #353535;
    font-size: 17px;
    font-family: 'Computer Modern', Georgia, serif;
    margin-left: 2.5em;
    position: relative;
}
.site-nav .nav-links a:hover { color: #353535; }

@media screen and (min-width: 1200px) {
    .site-nav { padding: 3em 0; }
    .site-nav .nav-links a { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   BLOG INDEX
   ══════════════════════════════════════════════════════════════════ */

.page-title {
    padding-bottom: 0.5em;
}
.page-title h1 {
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Computer Modern', Georgia, serif;
    font-weight: 700;
    font-size: 15px;
    color: #353535;
}
@media screen and (min-width: 992px)  { .page-title h1 { font-size: 17px; } }
@media screen and (min-width: 1200px) { .page-title h1 { font-size: 18px; } }

.post-list { list-style: none; }
.post-item {
    padding: 2em 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.post-item:first-child { padding-top: 0; }
.post-item:last-child  { border-bottom: none; }

.post-item .post-title {
    font-size: 1.35em;
    font-weight: 700;
    margin: 0 0 0.15em;
    padding: 0;
    line-height: 1.3;
    font-family: 'Computer Modern', Georgia, serif;
}
.post-item .post-title a { text-decoration: none; }
.post-item .post-title a:hover { text-decoration: underline; text-underline-offset: 2px; }

.post-meta {
    font-size: 85%;
    font-weight: 500;
    color: #666667;
    line-height: 1.2;
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.post-meta .tag {
    background-color: #ececec;
    color: #666667;
    border-radius: 10px;
    border: solid 1px #c6c6c6;
    padding: 0.15em 0.65em;
    font-size: 75%;
    font-weight: 400;
    font-family: 'Fira Code', monospace;
    text-decoration: none;
}

.post-excerpt {
    color: #666667;
    font-family: 'Computer Modern', Georgia, serif;
    font-size: 0.9em;
    padding: 0.5em 0 0;
}
.read-more {
    display: inline-block;
    margin-top: 0.5em;
    font-size: 85%;
    font-weight: 500;
    text-decoration: none;
    color: #353535;
}
.read-more:hover { text-decoration: underline; }

.empty-state {
    text-align: center;
    padding: 6em 0;
    color: #999;
    font-size: 16px;
}

/* ══════════════════════════════════════════════════════════════════
   SINGLE POST (blog-post container, mirrors Clarity .container.blog.main)
   ══════════════════════════════════════════════════════════════════ */

.blog-post {
    padding: 0.8em 6vw;
}
@media screen and (min-width: 769px)  { .blog-post { padding: 1em 15vw; } }
@media screen and (min-width: 992px)  { .blog-post { padding: 1em 20vw; } }
@media screen and (min-width: 1200px) { .blog-post { padding: 1em 24vw; } }
@media screen and (min-width: 1600px) { .blog-post { padding: 1em 26vw; } }
@media screen and (min-width: 2000px) { .blog-post { padding: 1em 28vw; } }

.post-header {
    padding-bottom: 1em;
}
.post-header h1 {
    padding: 0 0 0.3em;
}
.post-header .post-meta {
    padding: 0;
}

/* Body text uses Charter (serif), matching Clarity's Tiempos Text */
.post-body p {
    padding: 1em 0;
    font-family: 'Computer Modern', Georgia, serif;
}
.post-body p:last-child {
    padding-bottom: 0;
}

.post-body ul,
.post-body ol {
    padding: 0 0 0 1.5em;
    font-family: 'Computer Modern', Georgia, serif;
}
.post-body li {
    padding: 0.2em 0;
    font-family: 'Computer Modern', Georgia, serif;
}

.post-body blockquote {
    border-left: 3px solid #353535;
    margin: 1em 0;
    padding: 0 1.5em;
    color: #666667;
    font-style: italic;
}

.post-body img {
    padding-bottom: 1em;
}

/* Caption style (matches Clarity) */
.post-body .caption {
    padding: 1em 0;
    font-weight: 500;
    line-height: 1.2;
    font-size: 90%;
    font-family: 'Computer Modern', Georgia, serif;
}

/* ── Inline code (matches Clarity exactly) ── */
code {
    background-color: rgba(230, 235, 237, 0.25);
    border-radius: 10px;
    border: solid 1px #c6c6c6;
    font-family: 'Fira Code', monospace;
    margin: 0 0.25em;
    padding: 0.25em 0.65em;
    color: #666667;
    font-size: 75%;
}

/* ── Code blocks (matches Clarity: light bg, foundation theme) ── */
pre {
    font-family: 'Fira Code', monospace;
    position: relative;
}

pre code {
    background-color: #fafafa !important;
    border: none;
    border-radius: 0;
    margin: 0;
    display: block;
    padding: 1em 1.5vw !important;
    overflow-x: auto;
    font-size: 85%;
    line-height: 1.7;
    color: #353535;
}

/* ── Tables (matches Clarity: alternating gray rows) ── */
.table-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 1em;
}
.table-wrapper::-webkit-scrollbar { width: 0; height: 0; }

table {
    margin: 0.5vh 0;
    width: 100%;
    font-family: 'Computer Modern', Georgia, serif;
}
table th, table td { font-size: 85%; }
table th b, table td b { font-weight: 700; }
table thead { font-weight: 700; }
table tbody tr {
    border: solid 1px #404041;
    border-left: 0;
    border-right: 0;
}
table tbody tr:nth-child(2n+1) { background-color: #ececec; }
table tbody tr:first-child { border-top: solid 2px white; }
table tbody tr:last-child  { border-bottom: solid 2px white; }
table td { color: #353535; padding: 0.5em; }
table th { color: #666667; padding: 0 0.5em 0.25em; text-align: left; }

/* ── Math (KaTeX) ── */
.math-display {
    overflow-x: auto;
    padding: 0.5em 0;
    margin: 0.5em 0;
    text-align: center;
}
.math-inline { display: inline; }

/* ── Gray container (for diagrams, matches Clarity) ── */
.gray-container {
    background-color: #f6f6f6;
    padding: 1.5em 6vw;
    margin: 0.5em 0;
}
@media screen and (min-width: 769px)  { .gray-container { padding: 1.5em 15vw; } }
@media screen and (min-width: 992px)  { .gray-container { padding: 1.5em 20vw; } }
@media screen and (min-width: 1200px) { .gray-container { padding: 1.5em 24vw; } }


/* ── Back link & Footer ── */
.back-link {
    margin-top: 3em;
    padding-top: 1.5em;
    border-top: 1px solid rgba(0,0,0,0.1);
}
.back-link a {
    font-size: 85%;
    font-weight: 500;
    text-decoration: none;
    color: #666667;
}
.back-link a:hover { color: #353535; text-decoration: underline; }

.site-footer {
    margin-top: 4em;
    padding: 2em 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    text-align: center;
    font-size: 80%;
    color: #999;
    font-weight: 400;
}
.site-footer a { color: #999; text-decoration: none; }
.site-footer a:hover { color: #353535; }

/* ── Responsive adjustments for mobile ── */
@media (max-width: 600px) {
    .site-nav .nav-links a { margin-left: 1.5em; font-size: 15px; }
}