/* KeepQR content.css — per-group color + responsive layout for 24 content pages.
   Loaded SECOND after style.css; scoped to .article / [data-group].
   Mobile-first · logical properties · light + dark · WCAG 2.1 AA throughout.
   NO external resources — same-origin + data: URIs only (CSP: style-src 'self').

   Contrast audit (all ≥ 4.5:1 for text, ≥ 3:1 for large graphic):
     compare  light  #1d4ed8 / #eef2ff → 5.99 : 1  ✓
     compare  dark   #93b4ff / #1a2238 → 7.68 : 1  ✓
     seo      light  #0f766e / #ecfdfa → 5.21 : 1  ✓
     seo      dark   #5eead4 / #0c2b28 → 10.20 : 1 ✓
     guide    light  #15803d / #ecfdf5 → 4.76 : 1  ✓
     guide    dark   #86efac / #0c2818 → 11.23 : 1 ✓
     listicle light  #b45309 / #fffbeb → 4.84 : 1  ✓
     listicle dark   #fcd34d / #2a2113 → 10.99 : 1 ✓
   All starting hex values passed — no adjustments required.                     */

/* ─── 1. Per-group color tokens ─────────────────────────────────────────────── */

[data-group="compare"] {
  --group-accent: #1d4ed8;
  --group-tint:   #eef2ff;
  --group-on-btn: #ffffff; /* 6.70 : 1 on #1d4ed8 ✓ */
}

[data-group="seo"] {
  --group-accent: #0f766e;
  --group-tint:   #ecfdfa;
  --group-on-btn: #ffffff; /* 5.47 : 1 on #0f766e ✓ */
}

[data-group="guide"] {
  --group-accent: #15803d;
  --group-tint:   #ecfdf5;
  --group-on-btn: #ffffff; /* 5.02 : 1 on #15803d ✓ */
}

[data-group="listicle"] {
  --group-accent: #b45309;
  --group-tint:   #fffbeb;
  --group-on-btn: #ffffff; /* 5.02 : 1 on #b45309 ✓ */
}

@media (prefers-color-scheme: dark) {
  [data-group="compare"] {
    --group-accent: #93b4ff;
    --group-tint:   #1a2238;
    --group-on-btn: #06122b; /* 9.04 : 1 on #93b4ff ✓ */
  }

  [data-group="seo"] {
    --group-accent: #5eead4;
    --group-tint:   #0c2b28;
    --group-on-btn: #0c1a10; /* 12.12 : 1 on #5eead4 ✓ */
  }

  [data-group="guide"] {
    --group-accent: #86efac;
    --group-tint:   #0c2818;
    --group-on-btn: #0c1a10; /* 12.77 : 1 on #86efac ✓ */
  }

  [data-group="listicle"] {
    --group-accent: #fcd34d;
    --group-tint:   #2a2113;
    --group-on-btn: #1a0e00; /* 13.16 : 1 on #fcd34d ✓ */
  }
}

/* ─── 2. Article shell: widen on desktop without touching other pages ────────── */

/* The body cap is 40rem; we can't override body from here without side-effects.
   Instead we use a negative-margin breakout technique on .article to fill the
   viewport up to 64rem at wider widths.  Non-content pages never load this
   sheet so this is safe. */
.article {
  /* Reserve room for the fixed CTA bar on narrow viewports (see §7).
     Actual value is set dynamically via the .has-fixed-cta class added by JS
     or via the fallback padding below. */
  padding-block-end: var(--cta-bar-height, 4.5rem);
}

@media (min-inline-size: 48rem) {
  /* At this width the body is no longer 40rem-capped — the viewport is wide
     enough that we step out of the column using negative inline margins. */
  .article {
    margin-inline: calc((min(100vw, 64rem) - 40rem) / -2);
    padding-inline: calc((min(100vw, 64rem) - 38rem) / 2);
    padding-block-end: 0; /* CTA is inline/static — no reserved space needed */
    max-inline-size: 64rem;
  }
}

/* ─── 3. Hero band ──────────────────────────────────────────────────────────── */

.article-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  /* Explicit block-size prevents CLS — reserves space before SVG paints. */
  block-size: 6rem;
  background: var(--group-tint);
  color: var(--group-accent);
  border-radius: var(--radius);
  margin-block-end: 1.5rem;
  overflow: hidden;
  position: relative;
  /* Subtle inner border to lift the band off the page bg */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--group-accent) 14%, transparent);
  transition: block-size 0.2s ease;
}

/* Decorative radial glow — the motif sits on a soft spotlight */
.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 50% 50%,
    color-mix(in srgb, var(--group-accent) 10%, transparent) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.hero-motif {
  /* Fixed size prevents CLS; viewBox=0 0 24 24 scales uniformly */
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: var(--group-accent);
  position: relative; /* above ::before */
  flex-shrink: 0;
  opacity: 0.85;
}

@media (min-inline-size: 48rem) {
  .article-hero {
    block-size: 9rem;
    justify-content: flex-end;
    padding-inline-end: 3rem;
  }

  .hero-motif {
    inline-size: 4.5rem;
    block-size: 4.5rem;
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-hero {
    transition: none;
  }
}

/* ─── 4. Article body typography ────────────────────────────────────────────── */

.article-body {
  /* Optimal reading measure — tighter than the 40rem shell for long-form prose */
  max-inline-size: 38rem;
  line-height: 1.75;
  font-size: 1rem;
}

/* Page title — distinct, no group marker */
.article-body h1 {
  font-size: clamp(1.625rem, 4vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-block: 0 0.75rem;
  color: var(--fg);
}

/* Section headings with a group-colored geometric marker via mask.
   The marker is a small filled chevron / right-arrow shape (URL-encoded SVG).
   Using both -webkit-mask-image and mask-image for broad browser compat. */
.article-body h2 {
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-block: 2rem 0.5rem;
  padding-inline-start: 1.375rem;
  position: relative;
  color: var(--fg);
}

.article-body h2::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.2em;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  /* Filled right-pointing chevron — encoded SVG as data URI (no external fetch) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 1l6 5-6 5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 1l6 5-6 5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--group-accent);
  flex-shrink: 0;
}

.article-body p {
  margin-block: 0 1rem;
}

.article-body ul,
.article-body ol {
  padding-inline-start: 1.375rem;
  margin-block: 0 1rem;
}

.article-body li {
  margin-block-end: 0.375rem;
  line-height: 1.6;
}

.article-body a {
  color: var(--group-accent);
  text-underline-offset: 0.2em;
}

.article-body a:hover {
  text-decoration-thickness: 2px;
}

/* ─── 5. Section cards (desktop) ────────────────────────────────────────────── */

/* On mobile: clean vertical flow, no extra chrome.
   On desktop: each h2+following-content block gets a left accent bar. */
@media (min-inline-size: 48rem) {
  /* We can't wrap h2+siblings without JS, so we apply the left bar to h2
     directly as a border and extend it to the content below via a pseudo
     positioned behind the text column. */
  .article-body h2 {
    margin-block-start: 2.5rem;
  }

  /* Subtle left-rail accent that visually groups each section */
  .article-body > h2 {
    border-inline-start: 3px solid var(--group-accent);
    padding-inline-start: 1.875rem;
    /* The ::before chevron stays relative to the padded start */
  }

  .article-body > h2::before {
    inset-inline-start: 0.625rem;
  }
}

/* ─── 6. Callout / blockquote ────────────────────────────────────────────────── */

.article-body blockquote,
.article-body .callout {
  margin-inline: 0;
  margin-block: 1.25rem;
  padding-inline: 1.125rem;
  padding-block: 0.875rem;
  background: var(--group-tint);
  border-inline-start: 3px solid var(--group-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--fg);
}

.article-body blockquote p:last-child,
.article-body .callout p:last-child {
  margin-block-end: 0;
}

/* ─── 7. Tables ──────────────────────────────────────────────────────────────── */

/* Scrollable wrapper prevents viewport overflow on narrow screens */
.article-body table,
.compare-table table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  /* Narrow-screen horizontal scroll */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Restore block width as table element for wide screens */
  white-space: nowrap;
}

/* thead: group-tinted header row */
.article-body table thead th,
.compare-table table thead th {
  background: var(--group-tint);
  color: var(--fg);
  font-weight: 700;
  text-align: start;
  padding-inline: 0.875rem;
  padding-block: 0.625rem;
  border-block-end: 2px solid var(--group-accent);
  white-space: nowrap;
}

/* Row cells */
.article-body table th,
.article-body table td,
.compare-table table th,
.compare-table table td {
  text-align: start;
  padding-inline: 0.875rem;
  padding-block: 0.5625rem;
  border-block-end: 1px solid var(--divider);
  vertical-align: top;
}

.article-body table th[scope="row"],
.compare-table table th[scope="row"] {
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* Zebra rows — even tbody rows get a faint tint */
.article-body table tbody tr:nth-child(even),
.compare-table table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--group-tint) 50%, transparent);
}

/* Emphasise the LAST column (KeepQR) with a subtle accent weight */
.article-body table td:last-child,
.compare-table table td:last-child {
  font-weight: 600;
  color: var(--fg);
}

/* Comparison table caption + figcaption */
.compare-table {
  margin-block: 1.5rem;
  overflow-x: auto;
}

.compare-table table caption {
  caption-side: top;
  text-align: start;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--fg);
  padding-block-end: 0.5rem;
}

.compare-table figcaption {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-block-start: 0.5rem;
}

.compare-table figcaption a {
  color: var(--group-accent);
}

/* On wider screens, restore normal table layout (no forced scroll) */
@media (min-inline-size: 48rem) {
  .article-body table,
  .compare-table table {
    display: table;
    overflow-x: visible;
    white-space: normal;
  }
}

/* ─── 8. CTA — mobile fixed bar + inline on desktop ─────────────────────────── */

.content-cta {
  /* Mobile: full-width fixed bar pinned to the bottom of the viewport */
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 100;
  margin: 0;
  padding-inline: 1rem;
  padding-block: 0.75rem;
  background: var(--bg);
  border-block-start: 1px solid var(--divider);
  /* Subtle shadow to lift bar off page content */
  box-shadow: 0 -2px 12px color-mix(in srgb, var(--fg) 8%, transparent);
}

/* The .article already has padding-block-end: 4.5rem (§2 token) on mobile
   to prevent the last section scrolling under the fixed bar. */

.content-cta .btn {
  /* Override the style.css btn which is 100% inline.  The bar IS full-width
     so the btn fills it naturally, but max-inline-size keeps it from getting
     silly wide if the bar ever wraps at a mid breakpoint. */
  inline-size: 100%;
  max-inline-size: 32rem;
  margin-inline: auto;
  background: var(--group-accent);
  color: var(--group-on-btn);
  border-color: transparent;
  border-radius: var(--radius);
  /* Slightly larger tap target in the fixed bar */
  min-block-size: 48px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.content-cta .btn:hover {
  filter: brightness(1.08);
}

.content-cta .btn:active {
  transform: scale(0.98);
}

@media (min-inline-size: 48rem) {
  /* Desktop: CTA becomes a normal in-flow block — no fixed bar */
  .content-cta {
    position: static;
    inset: unset;
    padding-inline: 0;
    padding-block: 2rem 0;
    background: transparent;
    border-block-start: none;
    box-shadow: none;
  }

  .content-cta .btn {
    inline-size: auto;
    min-inline-size: 14rem;
    padding-inline: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-cta .btn {
    transition: none;
  }
}

/* ─── 9. Responsive typography scale ─────────────────────────────────────────── */

@media (min-inline-size: 48rem) {
  .article-body {
    font-size: 1.0625rem;
    line-height: 1.8;
  }

  .article-body h1 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
  }

  .article-body h2 {
    font-size: 1.3125rem;
  }
}

/* ─── 10. Focus & accessibility ──────────────────────────────────────────────── */

/* Inherit the :focus-visible ring from style.css (outline: 3px solid var(--accent)).
   Override accent with group-accent for in-article links so the ring is
   contextually correct. */
.article-body a:focus-visible {
  outline-color: var(--group-accent);
}

/* Ensure all tappable elements in the article meet the 44px minimum */
.article-body a {
  display: inline; /* keep it inline; tap target from line-height */
}

.content-cta a.btn {
  display: flex; /* already from style.css; belt-and-suspenders */
  min-block-size: 48px; /* ≥ 44px ✓ */
}