/**
 * @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;
}

/**
 * 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;
}