/* Kerb Wise — long-form page components
   Provider reviews, comparisons, "best for" pages, guides and legal
   pages. Built on the tokens at the top of site.css. These pages used
   to carry their look in inline styles; style them here, never inline. */

/* ---------- Layout ---------- */

.kw-article,
.kw-section {
  max-width: var(--kw-module);
  margin: 0 auto 56px;
}

.kw-section > :last-child,
.kw-box > :last-child,
.kw-watch > :last-child,
.kw-aside > :last-child,
.kw-faq > :last-child {
  margin-bottom: 0;
}

.kw-section p,
.kw-article p {
  margin: 0 0 16px;
}

.kw-section h2,
.kw-article h2 {
  margin: 0 0 20px;
  color: var(--kw-ink);
}

.kw-section h3,
.kw-article h3 {
  margin: 32px 0 10px;
  color: var(--kw-ink);
}

.kw-section h2 + h3 {
  margin-top: 8px;
}

.kw-section ul:not([class]),
.kw-section ol:not([class]),
.kw-article ul:not([class]) {
  margin: 0 0 16px;
  padding-left: 24px;
}

.kw-section li + li {
  margin-top: 6px;
}

.kw-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

.kw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px;
  margin: 0 0 24px;
}

.kw-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
}

.kw-row-start {
  justify-content: flex-start;
  gap: 12px;
}

.kw-tag-row,
.kw-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

ul.kw-pill-row {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ---------- Review hero (chip strip + H1 inside .wb-hero) ---------- */

.kw-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.kw-review-hero h1 {
  margin-bottom: 0;
}

/* ---------- Photo ---------- */

/* One photo under the hero, at the module width. Unsplash
   photos are hotlinked from images.unsplash.com and credited in the
   caption, as Unsplash's API terms require. */
.kw-photo {
  margin: -16px 0 48px;
}

.kw-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--kw-radius-lg);
  background: var(--kw-cream);
}

.kw-photo figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--kw-muted);
}

.kw-photo figcaption a {
  color: inherit;
}

@media (max-width: 781px) {
  .kw-photo {
    margin: -8px 0 40px;
  }

  .kw-photo img {
    border-radius: var(--kw-radius-md);
  }
}

/* ---------- Small type ---------- */

.kw-kicker {
  display: block;
  margin: 0 0 8px;
}

.kw-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--wp--preset--color--mint, #DDF1E6);
  color: var(--kw-green);
  font-size: 14px;
  font-weight: 800;
}

.kw-meta,
.kw-muted {
  color: var(--kw-muted);
}

.kw-small {
  font-size: 14px;
  line-height: 1.6;
  color: var(--kw-muted);
}

.kw-intro {
  font-size: 20px;
  line-height: 1.6;
}

.kw-lead {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 26px);
  line-height: 1.3;
  color: var(--kw-ink);
}

.kw-figure {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--kw-ink);
  margin: 0 0 4px !important;
}

.kw-score {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--kw-green);
}

.kw-score-lg {
  font-size: 44px;
}

.kw-score-link {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
}

.kw-win,
.kw-link-strong {
  font-weight: 700;
  color: var(--kw-green);
}

.kw-cons {
  color: var(--kw-coral-deep) !important;
}

.kw-tick,
.kw-cross {
  flex-shrink: 0;
  font-weight: 800;
  color: var(--kw-green);
}

.kw-cross {
  color: var(--kw-coral-deep);
}

/* Star glyphs sit next to the numeric rating, which carries the meaning */
.kw-stars {
  color: #C27C0E;
}

.kw-stars-lg {
  font-size: 22px;
  letter-spacing: 1px;
}

.kw-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 12px;
}

/* ---------- Pills (rating badges, jump links) ---------- */

.kw-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--kw-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
}

a.kw-pill {
  transition: background 0.2s var(--kw-ease);
}

a.kw-pill:hover {
  background: var(--wp--preset--color--mint, #DDF1E6);
  color: var(--kw-ink);
}

.wb-hero .kw-pill,
.kw-verdict-final .kw-pill {
  background: rgba(253, 249, 240, 0.16);
  color: var(--kw-cream);
}

/* ---------- Boxes ---------- */

.kw-box {
  background: #ffffff;
  border-radius: var(--kw-radius-lg);
  padding: 28px;
}

.kw-box-sm {
  border-radius: var(--kw-radius-md);
  padding: 20px;
}

.kw-box-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 24px !important;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 14px !important;
}

.kw-checklist,
.kw-plain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kw-checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.kw-plain-list {
  gap: 8px;
  font-size: 16px;
}

.kw-plain-list li {
  margin: 0;
}

/* A tinted note: the old grey boxes */
.kw-aside {
  background: var(--wp--preset--color--butter, #FBF1CF);
  border-radius: var(--kw-radius-lg);
  padding: clamp(24px, 4vw, 36px);
}

/* ---------- Verdicts ---------- */

/* Opening verdict: mint, with the score on the right */
.kw-verdict {
  background: var(--wp--preset--color--mint, #DDF1E6);
  border-radius: var(--kw-radius-lg);
  padding: clamp(28px, 5vw, 44px);
}

.kw-verdict .kw-row {
  margin-bottom: 20px;
}

/* Closing verdict: the green field, with the roundabout ring */
.kw-verdict-final,
.kw-cta-band {
  position: relative;
  overflow: hidden;
  background: var(--kw-green);
  color: var(--kw-on-green);
  border-radius: var(--kw-radius-xl);
  padding: clamp(32px, 5vw, 48px);
}

.kw-verdict-final::before,
.kw-cta-band::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -120px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 34px solid var(--kw-coral);
  box-sizing: border-box;
  pointer-events: none;
}

.kw-verdict-final > *,
.kw-cta-band > * {
  position: relative;
}

/* Keep the first lines clear of the ring */
.kw-verdict-final .kw-row,
.kw-verdict-final > .kw-lead {
  padding-right: 120px;
}

.kw-verdict-final .label-caps,
.kw-verdict-final .kw-kicker,
.kw-cta-band .label-caps {
  color: var(--kw-on-green);
}

.kw-verdict-final .kw-score,
.kw-verdict-final .kw-lead,
.kw-verdict-final h2,
.kw-verdict-final h3,
.kw-cta-band h2 {
  color: var(--kw-cream);
}

.kw-verdict-final a,
.kw-cta-band a:not(.wb-button) {
  color: var(--kw-cream);
}

.kw-verdict-final .material-symbols-outlined {
  color: var(--kw-coral);
}

.kw-verdict-final .kw-tag,
.wb-hero .kw-tag {
  background: rgba(253, 249, 240, 0.16);
  color: var(--kw-cream);
}

.kw-verdict-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(253, 249, 240, 0.2);
}

.kw-cta-band {
  text-align: center;
  margin: 0 0 40px;
}

.kw-cta-band .wb-button {
  background: var(--kw-cream);
  color: var(--kw-green) !important;
}

/* ---------- Hero overrides ---------- */

.wb-hero .label-caps,
.wb-hero .kw-meta {
  color: var(--kw-on-green);
}

.wb-hero.wp-block-group > * {
  margin-top: 0;
}

.wb-hero.wp-block-group > h1 {
  margin: 12px 0 24px;
}

/* ---------- What to watch for, notes ---------- */

.kw-watch {
  background: #fbe5c2;
  color: #3b2a00;
  border-radius: var(--kw-radius-lg);
  padding: clamp(24px, 4vw, 32px);
  margin: 0 0 20px;
}

.kw-watch h2,
.kw-watch h3,
.kw-watch a,
.kw-watch strong {
  color: #3b2a00;
}

.kw-watch .label-caps,
.kw-watch .kw-kicker {
  color: #6b4700;
}

.kw-watch-quote {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 21px;
  font-style: italic;
  line-height: 1.45;
}

.kw-watch-quote p {
  margin: 0 0 12px;
}

.kw-note {
  background: var(--wp--preset--color--mint, #DDF1E6);
  border-radius: var(--kw-radius-lg);
  padding: clamp(24px, 4vw, 32px);
}

/* Icon callouts in guides: icon beside the text on desktop. Mobile is
   the shared .kw-icon-card rule in site.css. */
.kw-watch-icon {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.kw-watch-icon .kw-icon-mark {
  flex-shrink: 0;
  font-size: 30px;
  line-height: 1.2;
  color: #6b4700;
}

.kw-note .kw-icon-mark {
  color: var(--kw-green);
}

.kw-watch-icon h3 {
  margin-top: 0;
}

/* ---------- FAQs ---------- */

.kw-faq {
  background: #ffffff;
  border-radius: var(--kw-radius-md);
  padding: 0;
  margin: 0 0 12px;
}

.kw-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 16px 24px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--kw-ink);
  cursor: pointer;
  list-style: none;
}

.kw-faq summary::-webkit-details-marker {
  display: none;
}

.kw-faq summary::after {
  content: "+";
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wp--preset--color--mint, #DDF1E6);
  color: var(--kw-green);
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--kw-ease);
}

.kw-faq[open] summary::after {
  content: "−";
}

.kw-faq > :not(summary) {
  margin: 0;
  padding: 0 24px 20px;
  color: var(--kw-muted);
}

/* ---------- Tables ---------- */

.kw-table-frame {
  background: #ffffff;
  border-radius: var(--kw-radius-md);
  overflow: hidden;
  margin: 16px 0;
}

.kw-table-frame table {
  width: 100%;
  border-collapse: collapse;
}

.kw-table-frame th {
  text-align: left;
  padding: 14px 18px;
  background: var(--wp--preset--color--mint, #DDF1E6);
  color: var(--kw-green);
  font-size: 13px;
  font-weight: 800;
}

.kw-table-frame td {
  padding: 14px 18px;
  font-size: 15px;
  border-top: 1px solid #f0ece1;
}

.kw-num {
  text-align: right !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

tr.kw-total {
  background: var(--wp--preset--color--butter, #FBF1CF) !important;
  font-weight: 700;
}

tr.kw-highlight {
  background: var(--wp--preset--color--mint, #DDF1E6) !important;
}

tr.kw-highlight-warn {
  background: #fbe5c2 !important;
}

/* ---------- Phone ---------- */

@media (max-width: 781px) {
  .kw-section {
    margin-bottom: 40px;
  }

  .kw-box {
    padding: 22px 20px;
  }

  .kw-verdict-final .kw-row,
  .kw-verdict-final > .kw-lead {
    padding-right: 56px;
  }

  .kw-verdict-final::before,
  .kw-cta-band::before {
    right: -80px;
    top: -80px;
    width: 150px;
    height: 150px;
    border-width: 26px;
  }

  .kw-faq summary {
    font-size: 19px;
    padding: 14px 18px;
  }

  .kw-faq > :not(summary) {
    padding: 0 18px 18px;
  }

  .kw-table-frame th,
  .kw-table-frame td {
    padding: 12px 12px;
  }
}