/* =============================================================================
 * site.css — Global Site Styles (Tech Minimal Theme)
 * =============================================================================
 * This is the main custom CSS file for the DevCoreBlog application.
 * It is loaded on every page (both public and admin) via the layout files.
 *
 * Includes: base font sizing, focus ring accessibility, sticky footer,
 * shared public cards, markdown content styling,
 * and Prism.js code block overrides.
 *
 * Design: Tech Minimal — Sharp edges, high contrast, existing indigo accents.
 * ============================================================================= */

/* =============================================================================
 * CSS Custom Properties (Design Tokens) — Tech Minimal Theme
 * =============================================================================
 * These variables define the flat, high-contrast color palette and typography
 * for the application, aligning with the Tailwind Tech Minimal configuration.
 *
 * Strategy:
 *   1. :root = Light theme (default flat high-contrast palette)
 *   2. html.dark = Manual dark mode toggle (Tailwind 'class' strategy)
 * ============================================================================= */

/* --- Light Theme (Default) --- */
:root {
  /* Background and surface colors */
  --bg-primary: #f9fafb;
  --bg-card: #ffffff;
  --cover-grid: rgba(17, 24, 39, 0.12);
  --bg-surface: #ffffff;

  /* Flat high-contrast accent colors (Indigo) */
  --brand: #4f46e5;
  --brand-hover: #4338ca;
  --accent: #4f46e5;
  --accent-hover: #4338ca;

  /* High-contrast border */
  --border: #1f2937;

  /* Text colors */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #4b5563;

  /* Typography */
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Dark Theme (Manual Toggle via Tailwind 'class' strategy) --- */
html.dark {
  --bg-primary: #09090b;
  --bg-card: #121215;
  --cover-grid: rgba(244, 244, 245, 0.14);
  --bg-surface: #121215;
  --accent: #818cf8;
  --accent-hover: #a5b4fc;
  --border: #3f3f46;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #a1a1aa;
}

/* Keep the viewport stable when the drawer hides classic scrollbars. */
.public-root { font-size: 16px; scrollbar-gutter: stable; }

/* Set the base font size for the entire page */
html {
  font-size: 14px;
}

/* Increase font size on larger screens (tablets and desktops) */
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Make the html element cover the full viewport height */
html {
  position: relative;
  min-height: 100%;
}

/* =============================================================================
 * Legacy Layout Styles Disabled (Phase 1)
 * =============================================================================
 * Note: Old .card shadow and bootstrap-dependent layout styles have been
 * disabled so that Tailwind utility classes have full control over the
 * Tech Minimal layout, grid, and borders.
 * ============================================================================= */

/* =============================================================================
 * Markdown Content & Prism.js Code Block Styling
 * =============================================================================
 * These styles control how Markdown-rendered HTML looks inside the
 * .markdown-content container on the post Detail page.
 *
 * Goals:
 *   - Terminal aesthetic: sharp edges, monospace code, high contrast
 *   - Prism.js "Tomorrow Night" theme blends with #0d1117 background
 *   - Headings, links, lists, blockquotes match terminal palette
 * ============================================================================= */

/* --- Markdown Content Container --- */
/* Base typography for rendered Markdown (headings, paragraphs, lists) */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  color: var(--text-primary, #E6EDF3);
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  line-height: 1.4;
  letter-spacing: -0.025em;
}

.markdown-content h1 { font-size: 2rem; border-bottom: 1px solid var(--border, #30363d); padding-bottom: 0.5rem; }
.markdown-content h2 { font-size: 1.5rem; border-bottom: 1px solid var(--border, #30363d); padding-bottom: 0.4rem; }
.markdown-content h3 { font-size: 1.25rem; }
.markdown-content h4 { font-size: 1.125rem; }

/* Paragraphs — comfortable reading spacing */
.markdown-content p {
  font-family: var(--font-sans);
  font-size: 1.125rem; /* 18px */
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* Article links stay identifiable without relying on color. */
.markdown-content a {
  color: var(--accent, #f97316);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.markdown-content a:hover {
  border-bottom-color: var(--accent, #f97316);
}

/* Inline code — monospace, dark bg, sharp border */
.markdown-content :not(pre) > code:not([class*="language-"]) {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 0.85em;
  background-color: var(--bg-surface, #1c2128);
  color: var(--text-primary, #E6EDF3);
  padding: 0.2em 0.4em;
  border: 1px solid var(--border, #30363d);
  border-radius: 0;
}

/* --- Prism.js Code Block Overrides --- */
/* Authored rules follow Prism; no important override is needed. */
.markdown-content pre {
  border: 1px solid var(--accent, #f97316);
  border-radius: 0;
  margin: 2rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
  background: #111418; /* Slightly darker than surface */
  box-shadow: none;
}

.markdown-content pre code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  border-radius: 0;
  text-shadow: none;
}

/* Blockquotes use the shared accent and surface. */
.markdown-content blockquote {
  border-left: 4px solid var(--accent, #f97316);
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background-color: var(--bg-surface, #1c2128);
  color: var(--text-secondary, #8b949e);
  font-style: italic;
}

.markdown-content blockquote p {
  margin-bottom: 0;
  font-size: 1.05rem;
}

/* Lists — proper indentation and spacing */
.markdown-content ul,
.markdown-content ol {
  margin: 1.5rem 0;
  padding-left: 2rem;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  color: var(--text-secondary);
}

.markdown-content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.markdown-content ul li {
  list-style-type: square;
}

.markdown-content ol li {
  list-style-type: decimal-leading-zero;
}

/* Horizontal rule — subtle terminal divider */
.markdown-content hr {
  border: none;
  border-top: 1px dashed var(--border, #30363d);
  margin: 3rem 0;
}

/* Tables — Terminal sharp-bordered table */
.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.95rem;
  font-family: var(--font-sans);
}

.markdown-content th {
  background-color: var(--bg-surface, #1c2128);
  color: var(--text-primary, #E6EDF3);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border, #30363d);
  font-family: var(--font-mono);
}

.markdown-content td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border, #30363d);
  color: var(--text-secondary);
}

/* Task list checkboxes (GFM) — align with text */
.markdown-content input[type="checkbox"] {
  margin-right: 0.5rem;
  accent-color: var(--accent, #f97316);
  border-radius: 0;
}


/* Preserve admin corners without a public/global override. */
body:not(.public-site) * {
  border-radius: 0 !important;
}

/* Shared public tokens; layout utilities continue to own geometry. */
.public-site {
  --public-space: 1.25rem;
  --public-rule: 2px solid var(--border);
  --public-meta-size: 0.8125rem;
  --public-copy-size: 0.9375rem;
  --public-leading: 1.65;
}
.public-site :is(a, button, input):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: var(--public-rule);
  background: var(--bg-card);
  color: var(--text-primary);
  text-decoration: none;
}
.post-card:hover, .post-card:focus-visible {
  border-color: var(--accent);
}
.post-card-media {
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border-bottom: var(--public-rule);
  overflow: hidden;
}
.post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: var(--bg-primary);
  background-image: linear-gradient(var(--cover-grid) 1px, transparent 1px), linear-gradient(90deg, var(--cover-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.post-cover-placeholder span {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
  font: 700 var(--public-meta-size)/1.5 var(--font-mono);
}
.post-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--public-space);
  min-width: 0;
}
.post-category {
  align-self: flex-start;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: var(--brand);
  color: #fff;
  padding: 0.25rem 0.5rem;
  font: 700 var(--public-meta-size)/1.5 var(--font-sans);
}
.post-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.post-card-featured .post-card-title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}
.post-card-summary {
  color: var(--text-secondary);
  font-size: var(--public-copy-size);
  line-height: var(--public-leading);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.post-metadata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  color: var(--text-muted);
  font: var(--public-meta-size)/1.6 var(--font-mono);
}
.post-card .post-metadata {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.public-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: var(--public-space);
  margin-bottom: 2rem;
  background: var(--bg-card);
  border: var(--public-rule);
  color: var(--text-secondary);
  font-size: var(--public-copy-size);
}
.public-detail-meta .post-metadata {
  flex: 1;
  min-width: 12rem;
}
.public-detail-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.public-empty-state {
  padding: 2rem var(--public-space);
  margin-bottom: 1rem;
  text-align: center;
  background: var(--bg-card);
  border: var(--public-rule);
  color: var(--text-secondary);
  font: var(--public-copy-size)/var(--public-leading) var(--font-mono);
}

/* Indigo text uses a readable tint on dark surfaces; badge backgrounds stay branded. */
html.dark .public-site .text-primary { color: var(--accent); }

.public-site main, .public-site article { min-width: 0; }
.public-site article > h1 { overflow-wrap: anywhere; }

/* Navigation stays in the document flow until its drawer controller is ready. */
.public-sidebar { width: 100%; }
.public-menu-control, .public-drawer-backdrop { display: none; }
.public-navigation-ready .public-menu-control { display: inline-flex; }
.public-navigation-ready .public-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 16rem;
  height: 100dvh;
  overflow-y: auto;
  z-index: 50;
  transform: translateX(-100%);
  visibility: hidden;
}
.public-navigation-ready .public-sidebar.is-open {
  transform: translateX(0);
  visibility: visible;
}
.public-navigation-ready .public-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(0 0 0 / 60%);
}
.public-drawer-open { overflow: hidden; }
.public-drawer-open .public-drawer-backdrop { display: block; }
.public-site nav [aria-current="page"] { text-decoration: underline; text-underline-offset: 0.25em; }
.public-skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 60;
  transform: translateY(-200%);
  background: var(--bg-card);
  color: var(--text-primary);
  border: var(--public-rule);
  padding: 0.75rem;
}
.public-skip-link:focus { transform: translateY(0); }
.public-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.public-toolbar .public-search { order: 1; flex: 1 1 100%; }
.public-sign-in {
  margin-inline-start: auto;
  flex-shrink: 0;
  padding: 0.625rem 0.75rem;
  border: var(--public-rule);
  background: var(--bg-card);
  color: var(--text-primary);
  font: 700 var(--public-copy-size)/1.5 var(--font-mono);
  text-decoration: none;
}
.public-sign-in:hover { border-color: var(--accent); }
.public-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  font: var(--public-copy-size)/1.5 var(--font-mono);
}
.public-search input, .public-search button {
  padding: 0.625rem 0.75rem;
  border: var(--public-rule);
  background: var(--bg-card);
  color: var(--text-primary);
}
.public-search input { flex: 1; min-width: 0; width: 100%; }
.public-search input::placeholder { color: var(--text-muted); opacity: 1; }
.public-search button { font-weight: 700; cursor: pointer; }
.public-search button:hover { border-color: var(--accent); }
.public-search-shortcut { display: none; color: var(--text-muted); font-size: var(--public-meta-size); }
@media (min-width: 768px) {
  .public-toolbar { flex-wrap: nowrap; }
  .public-toolbar .public-search { order: 0; flex: 1 1 auto; }
  .public-sidebar, .public-navigation-ready .public-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 16rem;
    height: 100dvh;
    overflow-y: auto;
    z-index: 40;
    transform: none;
    visibility: visible;
  }
  .public-navigation-ready .public-menu-control { display: none; }
  .public-search-shortcut { display: inline; }
}

/* Article text stays readable; wide technical content scrolls inside its own region. */
.reading-article { width: 100%; max-width: 72ch; margin-inline: auto; }
.markdown-content { overflow-wrap: anywhere; }
.markdown-content :is(h1,h2,h3,h4,h5,h6) { scroll-margin-top: 6rem; }
.markdown-content img { max-width: 100%; height: auto; }
.markdown-content pre { max-width: 100%; overflow-x: auto; padding: 1rem; white-space: pre; }
.markdown-content pre code { overflow-wrap: normal; white-space: pre; }
.markdown-content table { display: block; max-width: 100%; overflow-x: auto; }
.article-toc { border: var(--public-rule); padding: 1rem; margin-bottom: 2rem; }
.article-toc ol { list-style: decimal; padding-left: 1.5rem; }
.article-toc li { margin-bottom: 0.5rem; overflow-wrap: anywhere; }
.article-toc a { text-decoration: underline; }
.article-toc .toc-nested { margin-left: 1rem; }
.code-copy-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.code-copy-controls button { border: var(--public-rule); padding: 0.5rem 0.75rem; font: 700 0.875rem var(--font-mono); cursor: pointer; }
.code-copy-controls [role="status"] { font-size: 0.875rem; }

.markdown-content :is(th, td) { min-width: 8rem; overflow-wrap: normal; }
.markdown-content :is(pre, table):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Reader filters remain native GET controls and fit narrow screens. */
.public-list-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin-bottom: 2rem; }
.public-list-filters label { display: block; margin-bottom: 0.4rem; }
.public-list-filters :is(select,button) { max-width: 100%; border: var(--public-rule); background: var(--bg-card); color: var(--text-primary); padding: 0.5rem 0.75rem; }
.public-list-filters > div { min-width: 0; max-width: 100%; }
.public-site select:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Honor the reader's motion preference on the public shell and controls. */
@media (prefers-reduced-motion: reduce) {
  .public-site, .public-site * { transition: none !important; scroll-behavior: auto !important; }
}