/*
 * doc-article.css — the documentation ARTICLE page.
 *
 * Ports the inline <style> of `design-reference/Doc Article.html`.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS IS NOT A BLOCK STYLESHEET, WHICH IS THE WHOLE REASON THE FILE EXISTS
 * ---------------------------------------------------------------------------
 *
 * A per-block `style.css` is enqueued only when that block renders. The
 * documentation article's body is `post_content` — headings, paragraphs, lists,
 * images written by the marketing team — and `post_content` is not a block. So
 * `.ka-body`, `.ka-steps`, `.ka-note` and `.ka-fig` have no block to hang off,
 * and writing them into one would ship CSS that never loads.
 *
 * That is not hypothetical. It shipped on 2026-08-05: `.prose` and `.art-wrap`
 * were written into `blocks/article-body/style.css` for a block that did not
 * exist, 5.6 KB sat in the theme zip and never reached a browser, and the post
 * page was reported from staging as "no sidebar, and the post page is kinda
 * ugly" — accurate on both counts, because `.art-wrap` IS the two-column grid.
 * `assets/css/single-post.css` is the fix for that page; this is the same
 * arrangement for this one.
 *
 * `.ka-wrap` makes it structural rather than merely convenient. The grid is
 * declared on a wrapper in `templates/single-plugin_documents.html` and its
 * columns are what put the sidebar beside the article; the sidebar block is one
 * of its children. Splitting a grid from its own children across two
 * stylesheets is how a sidebar lands in the wrong column.
 *
 * ENQUEUED from functions.php on `BookingPress\Theme\Docs\is_doc_context()` —
 * a single `plugin_documents` post, or a `plugin_doc_cat` term archive. Both
 * templates render the sidebar; both need this file. Not `is_single()`, which
 * is also true for every `post`, `download` and `api_documents` entry, none of
 * which uses any of these classes.
 *
 * Not global.css either: Layer 2 is one cached file on a 32 KB budget and this
 * applies to two templates out of ~35 (CLAUDE.md rule 2).
 *
 * ---------------------------------------------------------------------------
 * HAND-WRITTEN, unlike single-post.css which scripts/extract-blog-css.mjs
 * generates. There is no extractor for this page and one file does not justify
 * writing one; edit it directly.
 *
 * Layer 2 chrome (`.sec`, `.container`, `.crumbs`, `.eyebrow`, `.reveal`,
 * `.screen-reader-text`) is USED by the templates and lives in global.css —
 * never redeclared here. CLAUDE.md rule 3.
 *
 * Hover rules are declared BEFORE the persistent state class they contest, in
 * the reference's own order, so `.current` and `.sel` win on source order.
 * Inverting that pair is what `npm run verify:cascade-order` exists to catch.
 */

/* -------------------------------------------------------------------------
 * The three-pane shell.
 *
 * The reference is `266px | 1fr | 200px`, the third column being an "On this
 * page" rail. That rail is NOT built — it needs anchors harvested from
 * post_content, and the 137 imported documents are still Elementor markup, so
 * there is nothing to harvest yet. The base grid is therefore two columns and
 * the third is added back by `:has()` the moment something renders a `.ka-toc`.
 * Declaring three columns unconditionally would leave 244px of empty gutter on
 * every documentation page today.
 *
 * ONE THING THIS GRID SILENTLY DEPENDS ON: `theme.json` sets
 * `settings.spacing.blockGap` to `null`. WordPress reads that as "block gap not
 * supported" and `wp_get_layout_style()` then emits NO layout margins at all —
 * so the `core/group` carrying `.ka-wrap` does not get
 * `:where(.is-layout-flow) > * + * { margin-block-start: … }` applied to its
 * children. Set blockGap to a value and `.ka-main` acquires a top margin INSIDE
 * its grid cell, dropping the article column below the sidebar on every
 * documentation page. `.art-wrap` on the blog has the same dependency. If that
 * setting ever changes, both grids need `> * { margin-block-start: 0 }`.
 * ------------------------------------------------------------------------- */

.ka-wrap {
	display: grid;
	grid-template-columns: 266px minmax(0, 1fr);
	gap: 44px;
	align-items: start;
	padding: 34px 0 8px;
}

.ka-wrap:has(.ka-toc) {
	grid-template-columns: 266px minmax(0, 1fr) 200px;
}

/* -------------------------------------------------------------------------
 * Left navigation — bookingpress/doc-nav.
 * ------------------------------------------------------------------------- */

.ka-side {
	position: sticky;
	top: 88px;
	max-height: calc(100vh - 104px);
	overflow: auto;
	padding-right: 6px;
}

.ka-search {
	display: flex;
	align-items: center;
	gap: 9px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-11);
	padding: 9px 12px;
	margin-bottom: 18px;
}

.ka-search svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--muted-2);
	stroke-width: 2;
	flex: 0 0 auto;
}

.ka-search input {
	border: none;
	outline: none;
	font-family: var(--body);
	font-size: 13px;
	color: var(--ink);
	background: transparent;
	width: 100%;
}

.ka-cat {
	border-bottom: 1px solid var(--line-2);
}

.ka-cat > button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--display);
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
	padding: 11px 2px;
	text-align: left;
	letter-spacing: -0.01em;
}

.ka-cat > button .chev {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	fill: none;
	stroke: var(--muted-2);
	stroke-width: 2;
	transition: transform 0.2s;
}

.ka-cat.open > button .chev {
	transform: rotate(90deg);
}

.ka-links {
	display: none;
	flex-direction: column;
	padding: 2px 0 10px;
}

.ka-cat.open .ka-links {
	display: flex;
}

.ka-links a {
	font-size: 13px;
	color: var(--muted);
	padding: 6px 0 6px 13px;
	border-left: 2px solid var(--line);
	line-height: 1.4;
	text-decoration: none;
}

@media (hover: hover) {

	.ka-links a:hover {
		color: var(--ink);
		border-left-color: var(--ink-2);
	}
}

.ka-links a.current {
	color: var(--brand-2);
	font-weight: 600;
	border-left-color: var(--brand);
}

/* -------------------------------------------------------------------------
 * Article column.
 *
 * `.ka-crumbs` and `.ka-eyebrow` are deliberately absent: the templates wear
 * Layer 2's `.crumbs` and `.eyebrow`, which are the same components under this
 * theme's canonical names. Redeclaring them here would be CLAUDE.md rule 3.
 * ------------------------------------------------------------------------- */

.ka-main {
	min-width: 0;
}

.ka-main h1 {
	font-size: clamp(34px, 3.3vw, 42px);
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 700;
	margin: 10px 0 14px;
}

.ka-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 26px;
}

.ka-meta .d {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--muted-2);
}

/* The row's only fact is `core/post-date` with `displayType: "modified"`, and
   that renders an EMPTY STRING on a post whose modified date equals its publish
   date — core declines to claim a never-edited post was updated. Most of the 137
   imported documents are in that state, so without this the wrapper contributes
   26px of blank space on most pages. `:empty` will not do: the group's inner
   HTML still holds the template's own whitespace. */

.ka-meta:not(:has(*)) {
	display: none;
}

/* -------------------------------------------------------------------------
 * Article body.
 *
 * EVERY SELECTOR BELOW HAS TO SURVIVE ORDINARY PROSE. The template supplies the
 * chrome and `post_content` supplies the words, so nothing here may depend on a
 * per-page block composition — there are 137 documents and there will be more.
 *
 * Where the reference uses a hand-written class the theme styles BOTH: the
 * class an author can type into "Additional CSS class" (`.ka-fig`,
 * `.ka-steps`), and the markup a core block emits with no class at all
 * (`figure`, `ol`). An editor who does nothing still gets the design.
 * ------------------------------------------------------------------------- */

.ka-body {
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink-3);
}

.ka-body :is(h2, h3, h4) {
	scroll-margin-top: 88px;
}

.ka-body h2 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 26px 0 12px;
}

/* The reference's `01`/`02` ordinal, kept for an author who writes one. */

.ka-body h2 .n {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--brand-2);
	font-weight: 700;
	margin-right: 11px;
}

.ka-body h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	margin: 22px 0 8px;
}

.ka-body p {
	margin: 0 0 14px;
}

/* The opening paragraph's larger setting. An author applies it; it is NOT put
   on `p:first-child` automatically, because plenty of documents open on a
   warning or a screenshot rather than on a summary. */

.ka-body .ka-lede {
	font-size: 17px;
	line-height: 1.65;
}

.ka-body a {
	color: var(--brand-2);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ka-body :is(b, strong) {
	color: var(--ink);
	font-weight: 700;
}

.ka-body code {
	font-family: var(--mono);
	font-size: 0.86em;
	background: var(--line-2);
	color: var(--ink-2);
	padding: 1.5px 6px;
	border-radius: var(--r-5);
}

.ka-body pre {
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.6;
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 16px 18px;
	margin: 0 0 18px;
	overflow: auto;
}

.ka-body pre code {
	background: none;
	padding: 0;
}

.ka-body blockquote {
	margin: 22px 0;
	padding: 6px 0 6px 22px;
	border-left: 3px solid var(--brand);
	font-family: var(--display);
	font-size: 19px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.01em;
}

/* Ordinary lists. `.ka-steps` opts out — it is not a bulleted list, it is a
   numbered procedure with its own counter. */

.ka-body :is(ul, ol):not(.ka-steps) {
	margin: 0 0 14px;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ka-body li::marker {
	color: var(--brand-2);
}

.ka-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 0 0 18px;
}

.ka-body :is(th, td) {
	border: 1px solid var(--line);
	padding: 9px 12px;
	text-align: left;
}

.ka-body th {
	background: var(--soft);
	color: var(--ink);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Numbered procedure — `.ka-steps`.
 * ------------------------------------------------------------------------- */

.ka-steps {
	list-style: none;
	counter-reset: st;
	margin: 6px 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ka-steps li {
	position: relative;
	padding-left: 42px;
	counter-increment: st;
	min-height: 28px;
}

.ka-steps li::marker {
	content: none;
}

.ka-steps li::before {
	content: counter(st);
	position: absolute;
	left: 0;
	top: -1px;
	width: 28px;
	height: 28px;
	border-radius: var(--r-9);
	background: var(--ink);
	color: var(--on-dark);
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

/* -------------------------------------------------------------------------
 * Figures — `.ka-fig`, and any core image/table/embed figure.
 *
 * The reference's `<image-slot>` is a design-time placeholder and never ships
 * (CLAUDE.md, design-reference section): here the child is a real `<img>` from
 * the media library, so the height is natural rather than a fixed 16/9 box.
 * ------------------------------------------------------------------------- */

.ka-fig,
.ka-body figure {
	margin: 6px 0 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-14);
	overflow: hidden;
	background: var(--soft);
}

.ka-fig img,
.ka-body figure img {
	display: block;
	width: 100%;
	height: auto;
}

.ka-fig figcaption,
.ka-body figcaption {
	font-size: 12px;
	color: var(--muted);
	padding: 10px 14px;
	border-top: 1px solid var(--line);
	background: var(--surface);
	margin: 0;
	text-align: left;
}

/* -------------------------------------------------------------------------
 * Callouts — `.ka-note`, with `.tip` and `.warn` variants.
 *
 * The reference gives the BASE class no background and no border; only the two
 * variants are painted. An author who types `ka-note` alone would then get an
 * unstyled flex row, so the base carries a neutral treatment here. That is an
 * addition to the reference, and the only one in this file.
 *
 * `.i` — the icon tile — is optional. A core Group block wearing `ka-note tip`
 * has no way to emit one, and the callout has to read correctly without it.
 * `bookingpress/doc-note` is the block for a callout WITH an icon.
 * ------------------------------------------------------------------------- */

.ka-note {
	display: flex;
	gap: 13px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--soft);
	padding: 15px 17px;
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
}

.ka-note > * {
	min-width: 0;
}

.ka-note p:last-child {
	margin-bottom: 0;
}

.ka-note .i {
	width: 30px;
	height: 30px;
	border-radius: var(--r-9);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	font-size: 15px;
	background: var(--line);
	color: var(--ink-2);
}

.ka-note.tip {
	background: rgba(var(--brand-rgb), 0.09);
	border-color: rgba(var(--brand-rgb), 0.28);
}

.ka-note.tip .i {
	background: var(--brand);
	color: var(--brand-ink);
}

.ka-note.warn {
	background: rgba(var(--accent-rgb), 0.12);
	border-color: rgba(var(--accent-rgb), 0.4);
}

.ka-note.warn .i {
	background: var(--accent);
	color: var(--accent-ink);
}

/* -------------------------------------------------------------------------
 * "Was this article helpful?" — bookingpress/doc-feedback.
 * ------------------------------------------------------------------------- */

.ka-helpful {
	margin-top: 34px;
	border: 1px solid var(--line);
	border-radius: var(--r-16);
	padding: 22px 24px;
	background: var(--soft);
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ka-helpful .q {
	font-family: var(--display);
	font-weight: 700;
	font-size: 16px;
	color: var(--ink);
}

.ka-helpful .btns {
	display: flex;
	gap: 10px;
	margin-left: auto;
}

.ka-hbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--pill-r);
	padding: 9px 18px;
	cursor: pointer;
	transition: background 0.16s, color 0.16s, border-color 0.16s;
}

@media (hover: hover) {

	.ka-hbtn:hover {
		border-color: var(--ink-2);
	}
}

.ka-hbtn.sel {
	background: var(--ink);
	color: var(--on-dark);
	border-color: var(--ink);
}

.ka-thanks {
	font-size: 14px;
	color: var(--brand-2);
	font-weight: 600;
	margin-left: auto;
	display: none;
}

.ka-thanks.show {
	display: block;
}

/* -------------------------------------------------------------------------
 * Previous / next — bookingpress/doc-prevnext.
 * ------------------------------------------------------------------------- */

.ka-prevnext {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 24px;
}

.ka-pn {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 1px solid var(--line);
	border-radius: var(--r-14);
	padding: 16px 18px;
	background: var(--surface);
	text-decoration: none;
	transition: border-color 0.18s, transform 0.18s;
}

@media (hover: hover) {

	.ka-pn:hover {
		border-color: var(--ink-2);
		transform: translateY(-2px);
	}
}

.ka-pn .k {
	font-size: 12px;
	font-family: var(--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted-2);
	font-weight: 700;
}

.ka-pn .t {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -0.01em;
}

.ka-pn.next {
	text-align: right;
}

/* First document in a category has no previous. Without this the lone "Next"
   card sits in column 1, reading as a "Previous" that lost its label. */

.ka-pn.next:only-child {
	grid-column: 2;
}

/* -------------------------------------------------------------------------
 * Responsive — the reference's own two breakpoints.
 * ------------------------------------------------------------------------- */

@media (max-width: 1120px) {

	.ka-wrap,
	.ka-wrap:has(.ka-toc) {
		grid-template-columns: 250px minmax(0, 1fr);
	}

	.ka-toc {
		display: none;
	}
}

@media (max-width: 900px) {

	.ka-wrap,
	.ka-wrap:has(.ka-toc) {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.ka-side {
		position: static;
		max-height: none;
		overflow: visible;
		margin-bottom: 24px;
		border: 1px solid var(--line);
		border-radius: var(--r-14);
		padding: 14px 16px;
	}

	.ka-prevnext {
		grid-template-columns: 1fr;
	}

	.ka-pn.next:only-child {
		grid-column: auto;
	}

	.ka-pn.next {
		text-align: left;
	}
}
.wp-block-cover.bp_imp_cover p{ margin-bottom: 0 !important; }
.wp-block-cover.bp_imp_cover.bp_warning_cover span{ background-color: #fef5f7 !important; }
.wp-block-cover.bp_imp_cover.bp_warning_cover { margin-bottom: 18px; border: 1px solid #ffd5d5; border-radius: 14px; }
.wp-block-cover.bp_imp_cover.bp_note_cover span{ background-color: background: #f5ae411f !important; }
.wp-block-cover.bp_imp_cover.bp_note_cover { border: 1px solid #f5ae4166; border-radius: 14px; }