/**
 * @file
 * How editor-authored rich text renders: classes applied from the CKEditor Styles
 * dropdown, and the inline elements a WYSIWYG produces.
 *
 * These are not scoped to any one component: a pill can appear in a Text block, a
 * tab panel, an accordion answer or a hero subheading, so the styles live here
 * rather than in a component's own CSS. Everything in this file must therefore be
 * safe to load site-wide.
 *
 * Registered in editor.editor.cohesion.yml under ckeditor5_style.
 */

/**
 * Pill — a single line of copy on a rounded grey field.
 *
 * Values from Figma 1142:42931: #ececec ground, 16px radius, 12px/16px padding,
 * 18px text on #1c1c1c, giving the 47px height in the comp.
 *
 * These replace an earlier pass measured from a 1:1 PNG crop, which read 18px of
 * inline padding and a 15px radius. Both were artefacts of measuring pixels: the
 * glyph's left side bearing sits inside the padding box, and the antialiased
 * corner reads a radius smaller than the one drawn.
 *
 * The box hugs its content rather than filling the container: the export is
 * cropped tight to the pill with equal insets either side of the text. A
 * full-width version would stretch the grey field across the whole measure, which
 * is not what the design shows.
 *
 * display: block with width: fit-content, not inline-block, so the alignment rules
 * below can move the box with auto margins — inline-block ignores them.
 *
 * The class is doubled to reach (0,2,0). An editor style has to outrank the
 * container-inherit rule further down this file, which sits at (0,1,1) — one
 * attribute selector plus a type beats one class. Undoubled, a pill in the
 * carousel's left column inherited that column's 600 instead of keeping its own
 * 400, and the same would happen to its font-size, line-height and colour in any
 * component whose container differs.
 *
 * The inherit rule *is* narrowed, but not in a way that helps here: it skips
 * paragraphs carrying a BEM element class, which is how a component-authored
 * paragraph is told apart from editor output. The pill is editor output, so it
 * stays matched, and doubling stays necessary.
 *
 * The narrowing could not simply be p:not([class]) — that would spare the pill
 * but also skip every paragraph carrying a CKEditor alignment class, which is
 * most of them in practice.
 *
 * Convention for anything added here: an editor style needs at least two classes
 * of specificity to survive being dropped into an arbitrary component.
 */
/**
 * The two fills are set by the component the pill lands in, not chosen by the
 * editor.
 *
 * The design uses #ececec on a white surface and #ffffff on a grey one — the pill
 * contrasts with whatever is behind it. Rather than shipping two editor styles and
 * asking an author to pick, the value is read from --ln-pill-bg, which any
 * component can set on its own root. Components with a grey surface set white; the
 * fallback here covers everything else.
 *
 * That beats two classes on three counts: an author cannot pick the wrong one, and
 * they could not tell from inside CKEditor anyway since the surrounding component
 * is not visible there; a background change moves one token instead of every pill
 * placed on it; and the roughly thirty locale translations of a field cannot drift
 * apart from each other.
 *
 * The fallback lives in the var() call rather than as a declaration on this
 * element. Declared here it would win against anything an ancestor set, because a
 * custom property on the element itself beats an inherited one — which is the
 * whole mechanism this depends on.
 *
 * It is not automatic in any clever sense: a new component with a non-white
 * surface has to set the token, or a pill dropped into it will be grey on grey.
 */
.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;
}

/**
 * Make CKEditor's alignment buttons work on the pill.
 *
 * Drupal's CKEditor 5 alignment applies a class — text-align-center and friends —
 * and core's align.module.css gives those classes nothing but text-align. On a box
 * sized to its own text that has no visible effect, which is why centring the pill
 * appeared to do nothing.
 *
 * These rules translate the class into box alignment. Core already ships
 * .align-center doing exactly this, but that is the image alignment class and the
 * text alignment plugin does not apply it.
 *
 * text-align still lands on the pill from align.module.css, which is what centres
 * the text when a long pill wraps to two lines.
 */
.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;
}

/* Bold runs inside the pill, e.g. the "90%" in the comp. Doubled for the same
   reason as the rule above: it currently agrees with the general strong rule at
   700, and doubling keeps it that way on purpose rather than by coincidence of
   source order. */
.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 directly on p. A value on a
 * container only ever *inherits* into a paragraph, and inheritance loses to any
 * rule that matches the element — however specific the container's selector is.
 * So every component that styles a rich-text container and expects its
 * paragraphs to follow was quietly rendering at Cohesion's values instead.
 *
 * That was not one field. Three were visibly wrong: the carousel's left column
 * asks for 600 and rendered 300, the tab panel copy asks for 400, and the
 * comparison table's subhead asks for 500. Five more matched by luck, because
 * their intended weight was already 300.
 *
 * inherit rather than restating values, so this stays a single rule instead of a
 * list that has to be kept in step with eight components.
 *
 * ---
 *
 * The :not() is the important part, and was added after this rule caused the
 * problem it exists to prevent.
 *
 * A paragraph a *component* writes in its own Twig is not editor content. The
 * component knows exactly how it should look and says so in its own stylesheet —
 * but a component's class sits at (0,1,0) and this rule at (0,1,1), so the
 * component lost and its paragraph inherited instead. The sticky CTA's copy came
 * out in the container's colour rather than brand red. The fix at the time was to
 * double the component's class, and having to do that at every call site is a
 * sign the rule is scoped wrongly rather than a convention worth keeping.
 *
 * So: skip any paragraph carrying a BEM element class. Every paragraph this
 * module authors has one (`ln-hero__eyebrow`, `ln-sticky-cta__copy`); no
 * paragraph CKEditor produces does — its output is unclassed, or carries an
 * alignment class like `text-align-center`, or an editor style like `ln-pill`,
 * none of which contain a `__`.
 *
 * :where() is what makes that free. :not() normally takes the specificity of its
 * argument, which would push this to (0,2,1) and — being higher than before —
 * would start beating the very component rules it is meant to leave alone, as
 * well as .ln-pill at (0,2,0). :where() always contributes zero, so the selector
 * stays exactly (0,1,1) and nothing else about the cascade here moves.
 *
 * Consequences worth knowing:
 * - A component that authors a <p> now owns all four properties. If it omits
 *   line-height it gets Cohesion's 1.8, not its container's value. That is the
 *   same deal as anywhere else on this site, and it fails at authoring time
 *   rather than as a mystery override later.
 * - .ln-pill is still matched, so editor styles still need the doubling
 *   convention documented above. That part is inherent: an editor style lives
 *   inside a rich-text container by definition.
 *
 * Margins are deliberately absent: they are not inherited, so `inherit` would be
 * meaningless. Components reset those explicitly through their :first-child and
 * :last-child rules.
 */
[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's base styles set text-align on the elements themselves, from
 * cohesion_base_styles.cohesion_base_styles.*:
 *
 *   heading_1   center      paragraph   left
 *   heading_2   left        blockquote  left
 *   heading_3-6 left        button      center
 *
 * A rule on the element beats an inherited value from any ancestor, however
 * specific that ancestor's selector is. So every component that centres a
 * container and expects its heading or copy to follow was not being obeyed —
 * silently, because h2 through h6 default to left and most of the library wants
 * left anyway. It only became visible where something wanted *centre*:
 *
 *   .ln-accordion__heading           centre — was rendering left
 *   .ln-comparison__heading          centre — was rendering left
 *   .ln-carousel__heading / __copy   centre on mobile — was rendering left
 *   .ln-hero__content (text_only)    centre — worked only for h1, by accident,
 *                                    since Cohesion happens to centre h1 too
 *
 * And the reverse for the hero's h1: no container could make it left, because
 * Cohesion centres h1 specifically. That is the report this rule came from.
 *
 * Separate from the paragraph rule above, and deliberately *not* carrying its
 * :not([class*="__"]) exclusion. That rule skips component-authored elements
 * because a component owns its own type. Alignment is different: it is a
 * property of the layout an element sits in, not of the element, so a
 * component-authored heading should follow its container too.
 *
 * (0,1,0) — the attribute selector, with :where() zeroing the element list. That
 * clears Cohesion's (0,0,1) decisively but ties with a single-class component
 * rule, so a component that genuinely needs to set alignment on a heading or
 * paragraph must double its class to reach (0,2,0). One rule does today:
 * .ln-sticky-cta__copy.
 *
 * The :not() is the author's escape hatch, and it is not optional.
 *
 * CKEditor's alignment buttons apply .text-align-left / -center / -right /
 * -justify, and core styles those in system/css/components/align.module.css as
 * bare single-class rules — (0,1,0), exactly the same as this one. A tie, decided
 * by source order, and this file loads later: so without the exclusion, every
 * alignment an editor set by hand was silently overridden by whatever its
 * container happened to inherit. The rule meant to hand alignment control to the
 * container was taking it away from the person writing the content.
 *
 * Excluding the classes rather than out-specifying them means there is no tie
 * left to lose. :where() keeps the exclusion free, so this stays (0,1,0).
 *
 * CKEditor only emits a class when the author picks a non-default alignment, so
 * ordinary paragraphs are unaffected and still inherit.
 */
[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> actually bold inside this module's components.
 *
 * The UA stylesheet gives both `font-weight: bolder`, which is *relative*: it
 * steps the inherited weight up one notch on a fixed table, where 100-300 all
 * resolve to 400 and only 400+ reach 700. Six components here set a 300 base for
 * body copy, so bolding text in those moved it 300 -> 400 — a normal weight, not
 * a bold. It reads as the tag doing nothing much.
 *
 * An absolute value is the fix. 700 matches the two components that already did
 * this locally, .ln-text__body and .ln-pill.
 *
 * Scoped on data-component-id, which SDC writes onto every component's root
 * element from mergeAdditionalRenderContext(). That covers every component in
 * this module including ones not yet written, needs no maintenance as components
 * are added, and cannot reach a Site Studio page — where Cohesion's own
 * typography should keep deciding.
 */
[data-component-id^="loopnet_blocks:"] :is(strong, b) {
  font-weight: 700;
}