/* ==========================================================================
   Static blog posts (frontend/blog/*.html)

   Loaded AFTER css/blogs-styles.css. blogs-styles.css still provides the approved
   page layout (banner, "See all blogs", cover image, red consultation box, related
   blogs on the right, comment form). This file only changes how the ARTICLE TEXT is
   presented, and adds the "On this page" box, the reading-progress bar and the
   back-to-top button.

   Rule: text is left-aligned. Never use text-align: justify.
   ========================================================================== */

:root {
  --bp-brand: #760222;
  --bp-brand-dark: #59011a;
  --bp-brand-soft: #faf2ee;
  --bp-ink: #101828;    /* headings */
  --bp-text: #1d2939;   /* body text: about 14:1 on the page background */
  --bp-muted: #475467;  /* secondary text: about 7:1 */
  --bp-line: #eaecf0;
}

/* --------------------------------------------------------------------------
   Same look as before, better semantics: the banner heading is now a <p>
   and the post title is the page's <h1>.
   -------------------------------------------------------------------------- */

p.news-hero-title {
  line-height: 1.2;
}

h1.news-detail-title {
  line-height: 1.2;
}

.news-featured-img img {
  height: 100%;
}

/* Let the article column shrink on phones so a wide table scrolls inside its box
   instead of widening the whole page (grid items default to min-width: auto). */
.news-left {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Article text
   -------------------------------------------------------------------------- */

.news-detail-body {
  font-size: 18px;
  line-height: 1.7;
  color: var(--bp-text);
  text-align: left;
  overflow-wrap: break-word;
}

.news-detail-body p {
  margin: 0 0 1.15em;
  max-width: none;
  font-size: 18px;
  line-height: 1.7;
  color: var(--bp-text);
  text-align: left;
}

/* Opening paragraph keeps the approved drop cap, scaled to the larger text. */
.news-detail-body p:first-child {
  font-size: 18px;
  line-height: 1.7;
  font-weight: 500;
  color: #344054;
}

.news-detail-body p:first-child::first-letter {
  font-size: 1.75em;
  line-height: 0.7;
}

.news-detail-body h2 {
  margin: 2.2em 0 0.6em;
  font-size: 26px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bp-brand);
  scroll-margin-top: 24px;
}

.news-detail-body h3 {
  margin: 1.7em 0 0.45em;
  font-size: 21px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--bp-ink);
  scroll-margin-top: 24px;
}

.news-detail-body h4 {
  margin: 1.3em 0 0.4em;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--bp-ink);
}

.news-detail-body h2 + p,
.news-detail-body h2 + ul,
.news-detail-body h3 + p,
.news-detail-body h3 + ul,
.news-detail-body h4 + ul {
  margin-top: 0;
}

.news-detail-body strong {
  font-weight: 700;
  color: var(--bp-ink);
}

.news-detail-body ul,
.news-detail-body ol {
  margin: 0 0 1.25em;
  padding-left: 1.4em;
  font-size: 18px;
  line-height: 1.7;
  color: var(--bp-text);
}

.news-detail-body li {
  margin: 0 0 0.4em;
  padding-left: 0.2em;
  text-align: left;
}

.news-detail-body li::marker {
  color: var(--bp-brand);
}

/* Lists whose items already start with a symbol (e.g. ❌) */
.news-detail-body .list-plain {
  list-style: none;
  padding-left: 0;
}

.news-detail-body .list-plain li {
  padding-left: 0;
}

/* A bold line that introduces a list ("Sample Weekly Plan:") */
.news-detail-body .list-label {
  margin-bottom: 0.4em;
}

.news-detail-body a {
  color: var(--bp-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.news-detail-body a:hover {
  color: var(--bp-brand-dark);
  text-decoration-thickness: 2px;
}

.news-detail-body a[target="_blank"]::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.8em;
  text-decoration: none;
}

/* Tables: readable on every screen; scroll sideways on narrow screens */
.table-wrap {
  margin: 0.5em 0 0.4em;
  overflow-x: auto;
  border: 1px solid var(--bp-line);
  border-radius: 10px;
  background: #fff;
}

.table-wrap table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.55;
}

.table-wrap th,
.table-wrap td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

.table-wrap thead th {
  background: var(--bp-brand-soft);
  color: var(--bp-ink);
  font-weight: 700;
}

.table-wrap tbody th {
  color: var(--bp-ink);
  font-weight: 700;
  white-space: nowrap;
}

.table-wrap tbody tr > * {
  border-top: 1px solid var(--bp-line);
}

.table-hint {
  display: none;
  margin: 0 0 1.2em !important;
  font-size: 14px !important;
  color: var(--bp-muted) !important;
}

@media (max-width: 640px) {
  .table-hint {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   "On this page" (inside the article column, above the text)
   -------------------------------------------------------------------------- */

.post-toc {
  margin: 0 0 32px;
  padding: 18px 22px 16px;
  border: 1px solid var(--bp-line);
  border-left: 4px solid var(--bp-brand);
  border-radius: 12px;
  background: #fff;
}

.post-toc-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-muted);
}

.post-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-toc li {
  margin: 0;
}

.post-toc a {
  display: inline-block;
  padding: 4px 0;
  color: var(--bp-ink);
  font-size: 16px;
  line-height: 1.45;
  text-decoration: none;
}

.post-toc a::before {
  content: "›";
  margin-right: 8px;
  color: var(--bp-brand);
  font-weight: 700;
}

.post-toc a:hover {
  color: var(--bp-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Reading progress bar and back-to-top button (shown by js/blog-post.js)
   -------------------------------------------------------------------------- */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1500;
  pointer-events: none;
}

.reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bp-brand);
  transform: scaleX(0);
  transform-origin: left center;
}

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1400;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--bp-brand);
  color: #fff;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   Comment form states (js/blog-comments.js sets data-state and an inline colour)
   -------------------------------------------------------------------------- */

.news-comment .comment-status:empty {
  display: none;
}

.news-comment .comment-status[data-state] {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
}

.news-comment .comment-status[data-state="success"] {
  border: 1px solid #abefc6;
  background: #ecfdf3;
  color: #067647 !important;
}

.news-comment .comment-status[data-state="error"] {
  border: 1px solid #fecdca;
  background: #fef3f2;
  color: #b42318 !important;
}

.news-comment .comment-noscript {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--bp-muted);
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--bp-brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
  color: #fff;
}

.blog-static a:focus-visible,
.blog-static button:focus-visible,
.blog-static textarea:focus-visible,
.blog-static [tabindex]:focus-visible {
  outline: 3px solid var(--bp-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.blog-static) {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-static *,
  .blog-static *::before,
  .blog-static *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .news-detail-body,
  .news-detail-body p,
  .news-detail-body p:first-child,
  .news-detail-body ul,
  .news-detail-body ol {
    font-size: 17px;
  }

  .news-detail-body h2 {
    font-size: 23px;
  }

  .news-detail-body h3 {
    font-size: 19px;
  }

  .post-toc {
    padding: 16px 18px 14px;
  }

  .back-to-top {
    right: 14px;
    bottom: 14px;
  }
}