/* public/css/blog-post.css */
/*
  Standalone CSS for Vagary.blog posts
  - Designed to work with Tailwind CDN (no build step required)
  - Matches Vagary palette and Medium-style layout
*/

/* Container */
.blog-article {
  max-width: 48rem;            /* approx. 3xl */
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Headings */
.blog-article h1 {
  font-size: 2.25rem;          /* text-4xl */
  font-weight: 700;
  color: #161B40;
  margin: 0 0 1.5rem 0;
}
.blog-article h2 {
  font-size: 1.875rem;         /* text-3xl */
  font-weight: 600;
  color: #373F78;
  margin: 2rem 0 1rem 0;
}
.blog-article h3 {
  font-size: 1.5rem;           /* text-2xl */
  font-weight: 600;
  color: #81A4CD;
  margin: 1.5rem 0 0.75rem 0;
}

/* Paragraph spacing */
.blog-article p {
  margin: 1.5rem 0;
  line-height: 1.75;
}
.blog-article p + p {
  margin-top: 2rem;
}

/* Images */
.blog-article img {
  display: block;
  margin: 2rem auto;
  border-radius: 1rem;
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  max-width: 100%;
  height: auto;
}

/* Blockquotes */
.blog-article blockquote {
  border-left: 0.25rem solid #EDE742;
  background-color: #F5F7DC;
  color: #161B40;
  font-style: italic;
  padding: 1rem 1.5rem;
  margin: 2rem 0;
}

/* Links */
.blog-article a {
  color: #81A4CD;
  text-decoration: underline;
}
.blog-article a:hover {
  color: #373F78;
}

/* Lists */
.blog-article ul,
.blog-article ol {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}
.blog-article li {
  margin-bottom: 0.5rem;
}

/* Code inline & blocks */
.blog-article code,
.prose code {
  background-color: #F5F7DC;
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
  font-family: 'Fira Code', 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 0.9em;
}

/* Code block container with copy button */
.blog-article pre,
.prose pre {
  position: relative;
  background-color: #1e1e1e;
  color: #d4d4d4;
  border-radius: 0.5rem;
  padding: 1.25rem;
  overflow-x: auto;
  margin: 2rem 0;
  border: 1px solid #3e3e3e;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-family: 'Fira Code', 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Copy button styling */
.blog-article .code-block-wrapper,
.prose .code-block-wrapper {
  position: relative;
}

.blog-article .code-copy-button,
.prose .code-copy-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background-color: #2d2d2d;
  color: #d4d4d4;
  border: 1px solid #3e3e3e;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.blog-article .code-copy-button:hover,
.prose .code-copy-button:hover {
  background-color: #3d3d3d;
  border-color: #4d4d4d;
  color: #ffffff;
}

.blog-article .code-copy-button:active,
.prose .code-copy-button:active {
  transform: scale(0.95);
}

.blog-article .code-copy-button.copied,
.prose .code-copy-button.copied {
  background-color: #28a745;
  border-color: #28a745;
  color: #ffffff;
}

/* Override code styles when inside pre */
.blog-article pre > code,
.prose pre > code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  display: block;
  white-space: pre;
  overflow-x: auto;
}

/* Language label (optional, shown in top-left) */
.blog-article pre[data-language]:not([data-language=""]):before,
.prose pre[data-language]:not([data-language=""]):before {
  content: attr(data-language);
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  z-index: 1;
}

/* Adjust padding when language label is present */
.blog-article pre[data-language]:not([data-language=""]),
.prose pre[data-language]:not([data-language=""]) {
  padding-top: 2.5rem;
}

/* Syntax highlighting colors (Prism.js compatible) */
.blog-article pre code .token.comment,
.blog-article pre code .token.prolog,
.blog-article pre code .token.doctype,
.blog-article pre code .token.cdata,
.prose pre code .token.comment,
.prose pre code .token.prolog,
.prose pre code .token.doctype,
.prose pre code .token.cdata {
  color: #6a9955;
}

.blog-article pre code .token.punctuation,
.prose pre code .token.punctuation {
  color: #d4d4d4;
}

.blog-article pre code .token.property,
.blog-article pre code .token.tag,
.blog-article pre code .token.boolean,
.blog-article pre code .token.number,
.blog-article pre code .token.constant,
.blog-article pre code .token.symbol,
.blog-article pre code .token.deleted,
.prose pre code .token.property,
.prose pre code .token.tag,
.prose pre code .token.boolean,
.prose pre code .token.number,
.prose pre code .token.constant,
.prose pre code .token.symbol,
.prose pre code .token.deleted {
  color: #569cd6;
}

.blog-article pre code .token.selector,
.blog-article pre code .token.attr-name,
.blog-article pre code .token.string,
.blog-article pre code .token.char,
.blog-article pre code .token.builtin,
.blog-article pre code .token.inserted,
.prose pre code .token.selector,
.prose pre code .token.attr-name,
.prose pre code .token.string,
.prose pre code .token.char,
.prose pre code .token.builtin,
.prose pre code .token.inserted {
  color: #ce9178;
}

.blog-article pre code .token.operator,
.blog-article pre code .token.entity,
.blog-article pre code .token.url,
.blog-article pre code .language-css .token.string,
.blog-article pre code .style .token.string,
.prose pre code .token.operator,
.prose pre code .token.entity,
.prose pre code .token.url,
.prose pre code .language-css .token.string,
.prose pre code .style .token.string {
  color: #d4d4d4;
}

.blog-article pre code .token.atrule,
.blog-article pre code .token.attr-value,
.blog-article pre code .token.keyword,
.prose pre code .token.atrule,
.prose pre code .token.attr-value,
.prose pre code .token.keyword {
  color: #c586c0;
}

.blog-article pre code .token.function,
.blog-article pre code .token.class-name,
.prose pre code .token.function,
.prose pre code .token.class-name {
  color: #dcdcaa;
}

.blog-article pre code .token.regex,
.blog-article pre code .token.important,
.blog-article pre code .token.variable,
.prose pre code .token.regex,
.prose pre code .token.important,
.prose pre code .token.variable {
  color: #d16969;
}

/* Tables */
.blog-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
}
.blog-article th,
.blog-article td {
  border: 1px solid #EDE742;
  padding: 0.75rem;
}
.blog-article thead {
  background-color: #373F78;
  color: #FFFFFF;
}

/* Reading progress bar */
#scrollbar-bg {
  transition: width 0.2s ease;
}

/* Ensure Tailwind Typography prose classes (if used) span full container width */
.prose {
  max-width: 100%;
}

/* Force form labels to block */
label {
  display: block;
}