/* ==========================================================
   Online font sources
   Serif (headings + body): Lora — loaded via <link> in _includes/head.liquid
   Mono: Maple Mono NF, falling back to Maple Mono and FiraCode Nerd Font
   ========================================================== */

/* Maple Mono (primary code font) — Fontsource CDN build, latin subset.
   Note: this is upstream Maple Mono, not the Nerd Font (NF) patched build;
   no CDN-hosted NF webfont exists, it ships only as GitHub release ZIPs. The
   FiraCode Nerd Font fallback below still supplies any NF icon glyph that
   Maple Mono lacks, so the chain covers them without self-hosting. */
@import url("https://cdn.jsdelivr.net/npm/@fontsource/maple-mono@5.3.0/400.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/maple-mono@5.3.0/700.css");

/* FiraCode Nerd Font — fallback, and the source of NF icon glyphs */
@import url("https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/firacode-nerd-font.css");

:root {
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-mono: "Maple Mono NF", "Maple Mono", "FiraCode Nerd Font", "Fira Code", Consolas, monospace;
}

/* Lora everywhere except the separately styled Resume page. */
body,
button,
input,
textarea,
select,
.navbar,
.navbar-nav,
.nav-link,
.dropdown-menu,
.table,
.publications,
.news,
.post-meta,
h1, h2, h3, h4, h6,
.title,
.post-title,
article .title,
.publications h2,
.news h2,
.cv .title {
  font-family: var(--font-serif);
}

.post-header .post-title {
  font-size: 2rem; /* 20% smaller than Bootstrap's 2.5rem h1 default. */
}

.post-header .post-subtitle {
  margin: 0.35rem 0 0.7rem;
  color: var(--global-text-color);
  font-family: var(--font-serif);
  font-size: 1.62rem; /* 20% larger than the previous 1.35rem. */
  font-weight: 700;
  line-height: 1.35;
}

h1, h2, h3, h4, h6,
.title,
.post-title,
article .title,
.publications h2,
.news h2,
.cv .title {
  font-weight: 700;
}

/* Mono — inline code, code blocks, syntax highlighting */
code,
pre,
kbd,
.highlight,
.highlight pre,
.highlight code,
figure.highlight,
figure.highlight pre {
  font-family: var(--font-mono);
}

/* Code sits slightly below the 16px body text. rem (not em) so code nested
   inside sized containers can't compound. The `:not(pre) > code` selector
   matches main.css's own inline-code rule so source order decides — a bare
   `code` selector loses to it on specificity and is silently ignored.
   Prose is deliberately left unset here so it keeps the theme's 16px. */
pre,
.highlight pre,
figure.highlight pre,
:not(pre) > code {
  font-size: 0.90625rem; /* 14.5px at the 16px root */
}

/* About page — justified prose. `hyphens: auto` is doing real work here: the
   profile image floats right, so text wraps in a narrowed column where justify
   alone would open large word gaps ("rivers"). Paragraphs only, so headings and
   list items keep their natural ragged right. */
.about-intro p {
  text-align: left;
  hyphens: auto;
}

/* Blog post list — tighter vertical rhythm.
   The gem resets margin-bottom on .post-meta but not on .post-tags, which is
   the last element in each <li>; with Tailwind preflight off it keeps its
   UA-default ~1em bottom margin and stacks on top of the li's own padding,
   leaving a large empty gap before the divider between posts. */
.post-list li {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.post-list li p {
  margin: 0;
}

/* Blog tag/category cloud — tighter vertical rhythm.
   The bullet separators are bare <p> tags with no reset class, and Tailwind
   preflight is off here, so the UA default ~1em p margin was stacking on
   top of the padding below and inflating the gap between wrapped rows. */
.tag-category-list ul li,
.tag-category-list ul p {
  padding: 0.15rem 0.2rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.02;
}

/* Contact/social icons — official brand colors on every contact row.
   Class-based selectors are intentional: the production PurgeCSS pass removes
   URL-attribute selectors even when the matching links occur in generated HTML. */
.contact-icons .fa-envelope::before {
  color: #ea4335 !important; /* Gmail */
}

.contact-icons .fa-linkedin::before {
  color: #0a66c2 !important; /* LinkedIn */
}

.contact-icons .ai-orcid::before {
  color: #a6ce39 !important; /* ORCID */
}

.contact-icons .ai-researchgate::before {
  color: #00ccbb !important; /* ResearchGate */
}

.contact-icons .fa-github::before {
  color: #181717 !important; /* GitHub */
}

html[data-theme="dark"] .contact-icons .fa-github::before {
  color: #ffffff !important;
}

.contact-icons .ai-cv::before {
  color: var(--global-theme-color) !important;
}