/**
 * Công cụ hỗ trợ đọc bài viết (Reading tools) — single blog posts only.
 *
 * Enqueued via functions.php on `is_singular('post')`; depends on `vdt-theme-style`
 * so it always cascades AFTER main.css / responsive.css / style.css.
 *
 * Scope: ONLY resizes the article body (.vdt-post-content / .vdt-entry-content).
 * Header, footer, menu, sidebar, CTA and forms are never touched.
 *
 * Brand tokens (inherited from :root in main.css, fallbacks kept for safety):
 *   navy #0B1F3A · blue #1E5BFF · cyan #00B8D9 · border #E4E7EC.
 */

/* ==========================================================================
   1. Article font-size engine
   --------------------------------------------------------------------------
   main.css sets `.vdt-post-content p / li { font-size: inherit; line-height:
   inherit; }`, so the whole body copy follows the container's font-size.
   We drive that container with a CSS variable (updated by article-tools.js).
   Default 17px / 1.82 === the existing design, so the initial paint is
   pixel-identical to before this feature existed.
   ========================================================================== */
.vdt-post-content.vdt-entry-content {
  --vdt-article-font-size: 17px;
  --vdt-article-line-height: 1.82;
  font-size: var(--vdt-article-font-size, 17px);
  line-height: var(--vdt-article-line-height, 1.82);
}

/* Headings carry fixed rem sizes in main.css, so they will not follow the
   container on their own. We re-express them as a ratio of the article
   variable, calibrated to reproduce the current sizes at the 17px default
   (h2 31.2px, h3 23.68px, h4 18.56px) while keeping the hierarchy intact when
   the reader enlarges the text. Specificity (0,3,1) beats the bg-heritage
   heading rules (0,2,1); line-heights are left untouched. */
.vdt-post-bg-heritage .vdt-post-content.vdt-entry-content h2 {
  font-size: calc(var(--vdt-article-font-size, 17px) * 1.835);
}

.vdt-post-bg-heritage .vdt-post-content.vdt-entry-content h3 {
  font-size: calc(var(--vdt-article-font-size, 17px) * 1.393);
}

.vdt-post-bg-heritage .vdt-post-content.vdt-entry-content h4 {
  font-size: calc(var(--vdt-article-font-size, 17px) * 1.092);
}

/* ==========================================================================
   2. Reading toolbar — horizontal bar above the article body
   ========================================================================== */
.vdt-reading-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 10px 14px;
  border: 1px solid var(--vdt-border, #e4e7ec);
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 34px rgba(11, 31, 58, .08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.vdt-reading-tools__label {
  margin-right: 2px;
  color: #667085;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.vdt-reading-tools__group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vdt-reading-tools__group--actions {
  margin-left: auto;
}

.vdt-reading-tools__divider {
  width: 1px;
  height: 26px;
  margin: 0 2px;
  background: var(--vdt-border, #e4e7ec);
}

/* ---- Buttons -------------------------------------------------------------- */
.vdt-reading-tools__btn {
  display: inline-grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 7px;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(228, 231, 236, .95);
  border-radius: 999px;
  background: #fff;
  color: var(--vdt-navy, #0b1f3a);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* Circular font-size buttons: − · Aa · + */
.vdt-reading-tools__btn--round {
  width: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
}

.vdt-reading-tools__btn--reset {
  font-size: 15px;
  letter-spacing: .02em;
}

.vdt-reading-tools__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.vdt-reading-tools__text {
  font-size: 14px;
  font-weight: 800;
}

.vdt-reading-tools__btn:hover {
  transform: translateY(-1px);
  border-color: rgba(30, 91, 255, .34);
  color: var(--vdt-blue, #1e5bff);
  box-shadow: 0 10px 24px rgba(30, 91, 255, .14);
}

.vdt-reading-tools__btn:active {
  transform: translateY(0);
}

.vdt-reading-tools__btn:focus-visible {
  outline: 3px solid rgba(0, 184, 217, .28);
  outline-offset: 3px;
}

.vdt-reading-tools__btn[disabled] {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.vdt-reading-tools__btn[disabled]:hover {
  border-color: rgba(228, 231, 236, .95);
  color: var(--vdt-navy, #0b1f3a);
}

/* Copied confirmation state on the "Link" button */
.vdt-reading-tools__btn.is-copied {
  border-color: rgba(0, 184, 217, .5);
  color: var(--vdt-cyan, #00b8d9);
  background: rgba(0, 184, 217, .08);
}

/* ==========================================================================
   3. Responsive — keep everything on-screen, never overflow horizontally
   ========================================================================== */
@media (max-width: 600px) {
  .vdt-reading-tools {
    gap: 8px;
    padding: 10px;
    margin-bottom: 18px;
  }

  /* Actions drop to a second row instead of pushing off-screen */
  .vdt-reading-tools__group--actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .vdt-reading-tools__divider {
    display: none;
  }

  .vdt-reading-tools__btn {
    height: 42px;
    min-width: 42px;
  }

  .vdt-reading-tools__btn--round {
    width: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vdt-reading-tools__btn {
    transition: none;
  }

  .vdt-reading-tools__btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   4. Print — clean article-only output when the reader taps "In"
   ========================================================================== */
@media print {
  .vdt-site-header,
  .vdt-scroll-progress,
  .vdt-post-progress,
  .vdt-breadcrumb,
  .vdt-reading-tools,
  .vdt-post-toc-mobile,
  .vdt-post-hero__media,
  .vdt-post-sidebar,
  .vdt-post-inline-cta,
  .vdt-post-cta,
  .vdt-post-author__actions,
  .vdt-post-final-cta,
  .vdt-post-share,
  .vdt-post-share-bottom,
  .vdt-post-related,
  .vdt-footer,
  .vdt-back-to-top {
    display: none !important;
  }

  /* Neutralise the heritage/fixed background so it never prints */
  .vdt-post-bg-heritage,
  .vdt-post-hero--lacviet {
    background: #fff !important;
  }

  .vdt-post-bg-heritage::before,
  .vdt-post-hero--lacviet::before,
  .vdt-post-hero--lacviet::after {
    display: none !important;
  }

  .vdt-post-page,
  .vdt-post-hero,
  .vdt-post-hero__inner,
  .vdt-post-container,
  .vdt-post-layout,
  .vdt-post-main,
  .vdt-post-card,
  .vdt-post-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    background: #fff !important;
  }

  .vdt-post-content {
    color: #000 !important;
    font-size: 12pt !important;
    line-height: 1.55 !important;
  }

  .vdt-post-content h2,
  .vdt-post-content h3,
  .vdt-post-content h4 {
    color: #000 !important;
  }

  .vdt-post-content a {
    color: #000 !important;
    text-decoration: underline;
  }
}