/*
 Theme Name:   SavvyKin Child
 Template:     generatepress
 Description:  SavvyKin.com child theme for GeneratePress (free). Core blocks only.
 Version:      0.2.0
 Text Domain:  savvykin-child

 HOW TO USE
 - Paste into savvykin-child/style.css (keep the header above).
 - Self-host fonts in savvykin-child/fonts/ (see design-brief.md section 3).
 - In Customizer > Typography leave GP font families on "System"; this file sets them.
 - In Customizer > Layout > Container: Content width 1200px, Separate containers OFF (one container).
 - Custom classes are added to blocks via Block settings > Advanced > "Additional CSS class(es)".

 CUSTOM CLASS INDEX (all prefixed sk-)
   .sk-hero            Group block   Homepage hero (2 columns inside)
   .sk-proof           Group block   The small sample test-log card used in the hero
   .sk-trust           List block    Trust strip (4 short promises)
   .sk-paths           Columns block Two audience hub cards
   .sk-hubcard         Group block   A hub card (inside .sk-paths or any columns)
   .sk-hubcard--kids / --parents     Color variant
   .sk-latest          List block    "Latest tests" rows
   .sk-steps           List (ordered) "How we test" sequence
   .sk-testlog         Group block   Evidence box. Inner pieces:
       .sk-testlog__facts   Table block (2 columns: label | value) OR a List block
       .sk-testlog__checks  List block (ordered), one item per checkpoint
       .sk-testlog__gaps    Group block  "What we couldn't test"
   .sk-verdict         Group block   Verdict box (heading + paragraph + .sk-proscons)
   .sk-proscons        Columns block  Pros column (.sk-pros) and cons column (.sk-cons), each a List
   .sk-compare         Table block   Mobile-friendly comparison table (sticky first column, scrolls)
   .sk-cta             Buttons block Affiliate CTA (marigold). Add rel="sponsored nofollow" to the link.
   .sk-cta--direct     Buttons block "Not an affiliate link" variant (outlined)
   .sk-cta-note        Paragraph     Small line under a CTA (labels the link type)
   .sk-scam            Group block   Scam of the Week card
   .sk-disclosure      Paragraph     Affiliate disclosure note (top of reviews)
   .sk-sample          Paragraph     "Sample / placeholder" flag for mockups and drafts
   .sk-author          Group block   Team box (brand byline "The SavvyKin team"; .sk-avatar = "SK" monogram)
   .sk-faq             Details blocks wrapper (core/details)
*/

/* ---------- 1. Fonts (self-hosted, SIL OFL 1.1) ---------- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-var.woff2") format("woff2"),
       url("fonts/atkinson-hyperlegible-next-var.woff") format("woff");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-italic-var.woff2") format("woff2"),
       url("fonts/atkinson-hyperlegible-next-italic-var.woff") format("woff");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("fonts/zilla-slab-bold.woff2") format("woff2"),
       url("fonts/zilla-slab-bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  /* Color */
  --sk-paper:        #F3F7F4;  /* page background, cool mint-white */
  --sk-surface:      #FFFFFF;  /* cards, article body */
  --sk-ink:          #15302A;  /* body text, headings */
  --sk-ink-soft:     #3F5550;  /* secondary text (7.4:1 on paper) */
  --sk-pine:         #1B6A4F;  /* links, primary buttons (6.5:1 on white) */
  --sk-pine-deep:    #114A37;  /* hover / pressed */
  --sk-sage:         #E1ECE5;  /* tinted panels */
  --sk-line:         #C3D3CA;  /* borders, rules */
  --sk-marigold:     #F5BA3C;  /* affiliate CTA fill, highlights, tape */
  --sk-marigold-deep:#E3A21C;  /* CTA hover */
  --sk-marigold-wash:#FDF2D6;  /* note backgrounds */
  --sk-alert:        #B3261E;  /* scam / warnings text (6.5:1 on white) */
  --sk-alert-wash:   #FCEBE8;
  --sk-plum:         #5B3F73;  /* "aging parents" path accent (7.3:1 on plum-wash) */
  --sk-plum-wash:    #EFE8F4;
  --sk-focus:        #15302A;  /* focus ring core; paired with marigold halo */
  --sk-footer:       #15302A;  /* footer stays dark in both themes */

  /* Type */
  --sk-font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sk-font-head: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --sk-fs-small: 1rem;        /* 16px - meta only, never body */
  --sk-fs-body:  1.1875rem;   /* 19px */
  --sk-fs-lead:  1.375rem;    /* 22px */
  --sk-fs-h4:    1.25rem;
  --sk-fs-h3:    1.5rem;
  --sk-fs-h2:    clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --sk-fs-h1:    clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);
  --sk-lh-body:  1.6;
  --sk-lh-head:  1.15;
  --sk-measure:  68ch;

  /* Space (8-pt) */
  --sk-s1: .25rem; --sk-s2: .5rem; --sk-s3: .75rem; --sk-s4: 1rem;
  --sk-s5: 1.5rem; --sk-s6: 2rem;  --sk-s7: 3rem;  --sk-s8: 4.5rem;

  /* Shape */
  --sk-r-sm: 6px;   /* test log, tables: paper-like */
  --sk-r-md: 10px;  /* buttons, inputs */
  --sk-r-lg: 18px;  /* hub cards, hero panel */
  --sk-tap: 48px;   /* minimum tap target */
}

/* Optional dark theme: only when the visitor's OS asks for it, and not forced by data-theme="light" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sk-paper: #10201B; --sk-surface: #172A24; --sk-ink: #E8F0EC; --sk-ink-soft: #B5C6BE;
    --sk-pine: #7FD1AE; --sk-pine-deep: #A6E2C8; --sk-sage: #1F362E; --sk-line: #345047;
    --sk-marigold-wash: #3A3018; --sk-alert: #FF9E94; --sk-alert-wash: #3A1E1B;
    --sk-plum: #CDB4E4; --sk-plum-wash: #2C2236; --sk-focus: #F5BA3C; --sk-footer: #0B1713;
  }
}
:root[data-theme="dark"] {
  --sk-paper: #10201B; --sk-surface: #172A24; --sk-ink: #E8F0EC; --sk-ink-soft: #B5C6BE;
  --sk-pine: #7FD1AE; --sk-pine-deep: #A6E2C8; --sk-sage: #1F362E; --sk-line: #345047;
  --sk-marigold-wash: #3A3018; --sk-alert: #FF9E94; --sk-alert-wash: #3A1E1B;
  --sk-plum: #CDB4E4; --sk-plum-wash: #2C2236; --sk-focus: #F5BA3C; --sk-footer: #0B1713;
}

/* ---------- 3. GeneratePress base overrides ---------- */
body {
  background: var(--sk-paper);
  color: var(--sk-ink);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-body);
  line-height: var(--sk-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .entry-title, .main-title {
  font-family: var(--sk-font-head);
  font-weight: 700;
  line-height: var(--sk-lh-head);
  color: var(--sk-ink);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1, .entry-title { font-size: var(--sk-fs-h1); margin-bottom: var(--sk-s4); }
h2 { font-size: var(--sk-fs-h2); margin: var(--sk-s7) 0 var(--sk-s4); }
h3 { font-size: var(--sk-fs-h3); margin: var(--sk-s6) 0 var(--sk-s3); }
h4 { font-size: var(--sk-fs-h4); margin: var(--sk-s5) 0 var(--sk-s2); }
p, li { text-wrap: pretty; }
.entry-content > p, .entry-content > ul, .entry-content > ol { max-width: var(--sk-measure); }
/* Posts run without a sidebar at launch: keep the article column readable and centred */
body.single.no-sidebar .site-main { max-width: 860px; margin-left: auto; margin-right: auto; }
/* Breadcrumbs printed by functions.php (Rank Math) */
.sk-crumbs { font-size: var(--sk-fs-small); color: var(--sk-ink-soft); margin: 0 0 var(--sk-s4); }
.sk-crumbs a { color: var(--sk-ink-soft); }
/* Legal links in the footer bar (functions.php) */
.sk-legal { display: inline-flex; flex-wrap: wrap; gap: var(--sk-s4); margin-left: var(--sk-s4); }
.sk-legal a { min-height: var(--sk-tap); display: inline-flex; align-items: center; }

a { color: var(--sk-pine); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--sk-pine-deep); text-decoration-thickness: 3px; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sk-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--sk-marigold);
  border-radius: 4px;
}

/* Header */
.site-header { background: var(--sk-surface); border-bottom: 1px solid var(--sk-line); }
.inside-header { padding-top: var(--sk-s4); padding-bottom: var(--sk-s4); }
.site-logo img, .sk-wordmark { height: 40px; width: auto; }
.main-navigation, .main-navigation ul ul { background: transparent; }
.main-navigation .main-nav ul li a {
  color: var(--sk-ink); font-weight: 600; font-size: 1.0625rem;
  line-height: var(--sk-tap); padding-left: var(--sk-s3); padding-right: var(--sk-s3);
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--sk-pine); text-decoration: underline; text-underline-offset: 6px; }
.menu-toggle { min-height: var(--sk-tap); font-size: 1.0625rem; font-weight: 600; color: var(--sk-ink); }
/* Six hub links in the primary menu. Between tablet and small desktop the menu drops to its own row
   instead of overflowing (GP free has no mobile-breakpoint setting; GP's own mobile menu takes over at 768px). */
@media (min-width: 769px) and (max-width: 1100px) {
  .inside-header { flex-wrap: wrap; row-gap: var(--sk-s1); }
  .main-navigation { flex-basis: 100%; }
  .main-navigation .main-nav > ul { flex-wrap: wrap; justify-content: flex-start; }
  .main-navigation .main-nav ul li a { font-size: 1rem; padding-left: var(--sk-s2); padding-right: var(--sk-s2); }
}

/* Article container */
.separate-containers .inside-article, .one-container .site-content { background: var(--sk-surface); }
.inside-article { padding: var(--sk-s7) var(--sk-s6); border-radius: var(--sk-r-lg); }
.entry-meta { color: var(--sk-ink-soft); font-size: var(--sk-fs-small); }

/* Core buttons (non-affiliate, e.g. "Read the review") */
.wp-block-button__link, .button, button, input[type="submit"] {
  font-family: var(--sk-font-body); font-weight: 700; font-size: 1.125rem;
  min-height: var(--sk-tap); padding: .75rem 1.375rem; border-radius: var(--sk-r-md);
  background: var(--sk-pine); color: #fff; border: 2px solid var(--sk-pine);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.wp-block-button__link:hover, .button:hover { background: var(--sk-pine-deep); border-color: var(--sk-pine-deep); color: #fff; }
.is-style-outline > .wp-block-button__link { background: transparent; color: var(--sk-pine); }

/* Footer */
.site-footer { background: var(--sk-footer); color: #DCE8E2; }
.site-footer a { color: #fff; }
.site-info { background: transparent; color: #C4D4CC; font-size: var(--sk-fs-small); }

/* ---------- 4. Components ---------- */

/* 4.1 Hero */
.sk-hero { padding: var(--sk-s7) 0 var(--sk-s6); }
.sk-hero h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); max-width: 16ch; margin-top: 0; }
.sk-hero .sk-lead { font-size: var(--sk-fs-lead); color: var(--sk-ink-soft); max-width: 34ch; }
.sk-hero .wp-block-buttons { gap: var(--sk-s3); margin-top: var(--sk-s5); }

/* 4.2 Proof card (hero sample of a test log) */
.sk-proof {
  position: relative; background: var(--sk-surface); border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-sm); padding: var(--sk-s6) var(--sk-s5) var(--sk-s5);
  box-shadow: 8px 8px 0 var(--sk-sage);
}
.sk-proof::before { /* the strip of tape */
  content: ""; position: absolute; top: -12px; left: 28px; width: 112px; height: 24px;
  background: var(--sk-marigold); opacity: .9; transform: rotate(-3deg); border-radius: 2px;
}

/* 4.3 Trust strip */
.sk-trust {
  list-style: none; margin: 0; padding: var(--sk-s5) 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sk-s5);
  border-top: 2px solid var(--sk-ink); border-bottom: 1px solid var(--sk-line);
}
.sk-trust li { margin: 0; padding-left: 2.25rem; position: relative; font-size: 1.0625rem; line-height: 1.45; }
.sk-trust li strong { display: block; font-size: var(--sk-fs-body); }
.sk-trust li::before {
  content: ""; position: absolute; left: 0; top: .2rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--sk-pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* 4.4 Hub cards */
.sk-paths { gap: var(--sk-s5); }
.sk-hubcard {
  border-radius: var(--sk-r-lg); padding: var(--sk-s6); height: 100%;
  background: var(--sk-sage); border: 2px solid transparent;
}
.sk-hubcard--parents { background: var(--sk-plum-wash); }
.sk-hubcard > :first-child, .sk-scam > :first-child, .sk-verdict > :first-child, .sk-proof > :first-child { margin-top: 0; }
.sk-hubcard h3 { margin-top: 0; font-size: 1.75rem; }
.sk-hubcard .sk-who { font-weight: 700; color: var(--sk-pine); margin-bottom: var(--sk-s2); }
.sk-hubcard--parents .sk-who { color: var(--sk-plum); }
.sk-hubcard ul { list-style: none; margin: var(--sk-s4) 0 0; padding: 0; }
.sk-hubcard li { margin: 0; border-top: 1px solid rgba(21,48,42,.15); }
.sk-hubcard li a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sk-s3);
  min-height: 56px; padding: var(--sk-s2) 0; color: var(--sk-ink); font-weight: 600; text-decoration: none;
}
.sk-hubcard li a::after { content: "\203A"; font-size: 1.75rem; line-height: 1; color: var(--sk-pine); }
.sk-hubcard--parents li a::after { color: var(--sk-plum); }
.sk-hubcard li a:hover { text-decoration: underline; }

/* 4.5 Latest tests rows */
.sk-latest { list-style: none; margin: 0; padding: 0; }
.sk-latest li { display: grid; grid-template-columns: 1fr auto; gap: var(--sk-s1) var(--sk-s4); padding: var(--sk-s4) 0; border-bottom: 1px solid var(--sk-line); margin: 0; }
.sk-latest a { font-weight: 700; font-size: 1.25rem; color: var(--sk-ink); }
.sk-latest .sk-meta { grid-column: 1; color: var(--sk-ink-soft); font-size: 1.0625rem; }
.sk-status { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 1rem; font-weight: 700; padding: .3rem .75rem; border-radius: 999px; background: var(--sk-sage); color: var(--sk-pine-deep); white-space: nowrap; }
.sk-status--running { background: var(--sk-marigold-wash); color: #6B4A00; }

/* 4.6 How we test (real sequence, so numbers are meaningful) */
.sk-steps { counter-reset: sk; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sk-s4); }
.sk-steps li { counter-increment: sk; margin: 0; padding-top: var(--sk-s4); border-top: 3px solid var(--sk-pine); font-size: 1.0625rem; }
.sk-steps li::before { content: counter(sk); display: block; font-family: var(--sk-font-head); font-weight: 700; font-size: 2rem; color: var(--sk-pine); line-height: 1; margin-bottom: var(--sk-s2); }
.sk-steps strong { display: block; font-size: var(--sk-fs-body); }

/* 4.7 TEST LOG - the signature component */
.sk-testlog {
  position: relative; margin: var(--sk-s6) 0; background: var(--sk-surface);
  border: 2px solid var(--sk-ink); border-radius: var(--sk-r-sm);
  box-shadow: 8px 8px 0 var(--sk-sage);
}
.sk-testlog__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sk-s2) var(--sk-s4);
  padding: var(--sk-s4) var(--sk-s5); background: var(--sk-marigold); border-bottom: 2px solid var(--sk-ink);
}
.sk-testlog__head h2, .sk-testlog__head h3 { margin: 0; font-size: 1.5rem; }
.sk-testlog__head p { margin: 0; font-weight: 600; }
.sk-testlog__body { padding: var(--sk-s5); }
.sk-testlog__facts { width: 100%; border-collapse: collapse; margin: 0 0 var(--sk-s5); }
.sk-testlog__facts table { width: 100%; border-collapse: collapse; }
.sk-testlog__facts th, .sk-testlog__facts td { text-align: left; vertical-align: top; padding: .625rem 0; border: 0; border-bottom: 1px dashed var(--sk-line); }
.sk-testlog__facts th { width: 38%; padding-right: var(--sk-s4); font-weight: 600; color: var(--sk-ink-soft); }
.sk-testlog__facts td { font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-testlog__label, .sk-testlog h4 { margin: var(--sk-s5) 0 var(--sk-s3); font-family: var(--sk-font-body); font-size: var(--sk-fs-body); }
.sk-testlog__checks { list-style: none; margin: 0; padding: 0 0 0 var(--sk-s5); border-left: 3px solid var(--sk-pine); }
.sk-testlog__checks li { position: relative; margin: 0 0 var(--sk-s4); }
.sk-testlog__checks li::before { content: ""; position: absolute; left: calc(-1 * var(--sk-s5) - 10px); top: .45rem; width: 17px; height: 17px; border-radius: 50%; background: var(--sk-surface); border: 3px solid var(--sk-pine); }
.sk-testlog__checks .sk-when { display: block; font-weight: 700; color: var(--sk-pine-deep); font-size: 1.0625rem; }
.sk-testlog__checks .sk-evidence { font-size: 1.0625rem; }
.sk-testlog__gaps { margin-top: var(--sk-s5); padding: var(--sk-s4) var(--sk-s5); border: 2px dashed var(--sk-ink-soft); border-radius: var(--sk-r-sm); background: var(--sk-paper); }
.sk-testlog__gaps h3, .sk-testlog__gaps h4 { margin-top: 0; font-family: var(--sk-font-body); font-size: var(--sk-fs-body); }
.sk-testlog__gaps ul { margin: 0; padding-left: 1.25rem; }

/* 4.8 Verdict box + pros/cons */
.sk-verdict { margin: var(--sk-s6) 0; padding: var(--sk-s5) var(--sk-s6) var(--sk-s6); background: var(--sk-sage); border-radius: var(--sk-r-lg); border-left: 8px solid var(--sk-pine); }
.sk-verdict h2 { margin-top: 0; font-size: 1.75rem; }
.sk-verdict .sk-bottomline { font-size: var(--sk-fs-lead); line-height: 1.5; max-width: 60ch; }
.sk-bestfor { display: flex; flex-wrap: wrap; gap: var(--sk-s2); list-style: none; padding: 0; margin: var(--sk-s4) 0; }
.sk-bestfor li { margin: 0; padding: .35rem .875rem; background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: 999px; font-size: 1.0625rem; font-weight: 600; }
.sk-proscons { gap: var(--sk-s4); margin-top: var(--sk-s5); }
.sk-pros, .sk-cons { background: var(--sk-surface); border-radius: var(--sk-r-md); padding: var(--sk-s4) var(--sk-s5); }
.sk-pros h3, .sk-cons h3 { margin: 0 0 var(--sk-s3); font-family: var(--sk-font-body); font-size: var(--sk-fs-body); }
.sk-pros ul, .sk-cons ul { list-style: none; margin: 0; padding: 0; }
.sk-pros li, .sk-cons li { position: relative; padding-left: 2rem; margin-bottom: var(--sk-s3); }
.sk-pros li::before, .sk-cons li::before { position: absolute; left: 0; top: 0; font-weight: 800; font-size: 1.25rem; line-height: 1.5; }
.sk-pros li::before { content: "+"; color: var(--sk-pine); }
.sk-cons li::before { content: "\2212"; color: var(--sk-alert); }

/* 4.9 Comparison table (core Table block + .sk-compare) */
.wp-block-table.sk-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--sk-s5) 0; border: 1px solid var(--sk-line); border-radius: var(--sk-r-sm); background: var(--sk-surface); }
.sk-compare table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; font-size: 1.0625rem; }
.sk-compare th, .sk-compare td { border: 0; border-bottom: 1px solid var(--sk-line); padding: .875rem 1rem; text-align: left; vertical-align: top; }
.sk-compare thead th { background: var(--sk-ink); color: var(--sk-surface); font-weight: 700; }
.sk-compare tbody tr:nth-child(even) td, .sk-compare tbody tr:nth-child(even) th { background: var(--sk-paper); }
.sk-compare tbody th, .sk-compare td:first-child { font-weight: 700; }
.sk-compare th:first-child, .sk-compare td:first-child { position: sticky; left: 0; z-index: 1; background: var(--sk-surface); box-shadow: 2px 0 0 var(--sk-line); width: 10rem; min-width: 8.5rem; }
.sk-compare thead th:first-child { background: var(--sk-ink); }
.sk-compare figcaption, .sk-compare + .sk-scrollhint { font-size: var(--sk-fs-small); color: var(--sk-ink-soft); }

/* 4.10 CTA buttons */
.sk-cta .wp-block-button__link {
  background: var(--sk-marigold); color: var(--sk-ink); border: 2px solid var(--sk-ink);
  font-size: 1.1875rem; padding: .875rem 1.5rem; min-height: 56px; box-shadow: 4px 4px 0 var(--sk-ink);
}
.sk-cta .wp-block-button__link:hover { background: var(--sk-marigold-deep); color: var(--sk-ink); border-color: var(--sk-ink); }
.sk-cta .wp-block-button__link:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--sk-ink); }
.sk-cta--direct .wp-block-button__link { background: var(--sk-surface); color: var(--sk-pine-deep); border: 2px solid var(--sk-pine); box-shadow: none; }
.sk-cta--direct .wp-block-button__link:hover { background: var(--sk-sage); color: var(--sk-pine-deep); }
.sk-cta-note { font-size: var(--sk-fs-small); color: var(--sk-ink-soft); margin-top: var(--sk-s2); }

/* 4.11 Scam of the Week */
.sk-scam { background: var(--sk-surface); border: 2px solid var(--sk-alert); border-radius: var(--sk-r-lg); padding: var(--sk-s5) var(--sk-s6); }
.sk-scam .sk-scam__tag { display: inline-block; margin: 0 0 var(--sk-s3); padding: .25rem .75rem; background: var(--sk-alert-wash); color: var(--sk-alert); font-weight: 700; border-radius: 999px; font-size: 1rem; }
.sk-scam h3 { margin-top: 0; }
.sk-scam blockquote, .sk-scam .wp-block-quote { margin: var(--sk-s4) 0; padding: var(--sk-s4); background: var(--sk-paper); border-left: 4px solid var(--sk-alert); font-style: normal; border-radius: 0 var(--sk-r-sm) var(--sk-r-sm) 0; }
.sk-scam .sk-tell { font-weight: 700; }

/* 4.12 Disclosure + sample flag */
.sk-disclosure { font-size: 1.0625rem; background: var(--sk-marigold-wash); border-radius: var(--sk-r-md); padding: var(--sk-s3) var(--sk-s4); max-width: none; }
.sk-sample { background: var(--sk-ink); color: var(--sk-surface); font-weight: 700; padding: var(--sk-s3) var(--sk-s4); border-radius: var(--sk-r-md); }

/* 4.13 Author box + FAQ */
.sk-author { display: flex; gap: var(--sk-s4); align-items: flex-start; padding: var(--sk-s5) 0; margin-top: var(--sk-s6); border-top: 2px solid var(--sk-ink); }
.sk-author p { margin: var(--sk-s1) 0 0; }
.sk-avatar { flex: 0 0 64px; height: 64px; border-radius: 50%; background: var(--sk-sage); display: grid; place-items: center; font-family: var(--sk-font-head); font-weight: 700; font-size: 1.375rem; color: var(--sk-pine); }
.sk-faq .wp-block-details { border-bottom: 1px solid var(--sk-line); padding: 0; }
.sk-faq summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--sk-s4); font-weight: 700; cursor: pointer; padding: var(--sk-s3) 0; list-style: none; }
.sk-faq summary::-webkit-details-marker { display: none; }
.sk-faq summary::after { content: "+"; flex: 0 0 auto; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--sk-sage); color: var(--sk-pine-deep); font-size: 1.375rem; line-height: 1; }
.sk-faq details[open] > summary::after { content: "\2212"; }

/* ---------- 5. Mobile (375px target) ---------- */
@media (max-width: 1024px) {
  .sk-steps { grid-template-columns: repeat(2, 1fr); }
  .sk-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  body { font-size: 1.125rem; }               /* 18px floor */
  .inside-article { padding: var(--sk-s5) var(--sk-s4); border-radius: 0; }
  .sk-hero { padding: var(--sk-s5) 0; }
  .sk-hero .wp-block-buttons, .sk-hero .wp-block-button { width: 100%; }
  .sk-hero .wp-block-button__link { width: 100%; }
  .sk-trust, .sk-steps { grid-template-columns: 1fr; }
  .sk-hubcard, .sk-scam { padding: var(--sk-s5) var(--sk-s4); }
  .sk-verdict { padding: var(--sk-s4) var(--sk-s4) var(--sk-s5); border-left-width: 6px; }
  .sk-testlog { box-shadow: 4px 4px 0 var(--sk-sage); margin-left: 0; margin-right: 4px; }
  .sk-testlog__body { padding: var(--sk-s4); }
  .sk-testlog__facts th, .sk-testlog__facts td { display: block; width: auto; padding: 0; border: 0; }
  .sk-testlog__facts tr { display: block; padding: .5rem 0; border-bottom: 1px dashed var(--sk-line); }
  .sk-cta .wp-block-button, .sk-cta .wp-block-button__link { width: 100%; }
  .sk-compare table { min-width: 560px; font-size: 1rem; }
  .sk-compare th, .sk-compare td { padding: .75rem; }
  .sk-compare th:first-child, .sk-compare td:first-child { width: 8.5rem; }
  .sk-latest li { grid-template-columns: 1fr; }
  .sk-status { grid-row: auto; grid-column: 1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .sk-cta, .main-navigation, .site-footer { display: none; }
  .sk-testlog { box-shadow: none; }
}