/* HealthLine 2026 — Single-post migration layer v0.22.7 */

/* The post hero should enter the first viewport quickly, without visible breadcrumbs. */
.hl-single-post-page .hl-article-hero {
  padding-top: clamp(2.15rem, 4vw, 3.7rem);
  padding-bottom: clamp(2.35rem, 4.5vw, 4rem);
}

/* The new TOC lives inside articleBody and follows the introduction. */
.hl-single-post-page .hl-auto-toc {
  width: 100%;
  max-width: 780px;
  margin: clamp(1.6rem, 3vw, 2.2rem) auto clamp(2rem, 4vw, 3rem);
  padding: 1.3rem 1.4rem;
  border-left-width: 5px;
  box-shadow: 0 10px 28px rgba(11, 41, 72, 0.045);
}

.hl-single-post-page .hl-auto-toc__head > span {
  font-size: .79rem;
}

.hl-single-post-page .hl-auto-toc__nav ol {
  gap: .5rem;
}

/* Legacy TOC plugins are superseded by the HealthLine article TOC. */
.hl-single-post-page .hl-article-content .wp-block-yoast-table-of-contents,
.hl-single-post-page .hl-article-content .wp-block-rank-math-toc-block,
.hl-single-post-page .hl-article-content .lwptoc,
.hl-single-post-page .hl-article-content .ez-toc-container,
.hl-single-post-page .hl-article-content .table-of-contents,
.hl-single-post-page .hl-article-content .toc-container {
  display: none !important;
}

/* Let the new theme own section rhythm instead of stacking 40px legacy spacers. */
.hl-single-post-page .hl-article-content .wp-block-spacer {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Normalize legacy heading presentation. Inline font-size declarations lose to this layer. */
.hl-single-post-page .hl-article-content h1,
.hl-single-post-page .hl-article-content h2 {
  margin-top: 1.85em !important;
  margin-bottom: .68em !important;
  font-size: clamp(1.8rem, 3vw, 2.55rem) !important;
  line-height: 1.14 !important;
}

.hl-single-post-page .hl-article-content h3 {
  margin-top: 1.65em !important;
  margin-bottom: .58em !important;
  font-size: clamp(1.34rem, 2.15vw, 1.72rem) !important;
  line-height: 1.22 !important;
}

.hl-single-post-page .hl-article-content h4 {
  margin-top: 1.45em !important;
  margin-bottom: .5em !important;
  font-size: 1.18rem !important;
  line-height: 1.3 !important;
}

/* --------------------------------------------------------------------------
   Native article YouTube module — replaces Smart Slider 3
   -------------------------------------------------------------------------- */
.hl-article-video-module {
  width: 100% !important;
  max-width: 780px !important;
  margin: clamp(2rem, 4vw, 3rem) auto clamp(3.2rem, 6vw, 4.7rem) !important;
  padding: clamp(1.45rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid #dbe6ef;
  border-radius: 24px;
  background:
    radial-gradient(circle at 94% 0%, rgba(27, 128, 243, .12), transparent 16rem),
    #fff;
  box-shadow: 0 16px 42px rgba(11, 41, 72, .065);
}

.hl-article-video-module__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.35rem;
}

.hl-article-video-module__head h2 {
  margin: 0 !important;
  color: var(--hl-blog-navy);
  font-size: clamp(1.55rem, 2.4vw, 2.1rem) !important;
  letter-spacing: -.035em;
}

.hl-article-video-module__head p:not(.hl-blog-eyebrow) {
  max-width: 620px;
  margin: .55rem 0 0;
  color: var(--hl-blog-muted);
  font-size: .95rem;
  line-height: 1.6;
}

.hl-article-video-module__channel,
.hl-article-video-module__channel:visited {
  flex: 0 0 auto;
  color: var(--hl-blog-blue) !important;
  font-size: .86rem;
  font-weight: 790;
  text-decoration: none !important;
}

.hl-article-video-module__channel:hover,
.hl-article-video-module__channel:focus-visible {
  color: var(--hl-blog-red) !important;
}

.hl-article-video-module__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}

.hl-article-video-module__grid--loading {
  min-height: 210px;
}

.hl-video-skeleton {
  display: block;
  min-height: 210px;
  border: 1px solid #e1e9f0;
  border-radius: 17px;
  background: linear-gradient(100deg, #f3f7fa 20%, #e9f1f7 40%, #f3f7fa 60%);
  background-size: 220% 100%;
  animation: hl-video-skeleton 1.25s ease-in-out infinite;
}

@keyframes hl-video-skeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -120% 0; }
}

.hl-article-video-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce6ef;
  border-radius: 17px;
  background: #fff;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.hl-article-video-card:hover {
  transform: translateY(-3px);
  border-color: #cddbe7;
  box-shadow: 0 12px 28px rgba(11, 41, 72, .09);
}

.hl-article-video-card > a,
.hl-article-video-card > a:visited {
  display: block;
  color: var(--hl-blog-navy) !important;
  text-decoration: none !important;
}

.hl-article-video-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eaf1f7;
}

.hl-article-video-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  object-fit: cover;
  transition: transform 260ms ease;
}

.hl-article-video-card:hover .hl-article-video-card__media img {
  transform: scale(1.025);
}

.hl-article-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  background: rgba(214, 23, 71, .94);
  box-shadow: 0 8px 22px rgba(11, 41, 72, .22);
  color: #fff;
  transform: translate(-50%, -50%);
}

.hl-article-video-card__play svg {
  width: 22px;
  height: 22px;
}

.hl-article-video-card__badge {
  position: absolute;
  top: .65rem;
  left: .65rem;
  padding: .32rem .48rem;
  border-radius: 999px;
  background: var(--hl-blog-red);
  color: #fff;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.hl-article-video-card__body {
  display: grid;
  gap: .65rem;
  padding: .9rem;
}

.hl-article-video-card__body strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--hl-blog-navy);
  font-size: .94rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hl-article-video-card__body > span {
  color: var(--hl-blog-blue);
  font-size: .78rem;
  font-weight: 760;
}

.hl-article-video-card:hover .hl-article-video-card__body > span {
  color: var(--hl-blog-red);
}

.hl-article-video-module__fallback {
  padding: 1rem 1.1rem;
  border-radius: 15px;
  background: #f4f8fc;
}

/* The template has the only newsletter conversion module we want in an article. */
.hl-single-post-page .hl-article-content .hl-legacy-newsletter-hidden {
  display: none !important;
}

/* Instagram CTA: HealthLine red/white system with no inherited blue/green state. */
.hl-single-post-page .hl-article-content .wp-block-button__link[href*="instagram.com"],
.hl-single-post-page .hl-article-content a.wp-element-button[href*="instagram.com"],
.hl-single-post-page .hl-article-content a[class*="button"][href*="instagram.com"] {
  border: 2px solid var(--hl-blog-red) !important;
  background: var(--hl-blog-red) !important;
  color: #fff !important;
  font-weight: 780 !important;
  text-decoration: none !important;
}

.hl-single-post-page .hl-article-content .wp-block-button__link[href*="instagram.com"] *,
.hl-single-post-page .hl-article-content a.wp-element-button[href*="instagram.com"] *,
.hl-single-post-page .hl-article-content a[class*="button"][href*="instagram.com"] * {
  color: inherit !important;
}

.hl-single-post-page .hl-article-content a[href*="instagram.com"] svg {
  color: inherit !important;
}

.hl-single-post-page .hl-article-content a[href*="instagram.com"] svg path:not([fill="none"]) {
  fill: currentColor !important;
}

.hl-single-post-page .hl-article-content a[href*="instagram.com"] svg [stroke] {
  stroke: currentColor !important;
}

.hl-single-post-page .hl-article-content .wp-block-button__link[href*="instagram.com"]:hover,
.hl-single-post-page .hl-article-content .wp-block-button__link[href*="instagram.com"]:focus-visible,
.hl-single-post-page .hl-article-content a.wp-element-button[href*="instagram.com"]:hover,
.hl-single-post-page .hl-article-content a.wp-element-button[href*="instagram.com"]:focus-visible,
.hl-single-post-page .hl-article-content a[class*="button"][href*="instagram.com"]:hover,
.hl-single-post-page .hl-article-content a[class*="button"][href*="instagram.com"]:focus-visible {
  border-color: var(--hl-blog-red) !important;
  background: #fff !important;
  color: var(--hl-blog-red) !important;
}

/* Bibliography remains visibly part of the article while still user-collapsible. */
.hl-single-post-page .hl-article-content details.hl-bibliography-details {
  margin-top: 2.3rem;
  border-color: #cfdde8;
  box-shadow: 0 8px 24px rgba(11, 41, 72, .04);
}

.hl-single-post-page .hl-article-content details.hl-bibliography-details > summary {
  background: #f7fbff;
}

@media (max-width: 820px) {
  .hl-article-video-module__head {
    align-items: flex-start;
    flex-direction: column;
  }
  .hl-article-video-module__grid {
    grid-template-columns: 1fr 1fr;
  }
  .hl-article-video-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 360px);
  }
}

@media (max-width: 560px) {
  .hl-single-post-page .hl-article-hero {
    padding-top: 1.75rem;
  }
  .hl-auto-toc {
    border-radius: 15px;
  }
  .hl-article-video-module {
    border-radius: 19px;
  }
  .hl-article-video-module__grid {
    grid-template-columns: 1fr;
  }
  .hl-article-video-card:last-child {
    grid-column: auto;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hl-article-video-card,
  .hl-article-video-card__media img {
    transition: none !important;
  }
  .hl-article-video-card:hover,
  .hl-article-video-card:hover .hl-article-video-card__media img {
    transform: none !important;
  }
  .hl-video-skeleton {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   v0.22.1 article QA corrections
   -------------------------------------------------------------------------- */

/* Keep numbered TOC navigation, but make the numbering part of the blue
   information system rather than inheriting the article-wide red list marker. */
.hl-single-post-page .hl-auto-toc__nav li::marker {
  color: var(--hl-blog-blue) !important;
  font-size: .86em !important;
  font-weight: 760 !important;
}

.hl-single-post-page .hl-auto-toc__nav a,
.hl-single-post-page .hl-auto-toc__nav a:visited {
  font-size: .92rem;
}

/* The old 40px spacers are gone. This is the new editorial rhythm, tightened
   after live-post QA so callouts do not sit too far from the following section. */
.hl-single-post-page .hl-article-content h1,
.hl-single-post-page .hl-article-content h2 {
  margin-top: 1.42em !important;
  margin-bottom: .62em !important;
}

.hl-single-post-page .hl-article-content h3 {
  margin-top: 1.34em !important;
  margin-bottom: .55em !important;
}

.hl-single-post-page .hl-article-content h4 {
  margin-top: 1.24em !important;
}

/* Legacy callouts are converted in JavaScript to a simple blockquote shell.
   They intentionally inherit the same direct-child reading geometry as the
   July reference article rather than receiving special width calculations. */
.hl-single-post-page .hl-article-content > blockquote.hl-migrated-callout {
  max-width: 780px;
}

/* Harden Instagram buttons against legacy inline/plugin colors. */
.hl-single-post-page .hl-article-content a.hl-instagram-cta,
.hl-single-post-page .hl-article-content a.hl-instagram-cta:visited {
  border: 2px solid var(--hl-blog-red) !important;
  background: var(--hl-blog-red) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: .95rem !important;
  font-weight: 790 !important;
  text-decoration: none !important;
}

.hl-single-post-page .hl-article-content a.hl-instagram-cta *,
.hl-single-post-page .hl-article-content a.hl-instagram-cta::before,
.hl-single-post-page .hl-article-content a.hl-instagram-cta::after {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

.hl-single-post-page .hl-article-content a.hl-instagram-cta svg,
.hl-single-post-page .hl-article-content a.hl-instagram-cta svg * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.hl-single-post-page .hl-article-content a.hl-instagram-cta:hover,
.hl-single-post-page .hl-article-content a.hl-instagram-cta:focus-visible {
  border-color: var(--hl-blog-red) !important;
  background: #fff !important;
  color: var(--hl-blog-red) !important;
  -webkit-text-fill-color: var(--hl-blog-red) !important;
}


/* --------------------------------------------------------------------------
   v0.22.2 final reference-article refinements
   -------------------------------------------------------------------------- */
.hl-single-post-page .hl-article-brand-signature {
  display: flex;
  width: min(100% - 2rem, 780px);
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  margin-top: 1.25rem;
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
  color: #7a8998;
  font-size: .78rem;
  font-weight: 720;
  letter-spacing: .01em;
}

.hl-single-post-page .hl-article-brand-signature a,
.hl-single-post-page .hl-article-brand-signature a:visited {
  color: var(--hl-blog-blue) !important;
  text-decoration: none !important;
}

.hl-single-post-page .hl-article-brand-signature a:hover,
.hl-single-post-page .hl-article-brand-signature a:focus-visible {
  color: var(--hl-blog-red) !important;
}

@media (max-width: 560px) {
  .hl-single-post-page .hl-article-brand-signature {
    justify-content: flex-start;
    margin-top: .75rem;
  }
}


/* v0.22.16: resilient uploads-playlist fallback. */
.hl-article-video-module__fallback--playlist {
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe9f2;
  background: #fff;
}

.hl-article-youtube-playlist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: .85rem 1rem;
}

.hl-article-youtube-playlist__head strong {
  color: var(--hl-blog-navy);
  font-size: .9rem;
  font-weight: 800;
}

.hl-article-youtube-playlist__head a {
  color: var(--hl-blog-blue);
  font-size: .78rem;
  font-weight: 780;
  text-decoration: none;
}

.hl-article-youtube-playlist__head a:hover,
.hl-article-youtube-playlist__head a:focus-visible {
  color: var(--hl-blog-red);
}

.hl-article-youtube-playlist__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #06182b;
}

.hl-article-youtube-playlist__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  .hl-article-youtube-playlist__head {
    align-items: flex-start;
    flex-direction: column;
    gap: .3rem;
  }
}


/* v0.22.17: browser-resolved latest-three fallback for article modules. */
.hl-article-video-module__fallback--browser {
  padding: 0;
  border: 0;
  background: transparent;
}

.hl-youtube-browser-latest--article {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}

.hl-youtube-browser-latest--article .hl-youtube-browser-slot {
  min-height: 210px;
  border: 1px solid #dce6ef;
  border-radius: 17px;
  box-shadow: none;
}

.hl-youtube-browser-latest--article .hl-youtube-browser-skeleton__line {
  margin-top: .75rem;
}

@media (max-width: 820px) {
  .hl-youtube-browser-latest--article {
    grid-template-columns: 1fr 1fr;
  }
  .hl-youtube-browser-latest--article > :last-child {
    grid-column: 1 / -1;
    width: min(100%, 360px);
  }
}

@media (max-width: 560px) {
  .hl-youtube-browser-latest--article {
    grid-template-columns: 1fr;
  }
  .hl-youtube-browser-latest--article > :last-child {
    grid-column: auto;
    width: 100%;
  }
}


/* v0.22.20: zoom-safe TOC numbering.
   Native ordered-list markers can hang outside the blue rail when browser zoom
   increases, especially once numbering reaches two digits. Give the number its
   own internal grid column so 1–99 stay inside the TOC at every zoom level. */
.hl-single-post-page .hl-auto-toc__nav ol {
  list-style: none !important;
  counter-reset: hl-toc-item;
  padding-left: 0 !important;
}

.hl-single-post-page .hl-auto-toc__nav li {
  counter-increment: hl-toc-item;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: .55rem;
  align-items: start;
  min-width: 0;
}

.hl-single-post-page .hl-auto-toc__nav li::before {
  content: counter(hl-toc-item) ".";
  color: var(--hl-blog-blue);
  font-size: .86em;
  font-weight: 760;
  line-height: 1.45;
  text-align: right;
  white-space: nowrap;
}

.hl-single-post-page .hl-auto-toc__nav li::marker {
  content: "";
}

.hl-single-post-page .hl-auto-toc__nav li > a {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .hl-single-post-page .hl-auto-toc__nav li {
    grid-template-columns: 1.85rem minmax(0, 1fr);
    column-gap: .45rem;
  }
}