/* ==========================================================================
   KF Elements — CTA Band
   --------------------------------------------------------------------------
   The band is centred by AUTO MARGINS, which no custom property can undo, so
   `head_align: left` arrives as the class `head-left` the render adds from the
   stored frame value (ADR-0004's w2.kfe-bands.1 section). Everything else the
   frame moves arrives as a token, each read carrying today's value as its
   fallback, so a band that sets nothing renders exactly as 0.11.0 drew it.

   The title's level is a control (`header_size`). At h2 — the released default
   — the widget still prints a BARE <h2> with no class, so every rule on the
   title pairs the tag with the class the other levels carry, and the two stay
   IN STEP (ADR-0002 decision 7; testimonials.css has the same pairing).
   ========================================================================== */

.kfe .kfe-cta { text-align: var(--kfe-head-align, center); }
.kfe .kfe-cta .kfe-cta-logo { height: 120px; width: auto; margin: 0 auto 34px; }
.kfe .kfe-cta h2,
.kfe .kfe-cta .kfe-cta-title {
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(2.2rem, 5.5vw, 4.2rem)));
  line-height: 1.06;
  max-width: var(--kfe-title-measure, 18ch);
  margin: 0 auto;
}
/* The class-only rules restate what base.css's `.kfe h2` gives the bare tag,
   including the dark flip `.kfe .kfe-dark h2`. They are listed separately and
   never merged into the paired rule above, because a merged rule would outrank
   that flip and repaint every dark band. */
.kfe .kfe-cta .kfe-cta-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  letter-spacing: -0.01em;
  color: var(--kfe-heading, var(--kfe-primary));
}
.kfe .kfe-cta.kfe-dark .kfe-cta-title { color: #fff; }

.kfe .kfe-cta .body {
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, 18px);
  margin: 26px auto 0;
  max-width: var(--kfe-body-measure, 42ch);
}
/* Rich body (ADR-0003 decision 3): base.css's `.kfe p { margin: 0 }` keeps a
   single paragraph flush but gives a second one no spacing, and nothing in the
   pack styled an allow-listed list. The band is centred, so the list is not. */
.kfe .kfe-cta .body p + p { margin-top: 16px; }
.kfe .kfe-cta .body ul, .kfe .kfe-cta .body ol { margin: 16px 0 0; padding-inline-start: var(--kfe-list-indent); text-align: start; }
.kfe .kfe-cta .body li + li { margin-top: 6px; }
/* The gap above the actions is a token read with today's 44px as its fallback
   (w2.homepack.1): a band with no heading and no body — the strip the rating
   chip is drawn in — sets it to 0 where it keeps its tokens, and a band that
   sets nothing computes 44px exactly as before. */
.kfe .kfe-cta .actions { margin-top: var(--kfe-cta-actions-gap, 44px); }
/* Two actions — the tracked CTA and the plain link — print as two anchors
   with no whitespace between them, so as inline-blocks they touched: edge to
   edge on a desktop and stacked with no space on a phone, where the rule
   below makes each button full width. A row holding TWO anchors becomes the
   flex row CTA Row draws (cta-row.css: 16px gap, centred items) and Split
   Media's two actions use (`:has(> a + a)`); a band with one action matches
   nothing here and keeps today's layout exactly. The row follows the band's
   alignment: centred, or at the start under `head-left`. */
.kfe .kfe-cta .actions:has(> a + a) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.kfe .kfe-cta.head-left .actions:has(> a + a) { justify-content: flex-start; }

/* The note under the actions. PLAIN TEXT from the widget (see class-cta.php).
   12.5px is this look's own geometry as the reference draws it (post-323 :501),
   not a site-level size, so it is a literal rather than a token — ADR-0004
   decision 2's "small fixed geometry as the reference draws it". */
.kfe .kfe-cta .kfe-cta-note {
  color: var(--kfe-body, var(--kfe-muted));
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 16px;
}

/* Start-aligned: the ONE thing a token cannot do. The heading, the body and
   the logo are each centred by `margin: … auto …`, so the class zeroes the
   inline margins and leaves every block margin where it was. */
.kfe .kfe-cta.head-left h2,
.kfe .kfe-cta.head-left .kfe-cta-title,
.kfe .kfe-cta.head-left .body,
.kfe .kfe-cta.head-left .kfe-cta-logo { margin-inline: 0; }

/* dark-ground flips. MEASURED, and the reason `body_color` is re-pointed in
   class-cta.php rather than read here: a site token map declares `--kfe-body`
   for the whole site (the reference site's map sets it to `var(--kfe-muted)`), so a
   rule that READ the token on a dark ground would paint the site's light-ground
   body colour over every accent band — on the harness, muted grey on navy. The
   flip therefore keeps the released value, and the frame's per-instance control
   reaches the copy through its own selector instead. */
.kfe .kfe-cta.kfe-dark .body { color: var(--kfe-on-dark); }
/* The note keeps the soft on-dark accent even where the body colour is set:
   the reference draws the two differently (post-323 :498-502). */
.kfe .kfe-cta.kfe-dark .kfe-cta-note { color: var(--kfe-on-dark-soft); }

@media (max-width: 560px) {
  .kfe .kfe-cta .actions .kfe-btn { display: block; width: 100%; }
}

/* ==========================================================================
   The rating chip and the phone line (w2.homepack.1)
   --------------------------------------------------------------------------
   Two parts printed between the actions and the note, each only when its own
   control is set, under classes no released band carries — so no existing
   page can match a rule below. Colours are tokens and the pack's own dark
   flips; the geometry is the reference's.
   ========================================================================== */
.kfe .kfe-cta .kfe-cta-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: var(--kfe-cta-rating-gap, 16px);
  color: inherit;
  text-decoration: none;
}
.kfe .kfe-cta.head-left .kfe-cta-rating { justify-content: flex-start; }
.kfe .kfe-cta .kfe-cta-rating-mark { width: 18px; height: 18px; flex: none; }
.kfe .kfe-cta .kfe-cta-rating-stars {
  color: var(--kfe-rating-stars, var(--kfe-accent));
  font-size: var(--kfe-rating-stars-size, 15px);
  letter-spacing: 2px;
  line-height: 1;
}
.kfe .kfe-cta .kfe-cta-rating-score { font-weight: 700; font-size: var(--kfe-rating-score-size, 14.5px); color: var(--kfe-heading, var(--kfe-primary)); }
.kfe .kfe-cta .kfe-cta-rating-label { font-size: var(--kfe-rating-label-size, 13.5px); color: var(--kfe-body, var(--kfe-muted)); }
.kfe .kfe-cta a.kfe-cta-rating:hover .kfe-cta-rating-label,
.kfe .kfe-cta a.kfe-cta-rating:focus-visible .kfe-cta-rating-label { text-decoration: underline; }
.kfe .kfe-cta.kfe-dark .kfe-cta-rating-score { color: var(--kfe-white); }
.kfe .kfe-cta.kfe-dark .kfe-cta-rating-label { color: var(--kfe-on-dark); }

.kfe .kfe-cta .kfe-cta-phone {
  margin-top: var(--kfe-cta-phone-gap, 38px);
  line-height: 1.2;
}
.kfe .kfe-cta .kfe-cta-phone-number {
  font-family: var(--kfe-font-heading);
  font-size: var(--kfe-cta-phone-size, 30px);
  color: var(--kfe-heading, var(--kfe-primary));
  text-decoration: none;
}
.kfe .kfe-cta .kfe-cta-phone-number:hover { text-decoration: underline; }
.kfe .kfe-cta .kfe-cta-phone-note {
  display: block;
  margin-top: 8px;
  font-size: var(--kfe-cta-phone-note-size, 12px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kfe-body, var(--kfe-muted));
}
.kfe .kfe-cta.kfe-dark .kfe-cta-phone-number { color: var(--kfe-white); }
.kfe .kfe-cta.kfe-dark .kfe-cta-phone-note { color: var(--kfe-on-dark-soft); }