/**
 * Blog post layout stylesheet (pure CSS reading progress bar, 2-col rail layout, cover, native tags/share/related)
 * Area: post
 * Source of truth: wordpress-mu/ekitabs-core/assets/css/post-layout.css
 * Deploy to: wp-content/mu-plugins/ekitabs-core/assets/css/post-layout.css
 */

/* ==========================================================================
   1. Sub-task B: Pure CSS Scroll-Driven Reading Progress Bar
   ========================================================================== */

.ekrd-read-progress {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .ekrd-read-progress {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100% !important;
    height: 3px;
    background-color: var(--theme-palette-color-1);
    transform-origin: right;
    transform: scaleX(0);
    animation: ekbs-read-progress linear;
    animation-timeline: scroll(root);
    z-index: 99999;
    pointer-events: none;
    transition: none !important;
  }

  @keyframes ekbs-read-progress {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ekrd-read-progress {
      display: none !important;
    }
  }
}

/* ==========================================================================
   2. Sub-task D: 2-Column Grid Layout Neutralizer & TOC Mobile UI
   ========================================================================== */

/* When .entry-content wraps .ekrd-single-grid, neutralize outer card wrapper so
   .ekrd-prose-card is the card for prose and .ekrd-post-rail is the sticky sidebar */
body.single-post article.type-post .entry-content:has(.ekrd-single-grid) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Mobile TOC Collapse/Expand Toggle UI */
.ekrd-toc-toggle-icon svg {
  transition: transform 0.2s ease;
}

.ekrd-toc-card.is-mobile-collapsed .ekrd-toc-state-expanded {
  display: none;
}

.ekrd-toc-card:not(.is-mobile-collapsed) .ekrd-toc-state-collapsed {
  display: none;
}

.ekrd-toc-card:not(.is-mobile-collapsed) .ekrd-toc-toggle-icon svg {
  transform: rotate(180deg);
}

/* ==========================================================================
   3. Step 2: Featured Cover Image Inside Prose Column
   ========================================================================== */

.ekbs-post-cover {
  margin: 0 0 28px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--theme-border-color);
  aspect-ratio: 16/9;
  background: var(--theme-palette-color-6);
}

.ekbs-post-cover__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   4. Step 3: Bottom of Article: Tags + Share in Article Column, Related Posts 3-Col Row
   ========================================================================== */

@media (min-width: 1060px) {
  body.single-post article.type-post > .entry-tags,
  body.single-post article.type-post > .ct-share-box {
    width: calc(100% - 314px);
    max-width: none;
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
}

body.single-post article.type-post > .entry-tags,
body.single-post article.type-post > .ct-share-box {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--theme-palette-color-8);
  border: 1px solid var(--theme-border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px 14px;
  text-align: start;
}

/* Blocksy lays these out as a centred column and a one-column icon grid; use one start-aligned row. */
body.single-post .entry-tags .entry-tags-items,
body.single-post .ct-share-box [data-icons-type] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
  margin: 0;
}
body.single-post .ct-share-box [data-icons-type] > a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--theme-border-color);
  border-radius: 999px;
  background: var(--theme-palette-color-6);
}
body.single-post .ct-share-box [data-icons-type] > a:hover {
  border-color: var(--theme-palette-color-1);
}
body.single-post article.type-post > .ct-share-box {
  margin-top: 12px;
}

body.single-post .entry-tags .ct-module-title,
body.single-post .ct-share-box .ct-module-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--theme-headings-color);
}

body.single-post .entry-tags a {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--theme-border-color);
  background: var(--theme-palette-color-6);
  font-size: 13px;
  color: var(--theme-text-color);
  text-decoration: none;
}

body.single-post .entry-tags a:hover {
  border-color: var(--theme-palette-color-1);
  color: var(--theme-headings-color);
}

body.single-post .ct-related-posts .ct-module-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--theme-headings-color);
  margin-bottom: 18px;
}

body.single-post .ct-related-posts article {
  background: var(--theme-palette-color-8);
  border: 1px solid var(--theme-border-color);
  border-radius: 12px;
  overflow: hidden;
  padding-bottom: 14px;
}

body.single-post .ct-related-posts .related-entry-title {
  font-size: 16px;
  line-height: 1.5;
  margin: 12px 14px 6px;
}

body.single-post .ct-related-posts .related-entry-title a {
  color: var(--theme-headings-color);
  text-decoration: none;
}

body.single-post .ct-related-posts .related-entry-title a:hover {
  color: var(--theme-link-initial-color);
}

body.single-post .ct-related-posts .entry-meta {
  margin: 0 14px;
  font-size: 13px;
}

/* Single column (below 1060px, see template 825): table of contents before the article, reading CTA after it. */
@media (max-width: 1059.98px) {
  body.single-post .ekrd-single-grid > .ekrd-post-rail { display: contents; }
  body.single-post .ekrd-single-grid > .ekrd-post-rail > .ekrd-toc-card { order: -1; margin: 0; }
  body.single-post .ekrd-single-grid > .ekrd-post-rail > .ekrd-rail-cta { order: 1; }
}