/* ==========================================================================
   KF Elements — Checklist
   --------------------------------------------------------------------------
   The list itself is base.css's `.kfe-list` (render_list(), ADR-0004
   decision 6): the ✓/✔/– marks, the mark column and the item colour are the
   pack's one set, and nothing here restates them. This file holds three
   things and no more — the GRID the lines are laid out in, the CARD frame the
   `framed` switch draws, and the group heads.

   Every site-level size and colour is a token read with this widget's own
   value as its fallback (ADR-0004 decision 2). The card's small geometry —
   its 24/28 padding, the grid's 12/30 gap — is a new layout's own value, as
   the reference draws it: no site renders this widget until it adds one.
   Logical properties throughout, so a right-to-left page mirrors itself.
   ========================================================================== */

.kfe .kfe-checklist .head {
  text-align: var(--kfe-head-align, start);
  max-width: var(--kfe-title-measure, none);
  margin-bottom: 26px;
}
/* The title is ALWAYS classed — this widget has no released bare tag to pair
   with — so the class rule restates what base.css gives `.kfe h2`. Without it
   a title at `h1` or `h4`, which base.css has no rule for, falls back to the
   theme's own face (measured on run V's T5b). The dark flip is listed after,
   and separately, so it still wins. */
.kfe .kfe-checklist .head .kfe-checklist-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  letter-spacing: -0.01em;
  color: var(--kfe-heading, var(--kfe-primary));
  margin: 0;
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.7rem, 3.1vw, 2.4rem)));
  line-height: 1.2;
}
.kfe .kfe-checklist.kfe-dark .head .kfe-checklist-title { color: #fff; }
.kfe .kfe-checklist .kfe-checklist-intro {
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, inherit);
  line-height: 1.7;
  margin-top: 14px;
}
.kfe .kfe-checklist .kfe-checklist-intro p + p { margin-top: 1em; }

/* ---------- the grid ----------
   `--kfe-checklist-cols` is written by the `columns` control on
   `{{WRAPPER}} .kfe`, never on this grid: a control writing
   grid-template-columns here would sit at (0,4,0) and beat the stacking rule
   at the foot of this file at every width. base.css gives `li + li` a 10px
   top margin, which would ADD to a grid's row gap, so the grid resets it. */
.kfe .kfe-checklist .kfe-list {
  display: grid;
  grid-template-columns: repeat(var(--kfe-checklist-cols, 2), minmax(0, 1fr));
  gap: 12px 30px;
  /* A measure for the lines (w2.homepack.1): none and 0 by default, which is
     what the list computed before; a site that wants a narrow centred column
     sets both, e.g. 780px and auto. */
  max-width: var(--kfe-checklist-measure, none);
  margin-inline: var(--kfe-checklist-measure-margin, 0);
}
.kfe .kfe-checklist .kfe-list li + li { margin-top: 0; }

/* The group head: the semantic bold tag, in the heading token. */
.kfe .kfe-checklist .kfe-checklist-group {
  color: var(--kfe-heading, var(--kfe-primary));
  margin: 22px 0 10px;
}
.kfe .kfe-checklist .kfe-checklist-group:first-child { margin-top: 0; }
.kfe .kfe-checklist .kfe-checklist-list + .kfe-checklist-list { margin-top: 14px; }

/* ---------- the card ----------
   `--kfe-checklist-frame` is written by `frame_width`, for the same reason:
   the card is full width on a phone, and a control writing max-width here
   would outrank that. */
.kfe .kfe-checklist .kfe-checklist-card {
  background: var(--kfe-white);
  border: 1px solid var(--kfe-line);
  border-radius: var(--kfe-radius-card, 12px);
  padding: 24px 28px;
  max-width: var(--kfe-checklist-frame, 100%);
  margin-inline: auto;
}
/* Inside the card the 1.75 line-height alone sets the pitch: the grid's 12px
   ROW gap at :54 would ADD to it (1.75 x a 17px body = 29.75px, plus 12px =
   41.75px) where the card's lines sit ~30px apart on the reference (744#6).
   The 30px COLUMN gap is kept, for a card set to two or three columns. */
.kfe .kfe-checklist .kfe-checklist-card .kfe-list { row-gap: 0; }
.kfe .kfe-checklist .kfe-checklist-card .kfe-list li { line-height: 1.75; }
/* The card title carries no size of its own: it is a heading one level below
   the head's, and a size here would be a second type scale for one element.
   The family, weight and colour ARE restated, for the same reason the title
   rule at :22-26 restates them: this element is always classed and always one
   level below `header_size`, so `header_size` `h3` or `h4` prints it as an
   `h4` — and base.css declares `.kfe h2` (:84) and `.kfe h3` (:85) and nothing
   for `h4`, which falls back to the theme's own face (run V's T5b). */
.kfe .kfe-checklist .kfe-checklist-card-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-h3-weight);
  color: var(--kfe-heading, var(--kfe-primary));
  margin: 0 0 16px;
}

.kfe .kfe-checklist .kfe-checklist-outro {
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, inherit);
  line-height: 1.7;
  margin-top: 24px;
}
.kfe .kfe-checklist .kfe-checklist-outro p + p { margin-top: 1em; }

/* ---------- dark grounds ---------- */
.kfe .kfe-checklist.kfe-dark .kfe-checklist-intro,
.kfe .kfe-checklist.kfe-dark .kfe-checklist-outro { color: var(--kfe-on-dark); }
.kfe .kfe-checklist.kfe-dark .kfe-checklist-group { color: #fff; }

/* The reference stacks the check grid at 900, and the card takes the full
   width at Elementor's own phone breakpoint. */
@media (max-width: 900px) {
  .kfe .kfe-checklist .kfe-list { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 767px) {
  .kfe .kfe-checklist .kfe-checklist-card { max-width: 100%; padding: 22px 20px; }
}

/* ---------- the button under the lines (w2.homepack.1) ----------
   A class no released checklist prints. It follows the head's alignment, so a
   centred band centres its button. */
.kfe .kfe-checklist .kfe-checklist-actions {
  margin-top: var(--kfe-checklist-actions-gap, 30px);
  text-align: var(--kfe-head-align, start);
}