/* ─────────────────────────────────────────────────
   Blog — shared styles for static SEO pages (blog/index.html,
   blog/<article>.html). Static HTML, no JS mount — crawlers must
   see full content in markup.
   All values map to project --qh-* tokens (see TYPOGRAPHY.md,
   DESIGN_SYSTEM.md). No hardcoded px/hex with token equivalents.
   ───────────────────────────────────────────────── */

/* Minimal static top nav (blog pages live outside the app shell JS) */
.blog-topnav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: var(--qh-rhythm-block);
}

.blog-topnav__brand {
  font-size: var(--qh-text-md);
  font-weight: var(--qh-font-weight-semibold);
  letter-spacing: var(--qh-letter-tight);
  color: var(--qh-text-primary);
  text-decoration: none;
}

.blog-topnav__link {
  font-size: var(--qh-text-sm);
  color: var(--qh-text-tertiary);
  text-decoration: none;
}

.blog-topnav__link:hover {
  color: var(--qh-text-secondary);
}

/* Breadcrumb trail — readable measure, quiet until hover (matches legal/blog tone) */
.blog-crumbs {
  max-width: 800px;
  margin: 0 auto var(--qh-rhythm-block);
  font-size: var(--qh-text-sm);
  color: var(--qh-text-tertiary);
}

.blog-crumbs a {
  color: var(--qh-text-tertiary);
  text-decoration: none;
}

.blog-crumbs a:hover {
  color: var(--qh-text-secondary);
}

.blog-crumbs [aria-current="page"] {
  color: var(--qh-text-secondary);
}

/* Article page — readable measure inside .app-page-shell, mirrors .legal-doc */
.blog-doc {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  line-height: var(--qh-line-normal);
  color: var(--qh-text-primary);
}

/* Article hero cover — brand 3:2 image at the top of the article.
   max-width/height:auto (not width:100%) — width:100% on a replaced element
   collapses the shrink-to-fit page column to 0. */
.blog-doc__cover {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 var(--qh-rhythm-section);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
}

.blog-doc__header {
  margin-bottom: var(--qh-rhythm-section);
  padding-bottom: var(--qh-rhythm-block);
  border-bottom: 1px solid var(--qh-border);
}

.blog-doc__title {
  font-size: var(--qh-text-hero);
  font-weight: var(--qh-font-weight-semibold);
  letter-spacing: var(--qh-letter-tight);
  margin: 0 0 var(--qh-rhythm-tight);
}

.blog-doc__meta {
  font-size: var(--qh-text-sm);
  color: var(--qh-text-tertiary);
  margin: 0;
}

.blog-doc__body h2 {
  font-size: var(--qh-text-xl);
  margin-top: var(--qh-rhythm-section);
  margin-bottom: var(--qh-rhythm-element);
}

.blog-doc__body h3 {
  font-size: var(--qh-text-lg);
  margin-top: var(--qh-rhythm-block);
  margin-bottom: var(--qh-rhythm-tight);
}

.blog-doc__body p,
.blog-doc__body ul,
.blog-doc__body ol {
  margin: 0 0 var(--qh-rhythm-element);
}

.blog-doc__body ul,
.blog-doc__body ol {
  padding-left: var(--qh-space-6);
}

.blog-doc__body li {
  margin-bottom: var(--qh-space-2);
}

.blog-doc__body a {
  color: var(--qh-accent);
  text-decoration: underline;
}

/* FAQ accordion — native <details>, chevron rotates on open.
   Answers stay in the DOM (just collapsed) so crawlers still read them. */
.blog-faq {
  border-bottom: 1px solid var(--qh-border);
}

.blog-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qh-space-4);
  padding: var(--qh-rhythm-tight) 0;
  cursor: pointer;
  list-style: none;
  font-weight: var(--qh-font-weight-semibold);
  color: var(--qh-text-primary);
}

.blog-faq__q::-webkit-details-marker {
  display: none;
}

.blog-faq__q::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid var(--qh-text-tertiary);
  border-bottom: 2px solid var(--qh-text-tertiary);
  transform: rotate(45deg);
  transition: transform var(--qh-duration-base) var(--qh-ease-default);
}

.blog-faq[open] .blog-faq__q::after {
  transform: rotate(-135deg);
}

.blog-faq__q:hover {
  color: var(--qh-accent);
}

.blog-faq > p {
  margin: var(--qh-space-2) 0 var(--qh-rhythm-block);
}

/* YMYL safety note - quiet, distinct from the CTA box; appears on mental-state /
   sleep / anxiety articles, before the FAQ. Accent rail on the left, smaller text. */
.blog-ymyl {
  margin-top: var(--qh-rhythm-section);
  padding: var(--qh-card-padding);
  background: var(--qh-surface-soft);
  border: 1px solid var(--qh-border);
  border-left: 3px solid var(--qh-accent);
  border-radius: var(--qh-radius-lg);
  font-size: var(--qh-text-sm);
  color: var(--qh-text-secondary);
}

.blog-ymyl p {
  margin: 0 0 var(--qh-rhythm-tight);
}

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

.blog-ymyl ul {
  margin: 0 0 var(--qh-rhythm-tight);
  padding-left: var(--qh-space-6);
}

.blog-ymyl li {
  margin-bottom: var(--qh-space-2);
}

.blog-ymyl strong {
  color: var(--qh-text-primary);
}

.blog-doc__cta {
  margin-top: var(--qh-rhythm-section);
  padding: var(--qh-card-padding-lg);
  background: var(--qh-surface-soft);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
}

.blog-doc__cta p {
  margin: 0 0 var(--qh-rhythm-element);
}

/* Read-next — related-articles block at the end of an article */
.blog-readnext {
  margin-top: var(--qh-rhythm-section);
  padding-top: var(--qh-rhythm-block);
  border-top: 1px solid var(--qh-border);
}

.blog-readnext h2 {
  font-size: var(--qh-text-lg);
  margin: 0 0 var(--qh-rhythm-tight);
}

.blog-readnext ul {
  margin: 0;
  padding-left: var(--qh-space-6);
}

.blog-readnext li {
  margin-bottom: var(--qh-space-2);
}

.blog-readnext a {
  color: var(--qh-accent);
  text-decoration: underline;
}

/* Follow-TG — one quiet cross-channel line after read-next (and on the index) */
.blog-followtg {
  margin: var(--qh-rhythm-block) 0 0;
  padding-top: var(--qh-rhythm-block);
  border-top: 1px solid var(--qh-border);
  font-size: var(--qh-text-sm);
  color: var(--qh-text-tertiary);
}

.blog-followtg a {
  color: var(--qh-accent);
  text-decoration: underline;
}

/* Blog index — article list */
.blog-list {
  max-width: 800px;
  margin: 0 auto;
  color: var(--qh-text-primary);
}

.blog-list__title {
  font-size: var(--qh-text-hero);
  font-weight: var(--qh-font-weight-semibold);
  letter-spacing: var(--qh-letter-tight);
  margin: 0 0 var(--qh-rhythm-tight);
}

.blog-list__subtitle {
  font-size: var(--qh-text-md);
  color: var(--qh-text-secondary);
  margin: 0 0 var(--qh-rhythm-section);
}

.blog-card {
  display: block;
  padding: var(--qh-card-padding);
  margin-bottom: var(--qh-rhythm-element);
  background: var(--qh-surface-soft);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  text-decoration: none;
  transition: border-color var(--qh-duration-base) var(--qh-ease-default);
}

.blog-card:hover {
  border-color: var(--qh-border-strong);
}

.blog-card__title {
  font-size: var(--qh-text-lg);
  font-weight: var(--qh-font-weight-semibold);
  color: var(--qh-text-primary);
  margin: 0 0 var(--qh-space-2);
}

.blog-card__excerpt {
  font-size: var(--qh-text-md);
  color: var(--qh-text-secondary);
  line-height: var(--qh-line-normal);
  margin: 0 0 var(--qh-space-2);
}

.blog-card__meta {
  font-size: var(--qh-text-sm);
  color: var(--qh-text-tertiary);
  margin: 0;
}