/*
 * content-pages.css — hand-written styles for the guide/blog pages built
 * 2026-08-03 (guides.php, guide.php, blog.php, blog-post.php,
 * category.php's guide-link section).
 *
 * Deliberately a SEPARATE file from site.css, loaded after it. site.css is
 * a compiled Tailwind v4 build artifact with no source/build tooling
 * present on this server -- editing it directly would work until the next
 * real rebuild silently wipes it out. Uses the exact same design tokens
 * (--color-*, --radius-*, --text-*, --spacing) already defined in site.css
 * so these pages match the established visual system.
 */

/* [2026-08-03] Sticky footer. This file is loaded on every page (see
   header.php), so this rule is sitewide even though the file predates it.
   Root cause of the "blank space below the footer" report on /blog/: the
   page shell (header.php/footer.php) never had a sticky-footer rule, so on
   any page shorter than the viewport, <footer> just ends where the content
   ends and the browser paints the rest of the viewport with the plain
   sitewide dotted background below it. Doesn't show on pages with enough
   content to exceed viewport height (e.g. guides.php's 42 cards), which is
   why it looked page-specific. This pins the footer to the true bottom of
   the viewport on short pages without affecting layout on tall ones. */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main#main {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
}

.guides-index,
.blog-index,
.guides-index__category {
  width: 100%;
}

.guides-index__category,
.blog-index__list {
  margin-top: calc(var(--spacing) * 10);
}

.guides-index__category h2,
.blog-post-page h1,
.guide-page h1 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: calc(var(--spacing) * 4);
}

.guides-index__list,
.blog-index__list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  /* [2026-08-03] Switched from CSS Grid auto-fit to flexbox. auto-fit
     technically should stretch a lone item to fill the row, but produced
     inconsistent real results (guides.php, 2 items/section, rendered
     correctly; blog.php, exactly 1 item so far, rendered small and left-
     aligned with dead space to the right instead of stretching). Rather
     than chase the exact cause of that grid edge case, flex-wrap with a
     capped item width is a more predictable, easier-to-reason-about layout
     for a list whose real item count varies from 1 (blog, early on) to
     dozens (guides, blog once it's been running for weeks) -- items always
     get a sane, capped card width and wrap into new rows as needed,
     regardless of how many exist on a given page load. */
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 4);
}

.guides-index__list li,
.blog-index__list li {
  flex: 1 1 320px;
  max-width: 420px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  padding: calc(var(--spacing) * 5);
  box-shadow: 0 1px 2px #1c19170a, 0 1px 3px #1c19170f;
}

.guides-index__list a,
.blog-index__list a {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-brand);
  text-decoration: none;
  line-height: 1.35;
}

.guides-index__list a:hover,
.blog-index__list a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

.guides-index__desc,
.blog-index__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin-top: calc(var(--spacing) * 2);
  line-height: 1.5;
}

.blog-index__meta {
  font-size: var(--text-sm);
  color: var(--color-accent-dark);
  margin-top: calc(var(--spacing) * 1);
  font-weight: 500;
}

/* Category-page "Buying Guides" link row (see category.php) */
.category-guides {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 3);
  margin: calc(var(--spacing) * 4) 0 calc(var(--spacing) * 6);
}

.category-guides__link {
  display: inline-block;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-white));
  color: var(--color-brand-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.category-guides__link:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

/* Guide + blog post article body */
.guide-body,
.blog-post-body {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink);
  max-width: 68ch;
}

.guide-body p,
.blog-post-body p {
  margin-bottom: calc(var(--spacing) * 4);
}

.guide-body h2,
.blog-post-body h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-brand-dark);
  margin: calc(var(--spacing) * 8) 0 calc(var(--spacing) * 3);
}

.guide-body strong,
.blog-post-body strong {
  color: var(--color-ink);
  font-weight: 600;
}

.blog-post-page__date {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin-bottom: calc(var(--spacing) * 6);
}

.blog-post-page__date a {
  color: var(--color-brand);
  text-decoration: none;
  font-weight: 500;
}

.guide-top-products {
  margin-top: calc(var(--spacing) * 10);
  padding-top: calc(var(--spacing) * 8);
  border-top: 1px solid var(--color-line);
}

.guide-top-products h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: calc(var(--spacing) * 5);
}

.guide-cta {
  margin-top: calc(var(--spacing) * 5);
}

.guide-cta a {
  color: var(--color-brand);
  font-weight: 600;
  text-decoration: none;
}

.guide-cta a:hover {
  text-decoration: underline;
}

.lede {
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  max-width: 68ch;
  margin-bottom: calc(var(--spacing) * 6);
}