/* Resets the inherited text-size context back to the original 16px baseline (app.css's
   `body` is 17px sitewide) — the blog module's own classes are all explicitly sized (rem,
   unaffected by body's font-size either way), but a few shared/unstyled bits rendered
   inside the blog templates (e.g. .section-subtitle has no font-size of its own) would
   otherwise silently pick up the site-wide bump. This keeps every blog page pixel-identical
   to before that change. */
.blog-page { font-size: 16px; }

/* ==== Hero ==== */
.blog-hero { position: relative; padding: 1rem 1rem 0; overflow: hidden; }
.blog-hero::before, .blog-hero::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .14), transparent 70%);
}
.blog-hero::before { width: 320px; height: 320px; top: -120px; left: -80px; }
.blog-hero::after { width: 260px; height: 260px; top: -60px; right: -60px; background: radial-gradient(circle, rgba(217,119,6,.12), transparent 70%); }

.blog-hero .section-title {
  font-size: clamp(2rem, 4.5vw, 2.75rem); letter-spacing: -.02em; line-height: 1.15;
  background: linear-gradient(90deg, var(--text-primary), var(--accent) 130%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--text-primary);
}
.blog-hero .section-subtitle {
  font-size: 1.05rem; font-weight: 400; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.6;
}

/* ==== Blog listing ==== */
.blog-post-card { overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.blog-post-thumb {
  height: 160px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .05)),
    radial-gradient(rgba(var(--accent-rgb), .16) 1px, transparent 1px);
  background-size: cover, 14px 14px;
  border-bottom: 1px solid var(--border-color);
}
.blog-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-thumb-icon {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface); color: var(--accent); font-size: 1.75rem; box-shadow: var(--shadow-sm);
}
.blog-post-card .blog-post-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.blog-post-category {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent);
  font-weight: 700; margin-bottom: .5rem;
}
.blog-post-card h2, .blog-post-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.blog-post-card h2 a, .blog-post-card h3 a { color: var(--text-primary); text-decoration: none; }
.blog-post-card h2 a:hover, .blog-post-card h3 a:hover { color: var(--accent); }
.blog-post-excerpt { color: var(--text-muted); font-size: .9rem; flex: 1; }
.blog-post-meta { font-size: .78rem; color: var(--text-muted); margin-top: .75rem; }
.blog-post-footer { margin-top: .75rem; }
.blog-post-footer .blog-post-meta { margin-top: 0; }
.blog-post-readmore { flex-shrink: 0; }

/* ==== Sidebar search ==== */
.blog-search-form {
  display: flex; align-items: center; gap: .5rem;
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 999px;
  padding: .35rem .35rem .35rem 1rem; box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.blog-search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.blog-search-icon { font-size: .85rem; opacity: .6; flex-shrink: 0; }
.blog-search-input {
  flex: 1; min-width: 0; border: none; background: transparent; color: var(--text-primary);
  font-size: 1rem; padding: .4rem 0; outline: none;
}
.blog-search-input::placeholder { color: var(--text-muted); }
.blog-search-submit {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer; transition: transform .15s ease, opacity .15s ease;
}
.blog-search-submit:hover { transform: translateX(2px); opacity: .9; }

.blog-sidebar-card { padding: 1.25rem; margin-bottom: 1.5rem; }
.blog-sidebar-card h3 { font-size: .95rem; font-weight: 700; margin-bottom: 1rem; }
.blog-category-list a, .blog-tag-list a {
  color: var(--text-primary); text-decoration: none; font-size: .9rem; display: flex;
  justify-content: space-between; padding: .4rem 0; border-bottom: 1px solid var(--border-color);
}
.blog-category-list a:hover, .blog-tag-list a:hover { color: var(--accent); }
.blog-category-list a:last-child, .blog-tag-list a:last-child { border-bottom: none; }
.blog-tag-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-tag-list a {
  border: 1px solid var(--border-color); border-radius: 999px; padding: .3rem .8rem; font-size: .8rem;
}
.blog-trending-item { display: flex; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--border-color); }
.blog-trending-item:last-child { border-bottom: none; }
.blog-trending-thumb {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(var(--accent-rgb), .12); color: var(--accent); font-size: 1.1rem;
}
.blog-trending-item a { color: var(--text-primary); text-decoration: none; font-size: .85rem; font-weight: 600; }
.blog-trending-item a:hover { color: var(--accent); }

.blog-faq-item { margin-bottom: 1.25rem; }
.blog-faq-item:last-child { margin-bottom: 0; }
.blog-faq-question { font-size: .92rem; margin-bottom: .35rem; }

/* ==== Related articles grid (bottom of post) ==== */
.blog-related-grid-label {
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 1.25rem;
}
.blog-related-card {
  display: flex; flex-direction: column; height: 100%; border: 1px solid var(--border-color);
  border-radius: 14px; overflow: hidden; background: var(--bg-surface); box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.blog-related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.blog-related-card-thumb {
  height: 160px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .05)),
    radial-gradient(rgba(var(--accent-rgb), .16) 1px, transparent 1px);
  background-size: cover, 14px 14px;
  border-bottom: 1px solid var(--border-color); flex-shrink: 0;
}
.blog-related-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-related-card-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.blog-related-card-category {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); background: rgba(var(--accent-rgb), .12); border-radius: 999px;
  padding: .2rem .6rem; align-self: flex-start; margin-bottom: .6rem;
}
.blog-related-card-body h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: .5rem; line-height: 1.35; }
.blog-related-card-body p {
  font-size: .85rem; color: var(--text-muted); margin-bottom: .75rem; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-related-card-readmore { font-size: .82rem; font-weight: 700; color: var(--accent); }
.blog-related-card:hover .blog-related-card-body h3 { color: var(--accent); }

.blog-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.blog-breadcrumb a { color: var(--accent); text-decoration: none; font-weight: 600; }
.blog-breadcrumb a:hover { text-decoration: underline; }
.blog-breadcrumb-sep { color: var(--text-muted); }
.blog-breadcrumb-current { color: var(--text-muted); }

/* ==== Single post ==== */
.blog-article-card { padding: 1.75rem; }
@media (min-width: 768px) { .blog-article-card { padding: 2.5rem; } }

/* aspect-ratio (not a fixed height) keeps the box's shape consistent across screen widths.
   object-fit:contain (not cover) is deliberate — real uploaded images don't reliably match
   the 1200x630 (1.91:1) box ratio (e.g. a 1536x1024/1.5:1 upload), and cover would crop the
   top/bottom of any image wider or taller than that, cutting off content. contain always
   shows the whole image, letterboxed into the decorative dotted background on any mismatch.
   Negative margins bleed it out to the card's own edges (undoing .blog-article-card's padding
   on this element only) so the image reads as full-bleed and large, instead of floating as a
   smaller box inside a visible frame of card padding. Only the top corners round to match the
   card's own radius — the bottom stays square since the article text continues directly below. */
.blog-post-hero {
  aspect-ratio: 1200 / 630; border-radius: 16px 16px 0 0; overflow: hidden; display: flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .05)),
    radial-gradient(rgba(var(--accent-rgb), .16) 1.5px, transparent 1.5px);
  background-size: cover, 20px 20px;
  border-bottom: 1px solid var(--border-color);
  margin: -1.75rem -1.75rem 2rem;
}
@media (min-width: 768px) { .blog-post-hero { margin: -2.5rem -2.5rem 2rem; } }
.blog-post-hero img { width: 100%; height: 100%; object-fit: contain; }
.blog-post-hero .blog-thumb-icon { width: 100px; height: 100px; font-size: 2.75rem; }
.blog-article-content { font-size: 1.05rem; line-height: 1.8; color: var(--text-primary); }
.blog-article-content h2 { font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; font-size: 1.4rem; }
.blog-article-content h3 { font-weight: 700; margin-top: 1.5rem; margin-bottom: .6rem; font-size: 1.1rem; }
.blog-article-content p { margin-bottom: 1.1rem; }
.blog-article-content ul, .blog-article-content ol { margin-bottom: 1.1rem; padding-left: 1.5rem; }
.blog-article-content a { color: var(--accent); }
.blog-article-content img { border-radius: 12px; }
/* Some older posts embed their own "Home / Blog / Title" breadcrumb nav directly in the
   content HTML; the page now renders a proper breadcrumb above the title, so hide the
   redundant in-content one rather than showing it twice. */
.blog-article-content nav[aria-label="breadcrumb"] { display: none; }

.blog-back-btn {
  display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%;
  padding: .55rem 1rem; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .35);
  background: rgba(var(--accent-rgb), .08); color: var(--accent); font-weight: 600; font-size: .88rem;
  text-decoration: none; transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.blog-back-btn:hover {
  background: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--accent-rgb), .35);
}
.blog-back-btn-arrow { transition: transform .15s ease; }
.blog-back-btn:hover .blog-back-btn-arrow { transform: translateX(-3px); }

/* ==== Legal-page table of contents (Privacy Policy / Terms of Service) ==== */
.legal-toc { display: flex; flex-direction: column; }
.legal-toc a {
  display: block; padding: .4rem .5rem; border-radius: 8px; color: var(--text-primary);
  font-size: .86rem; text-decoration: none; transition: background .15s ease, color .15s ease;
}
.legal-toc a:hover { background: var(--bg-surface-alt); color: var(--accent); }

/* ==== Related-page link cards (trust pages) ==== */
.related-page-card {
  display: block; height: 100%; text-decoration: none; color: inherit;
}
.related-page-card .related-page-title { font-weight: 700; color: var(--text-primary); margin-bottom: .35rem; }
.related-page-card:hover .related-page-title { color: var(--accent); }
.related-page-card .related-page-desc { font-size: .85rem; color: var(--text-muted); }
.related-pages-label {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin-bottom: 1rem;
}

.blog-comment { padding: 1rem 0; border-bottom: 1px solid var(--border-color); }
.blog-comment:last-child { border-bottom: none; }
.blog-comment-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.blog-comment-name { font-weight: 700; font-size: .92rem; }
.blog-comment-date { font-size: .78rem; color: var(--text-muted); }
.blog-comment-body { font-size: .92rem; color: var(--text-primary); margin-top: .25rem; }

/* ==== Pagination ==== */
.blog-pagination {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .5rem; list-style: none; padding: 0; margin: 0;
}
.blog-pagination-item { display: flex; }
.blog-pagination-link {
  display: flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 .5rem;
  border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-surface);
  color: var(--text-primary); font-weight: 600; font-size: .9rem; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
a.blog-pagination-link:hover {
  border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.blog-pagination-link.is-active {
  background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-sm);
}
.blog-pagination-link.is-active:hover { transform: none; color: #fff; }
.blog-pagination-link.blog-pagination-nav { font-size: 1rem; }
.blog-pagination-link.is-disabled {
  color: var(--text-muted); opacity: .4; cursor: default; pointer-events: none;
}