/*
 * Blog - page-specific styles
 * ---------------------------------------------------------------------------
 * Split out of style.css. These rules only ever applied to Blog list + single post,
 * so every other page was downloading them for nothing - and style.css is
 * render blocking, so that weight delayed first paint sitewide.
 *
 * Enqueued after style.css, only where it is needed (vn_enqueue_page_css in
 * inc/enqueue.php). Load order is not load-bearing: the split moved EVERY rule
 * touching these class prefixes, so nothing left in style.css styles them and
 * there is nothing here to race.
 *
 * Do not add other sections' rules to this file, and do not move these rules
 * back into style.css - either one breaks that guarantee.
 */



/* ===========================
   BLOG PAGE — SEARCH BAR
   =========================== */
.blog-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 480px;
  margin: 32px auto 0;
  background: var(--dark-card);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 60px;
  padding: 4px 6px 4px 20px;
  transition: all 0.3s ease;
  gap: 10px;
}



.blog-search:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.10);
}



.blog-search__icon {
  flex-shrink: 0;
  color: var(--gray-400);
  transition: color 0.3s ease;
  width: 20px;
  height: 20px;
  min-width: 20px;
}



.blog-search:focus-within .blog-search__icon {
  color: var(--orange);
}



.blog-search__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--white);
  font-family: var(--font-main);
  font-size: 15px;
  padding: 12px 14px;
}



.blog-search__input::placeholder {
  color: var(--gray-600);
}



.blog-search__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--orange);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}


.blog-search__btn:hover { background: var(--orange-dark); }



/* ===========================
   BLOG — FEATURED POST
   =========================== */
.blog-featured {
  padding-top: 0;
}



.blog-featured__card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: var(--dark-card);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  text-decoration: none;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}



.blog-featured__card:hover {
  border-color: rgba(255, 107, 0, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06), 0 0 40px rgba(255, 107, 0, 0.05);
  transform: translateY(-4px);
}



.blog-featured__img {
  position: relative;
  overflow: hidden;
  min-height: 360px;
}



.blog-featured__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}



.blog-featured__card:hover .blog-featured__img img {
  transform: scale(1.05);
}



.blog-featured__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  background: var(--orange);
  color: var(--white-pure);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 6px;
  z-index: 2;
}



.blog-featured__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 44px;
  gap: 16px;
}



.blog-featured__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}



.blog-featured__category {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(255, 107, 0, 0.10);
  color: var(--orange-light);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.02em;
}



.blog-featured__date {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-500);
  font-size: 13px;
}



.blog-featured__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  letter-spacing: -0.02em;
}



.blog-featured__excerpt {
  font-size: 15px;
  color: var(--gray-400);
  line-height: 1.7;
}



.blog-featured__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}



.blog-featured__author {
  display: flex;
  align-items: center;
  gap: 10px;
}



.blog-featured__avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--white-pure);
}



.blog-featured__author span {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-300);
}



.blog-featured__read-more {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
  transition: gap 0.3s ease;
}



.blog-featured__card:hover .blog-featured__read-more {
  gap: 12px;
}



.blog-featured__read-more svg {
  transition: transform 0.3s ease;
}



.blog-featured__card:hover .blog-featured__read-more svg {
  transform: translate(2px, -2px);
}



/* ===========================
   BLOG — TOOLBAR & FILTERS
   =========================== */
.blog__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 20px;
  /* One row on desktop: the filter strip shrinks and scrolls rather than
     pushing the search box onto a line of its own. */
  flex-wrap: nowrap;
}



/* Row order: category filters, then search, then the count.
   Each filter is its own pill (no wrapping container) and the strip slides
   sideways once there are more categories than fit. */
.blog__toolbar .blog__filters {
  flex: 1 1 0%;                 /* 0% basis so it can shrink and scroll */
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 4px 2px;
  max-width: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}


.blog__toolbar .blog__filters::-webkit-scrollbar { display: none; }



.blog__toolbar .blog__filter {
  scroll-snap-align: start;
  background: var(--white-pure, #fff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50px;
  padding: 11px 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}


.blog__toolbar .blog__filter:hover:not(.active) {
  color: var(--orange);
  border-color: rgba(255, 107, 0, 0.35);
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.12);
  transform: translateY(-1px);
}


.blog__toolbar .blog__filter.active {
  background: var(--orange);
  border-color: transparent;
  color: var(--white-pure);
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35);
}



/* Search: rounded field with the submit button squared off against its edge. */
.blog__toolbar .blog-search {
  margin: 0;
  flex: 0 0 auto;
  width: 300px;
  border-radius: 12px;
  padding: 0 0 0 16px;
  overflow: hidden;
  gap: 8px;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}


.blog__toolbar .blog-search__icon { display: none; }


.blog__toolbar .blog-search__input { padding: 13px 0; }


.blog__toolbar .blog-search__btn {
  width: 50px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 0;
}



.blog__toolbar .blog__count { flex-shrink: 0; }



/* Arrow controls — markup injected by blog.js around the filter strip. */
.blog__filters-wrap {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
}


.blog__filters-wrap .blog__filters { flex: 1 1 0%; }



/* Edge fades appear only while the strip can actually scroll, so the pills
   read as continuing rather than being cut off. */
.blog__filters-wrap.is-scrollable::before,
.blog__filters-wrap.is-scrollable::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46px;
  pointer-events: none;
  z-index: 1;
}


.blog__filters-wrap.is-scrollable::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg, #fff) 30%, transparent);
}


.blog__filters-wrap.is-scrollable::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg, #fff) 30%, transparent);
}



.blog__filters-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--orange);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, color 0.2s ease, border-color 0.2s ease;
}


.blog__filters-arrow.is-shown { opacity: 1; visibility: visible; }


.blog__filters-arrow:hover { background: var(--orange-dark, #e05f00); border-color: transparent; }


.blog__filters-arrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }


.blog__filters-arrow--prev { left: -4px; }


.blog__filters-arrow--next { right: -4px; }



@media (hover: none) {


    /* Touch already swipes — keep the fades, drop the buttons. */
    .blog__filters-arrow { display: none; }

}

@media (max-width: 1100px) {


    .blog__toolbar .blog-search { width: 250px; }

}

@media (max-width: 860px) {


    /* Search moves onto its own line before the filters get too narrow. */
    .blog__toolbar { flex-wrap: wrap; }


    .blog__toolbar .blog__filters-wrap,
    .blog__toolbar .blog__filters { flex: 1 1 100%; order: 2; }


    .blog__toolbar .blog-search { order: 1; flex: 1 1 auto; width: auto; }


    .blog__toolbar .blog__count { order: 1; margin-left: auto; }

}


.blog__filters {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--dark-card);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 60px;
  padding: 6px;
  max-width: 100%;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}



/* Blog filters are navigation links — the active state is rendered server-side
   on the current category, so the orange pill is pure CSS (no JS indicator). */
.blog__filter-indicator {
  display: none;
}



.blog__filter {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--gray-400);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  cursor: pointer;
  border-radius: 50px;
  text-decoration: none;
  transition: color 0.3s ease, background 0.3s ease;
  white-space: nowrap;
}



.blog__filter:hover:not(.active) {
  color: var(--orange);
}



.blog__filter.active {
  background: var(--orange);
  color: var(--white-pure);
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35);
}



.blog__count {
  color: var(--gray-500);
  font-size: 14px;
  white-space: nowrap;
}



.blog__count span {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--orange);
}



/* ===========================
   BLOG — CARD GRID
   =========================== */
.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}



.blog__card {
  display: flex;
  flex-direction: column;
  background: var(--dark-card);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  text-decoration: none;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}



.blog__card:hover {
  border-color: rgba(255, 107, 0, 0.25);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.05), 0 0 24px rgba(255, 107, 0, 0.04);
}



.blog__card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}



.blog__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}



.blog__card:hover .blog__card-img img {
  transform: scale(1.06);
}



.blog__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
  gap: 12px;
}



.blog__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}



.blog__card-category {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 107, 0, 0.1);
  color: var(--orange-light);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 5px;
  letter-spacing: 0.02em;
}



.blog__card-date {
  font-size: 12px;
  color: var(--gray-600);
  white-space: nowrap;
}



.blog__card-title {
  /* min-height: 73px; */
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}



.blog__card:hover .blog__card-title {
  color: var(--orange-light);
}



.blog__card-excerpt {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}



.blog__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: auto;
}



.blog__card-author {
  display: flex;
  align-items: center;
  gap: 8px;
}



.blog__card-avatar {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--white-pure);
}



.blog__card-author span {
  text-transform: capitalize;
  font-size: 16px;
  color: var(--gray-400);
}



.blog__card-read {
  font-size: 12px;
  color: var(--gray-600);
  font-family: var(--font-mono);
}



/* ===========================
   BLOG — EMPTY STATE
   =========================== */
.blog__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 20px;
  text-align: center;
}



.blog__empty svg {
  color: var(--gray-700);
}



.blog__empty h3 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gray-400);
}



.blog__empty p {
  font-size: 15px;
  color: var(--gray-600);
}



/* ===========================
   BLOG — PAGINATION
   =========================== */
.blog__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
  padding-top: 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}



.blog__page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--dark-card);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.3s ease;
}



.blog__page-btn:hover:not(:disabled) {
  background: var(--dark-card-hover);
  border-color: var(--orange);
  color: var(--orange);
}



.blog__page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}



.blog__page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}



.blog__page-num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--gray-400);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}



.blog__page-num:hover {
  background: var(--dark-card);
  border-color: rgba(0, 0, 0, 0.07);
  color: var(--white);
}



.blog__page-num.active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white-pure);
  font-weight: 700;
  pointer-events: none;
}



.blog__page-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 44px;
  color: var(--gray-600);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 2px;
}



/* ===========================
   BLOG POST — ARTICLE HERO
   =========================== */
.article-hero {
  position: relative;
  padding: 150px 0 100px;
  overflow: hidden;
}



/* The base .breadcrumb (style.css) centers itself for other page heroes -
   this one sits left-aligned with the title below it instead. */
.article-hero .breadcrumb {
  justify-content: flex-start;
}



/* Flat, plain title block instead of a big spotlighted hero - the
   gradients stay in the markup (single.php) but are hidden here rather
   than removed there, so nothing else that reads them breaks. */
.article-hero__gradient {
  display: none;
}



.article-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}



.article-hero__gradient {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.12;
}



.article-hero__gradient--1 {
  background: var(--orange);
  top: -150px;
  right: 10%;
}



.article-hero__gradient--2 {
  background: var(--orange-light);
  bottom: -100px;
  left: 5%;
}



.article-hero__inner {
  position: relative;
  z-index: 1;
}



.article-hero__title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: uppercase;
  margin-top: 16px;
}



/* Date + author + category, icon-led, with a thin rule underneath -
   replaces the old spotlighted avatar block below the title. */
.article-hero__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-bottom: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}



.article-hero__date,
.article-hero__author,
.article-hero__read-time {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-500);
  font-size: 13px;
}



.article-hero__author {
  text-transform: capitalize;
}



.article-hero__date svg,
.article-hero__author svg {
  color: var(--orange);
  flex-shrink: 0;
}



.article-hero__category {
  padding: 5px 14px;
  background: rgba(255, 107, 0, 0.10);
  color: var(--orange-light);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
}



.article-hero__dot {
  width: 4px;
  height: 4px;
  background: var(--gray-600);
  border-radius: 50%;
}



/* ===========================
   BLOG POST — COVER IMAGE
   =========================== */
.article-cover {
  margin-bottom: 48px;
}



.article-cover__img {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  aspect-ratio: 16 / 9;
}



.article-cover__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}



/* ===========================
   BLOG POST — LAYOUT GRID
   =========================== */
.article-layout {
  padding-bottom: 80px;
}



.article-layout__grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 60px;
  align-items: start;
}



/* Content reads left, sidebar (TOC/Latest Posts/Share) sits right - the
   markup keeps the sidebar first in the DOM (keyboard/screen-reader users
   reach the jump-to-section links before the article body), this just
   swaps where each one paints. */
.article-sidebar {
  order: 2;
}



.article-content {
  order: 1;
}



/* ===========================
   BLOG POST — SIDEBAR / TOC
   =========================== */
.article-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}



.article-toc {
  background: var(--dark-card);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
  padding: 20px;
}



.article-toc__title {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 0 12px;
  margin: 0 0 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-300);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.3s ease;
}



.article-toc__title:hover {
  color: var(--gray-300);
}



.article-toc__title-text {
  flex: 1;
}



.article-toc__title svg {
  color: var(--orange);
  flex-shrink: 0;
}



.article-toc__chevron {
  transition: transform 0.3s ease;
  color: var(--gray-500);
}



.article-toc.is-collapsed .article-toc__chevron {
  transform: rotate(-90deg);
}



.article-toc.is-collapsed .article-toc__title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
}



.article-toc__nav {
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.3s ease;
}



.article-toc.is-collapsed .article-toc__nav {
  max-height: 0;
  opacity: 0;
  margin: 0;
}



.article-toc__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}



/* Each H2 is its own row + an independent collapsible group of its H3s -
   only one heading's children show at a time if that's how the reader
   leaves it, instead of the whole list always being expanded. */
.article-toc__group + .article-toc__group {
  margin-top: 2px;
}



.article-toc__row {
  display: flex;
  align-items: center;
  gap: 4px;
}



.article-toc__row .article-toc__link {
  flex: 1;
  min-width: 0;
}



.article-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--gray-500);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.3s ease;
}



.article-toc__toggle:hover {
  color: var(--gray-300);
  background: rgba(0, 0, 0, 0.03);
}



.article-toc__group.is-expanded .article-toc__toggle {
  transform: rotate(180deg);
}



.article-toc__children {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease;
}



.article-toc__children-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* A grid item's default minimum height is its content's height, not 0 -
     without this, the 0fr row track above can't actually collapse to zero
     and every group renders open regardless of its chevron/is-expanded
     state. */
  min-height: 0;
}



.article-toc__group.is-expanded .article-toc__children {
  grid-template-rows: 1fr;
  opacity: 1;
}



/* Fallback for browsers without grid-template-rows transitions (older
   Safari): children stay visible rather than permanently hidden. */
@supports not (grid-template-rows: 0fr) {
  .article-toc__children {
    display: none;
  }
  .article-toc__group.is-expanded .article-toc__children {
    display: block;
  }
  .article-toc__children-inner {
    display: flex;
  }
}



.article-toc__link {
  display: block;
  font-size: 13px;
  color: var(--gray-500);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  line-height: 1.4;
  transition: all 0.3s ease;
}



.article-toc__link:hover {
  color: var(--gray-300);
  background: rgba(0, 0, 0, 0.03);
}



.article-toc__link.active {
  color: var(--orange);
  border-left-color: var(--orange);
  background: rgba(255, 107, 0, 0.05);
}



/* H3s nested under the H2 above them - indented, bulleted, smaller. */
.article-toc__link--sub {
  position: relative;
  padding-left: 26px;
  font-size: 12.5px;
}



.article-toc__link--sub::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gray-600);
  transform: translateY(-50%);
}



.article-toc__link--sub.active::before {
  background: var(--orange);
}



/* Latest Blog Posts (sidebar widget) */
.article-latest {
  background: var(--dark-card);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
  padding: 20px;
}



.article-latest__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 12px;
  margin: 0 0 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-300);
}



.article-latest__title svg {
  color: var(--orange);
  flex-shrink: 0;
}



.article-latest__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}



.article-latest__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
}



.article-latest__thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--dark);
}



.article-latest__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



.article-latest__thumb-fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
}



.article-latest__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}



.article-latest__item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}



.article-latest__item:hover .article-latest__item-title {
  color: var(--orange);
}



.article-latest__item-date {
  font-size: 11px;
  color: var(--gray-500);
}



/* Share */
.article-share {
  background: var(--dark-card);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
  padding: 20px;
}



.article-share__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

/* The 13px above never reached the page. The base heading rules set
   h1-h6 font-size with !important, which beats a plain class no matter how
   specific it is, so this label was rendering at the h2 size - 38px of
   uppercase "SHARE THIS ARTICLE". Restated here with the tag in the selector
   so it outranks the bare h4 and the size the stylesheet actually asks for
   is the one that shows. */
h4.article-share__title { font-size: 13px !important; }



.article-share__btns {
  display: flex;
  gap: 8px;
}



.article-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.3s ease;
}



.article-share__btn:hover {
  background: rgba(255, 107, 0, 0.1);
  border-color: var(--orange);
  color: var(--orange);
}



.article-share__btn.copied {
  background: rgba(34, 197, 94, 0.15);
  border-color: #22c55e;
  color: #22c55e;
}



/* ===========================
   BLOG POST — ARTICLE CONTENT
   =========================== */



.article-content__intro p {
  font-size: 18px;
  color: var(--gray-300);
  line-height: 1.8;
  margin-bottom: 32px;
}



.article-content h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-top: 48px;
  margin-bottom: 16px;
  scroll-margin-top: 100px;
}



.article-content h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-200);
  margin-top: 3px;
  margin-bottom: 12px;
}



.article-content p {
  font-size: 16px;
  color: var(--gray-400);
  line-height: 1.8;
  margin-bottom: 20px;
}



.article-content a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}



.article-content a:hover {
  color: var(--orange-light);
}



.article-content ul,
.article-content ol {
  margin: 16px 0 24px;
  padding-left: 24px;
}



.article-content li {
  font-size: 16px;
  color: var(--gray-400);
  line-height: 1.7;
  margin-bottom: 8px;
}



.article-content li strong {
  color: var(--gray-200);
}



.article-content blockquote {
  position: relative;
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--dark-card);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
}



.article-content blockquote p {
  font-size: 17px;
  font-style: italic;
  color: var(--gray-300);
  margin-bottom: 0;
}



.article-content pre {
  margin: 24px 0;
  padding: 24px;
  background: var(--dark-card);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
  overflow-x: auto;
}



.article-content code {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gray-300);
  line-height: 1.7;
}



.article-content p code {
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-size: 14px;
  color: var(--orange-light);
}



/* ══════════════════════════════════════
   BLOG POST — ARTICLE CONTENT: TABLES
   ══════════════════════════════════════ */

/* ─── Scroll container: figure wraps every table (see inc/post-content.php) ─── */
/* Clips to the rounded corner. Scrolling lives on .vn-table-scroll inside
   it instead - keeping the two jobs on separate elements is what makes the
   header/zebra-row backgrounds clip to the curve reliably (see
   inc/post-content.php for why). */
.article-content figure.wp-block-table {
  display: block;
  margin: 28px 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius);
  background: #fff;
}



.article-content figure.wp-block-table .vn-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}



/* Table takes its natural content width - only scrolls when it exceeds the figure. */
.article-content figure.wp-block-table table {
  width: auto;
  min-width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}



/* WordPress core's own block-library CSS puts a border on every cell of a
   table using the "Stripes" block style - that is the second, default
   border showing up underneath ours. Zeroed out so only the figure's
   border (above) shows. */
.article-content .wp-block-table td,
.article-content .wp-block-table th {
  border: 0 !important;
}

.article-content .wp-block-table thead {
  border-bottom: 1px solid;
}



/* Fallback for any stray standalone table that wasn't wrapped by the filter. */
.article-content > table {
  display: block;
  margin: 28px 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius);
  background: #fff;
}



/* Generic table visuals — applies to every article table. */
.article-content table {
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-400);
}



.article-content table th,
.article-content table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}



.article-content table th,
.article-content table thead th {
  background: #fff7ed;
  color: black;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(255, 107, 0, 0.3);
  white-space: nowrap;
}



.article-content table tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.02);
}



.article-content table tbody tr:hover td {
  background: rgba(255, 107, 0, 0.05);
}



.article-content table tr:last-child td {
  border-bottom: 0;
}



.article-content table caption {
  caption-side: bottom;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--gray-500);
  text-align: left;
}



/* Visible scrollbar so users see the table is scrollable. */
.article-content figure.wp-block-table .vn-table-scroll::-webkit-scrollbar,
.article-content > table::-webkit-scrollbar {
  height: 8px;
}


.article-content figure.wp-block-table .vn-table-scroll::-webkit-scrollbar-track,
.article-content > table::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 0 0 var(--radius) var(--radius);
}


.article-content figure.wp-block-table .vn-table-scroll::-webkit-scrollbar-thumb,
.article-content > table::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 0, 0.4);
  border-radius: 4px;
}


.article-content figure.wp-block-table .vn-table-scroll::-webkit-scrollbar-thumb:hover,
.article-content > table::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 107, 0, 0.6);
}


.article-content figure.wp-block-table .vn-table-scroll,
.article-content > table {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 107, 0, 0.4) rgba(0, 0, 0, 0.04);
}



@media (max-width: 768px) {


    .article-content table th,
    .article-content table td {
      padding: 10px 12px;
      font-size: 14px;
    }

}



/* Callout */
.article-callout {
  display: flex;
  gap: 16px;
  margin: 28px 0;
  padding: 20px 24px;
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: var(--radius);
}



.article-callout--orange {
  background: rgba(255, 107, 0, 0.05);
  border-color: rgba(255, 107, 0, 0.15);
}



.article-callout__icon {
  flex-shrink: 0;
  color: #38bdf8;
  margin-top: 2px;
}



.article-callout--orange .article-callout__icon {
  color: var(--orange);
}



.article-callout__content {
  font-size: 15px;
  color: var(--gray-300);
  line-height: 1.7;
}



.article-callout__content strong {
  color: var(--white);
}



/* In-article card grid */
.article-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}



.article-grid__card {
  padding: 20px;
  background: var(--dark-card);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
}



.article-grid__card h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}



.article-grid__card p {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 0;
}



/* Tags */
.article-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}



.article-tags__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
}



.article-tag {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 6px;
  font-size: 13px;
  color: var(--gray-400);
  text-decoration: none;
  transition: all 0.3s ease;
}



.article-tag:hover {
  background: rgba(255, 107, 0, 0.1);
  border-color: var(--orange);
  color: var(--orange);
}



/* Author Bio */
.article-author-bio {
  display: flex;
  gap: 20px;
  margin-top: 36px;
  padding: 28px;
  background: var(--dark-card);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
}



.article-author-bio__avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--white-pure);
}



.article-author-bio__content h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
  text-transform: capitalize;
}



.article-author-bio__content p {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 12px;
}



.article-author-bio__socials {
  display: flex;
  gap: 10px;
}



.article-author-bio__socials a {
  color: var(--gray-500);
  transition: color 0.3s ease;
}



.article-author-bio__socials a:hover {
  color: var(--orange);
}



/* Post Navigation */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
}



.article-nav__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--dark-card);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 0.3s ease;
}



.article-nav__item:hover {
  border-color: rgba(255, 107, 0, 0.25);
  background: var(--dark-card-hover);
}



.article-nav__item--next {
  text-align: right;
}



.article-nav__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-600);
}



.article-nav__item--next .article-nav__label {
  justify-content: flex-end;
}



.article-nav__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-300);
  line-height: 1.4;
  transition: color 0.3s ease;
}



.article-nav__item:hover .article-nav__title {
  color: var(--orange);
}



/* Reading progress bar */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--orange);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 10000;
  pointer-events: none;
}



/* Related posts */
.related-posts__heading {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}



.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}



/* ===========================
   BLOG — NEWSLETTER
   =========================== */
.blog-newsletter__card {
  position: relative;
  background: var(--dark-card);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-xl);
  padding: 64px;
  text-align: center;
  overflow: hidden;
}



.blog-newsletter__glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  pointer-events: none;
}



.blog-newsletter__glow--1 {
  background: var(--orange);
  top: -100px;
  right: -100px;
}



.blog-newsletter__glow--2 {
  background: var(--orange-light);
  bottom: -100px;
  left: -100px;
}



.blog-newsletter__content {
  position: relative;
  z-index: 1;
}



.blog-newsletter__title {
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-top: 16px;
}



.blog-newsletter__desc {
  font-size: 16px;
  color: var(--gray-400);
  line-height: 1.7;
  max-width: 520px;
  margin: 16px auto 0;
}



.blog-newsletter__form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 480px;
  margin: 32px auto 0;
}



.blog-newsletter__input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-900);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  padding: 4px 4px 4px 16px;
  transition: border-color 0.3s ease;
}



.blog-newsletter__input-wrap:focus-within {
  border-color: var(--orange);
}



.blog-newsletter__input-wrap svg {
  color: var(--gray-600);
  flex-shrink: 0;
}



.blog-newsletter__input-wrap input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--white);
  font-family: var(--font-main);
  font-size: 15px;
  padding: 12px 8px;
}



.blog-newsletter__input-wrap input::placeholder {
  color: var(--gray-600);
}



.blog-newsletter__note {
  font-size: 13px;
  color: var(--gray-600);
  margin-top: 16px;
}



@media (max-width: 992px) {

   /* Chrome/Safari */

    /* Blog page */
    .blog-featured__card {
      grid-template-columns: 1fr 1fr;
    }



    .blog-featured__content {
      padding: 32px;
    }



    .blog-featured__title {
      font-size: 24px;
    }



    .blog__grid {
      grid-template-columns: repeat(2, 1fr);
    }



    /* Toolbar layout (filters / search / count) is handled by the .blog__toolbar
       rules further up — they already scroll the strip and reflow the search. */

    .blog-newsletter__card {
      padding: 48px 36px;
    }



    /* Blog post page */
    .article-layout__grid {
      grid-template-columns: 220px 1fr;
      gap: 40px;
    }



    .article-hero__title {
      font-size: 36px;
    }



    .related-posts__grid {
      grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 768px) {



    /* Blog page */
    .blog-featured__card {
      grid-template-columns: 1fr;
    }



    .blog-featured__img {
      min-height: 240px;
    }



    .blog-featured__content {
      padding: 28px;
    }



    .blog__grid {
      grid-template-columns: 1fr;
    }



    .blog__filter {
      padding: 8px 16px;
      font-size: 13px;
    }



    .blog-newsletter__card {
      padding: 40px 24px;
    }



    .blog-newsletter__title {
      font-size: 28px;
    }



    .blog-newsletter__form {
      flex-direction: column;
    }



    .blog-newsletter__input-wrap {
      width: 100%;
    }



    .blog-newsletter__form .btn {
      width: 100%;
      justify-content: center;
    }



    .blog__page-btn,
    .blog__page-num {
      width: 40px;
      height: 40px;
      min-width: 40px;
      border-radius: 10px;
    }



    .blog__page-dots {
      width: 28px;
    }



    /* Blog post page */
    .article-layout__grid {
      /* minmax(0, 1fr), not 1fr. `1fr` is shorthand for minmax(auto, 1fr), and
         that auto floor is the item's min-content width — so one wide thing in
         the article (an image, a table, a long unbroken URL) stops the whole
         column shrinking. That is what was holding this track at 720px on a
         390px phone and pushing the text off screen. minmax(0, …) removes the
         floor and lets the column follow the screen. */
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }


    /* Same reason, one level down: a grid item will not shrink past its content
       unless told to. */
    .article-content,
    .article-sidebar {
      min-width: 0;
    }


    /* And the usual offenders inside the article, so nothing sets a new floor. */
    .article-content img,
    .article-content iframe,
    .article-content video,
    .article-content table {
      max-width: 100%;
      height: auto;
    }


    .article-content pre {
      overflow-x: auto;
    }


    .article-content {
      overflow-wrap: break-word;
    }



    .article-sidebar {
      position: relative;
      top: 0;
      flex-direction: row;
      gap: 16px;
      margin-bottom: 40px;
    }



    .article-toc {
      flex: 1;
    }



    .article-share {
      flex-shrink: 0;
    }



    .article-hero__title {
      font-size: 30px;
    }



    .article-hero {
      padding: 130px 15px 50px;
    }



    .article-content {
      padding: 0 15px;
    }



    .article-cover {
      padding: 0 15px;
    }



    .article-grid {
      grid-template-columns: 1fr;
    }



    .article-nav {
      grid-template-columns: 1fr;
    }



    .related-posts__grid {
      grid-template-columns: 1fr;
    }

}

@media (max-width: 576px) {



    /* Blog page */
    .blog-featured__title {
      font-size: 20px;
    }



    .blog-featured__excerpt {
      font-size: 14px;
    }



    .blog__card-title {
      font-size: 16px;
    }



    .blog-newsletter__title {
      font-size: 24px;
    }



    .blog-newsletter__desc {
      font-size: 14px;
    }



    .blog__pagination {
      gap: 4px;
      margin-top: 36px;
    }



    .blog__page-btn,
    .blog__page-num {
      width: 36px;
      height: 36px;
      min-width: 36px;
      border-radius: 8px;
      font-size: 13px;
    }



    .blog__page-dots {
      width: 24px;
      font-size: 12px;
    }



    /* Blog post page */
    .article-hero__title {
      font-size: 26px;
    }



    .article-hero__meta {
      gap: 8px;
    }



    .article-sidebar {
      flex-direction: column;
    }



    .article-share__btns {
      flex-direction: row;
    }



    .article-content h2 {
      font-size: 22px;
    }



    .article-content h3 {
      font-size: 18px;
    }



    .article-author-bio {
      flex-direction: column;
      text-align: center;
      align-items: center;
    }



    .article-author-bio__socials {
      justify-content: center;
    }



    .article-cover__img {
      border-radius: var(--radius);
    }



    .related-posts__heading {
      font-size: 24px;
    }

}

@media (min-width: 769px) and (max-width: 1024px) {


    /* Base caps these at 520px and 480px on a wide screen. At tablet width that
       leaves the newsletter block floating in the middle of a much wider
       container, so it takes the full width instead. */
    .blog-newsletter__desc,
    .blog-newsletter__form {
      max-width: 100%;
    }

}

@media (max-width: 1024px) {


    /* Base pins the cover to 480px tall, which is right on a wide screen and far
       too tall once the column narrows — the image ends up heavily cropped.
       `unset` returns min-height to auto, so the cover follows its picture. */
    .article-cover__img {
      min-height: unset;
    }

}