/* Applimate Blog — shared stylesheet.
   Design tokens copied from web/index.html's :root to keep the blog
   visually consistent with the main site. Source file lives here in
   templates/; the build script copies it verbatim to
   web/blog/assets/blog.css (generated output, not hand-edited). */

:root {
  --void:         #0a0726;
  --deep:         #0d0530;
  --pulse:        #2d0a8c;
  --glow:         #7dd8ff;
  --bright:       #c4f0ff;
  --white:        #f0f8ff;
  --muted:        rgba(196, 240, 255, 0.45);
  --glass-bg:     rgba(125, 216, 255, 0.04);
  --glass-mid:    rgba(125, 216, 255, 0.07);
  --glass-border: rgba(125, 216, 255, 0.14);

  --font-display: 'Chakra Petch', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--white);
  font-family: var(--font-body);
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a { color: var(--glow); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Header ─────────────────────────────────────────────────── */
.b-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--glass-border);
  max-width: 860px;
  margin: 0 auto;
}
.b-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);
}
.b-logo:hover { text-decoration: none; color: var(--bright); }
.b-logo-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.tm { font-size: 0.8em; vertical-align: super; letter-spacing: normal; }
.b-nav-link {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ─── Breadcrumbs ────────────────────────────────────────────── */
.b-breadcrumbs {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.b-breadcrumbs a { color: var(--muted); }
.b-breadcrumbs a:hover { color: var(--glow); }
.b-breadcrumbs .sep { margin: 0 0.4em; opacity: 0.5; }
.b-breadcrumbs [aria-current="page"] { color: var(--bright); }

/* ─── Article ────────────────────────────────────────────────── */
.b-article-main, .b-index-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem;
}
.b-article-category a {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glow);
}
.b-article-main h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin: 0.5rem 0 0.75rem;
}
.b-article-meta {
  color: var(--muted);
  font-size: 0.875rem;
  margin-bottom: 2rem;
}
.b-toc {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.b-toc-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bright);
  margin: 0 0 0.75rem;
}
.b-toc ul { list-style: none; margin: 0; padding: 0; }
.b-toc li { margin: 0.4rem 0; }
.b-toc li.b-toc-h3 { padding-left: 1.25rem; font-size: 0.9375rem; }

/* ─── Category banner ────────────────────────────────────────── */
.b-category-banner {
  margin: 0 0 1.5rem;
  height: 168px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 30%, rgba(125, 216, 255, 0.18), transparent 55%),
    linear-gradient(135deg, var(--pulse), var(--void) 75%);
}
.b-category-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(125, 216, 255, 0.05) 0px, rgba(125, 216, 255, 0.05) 1px, transparent 1px, transparent 28px);
}
.b-category-banner svg { position: relative; z-index: 1; width: 84px; height: 84px; color: var(--bright); }

/* Ambient per-icon effects - which class applies is decided at build time
   by CATEGORY_ICON_EFFECTS in scripts/build-blog.js, keyed to what the icon
   actually depicts, not just decoration for its own sake. */
.b-banner-icon { position: relative; z-index: 1; display: inline-flex; }

/* Warranty (shield-check): a slow outward-pulsing ring, like something
   actively being watched/protected. Two rings offset in time so one is
   always mid-pulse instead of a single ring blinking on/off. */
.b-banner-icon--shield::before,
.b-banner-icon--shield::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--bright);
  opacity: 0;
  animation: b-shield-pulse 3s ease-out infinite;
}
.b-banner-icon--shield::after { animation-delay: 1.5s; }
@keyframes b-shield-pulse {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Maintenance (wrench+gear): the gear/screw turns continuously - ongoing
   upkeep, literal mechanical motion. Only the <g class="b-gear-spin"> part
   of the icon rotates, not the toolbox body around it. transform-box:
   fill-box centers the rotation on that group's own shape regardless of
   the svg's viewBox-to-pixel scale. */
.b-banner-icon--gear svg .b-gear-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: b-gear-turn 6s linear infinite;
}
@keyframes b-gear-turn {
  to { transform: rotate(360deg); }
}

/* About Applimate (lightbulb): a soft breathing glow - idea/insight, the
   bulb reads as "on". */
.b-banner-icon--bulb svg {
  animation: b-bulb-glow 3.2s ease-in-out infinite;
}
@keyframes b-bulb-glow {
  0%, 100% { filter: drop-shadow(0 0 0 var(--bright)); opacity: 0.85; }
  50% { filter: drop-shadow(0 0 8px var(--bright)); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .b-banner-icon--shield::before,
  .b-banner-icon--shield::after,
  .b-banner-icon--gear svg .b-gear-spin,
  .b-banner-icon--bulb svg {
    animation: none;
  }
}

.b-banner-cat {
  position: absolute;
  z-index: 1;
  bottom: 0.9rem;
  left: 1.25rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bright);
}

/* ─── Key takeaways ──────────────────────────────────────────── */
.b-takeaways {
  border: 1px solid var(--glass-border);
  background: var(--glass-mid);
  border-radius: 10px;
  padding: 1.1rem 1.35rem;
  margin-bottom: 2rem;
}
.b-takeaways-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glow);
  margin: 0 0 0.6rem;
}
.b-takeaways ul { margin: 0; padding-left: 1.1rem; }
.b-takeaways li { font-size: 0.9375rem; color: var(--bright); margin-bottom: 0.4rem; }
.b-takeaways li:last-child { margin-bottom: 0; }

/* ─── How Applimate helps ────────────────────────────────────── */
.b-content .b-applimate-helps {
  border: 1px solid var(--glass-border);
  background: var(--glass-mid);
  border-radius: 10px;
  padding: 1.1rem 1.35rem;
  margin: 1.5rem 0;
}
.b-content .b-applimate-helps-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glow);
  margin: 0 0 0.6rem;
}
.b-content .b-applimate-helps p { font-size: 0.9375rem; margin: 0; }

.b-content { font-size: 1.0625rem; }
.b-content h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 2.5rem 0 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--glass-border);
}
.b-content h2:first-child { border-top: none; padding-top: 0; }
.b-content h3 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  margin: 1.75rem 0 0.75rem;
}
.b-content p { margin: 0 0 1.25rem; color: var(--white); }
.b-content ul, .b-content ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.b-content li { margin: 0.4rem 0; }
.b-content li.task-item {
  list-style: none;
  margin-left: -1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.b-content li.task-item input[type="checkbox"] {
  order: -1;
  accent-color: var(--glow);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  cursor: pointer;
}
.b-content li.task-item .task-text { flex: 1; min-width: 0; }

/* Checked items (manually, or auto-ticked by checklist.js as the reader
   scrolls past the section they link to) read as "handled" - dimmed and
   struck through, same visual language as a completed to-do item. */
.b-content li.task-item:has(input:checked) .task-text {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--glass-border);
}

/* A checklist item's own link (to the section it corresponds to) - reads
   as clearly clickable, distinct from the item's surrounding plain text,
   with an arrow hinting "this jumps you there" without adding an icon. */
.b-content li.task-item .task-text a {
  color: var(--glow);
  text-decoration: underline;
  text-decoration-color: rgba(125,216,255,0.35);
}
.b-content li.task-item .task-text a::after {
  content: ' \2192';
  opacity: 0.6;
}

/* Pull-quote: a highlighted line of our own writing, distinct from
   the plain blockquote above (used for quoting external source terms). */
.b-content p.pullquote {
  margin: 2rem 0;
  padding: 0 0 0 1.1rem;
  border-left: 3px solid var(--glow);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--bright);
}
.b-content blockquote {
  border-left: 3px solid var(--glow);
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  color: var(--muted);
}
.b-content code {
  font-family: var(--font-mono);
  background: var(--glass-mid);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
}
.b-content pre {
  background: var(--glass-mid);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}
.b-content pre code { background: none; padding: 0; }
.b-content img { max-width: 100%; border-radius: 8px; }
.b-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
.b-content th, .b-content td {
  border: 1px solid var(--glass-border);
  padding: 0.6rem 0.8rem;
  text-align: left;
  font-size: 0.9375rem;
}
.b-content th { background: var(--glass-bg); font-family: var(--font-display); }

/* ─── Comparison chart ───────────────────────────────────────────
   A real visual for brand-comparison data articles already state in a
   markdown table - not decoration, the same numbers rendered so they're
   scannable at a glance. Pure CSS (bar widths as inline style="width:%"
   from the article's own data), no JS, no images. Each article using
   this sets its own bar widths against its own scale (see the HTML
   comment left in each article's markdown for how the % was derived). */
.b-compare-chart {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  border-radius: 10px;
  padding: 1.25rem 1.5rem 1.5rem;
  margin: 1.75rem 0;
}
.b-compare-chart-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glow);
  margin: 0 0 1.1rem;
}
.b-compare-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0.7rem 0;
}
.b-compare-brand {
  flex: 0 0 5.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--bright);
}
.b-compare-bar-track {
  position: relative;
  flex: 1;
  height: 1.75rem;
  background: rgba(125, 216, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
}
.b-compare-bar {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(125,216,255,0.35), rgba(125,216,255,0.65));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.6rem;
}
/* A second, fainter bar layered behind - used when a brand's coverage is
   a range (e.g. "10-20 years depending on purchase date") rather than a
   single number: the solid bar marks the guaranteed minimum, the fainter
   extension shows how far the best case reaches. */
.b-compare-bar--range-extra {
  background: linear-gradient(90deg, rgba(125,216,255,0.12), rgba(125,216,255,0.3));
}
.b-compare-bar--unknown {
  background: repeating-linear-gradient(45deg, rgba(196,240,255,0.08), rgba(196,240,255,0.08) 6px, rgba(196,240,255,0.03) 6px, rgba(196,240,255,0.03) 12px);
  justify-content: center;
  padding-right: 0;
}
.b-compare-bar-value {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--void);
  font-weight: 700;
  white-space: nowrap;
}
.b-compare-bar--unknown .b-compare-bar-value,
.b-compare-bar--range-extra .b-compare-bar-value {
  color: var(--bright);
  font-weight: 500;
}
.b-compare-chart-note {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 1rem 0 0;
}

/* ─── Article hero icon ──────────────────────────────────────────
   A small appliance-specific badge distinct from the category banner
   above it (which is shared across every article in the category, e.g.
   every warranty-guides article gets the same shield icon) - this one is
   unique per article, giving each guide its own visual identity even
   within a shared category. Sits just above the H1. */
.b-hero-icon {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--glass-mid);
  border: 1px solid var(--glass-border);
}
.b-hero-icon svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--glow);
}

/* ─── Icon list ───────────────────────────────────────────────────
   Replaces a plain bulleted list with an icon + text row for content
   that reads better scanned than read line by line - e.g. "what voids
   your warranty" causes. Each item's icon is inline SVG in the markdown
   itself (kept small and simple, matching the brand's existing line-art
   icon style), not a separate image file. */
.b-icon-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.b-icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
}
.b-icon-list svg {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--glow);
  margin-top: 0.1rem;
}
.b-icon-list-text { font-size: 0.9375rem; color: var(--white); }
.b-icon-list-text strong { color: var(--bright); }

/* ─── Share ──────────────────────────────────────────────────── */
.b-share {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--glass-border);
}
.b-share-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bright);
  margin: 0 0 0.75rem;
}
.b-share-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.b-share-btn {
  display: inline-block;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
}
.b-share-btn:hover { background: var(--glass-mid); text-decoration: none; color: var(--glow); }

/* ─── Related articles ───────────────────────────────────────── */
.b-related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--glass-border);
}
.b-related-label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bright);
  margin: 0 0 1rem;
}
.b-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.b-related-card {
  display: block;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  color: var(--white);
}
.b-related-card:hover { background: var(--glass-mid); text-decoration: none; }
.b-related-card .b-related-cat {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glow);
}
.b-related-card h3 { font-size: 0.9375rem; margin: 0.4rem 0 0; line-height: 1.4; }

/* ─── Prev / next ────────────────────────────────────────────── */
.b-prev-next {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--glass-border);
  font-size: 0.9375rem;
}
.b-prev-next .b-nav-empty { flex: 1; }
.b-prev-next a { flex: 1; }
.b-prev-next .b-next { text-align: right; }
.b-prev-next .b-dir-label {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ─── Blog index / category listing ─────────────────────────── */
.b-index-main h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin: 0.5rem 0 0.5rem;
}
.b-index-intro { color: var(--muted); margin-bottom: 2rem; }

.b-cat-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.b-cat-list a {
  display: inline-block;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.8125rem;
  font-family: var(--font-display);
}
.b-cat-list a:hover { background: var(--glass-mid); text-decoration: none; }

.b-article-list { list-style: none; margin: 0; padding: 0; }
.b-article-list li {
  border-bottom: 1px solid var(--glass-border);
  padding: 1.5rem 0;
}
.b-article-list li:first-child { padding-top: 0; }
.b-article-list a.b-title-link {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--white);
}
.b-article-list a.b-title-link:hover { color: var(--glow); text-decoration: none; }
.b-article-list .b-list-meta {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0.35rem 0 0.5rem;
}
.b-article-list .b-list-desc { color: var(--muted); font-size: 0.9375rem; margin: 0; }
.b-article-list .b-read-more {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--glow);
}
.b-article-list .b-read-more:hover { text-decoration: underline; }

/* ─── Footer ─────────────────────────────────────────────────── */
.b-footer {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--glass-border);
  color: var(--muted);
  font-size: 0.8125rem;
  text-align: center;
}

@media (max-width: 600px) {
  .b-prev-next { flex-direction: column; }
  .b-prev-next .b-next { text-align: left; }
}