/**
 * Post body content — the single owner of everything inside
 * `.ckl-article__content`.
 *
 * WHY THIS FILE EXISTS: the child dequeues every one of the parent's content
 * stylesheets (inc/enqueue.php), and every parent content rule was scoped to
 * `.inner-post`, a class this theme never emits. So there is NO fallback: an
 * element without a rule here renders at raw browser defaults. WordPress core
 * supplies `wp-block-library/style.min.css` (block STRUCTURE — columns,
 * media-text, gallery grid, `.wp-block-table{overflow-x:auto}`), but NOT
 * `theme.min.css` nor `common.css`, so block/element DECORATION and the generic
 * `.align*` rules are ours to provide.
 *
 * SIZING RULE (doc §1, website-v5 docs/frontend.md § "Design scale"): Figma
 * frames are 2114px wide and every value renders at 70%. Nothing here invents a
 * size. Each value is either (a) an existing Figma-derived anchor —
 *
 *     body 1.225rem/28 · h2 clamp→3.15rem/72 · eyebrow 1.05rem/24
 *     small 0.7875rem/18 · toc heading 2.1875rem/50 · page title 4.375rem/100
 *     vertical line 1.55em/44 · block step 2.8rem/64
 *
 * — or (b) an `em` ratio of the 28px body, so the whole sheet moves together if
 * that one anchor is ever re-tuned. Where a ratio is used the comment names the
 * Figma pair it came from.
 *
 * SPECIFICITY: every selector is prefixed `.ckl-article__content` (0,2,0),
 * which beats core's `.wp-block-x` (0,1,0) and `:where()` (0,0,0) rules without
 * `!important`. Core's `!important` preset declarations are called out inline
 * where they exist — those are NOT to be fought.
 */

/* ----------------------------------------------------------- body + rhythm */

.ckl-article__content {
  font-size: 1.225rem; /* 28 */
  line-height: 157%; /* 44 */
  color: var(--ckl-dark);
}

.ckl-article__content > * {
  margin-block: 0 1.55em; /* one blank line of body rhythm */
}

/* ----------------------------------------------------------------- headings */

.ckl-article__content h2,
.ckl-article__content h4 {
  font-family: var(--ckl-font-title);
  font-weight: var(--ckl-fw-title);
  color: var(--ckl-dark);
  line-height: 95%;
  margin-top: 1.8em;
}

.ckl-article__content h2 {
  font-size: clamp(1.75rem, 3.4vw, 3.15rem); /* 72 */
}

.ckl-article__content h3 {
  font-family: var(--ckl-font-tag);
  font-weight: var(--ckl-fw-tag);
  font-size: 1.225rem; /* 28 */
  text-transform: uppercase;
  color: var(--ckl-blue);
  letter-spacing: 0.02em;
  line-height: 130%;
  margin-top: 2.6em;
  margin-bottom: 0.6em;
}

.ckl-article__content h4 {
  font-size: 1.5rem;
}

/* ------------------------------------------------------------------- links */

/* Body links: dark, underlined (Figma "AI strategy", "According to Gartner").
   Needed because base.css strips underlines from every `a` globally. */
.ckl-article__content a {
  color: var(--ckl-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.ckl-article__content a:hover {
  color: var(--ckl-blue);
}

/* ------------------------------------------------------------------- lists */

.ckl-article__content ul,
.ckl-article__content ol {
  padding-left: 1.9rem; /* 43 */
}

.ckl-article__content li {
  margin-bottom: 0;
}

/* Markers via `list-style-type` with a STRING, not `::marker { content }` —
   that property is Chromium/WebKit-only, so Firefox silently fell back to a
   plain disc. The keyword declaration before each string is the CSS parser's
   own fallback for engines that reject the string form.
   `::marker { color, font-size }` IS supported in both engines. */
.ckl-article__content ul {
  list-style: square;
  list-style-type: '▪';
}

.ckl-article__content ul ul {
  list-style: square;
  list-style-type: '▫';
}

.ckl-article__content ul ul ul {
  list-style: square;
  list-style-type: '–';
}

.ckl-article__content ol {
  list-style-type: decimal;
}

.ckl-article__content ol ol {
  list-style-type: lower-alpha;
}

.ckl-article__content ol ol ol {
  list-style-type: lower-roman;
}

.ckl-article__content li::marker {
  color: var(--ckl-dark);
  font-size: 0.6em;
}

.ckl-article__content ol li::marker {
  font-size: 1em; /* numbers must not shrink */
}

/* Nested lists had NO rule at all: the `> *` rhythm only reaches direct
   children of the content box, so a nested list got zero spacing. */
.ckl-article__content li > ul,
.ckl-article__content li > ol {
  margin-block: 0.4em 0;
  padding-left: 1.4rem;
}

.ckl-article__content li > p {
  margin-bottom: 0.6em;
}

/* ------------------------------------------------------------------- media */

.ckl-article__content img {
  margin-block: 1rem;
}

/* ------------------------------------------------------------- quotes/code */

.ckl-article__content blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 0.25rem solid var(--ckl-blue);
  color: var(--ckl-dark);
  font-weight: 700;
}

/* Blue emphasis paragraphs from the editor keep their palette class. */
.ckl-article__content .has-blue-color,
.ckl-article__content .has-blue-color a {
  color: var(--ckl-blue);
}

.ckl-article__content pre {
  background: var(--ckl-dark);
  color: var(--ckl-white);
  padding: 1.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 150%;
}

/* =========================================================================
   TIER 1 — alignment. The single biggest gap: 231 of 370 posts (62%) carry
   `aligncenter` and this theme had NO `.align*` rule of any kind. Core only
   styles `.wp-block-image .aligncenter`, and `common.css` (which owns the
   generic ones) is not enqueued. Most of these come from the classic
   `[caption]` shortcode, which renders
   `<figure class="wp-caption aligncenter" style="width:400px">`.
   ========================================================================= */

.ckl-article__content .aligncenter {
  display: block;
  margin-inline: auto;
}

.ckl-article__content .alignnone {
  margin-inline: 0; /* 115 posts */
}

.ckl-article__content .alignleft {
  float: left;
  margin: 0.35em 1.55em 1.2em 0;
  max-width: 50%;
}

.ckl-article__content .alignright {
  float: right;
  margin: 0.35em 0 1.2em 1.55em;
  max-width: 50%;
}

/* Floats must not escape into the meta strip / author box below. */
.ckl-article__content::after {
  content: '';
  display: block;
  clear: both;
  margin-block: 0; /* the `> *` rhythm would otherwise add a blank line */
}

.ckl-article__content h1,
.ckl-article__content h2 {
  clear: both;
}

/* Beats the shortcode's inline `width: 400px` on narrow viewports. */
.ckl-article__content .wp-caption {
  max-width: 100%;
}

.ckl-article__content .wp-caption img {
  width: 100%;
  height: auto;
}

/* =========================================================================
   TIER 2 — headings the theme never styled, emphasis, code, quotes
   ========================================================================= */

/* h1 appears in the BODY of 62 posts. Unstyled it rendered at the UA's 2em in
   the body font — visually LARGER than the styled h2, inverting the hierarchy.
   84 × 0.70: the midpoint between the page title (100) and h2 (72). */
.ckl-article__content h1 {
  font-family: var(--ckl-font-title);
  font-weight: var(--ckl-fw-title);
  font-size: clamp(2rem, 3.9vw, 3.675rem); /* 84 */
  line-height: 95%;
  color: var(--ckl-dark);
  margin-top: 1.8em;
}

/* Continue the h3 language one step down (24 eyebrow anchor). h5: 2 posts. */
.ckl-article__content h5 {
  font-family: var(--ckl-font-tag);
  font-weight: var(--ckl-fw-tag);
  font-size: 1.05rem; /* 24 */
  text-transform: uppercase;
  color: var(--ckl-blue);
  letter-spacing: 0.02em;
  line-height: 130%;
  margin-top: 2.2em;
  margin-bottom: 0.5em;
}

.ckl-article__content h6 {
  font-family: var(--ckl-font-tag);
  font-weight: var(--ckl-fw-tag);
  font-size: 0.7875rem; /* 18 */
  text-transform: uppercase;
  color: var(--ckl-text-muted);
  letter-spacing: 0.02em;
  line-height: 130%;
  margin-top: 2.2em;
  margin-bottom: 0.5em;
}

.ckl-article__content strong,
.ckl-article__content b {
  font-weight: 700; /* the variable text face renders this natively */
}

/* No italic face exists — all six @font-face blocks in fonts.css declare
   `font-style: normal`, and Special Gothic ships no italic. DECISION: keep the
   browser's synthesised oblique. A grotesk slants acceptably, and re-mapping
   emphasis to colour or weight would silently rewrite 104 posts' intent.
   Declared explicitly so no engine opts out of synthesis. */
.ckl-article__content em,
.ckl-article__content i,
.ckl-article__content cite,
.ckl-article__content dfn {
  font-style: italic;
  font-synthesis: style;
}

/* Inline code got ONLY a font-family, so it was near-invisible in body text.
   0.86em equalises x-height: Iosevka Charon Mono runs larger than Special
   Gothic at the same size (cf. the size-adjust metric in fonts.css). */
.ckl-article__content code {
  font-family: var(--ckl-font-tag);
  font-size: 0.86em;
  background-color: var(--ckl-gray);
  padding: 0.1em 0.32em;
  overflow-wrap: break-word;
}

/* Mandatory reset — without it every token in a code block gets a grey chip. */
.ckl-article__content pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  white-space: inherit;
}

/* Survive long lines and, for the 13 posts whose language Prism's build lacks,
   still look finished with zero tokens. */
.ckl-article__content pre {
  tab-size: 2;
  white-space: pre;
  max-width: 100%;
  overscroll-behavior-x: contain;
  border-left: 0.25rem solid var(--ckl-blue); /* ties it to the blockquote */
  margin-block: 0 1.55em;
}

/* `> *` only reaches direct children of the content box, so multi-paragraph
   quotes collapsed into one block — 68 posts use blockquote. */
.ckl-article__content blockquote > * {
  margin-block: 0 1.55em;
}

.ckl-article__content blockquote > *:last-child {
  margin-bottom: 0;
}

.ckl-article__content blockquote cite {
  display: block;
  margin-top: 0.8em;
  font-family: var(--ckl-font-tag);
  font-style: normal;
  font-weight: 400;
  font-size: 0.7875rem; /* 18 */
  text-transform: uppercase;
  color: var(--ckl-text-muted);
}

/* =========================================================================
   TIER 3 — figures, tables, media
   ========================================================================= */

/* Kills the UA `margin: 1em 40px`, which visibly indented every Gutenberg
   image, table and quote. */
.ckl-article__content figure {
  margin: 0 0 1.55em;
}

.ckl-article__content figure > img,
.ckl-article__content figure > a > img {
  margin-block: 0;
}

/* :not(.wp-block-gallery) leaves core's gallery overlay caption alone. */
.ckl-article__content figure:not(.wp-block-gallery) > figcaption,
.ckl-article__content .wp-caption-text {
  margin: 0.7rem 0 0;
  font-size: 0.7875rem; /* 18 */
  line-height: 1.4;
  color: var(--ckl-text-muted);
  text-align: left;
}

/* Tables had ZERO rules and no containment, so a wide one escaped the
   minmax(0,1fr) grid column. `display: block` + `width: max-content` generates
   an anonymous table box: rows stay tabular while the box itself scrolls.
   0.875em = the 24÷28 eyebrow/body Figma ratio. */
.ckl-article__content table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.875em;
  margin-block: 0 1.55em;
}

/* Core's `.wp-block-table` <figure> already scrolls, so the table inside it can
   stay a real table and fill the width. */
.ckl-article__content .wp-block-table > table {
  display: table;
  width: 100%;
}

.ckl-article__content th,
.ckl-article__content td {
  padding: 0.55em 0.8em;
  border: 1px solid var(--ckl-light-gray);
  text-align: left;
  vertical-align: top;
}

.ckl-article__content thead th {
  background-color: var(--ckl-gray);
  font-family: var(--ckl-font-tag);
  font-weight: var(--ckl-fw-tag);
  font-size: 0.7875rem; /* 18 */
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ckl-article__content caption {
  caption-side: bottom;
  padding-top: 0.7rem;
  font-size: 0.7875rem; /* 18 */
  color: var(--ckl-text-muted);
  text-align: left;
}

.ckl-article__content video {
  width: 100%;
  height: auto;
}

.ckl-article__content audio {
  display: block;
  width: 100%;
}

.ckl-article__content iframe {
  display: block;
  border: 0;
  max-width: 100%;
  margin-block: 0 1.55em;
}

/* Video embeds arrive with hardcoded width/height attributes (560×315), so
   `max-width: 100%` alone squashes them: the width shrinks while the height
   attribute stays put.
   ⚠️ `data-src` is not optional here: EWWW's lazyload MOVES the src into
   data-src and adds .lazyload, exactly as it does to images (doc §9/§10), so a
   src-only selector never matches a real embed on this site. Both states are
   covered so the ratio holds before and after lazysizes swaps the attribute. */
.ckl-article__content iframe[src*='youtube'],
.ckl-article__content iframe[src*='youtu.be'],
.ckl-article__content iframe[src*='vimeo'],
.ckl-article__content iframe[src*='player.'],
.ckl-article__content iframe[data-src*='youtube'],
.ckl-article__content iframe[data-src*='youtu.be'],
.ckl-article__content iframe[data-src*='vimeo'],
.ckl-article__content iframe[data-src*='player.'] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* =========================================================================
   TIER 4 — inline semantics. Every one of these was falling back to a UA
   default that clashes with the palette or is indistinguishable from a link.
   ========================================================================= */

.ckl-article__content mark {
  background-color: var(--ckl-aqua-blue); /* kills the UA yellow */
  color: var(--ckl-dark);
  padding: 0 0.15em;
}

.ckl-article__content del,
.ckl-article__content s,
.ckl-article__content strike {
  text-decoration: line-through;
  color: var(--ckl-text-muted);
}

.ckl-article__content ins {
  background-color: color-mix(in srgb, var(--ckl-aqua-blue) 40%, #fff);
  text-decoration: none;
}

.ckl-article__content u {
  text-decoration: underline;
  text-decoration-color: var(--ckl-medium-gray);
}

.ckl-article__content abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

.ckl-article__content kbd {
  font-family: var(--ckl-font-tag);
  font-size: 0.86em;
  padding: 0.1em 0.35em;
  border: 1px solid var(--ckl-medium-gray);
  border-radius: 0.125rem;
  box-shadow: 0 1px 0 var(--ckl-medium-gray);
  background-color: var(--ckl-white);
}

.ckl-article__content q {
  quotes: '“' '”' '‘' '’';
}

.ckl-article__content small {
  font-size: 0.79em; /* 22 ÷ 28 */
}

/* line-height: 0 is the guard — without it these push the 157% baseline. */
.ckl-article__content sub,
.ckl-article__content sup {
  font-size: 0.7em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.ckl-article__content sup {
  top: -0.5em;
}

.ckl-article__content sub {
  bottom: -0.25em;
}

.ckl-article__content dt {
  font-weight: 500;
}

.ckl-article__content dd {
  margin: 0 0 1.55em 1.9rem; /* the 43 Figma list indent */
}

.ckl-article__content hr {
  border: 0;
  border-top: 1px solid var(--ckl-light-gray);
  margin-block: 2.8rem; /* the 64 block step */
}

.ckl-article__content address {
  font-style: normal;
}

.ckl-article__content details {
  margin-block: 0 1.55em;
}

.ckl-article__content summary {
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}

.ckl-article__content summary::-webkit-details-marker {
  display: none;
}

.ckl-article__content summary::after {
  content: '+';
  margin-left: 0.5em;
  color: var(--ckl-blue);
}

.ckl-article__content details[open] > summary::after {
  content: '–';
}

/* =========================================================================
   TIER 5 — Gutenberg blocks. Core supplies the STRUCTURE; this supplies the
   skin. In use in this content set: image, columns, list, embed, quote,
   media-text, group, code, html. The rest is defensive.

   ⚠️ Core declarations that use !important and must NOT be fought:
     .wp-block-columns { flex-wrap: nowrap !important }
     .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
       { flex-basis: 100% !important }              ← its mobile stack
     .wp-block-media-text.is-stacked-on-mobile
       { grid-template-columns: 100% !important }
     .wp-block-gallery … img { max-width: 100% !important }
   ========================================================================= */

.ckl-article__content .wp-block-quote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 0.25rem solid var(--ckl-blue);
  font-weight: 700;
}

.ckl-article__content .wp-block-pullquote {
  padding: 2.8rem 0; /* core ships 3em */
  border-top: 1px solid var(--ckl-light-gray);
  border-bottom: 1px solid var(--ckl-light-gray);
}

.ckl-article__content .wp-block-pullquote p {
  font-family: var(--ckl-font-title);
  font-weight: var(--ckl-fw-title);
  font-size: 1.4em;
  line-height: 1.35;
  font-style: normal;
}

.ckl-article__content .wp-block-code,
.ckl-article__content .wp-block-preformatted,
.ckl-article__content .wp-block-verse {
  margin-block: 0 1.55em;
}

.ckl-article__content .wp-block-code pre,
.ckl-article__content .wp-block-preformatted pre {
  margin-block: 0;
}

/* Core's default is a #32373c pill — maximally off-brand. This is the
   components.css button language: square, mono uppercase, sweep to blue. */
.ckl-article__content .wp-block-button__link {
  display: inline-block;
  border-radius: 0;
  background-color: var(--ckl-aqua-blue);
  color: var(--ckl-dark);
  font-family: var(--ckl-font-tag);
  font-weight: var(--ckl-fw-tag);
  font-size: 1rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.375rem 1.9375rem;
  transition:
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
}

.ckl-article__content .wp-block-button__link:hover {
  background-color: var(--ckl-blue);
  color: var(--ckl-white);
}

.ckl-article__content .wp-block-columns {
  gap: clamp(1.5rem, 3vw, 2.8rem);
}

.ckl-article__content .wp-block-group.has-background,
.ckl-article__content .wp-block-cover {
  padding: 2.8rem;
  border-radius: 0;
}

.ckl-article__content .wp-block-separator {
  border-top: 1px solid var(--ckl-light-gray);
  border-bottom: 0; /* core sets BOTH → a 2px double line */
  color: var(--ckl-light-gray);
}

/* The author's spacer height must be exact — drop the inherited rhythm. */
.ckl-article__content > .wp-block-spacer {
  margin-block: 0;
}

.ckl-article__content .wp-block-media-text__content {
  padding: 0 0 0 1.55em;
}

.ckl-article__content .wp-block-file,
.ckl-article__content .wp-block-details,
.ckl-article__content .wp-block-video,
.ckl-article__content .wp-block-audio,
.ckl-article__content .wp-block-html {
  margin-block: 0 1.55em;
}

.ckl-article__content .wp-block-gallery figcaption,
.ckl-article__content .blocks-gallery-caption {
  color: var(--ckl-text-muted);
  font-size: 0.7875rem;
}

/* alignwide/alignfull: the parent registers add_theme_support('align-wide'), so
   the editor OFFERS these and they did nothing at all. 0 posts use them today.
   The alignwide bleed is always smaller than the available gutter (at 1025px the
   layout gap floor is 2rem/32px against a ~20px bleed). */
.ckl-article__content .alignwide {
  margin-inline: calc(-1 * clamp(0rem, 2vw, 2.5rem));
  width: auto;
}

.ckl-article__content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* `clip`, NEVER `hidden`: hidden makes this a scroll container, which would
   turn the sticky sidebar and share rail into fixed boxes. `clip` does not. */
.ckl-article {
  overflow-x: clip;
}

/* has-* coverage. Corrected model: core's OWN palette slugs already resolve
   through global-styles-inline-css WITH !important (so a post using
   `vivid-red` deliberately wins over this sheet), and the parent theme's slugs
   (blue/grey/cyan…) resolve through base.css. What was missing is only the
   markers and the readability guard. */
.ckl-article__content .has-text-color a,
.ckl-article__content .has-link-color a {
  color: inherit;
}

.ckl-article__content .has-background {
  padding: 1.4rem; /* core only pads columns/group */
}

/* Dark fills need light ink. */
.ckl-article__content .has-blue-background-color,
.ckl-article__content .has-default-background-color {
  color: var(--ckl-white);
}