/* ============================================
   Blog Post Reading Experience
   Refined typography, elegant sidebar,
   editorial heading hierarchy
   ============================================ */

/* CSS Variables for Blog Posts */
:root {
  --post-sidebar-title-font-size: 0.82rem;
  --post-sidebar-title-weight: 500;
  --post-sidebar-item-font-size: 0.78rem;
  --post-sidebar-item-weight: 400;
  --post-content-font-size: 0.92rem;
  --post-content-weight: 400;
}

/* Scale down on wide viewports (full-screen) */
@media (min-width: 1440px) {
  :root {
    --post-content-font-size: 0.88rem;
  }
}

/* Title — display font for editorial feel */
.md-content__inner.md-typeset h1:has(+ .md-post-header) {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--dn-font-display, Georgia, serif);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--md-default-fg-color);
}

/* Post header section */
.md-post-header__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Description text — lighter, editorial */
.md-post-header__text p.md-post-header__description,
p.md-post-header__description,
.md-post-header__description {
  margin-bottom: 0rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  color: var(--md-default-fg-color--light) !important;
  font-style: italic;
}

/* Divider — subtle teal accent line */
.md-post-header__divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--dn-teal, #3CBCB4) 0%,
    rgba(60, 188, 180, 0.2) 50%,
    transparent 100%
  );
  margin-bottom: 1.5rem !important;
  margin-top: 0.75rem !important;
}

/* --- Blog Post Content --- */

/* Text sizing */
.md-content--post .md-content__inner.md-typeset p,
.md-content--post .md-content__inner.md-typeset li,
.md-content--post .md-content__inner.md-typeset td,
.md-content--post .md-content__inner.md-typeset th {
  font-size: var(--post-content-font-size);
  font-weight: var(--post-content-weight);
  line-height: 1.75;
}

/* Heading hierarchy — clean, weighted */
.md-content--post .md-content__inner.md-typeset h2 {
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: -0.015em;
  margin-top: 2.5rem;
}

.md-content--post .md-content__inner.md-typeset h3 {
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.md-content--post .md-content__inner.md-typeset h4 {
  font-weight: 500;
  font-size: 1.05rem;
}

.md-content--post .md-content__inner.md-typeset h5 {
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-default-fg-color--light);
}

.md-content--post .md-content__inner.md-typeset h6 {
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-default-fg-color--light);
}

/* Post Images — refined */
.md-content--post .md-content__inner.md-typeset img {
  display: block;
  margin-top: 1rem;
  border-radius: 0.5rem;
}

/* --- Sidebar Navigation --- */

/* Remove Material default backgrounds on sidebar titles */
.md-sidebar--post .md-post__back,
.md-sidebar--post .md-nav__title,
.md-sidebar--post .md-post__title,
[data-md-component="toc"] .md-nav__title,
.md-nav--secondary .md-nav__title {
  background: none !important;
  box-shadow: none !important;
}

/* Remove TOC sticky title gradient overlay */
.md-nav--secondary .md-nav__title[for="__toc"] {
  background: none !important;
  box-shadow: none !important;
}

/* Remove lifted nav sticky backgrounds */
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
  background: none !important;
  box-shadow: none !important;
}

/* Remove primary nav title sticky backgrounds */
.md-nav--primary .md-nav__title {
  background: none !important;
  box-shadow: none !important;
}

/* All sidebar items */
.md-sidebar--post .md-post__meta .md-nav__link,
.md-sidebar--post .md-post__meta .md-nav__link time,
.md-sidebar--post .md-post__meta .md-nav__item,
[data-md-component="toc"] a.md-nav__link,
.md-nav--secondary a.md-nav__link,
.md-sidebar--post a.md-nav__link {
  font-size: var(--post-sidebar-item-font-size) !important;
  font-family: var(--dn-font-body, var(--md-text-font-family)) !important;
}

/* Sidebar titles */
.md-sidebar--post .md-post__title,
.md-sidebar--post .md-nav__title,
[data-md-component="toc"] .md-nav__title {
  font-size: var(--post-sidebar-title-font-size) !important;
  font-family: var(--dn-font-body, var(--md-text-font-family)) !important;
  font-weight: var(--post-sidebar-title-weight) !important;
  color: var(--md-default-fg-color) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* TOC title override */
[data-md-component="toc"] .md-nav__title,
.md-nav--secondary .md-nav__title {
  font-style: normal !important;
  font-size: var(--post-sidebar-title-font-size) !important;
  font-family: var(--dn-font-body, var(--md-text-font-family)) !important;
  font-weight: var(--post-sidebar-title-weight) !important;
  color: var(--md-default-fg-color) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Sidebar items — weight and color */
.md-sidebar--post .md-post__meta .md-nav__link,
.md-sidebar--post .md-post__meta .md-nav__link time,
.md-sidebar--post .md-post__meta .md-nav__item,
.md-sidebar--post a.md-nav__link,
[data-md-component="toc"] a.md-nav__link,
.md-nav--secondary a.md-nav__link {
  font-weight: var(--post-sidebar-item-weight) !important;
  color: var(--md-default-fg-color--light) !important;
  transition: color 0.2s var(--dn-ease-out, ease-out);
}

.md-sidebar--post .md-post__meta svg {
  opacity: 0.5;
}

/* Hover — Teal accent */
.md-sidebar--post .md-post__meta a:hover,
.md-sidebar--post a.md-nav__link:hover,
[data-md-component="toc"] a.md-nav__link:hover,
.md-nav--secondary a.md-nav__link:hover {
  color: var(--dn-teal, var(--md-accent-fg-color)) !important;
}

/* Active section — bold on scroll */
.md-sidebar--post a.md-nav__link--active,
[data-md-component="toc"] a.md-nav__link--active,
.md-nav--secondary a.md-nav__link--active {
  color: var(--md-default-fg-color) !important;
  font-weight: 500 !important;
}

.md-sidebar--post a.md-nav__link--active:hover,
[data-md-component="toc"] a.md-nav__link--active:hover,
.md-nav--secondary a.md-nav__link--active:hover {
  color: var(--dn-teal, var(--md-accent-fg-color)) !important;
}

/* Responsive */
@media screen and (max-width: 44.9375em) {
  .md-post-header {
    margin-bottom: 2rem;
  }

  .md-post-header__description {
    margin: 0 0 0.75rem;
  }

  .md-content__inner.md-typeset h1:has(+ .md-post-header) {
    font-size: 1.6rem;
  }
}

/* ---------- Accessible DOM order ---------- */
/* Article is first in DOM (for screen readers), but sidebar
   should appear first visually on desktop (row layout). */
@media screen and (min-width: 76.25em) {
  .md-content--post > .md-sidebar--post {
    order: -1;           /* sidebar visually first (left) */
  }
}

/* On narrow screens the theme normally uses column-reverse to
   show the article above the sidebar. Since the article is now
   first in DOM, regular column order achieves the same result. */
@media screen and (max-width: 76.234375em) {
  .md-content--post {
    flex-flow: column !important;
  }
}