/* ============================================================================
   CMG Technology Blog — Stylesheet
   tech.cmgfi.com

   Design: Refined minimalism for long-form technical content.
   Light reading surface, dark technical elements.
   No frameworks. No dark mode toggle. No competing elements.
   ============================================================================ */

/* --- Custom Properties --- */

:root {
  /* Surface */
  --bg-page: #fafafa;
  --bg-surface: #ffffff;
  --bg-code: #0d1117;
  --bg-inline-code: #f3f4f6;
  --bg-table-header: #f9fafb;

  /* Text */
  --text-primary: #1a1a1a;
  --text-secondary: #6b7280;
  --text-code: #e6edf3;
  --text-caption: #6b7280;

  /* Accent */
  --accent-link: #2563eb;
  --accent-link-hover: #1d4ed8;
  --accent-focus: #3b82f6;
  --accent-teal: #185154;
  --accent-teal-hover: #1e6b6f;

  /* Dark surfaces */
  --bg-dark: #0d1117;
  --text-on-dark: #e6edf3;
  --text-muted-on-dark: #8b949e;
  --text-tertiary: #9ca3af;

  /* Borders */
  --border-light: #e5e7eb;
  --border-code: #30363d;
  --border-blockquote: #d1d5db;

  /* Layout */
  --content-width: 700px;
  --breakout-width: 960px;
  --page-gutter: 20px;

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
  --text-body: 1.0625rem;    /* 17px */
  --lh-body: 1.75;
  --text-h1: 2.125rem;       /* 34px */
  --lh-h1: 1.2;
  --text-h2: 1.5625rem;      /* 25px */
  --lh-h2: 1.3;
  --text-h3: 1.3125rem;      /* 21px */
  --lh-h3: 1.4;
  --text-code-block: 0.875rem; /* 14px */
  --lh-code-block: 1.5;
  --text-caption: 0.875rem;  /* 14px */
  --text-small: 0.8125rem;   /* 13px */
}


/* --- Reset & Base --- */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background-color: var(--bg-page);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent-link-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 2px;
  border-radius: 2px;
}


/* --- Layout Containers --- */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

.blog-header,
.blog-footer,
.blog-article {
  width: 100%;
}

.blog-content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.blog-breakout {
  max-width: var(--breakout-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}


/* --- Header --- */

.blog-header {
  background: var(--bg-dark);
  border-bottom: 2px solid var(--accent-teal);
}

.blog-header__inner {
  max-width: var(--breakout-width);
  margin: 0 auto;
  padding: 20px var(--page-gutter);
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-header__logo-link {
  display: flex;
  align-items: center;
}

.blog-header__logo {
  height: 32px;
  width: auto;
}


/* --- Footer --- */

.blog-footer {
  margin-top: 80px;
  padding: 40px var(--page-gutter);
  text-align: center;
  color: var(--text-muted-on-dark);
  font-size: var(--text-small);
  background: var(--bg-dark);
  border-top: 2px solid var(--accent-teal);
}


/* --- Article Header --- */

.article-header {
  margin-top: 48px;
  margin-bottom: 40px;
}

.article-header__series-label {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--accent-teal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.article-header__series-label a {
  color: var(--accent-teal);
}

.article-header__series-label a:hover {
  color: var(--accent-teal-hover);
}

.article-header__title {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--lh-h1);
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.article-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.article-header__meta-separator {
  color: var(--border-light);
  user-select: none;
}


/* --- Blog Prose (rich text sections) --- */

.blog-prose {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.blog-prose h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: var(--lh-h2);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-top: 48px;
  margin-bottom: 16px;
}

.blog-prose h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--text-primary);
  margin-top: 36px;
  margin-bottom: 12px;
}

.blog-prose h4 {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--text-primary);
  margin-top: 28px;
  margin-bottom: 8px;
}

.blog-prose p {
  margin-bottom: 20px;
}

.blog-prose strong {
  font-weight: 600;
}

.blog-prose ul,
.blog-prose ol {
  margin-bottom: 20px;
  padding-left: 24px;
}

.blog-prose li {
  margin-bottom: 6px;
}

.blog-prose li > ul,
.blog-prose li > ol {
  margin-top: 6px;
  margin-bottom: 0;
}

/* Inline code */
.blog-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-inline-code);
  padding: 2px 6px;
  border-radius: 3px;
  word-break: break-word;
}

/* Code blocks within prose (from XhtmlString) */
/* Sizes to the longest line so short blocks don't have empty space on the right.
   Floors at the prose width (matches surrounding text), caps at the breakout width
   (960px) with horizontal scroll for any lines that exceed that. Centered with the
   same left:50% + transform pattern <figure> uses. */
/* Top padding is generous to make room for the language label (top-left) and copy button (top-right) */
.blog-prose pre {
  position: relative;
  background: var(--bg-code);
  border-radius: 6px;
  border: 1px solid var(--border-code);
  padding: 32px 24px 20px;
  margin: 28px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: max-content;
  min-width: 100%;
  max-width: min(var(--breakout-width), calc(100vw - 2 * var(--page-gutter)));
  left: 50%;
  transform: translateX(-50%);
}

.blog-prose pre:hover > .blog-code-block__copy {
  opacity: 1;
}

/* Language label injected by blog.js, positioned in the pre's top-left chrome */
.blog-prose pre > .blog-code-block__language {
  position: absolute;
  top: 10px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #6e7681;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.blog-prose pre code {
  font-family: var(--font-mono);
  font-size: var(--text-code-block);
  line-height: var(--lh-code-block);
  color: var(--text-code);
  background: none;
  padding: 0;
  border-radius: 0;
  white-space: pre;
  word-break: normal;
  tab-size: 4;
}

/* Diagrams: images wrapped in <figure> get dark container treatment */
/* Breaks out of the 700px prose column to the wider breakout-width, centered */
.blog-prose figure {
  margin: 32px 0;
  background: var(--bg-code);
  border-radius: 6px;
  border: 1px solid var(--border-code);
  overflow: hidden;
  padding: 24px;
  width: var(--breakout-width);
  max-width: calc(100vw - 2 * var(--page-gutter));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.blog-prose figure img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.blog-prose figcaption {
  margin-top: 12px;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--text-muted-on-dark);
  text-align: center;
}

/* Inline code in blog blocks rendered by CMS */
code:not(pre code) {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-inline-code);
  padding: 2px 6px;
  border-radius: 3px;
  word-break: break-word;
}

/* Block quotes */
.blog-prose blockquote {
  border-left: 3px solid var(--border-blockquote);
  padding-left: 20px;
  margin: 24px 0;
  font-style: italic;
  color: var(--text-secondary);
}

.blog-prose blockquote p:last-child {
  margin-bottom: 0;
}

/* Links */
.blog-prose a {
  color: var(--accent-link);
  text-decoration: none;
}

.blog-prose a:hover {
  text-decoration: underline;
}

/* Horizontal rules */
.blog-prose hr {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 40px 0;
}

/* Tables inside prose */
.blog-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: var(--text-caption);
}

.blog-prose thead th {
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border-light);
  background: var(--bg-table-header);
}

.blog-prose tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.blog-prose .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* --- Code Blocks --- */

.blog-code-block {
  max-width: var(--breakout-width);
  margin: 28px auto;
  padding: 0 var(--page-gutter);
}

.blog-code-block__container {
  position: relative;
  background: var(--bg-code);
  border-radius: 6px;
  border: 1px solid var(--border-code);
}

.blog-code-block__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 0;
  min-height: 24px;
}

.blog-code-block__title {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: #8b949e;
}

.blog-code-block__language {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #8b949e;
  text-transform: lowercase;
}

.blog-code-block pre {
  margin: 0;
  padding: 16px 24px 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.blog-code-block pre code {
  font-family: var(--font-mono);
  font-size: var(--text-code-block);
  line-height: var(--lh-code-block);
  color: var(--text-code);
  background: none;
  padding: 0;
  border-radius: 0;
  white-space: pre;
  word-break: normal;
  tab-size: 4;
}

/* Copy button — always faintly visible so the corner reads as intentional chrome, full opacity on hover/focus */
.blog-code-block__copy {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(110, 118, 129, 0.2);
  border: 1px solid rgba(110, 118, 129, 0.3);
  color: #8b949e;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s ease, background 0.15s ease;
  z-index: 2;
}

.blog-code-block__container:hover .blog-code-block__copy {
  opacity: 1;
}

.blog-code-block__copy:hover {
  background: rgba(110, 118, 129, 0.35);
  color: #c9d1d9;
}

.blog-code-block__copy:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent-focus);
  outline-offset: 1px;
}

.blog-code-block__copy--copied {
  color: #7ee787;
}

/* Always visible on touch devices */
@media (hover: none) {
  .blog-code-block__copy {
    opacity: 1;
  }
}


/* --- Prism.js Token Colors --- */

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #8b949e;
}

.token.punctuation {
  color: #c9d1d9;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
  color: #79c0ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
  color: #a5d6ff;
}

.token.operator,
.token.entity,
.token.url {
  color: #ff7b72;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #ff7b72;
}

.token.function,
.token.class-name {
  color: #d2a8ff;
}

.token.regex,
.token.important,
.token.variable {
  color: #ffa657;
}

.token.important,
.token.bold {
  font-weight: 600;
}

.token.italic {
  font-style: italic;
}


/* --- Diagrams --- */

.blog-diagram {
  max-width: var(--breakout-width);
  margin: 32px auto;
  padding: 0 var(--page-gutter);
}

.blog-diagram__container {
  background: var(--bg-code);
  border-radius: 6px;
  border: 1px solid var(--border-code);
  overflow: hidden;
  padding: 24px;
}

.blog-diagram__image {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.blog-diagram__caption {
  margin-top: 12px;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--text-caption);
  text-align: center;
}


/* --- Series Navigation (Top) --- */

.series-nav {
  max-width: var(--breakout-width);
  margin: 32px auto 0;
  padding: 0 var(--page-gutter);
}

.series-nav__bar {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 16px 20px;
}

.series-nav__title {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 10px;
  text-align: center;
}

.series-nav__title a {
  color: var(--text-secondary);
}

.series-nav__title a:hover {
  color: var(--accent-link);
}

.series-nav__parts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0;
}

.series-nav__part {
  display: inline-flex;
  align-items: center;
}

.series-nav__part a,
.series-nav__part span {
  display: inline-block;
  font-size: var(--text-small);
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 100px;
  border: 1px solid var(--border-blockquote);
  color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.series-nav__part a:hover {
  background: var(--bg-inline-code);
  color: var(--text-primary);
  text-decoration: none;
  border-color: #d1d5db;
}

.series-nav__part--current a,
.series-nav__part--current span {
  background: var(--accent-teal);
  color: #ffffff;
  border-color: var(--accent-teal);
}

.series-nav__part--current a:hover {
  background: var(--accent-teal-hover);
  color: #ffffff;
}

.series-nav__part--upcoming span {
  color: var(--text-tertiary);
  border-style: dashed;
}


/* --- Series Navigation (Bottom) --- */

.series-nav-bottom {
  max-width: var(--content-width);
  margin: 48px auto 0;
  padding: 0 var(--page-gutter);
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.series-nav-bottom__link {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.series-nav-bottom__link:hover {
  color: var(--accent-link);
  text-decoration: none;
}

.series-nav-bottom__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.series-nav-bottom__title {
  font-weight: 500;
  color: var(--text-primary);
}

.series-nav-bottom__link:hover .series-nav-bottom__title {
  color: var(--accent-link);
}

.series-nav-bottom__link--next {
  text-align: right;
  margin-left: auto;
}


/* --- Author Card --- */

.author-card {
  max-width: var(--content-width);
  margin: 48px auto 0;
  padding: 24px var(--page-gutter);
  border-top: 1px solid var(--border-light);
}

.author-card__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.author-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-card__name {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--text-primary);
}

.author-card__title {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.author-card__linkedin {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}

.author-card__linkedin:hover {
  color: var(--accent-link);
  text-decoration: none;
}

.author-card__linkedin svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}


/* --- Series Hero (BlogSeriesPage) --- */

.series-hero {
  background: var(--bg-dark);
  border-bottom: 2px solid var(--accent-teal);
  padding: 64px 0 56px;
}

.series-hero__title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-on-dark);
  margin-bottom: 16px;
}

.series-hero__description {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-muted-on-dark);
  max-width: 600px;
  margin-bottom: 16px;
}

.series-hero__meta {
  font-size: var(--text-caption);
  color: var(--text-muted-on-dark);
}


/* --- Series Index (Part List) --- */

.series-index__posts {
  list-style: none;
  padding: 0;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.series-index__pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--accent-teal);
  color: #ffffff;
  margin-bottom: 10px;
}

.series-index__pill--upcoming {
  background: transparent;
  color: var(--text-tertiary);
  border: 1px dashed var(--text-tertiary);
}

.series-index__post-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.series-index__post-title a {
  color: var(--text-primary);
}

.series-index__post-title a:hover {
  color: var(--accent-teal);
  text-decoration: none;
}

.series-index__post-excerpt {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.series-index__post-date {
  font-size: var(--text-small);
  color: var(--text-tertiary);
}

.series-index__coming-soon {
  color: var(--text-tertiary);
}


/* --- Blog Root (Landing Page) --- */

.series-list {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.series-card {
  display: block;
  max-width: var(--breakout-width);
  margin: 0 auto;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.series-card__image-wrap {
  background: var(--bg-dark);
  border: 1px solid var(--border-code);
  border-radius: 6px;
  overflow: hidden;
  padding: 24px;
  margin-bottom: 24px;
}

.series-card__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.series-card__body {
  max-width: var(--content-width);
}

.series-card__meta {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.series-card__title {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--lh-h1);
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0 0 12px;
  transition: color 0.15s ease;
}

.series-card:hover .series-card__title {
  color: var(--accent-teal);
}

.series-card__description {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  margin: 0 0 16px;
}

.series-card__cta {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--accent-teal);
  transition: color 0.15s ease;
}

.series-card:hover .series-card__cta {
  color: var(--accent-teal-hover);
}


/* --- Medium-zoom overrides --- */

.medium-zoom-overlay {
  z-index: 1000;
}

.medium-zoom-image--opened {
  z-index: 1001;
}


/* --- Responsive --- */

@media (max-width: 768px) {
  :root {
    --text-h1: 1.75rem;
    --text-h2: 1.375rem;
    --text-h3: 1.1875rem;
  }

  .blog-content,
  .blog-breakout,
  .blog-prose,
  .blog-code-block,
  .blog-diagram,
  .series-nav,
  .series-nav-bottom,
  .author-card {
    max-width: 100%;
  }

  .blog-header__inner {
    max-width: 100%;
  }

  .series-nav-bottom {
    flex-direction: column;
  }

  .series-nav-bottom__link--next {
    text-align: left;
  }

  .blog-diagram__container {
    padding: 12px;
    border-radius: 0;
    margin-left: calc(-1 * var(--page-gutter));
    margin-right: calc(-1 * var(--page-gutter));
    border-left: none;
    border-right: none;
    width: calc(100% + 2 * var(--page-gutter));
  }

  .blog-code-block__container {
    border-radius: 0;
    margin-left: calc(-1 * var(--page-gutter));
    margin-right: calc(-1 * var(--page-gutter));
    border-left: none;
    border-right: none;
    width: calc(100% + 2 * var(--page-gutter));
  }

  .blog-code-block pre {
    padding: 12px 16px 16px;
  }

  /* Prose code blocks and figures bleed edge-to-edge on mobile */
  .blog-prose pre {
    border-radius: 0;
    left: 0;
    transform: none;
    margin-left: calc(-1 * var(--page-gutter));
    margin-right: calc(-1 * var(--page-gutter));
    border-left: none;
    border-right: none;
    width: calc(100% + 2 * var(--page-gutter));
    padding: 12px 16px 16px;
  }

  .blog-prose figure {
    border-radius: 0;
    left: 0;
    transform: none;
    margin-left: calc(-1 * var(--page-gutter));
    margin-right: calc(-1 * var(--page-gutter));
    border-left: none;
    border-right: none;
    width: calc(100% + 2 * var(--page-gutter));
    padding: 12px;
  }

  .series-hero {
    padding: 40px 0 36px;
  }

  .series-hero__title {
    font-size: 1.75rem;
  }

  .series-card__image-wrap {
    padding: 12px;
    border-radius: 0;
    margin-left: calc(-1 * var(--page-gutter));
    margin-right: calc(-1 * var(--page-gutter));
    border-left: none;
    border-right: none;
  }
}


/* --- Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}