/* =========================================================
   Base variables
   ========================================================= */
:root {
  --link: #008aff;
  --link-hover: #0085a1;
  --link-border: rgba(0, 138, 255, 0.2);

  --hr: #666;
  --hr-dark: #999;

  --code-border: #ccc;
  --code-border-dark: #555;
  --code-bg: #fdfdfd;
  --code-bg-dark: #1e1e1e;
  --code-title-bg: #f8f8f8;
  --code-title-bg-dark: #2a2a2a;
  --code-title-fg: #333;
  --code-title-fg-dark: #ddd;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
  :root {
    --link: #50afff;
    --link-hover: #b0e0ff;
    --link-border: rgba(80, 175, 255, 0.2);
  }
}

/* =========================================================
   Content: text & structure
   ========================================================= */
/* Default text styles */
.blog-post p {
  hyphens: none;
  line-height: 1.6;
  text-align: left;  /* default alignment for posts */
}

/* Pages get justified alignment */
.blog-post[data-content-type="page"] p {
  text-align: justify;
}

/* Horizontal rule */
hr {
  border: 0;
  height: 1px;
  background-color: var(--hr);
  margin: 2rem 0;
}
@media (prefers-color-scheme: dark) {
  hr { background-color: var(--hr-dark); }
}

/* =========================================================
   Links inside posts
   ========================================================= */
.post-entry a,
.blog-post a {
  color: var(--link);
  text-decoration: none; /* theme often uses border-bottom as underline */
  border-bottom: 2px solid var(--link-border);
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.post-entry a:hover,
.blog-post a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link);
}
/* Keyboard focus */
.post-entry a:focus-visible,
.blog-post a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* =========================================================
   Tables in posts
   ========================================================= */
.post-entry table,
.blog-post table {
  margin: 2rem 0;
  border-collapse: collapse;
  width: 100%;
}
.post-entry table th,
.post-entry table td,
.blog-post table th,
.blog-post table td {
  padding: 0.5em 1em;
}

/* =========================================================
   Section spacing
   ========================================================= */
#blog-start {
  display: block;
  margin-bottom: 10rem;
}
/* first <hr> immediately after #blog-start */
#blog-start + hr {
  margin-top: 10rem;
}

/* =========================================================
   Theme well override (scoped to main)
   ========================================================= */
div[role="main"] .well {
  border: none;
  box-shadow: none;
  background-color: transparent;
  padding: 0;
}

/* =========================================================
   Cards
   ========================================================= */
.cards-container {
  padding: 0 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  width: 100%;
}
.cards li { box-sizing: border-box; }
.cards li a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  box-shadow: 0 4px 8px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cards li .card:hover,
.cards li .card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}
.card-image a { display: block; }
.cards li a:focus { outline: none; }
.cards li a:focus-visible {
  outline: 3px solid rgba(21, 156, 228, 0.35);
  outline-offset: 4px;
}
.card-image img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.card-image img:hover { transform: scale(1.2); }
.card-image { overflow: hidden; }
.card-content { padding: 1rem 1.25rem; }
.card-content h3 {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  font-weight: 600;
}
.card-content p {
  margin: 0;
  color: #555;
  font-size: .95rem;
  line-height: 1.4;
}
.card-caption {
  padding: 0.5rem 1rem;
  text-align: center;
}
.card-caption p {
  margin: 0;
  color: #666;
  font-size: 1.5rem;
  font-weight: bold;
}

/* =========================================================
   Code blocks (Chroma / highlight.js): single thin border + optional title
   Supports: .highlight[title], [data-title], pre.chroma, div.chroma
   ========================================================= */

/* Reset outer wrappers to avoid double borders */
.highlight,
div.chroma,
pre.chroma {
  background: transparent;
  padding: 0;
  margin: 1rem 0;
  border: 0;
  box-shadow: none;
}

/* Default (no title on wrapper): put border on inner PRE */
.highlight:not([title]):not([data-title]) pre,
pre.chroma:not([title]):not([data-title]) {
  border: 1px solid var(--code-border);
  border-radius: 4px;
  background: var(--code-bg);
  padding: 0.75em 1em;
  margin: 0;
  box-shadow: none;
}

/* With a title on the wrapper: border on wrapper, clear inner PRE border */
.highlight[title],
div.chroma[title],
pre.chroma[title],
.highlight[data-title],
div.chroma[data-title],
pre.chroma[data-title] {
  border: 1px solid var(--code-border);
  border-radius: 4px;
  background: var(--code-bg);
  overflow: visible;
  margin: 1rem 0;
  padding: 0;
}
.highlight[title] pre,
div.chroma[title] pre,
pre.chroma[title],
.highlight[data-title] pre,
div.chroma[data-title] pre,
pre.chroma[data-title] {
  border: 0;
  background: transparent;
  padding: 0.75em 1em;
  margin: 0;
  box-shadow: none;
}

/* Title bar (works for both title= and data-title=) */
.highlight[title]::before,
div.chroma[title]::before,
pre.chroma[title]::before,
.highlight[data-title]::before,
div.chroma[data-title]::before,
pre.chroma[data-title]::before,
pre[data-title]::before {
  content: attr(title) attr(data-title); /* one will be empty */
  display: block;
  background: var(--code-title-bg);
  color: var(--code-title-fg);
  font-size: 0.85em;
  font-weight: bold;
  padding: 0.25em 0.75em;
  border-bottom: 1px solid var(--code-border);
  border-radius: 4px 4px 0 0;
}

/* Inline code: subtle background, no border box */
p code, li code, td code, th code {
  border: 0;
  padding: 0.1em 0.25em;
  background: rgba(0,0,0,0.04);
  border-radius: 3px;
}

/* Dark mode for code blocks */
@media (prefers-color-scheme: dark) {
  .highlight:not([title]):not([data-title]) pre,
  pre.chroma:not([title]):not([data-title]) {
    border-color: var(--code-border-dark);
    background: var(--code-bg-dark);
  }
  .highlight[title],
  div.chroma[title],
  pre.chroma[title],
  .highlight[data-title],
  div.chroma[data-title],
  pre.chroma[data-title] {
    border-color: var(--code-border-dark);
    background: var(--code-bg-dark);
  }
  .highlight[title]::before,
  div.chroma[title]::before,
  pre.chroma[title]::before,
  .highlight[data-title]::before,
  div.chroma[data-title]::before,
  pre.chroma[data-title]::before,
  pre[data-title]::before {
    background: var(--code-title-bg-dark);
    color: var(--code-title-fg-dark);
    border-bottom: 1px solid var(--code-border-dark);
  }
}