/* Core list styles ----------------------------------------------------- */
/* K's Blocks keeps core/list editable and adds presentation-only styles. */

ul.is-style-ks-list-simple,
ul.is-style-ks-list-check,
ul.is-style-ks-list-point,
ul.is-style-ks-list-caution,
ul.is-style-ks-check-list {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

ul.is-style-ks-list-simple > li,
ul.is-style-ks-list-check > li,
ul.is-style-ks-list-point > li,
ul.is-style-ks-list-caution > li,
ul.is-style-ks-check-list > li {
  position: relative;
  box-sizing: border-box;
  line-height: 1.85;
}

ul.is-style-ks-list-simple > li:first-child,
ul.is-style-ks-list-check > li:first-child,
ul.is-style-ks-list-point > li:first-child,
ul.is-style-ks-list-caution > li:first-child,
ul.is-style-ks-check-list > li:first-child { margin-top: 0; }

ul.is-style-ks-list-simple > li:last-child,
ul.is-style-ks-list-check > li:last-child,
ul.is-style-ks-list-point > li:last-child,
ul.is-style-ks-list-caution > li:last-child,
ul.is-style-ks-check-list > li:last-child { margin-bottom: 0; }

ul.is-style-ks-list-simple > li > ul,
ul.is-style-ks-list-simple > li > ol,
ul.is-style-ks-list-check > li > ul,
ul.is-style-ks-list-check > li > ol,
ul.is-style-ks-list-point > li > ul,
ul.is-style-ks-list-point > li > ol,
ul.is-style-ks-list-caution > li > ul,
ul.is-style-ks-list-caution > li > ol,
ul.is-style-ks-check-list > li > ul,
ul.is-style-ks-check-list > li > ol {
  margin-top: .45em;
  margin-bottom: 0;
}

ul.is-style-ks-list-simple > li { margin: .5em 0; padding-left: 1.45em; }
ul.is-style-ks-list-simple > li::before {
  content: "";
  position: absolute;
  left: .18em;
  top: .76em;
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: var(--ks-primary, #223070);
}

ul.is-style-ks-list-check > li,
ul.is-style-ks-check-list > li { margin: .5em 0; padding-left: 1.8em; }
ul.is-style-ks-list-check > li::before,
ul.is-style-ks-check-list > li::before {
  content: "✓";
  position: absolute;
  left: .08em;
  top: 0;
  color: var(--ks-primary, #223070);
  font-weight: 800;
}

ul.is-style-ks-list-point { display: grid; gap: .55em; }
ul.is-style-ks-list-point > li {
  margin: 0;
  padding: .68em .9em .68em 2.15em;
  border: 1px solid var(--ks-border, #e3e7ef);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ks-primary, #223070) 5%, var(--ks-surface, #ffffff));
}
ul.is-style-ks-list-point > li::before {
  content: "";
  position: absolute;
  left: .9em;
  top: 1.18em;
  width: .48em;
  height: .48em;
  border-radius: 50%;
  background: var(--ks-accent, #d2a901);
}

ul.is-style-ks-list-caution { display: grid; gap: .55em; }
ul.is-style-ks-list-caution > li {
  margin: 0;
  padding: .68em .9em .68em 2.75em;
  border-left: 3px solid #b7791f;
  border-radius: 7px;
  background: #fff8eb;
}
ul.is-style-ks-list-caution > li::before {
  content: "!";
  position: absolute;
  left: .78em;
  top: .76em;
  display: grid;
  place-items: center;
  width: 1.28em;
  height: 1.28em;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #9a651a;
  font-size: .86em;
  font-weight: 800;
  line-height: 1;
}

/* My Pattern replacement: one quiet frame around the whole list. */
ul.is-style-ks-list-frame,
ol.is-style-ks-list-frame {
  box-sizing: border-box;
  margin: 2em 0;
  padding: 1.15em 1.5em 1.15em 3em;
  border: 1px solid var(--ks-accent, #d2a901);
  border-radius: 10px;
  background: transparent;
  line-height: 2.05;
}
ul.is-style-ks-list-frame > li::marker,
ol.is-style-ks-list-frame > li::marker {
  color: var(--ks-primary, #223070);
  font-weight: 700;
}

/* My Pattern replacement: soft background, especially useful for numbered lists. */
ul.is-style-ks-list-background,
ol.is-style-ks-list-background {
  box-sizing: border-box;
  margin: 2em 0;
  padding: 1.15em 1.5em 1.15em 3em;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ks-primary, #223070) 6%, var(--ks-surface, #ffffff));
  line-height: 2.05;
}
ul.is-style-ks-list-background > li::marker,
ol.is-style-ks-list-background > li::marker {
  color: var(--ks-primary, #223070);
  font-weight: 800;
}

@media (max-width: 767px) {
  ul.is-style-ks-list-simple > li,
  ul.is-style-ks-list-check > li,
  ul.is-style-ks-check-list > li { margin-top: .42em; margin-bottom: .42em; }
  ul.is-style-ks-list-point,
  ul.is-style-ks-list-caution { gap: .48em; }
  ul.is-style-ks-list-point > li { padding: .62em .78em .62em 2em; }
  ul.is-style-ks-list-point > li::before { left: .8em; top: 1.08em; }
  ul.is-style-ks-list-caution > li { padding: .62em .78em .62em 2.55em; }
  ul.is-style-ks-list-caution > li::before { left: .68em; top: .69em; }
  ul.is-style-ks-list-frame,
  ol.is-style-ks-list-frame,
  ul.is-style-ks-list-background,
  ol.is-style-ks-list-background {
    margin: 1.6em 0;
    padding: 1em 1em 1em 2.55em;
    line-height: 1.9;
  }
}