/**
 * @file
 * Styles for editor-authored rich text: CKEditor Styles classes and WYSIWYG
 * inline elements. Loaded site-wide, so nothing here may be component-specific.
 */

/**
 * Pill — a single line of copy on a rounded grey field.
 *
 * Class doubled to (0,2,0) so it outranks the container-inherit rule below.
 * --ln-pill-bg is set by whichever component the pill lands in.
 */
.ln-pill.ln-pill {
  display: block;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  background-color: var(--ln-pill-bg, #ececec);
  color: var(--ln-pill-fg, #1c1c1c);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
}

/**
 * Translate CKEditor's alignment classes into box alignment. They only carry
 * text-align, which does nothing to a box sized to its own text.
 */
.ln-pill.text-align-center {
  margin-inline: auto;
}

.ln-pill.text-align-right {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.ln-pill.text-align-left {
  margin-inline: 0;
}

/* Doubled to match the pill's own specificity. */
.ln-pill.ln-pill strong,
.ln-pill.ln-pill b {
  font-weight: 700;
}

/**
 * Checkmark list — red ticks in place of bullets.
 *
 * Cohesion's unordered_list base style puts list-style disc/outside and
 * padding-left: 1rem on the bare ul, so all three are reset; this class at
 * (0,1,0) beats that element rule without needing to be doubled.
 *
 * Every size is em-relative, measured off the comp at 0.78 x 0.56 for the mark
 * and 0.81 for the gap. No line-height, so the list keeps its container's.
 */
ul.ln-check-list {
  margin: 0 0 1em;
  padding-inline-start: 0;
  list-style: none;
}

.ln-check-list > li {
  display: flex;
  align-items: flex-start;
  gap: 0.8em;
  font-size: 18px;
  padding: 0;
  margin: 0;
}

.ln-check-list > li + li {
  margin-block-start: 0.4em;
}

/**
 * Masked, not a text glyph: Outfit ships no checkmark, so a font fallback would
 * change the shape between platforms. Mask colour comes from background-color,
 * so the brand token still drives it.
 *
 * 1lh centres the mark on the first line whatever the leading is; the em value
 * above it is the fallback wherever lh is unsupported, and must stay first.
 */
.ln-check-list > li::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.78em;
  block-size: 1.5em;
  block-size: 1lh;
  background-color: var(--ln-color-red, #cf0000);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5.6 5.1 9.4 13 0.6' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5.6 5.1 9.4 13 0.6' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/**
 * Let editor-authored paragraphs inherit typography from their container.
 *
 * Cohesion sets font-weight and line-height on bare p, and a rule on the element
 * always beats an inherited value however specific the ancestor.
 *
 * The :not() skips component-authored paragraphs, which carry a BEM `__` class
 * and own their own type. :where() keeps the exclusion free, holding this at
 * (0,1,1) — raising it would start beating the component rules it must not touch.
 */
[data-component-id^="loopnet_blocks:"] p:not(:where([class*="__"])) {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/**
 * Let the container decide text alignment.
 *
 * Cohesion sets text-align on the elements themselves — h1 and button centre,
 * everything else left — so no container could override it. Unlike the paragraph
 * rule above this deliberately does include component-authored elements:
 * alignment belongs to the layout, not the element.
 *
 * The :not() is the author's escape hatch and is not optional. Core styles
 * .text-align-* at (0,1,0), identical to this rule, and this file loads later —
 * so without it every alignment an editor set by hand was silently overridden.
 * A component needing to set alignment here must double its class to (0,2,0).
 */
[data-component-id^="loopnet_blocks:"]
  :where(h1, h2, h3, h4, h5, h6, p):not(:where(
    .text-align-left,
    .text-align-center,
    .text-align-right,
    .text-align-justify
  )) {
  text-align: inherit;
}

/**
 * Make strong and b absolutely bold.
 *
 * The UA's `bolder` is relative: against the 300 base six components use, it
 * resolves to 400, so bolding appeared to do almost nothing.
 */
[data-component-id^="loopnet_blocks:"] :is(strong, b) {
  font-weight: 700;
}