/*
 * Benecaster Theme — Site Styles
 *
 * Builds on tokens.css. Never hardcode design values here — use CSS custom
 * properties from tokens.css. All rules scoped to .bc-page to prevent leaking
 * into embedded apps (savings calculator, SureCart blocks) — with one
 * deliberate exception, the `html` text-size-adjust guard in Reset / base,
 * which cannot be scoped because `html` sits above the body carrying the
 * class. Its own comment explains why that is correct rather than a slip.
 */


/* ============================================================
   Reset / base
   ============================================================ */

/*
 * Stop mobile browsers resizing body text on their own.
 *
 * iOS Safari and Android Chrome autosize text when a page's layout is wider
 * than the screen, and they enlarge the most overflowed pages most — which is
 * what the operator saw on /classes/membership-subscription-repository/ on
 * 2026-10-09, where the computed font family and size were identical to every
 * other class page yet the text rendered larger on a phone than in a narrowed
 * desktop window. Containing the reference tables removed that page's trigger;
 * this stops the browser resizing text on any page that overflows in future.
 *
 * ⚠ The one rule in this file deliberately not scoped under .bc-page, since
 * `html` sits above the body that carries the class. Scoping it to
 * `body.bc-page` would behave identically — the property inherits and nothing
 * on the front of site sits outside that body — but `html` is the documented
 * placement for this property, and the point of the convention is to keep
 * theme styling out of embedded apps. This is not styling: it disables a
 * browser behaviour that would otherwise distort the savings calculator's own
 * text too, so applying it document-wide is the intended effect, not a leak.
 */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Restore the `hidden` attribute.
 *
 * The browser's own `[hidden] { display: none }` is a user-agent rule, so ANY
 * author rule setting `display` outranks it. `.bc-page .bc-form__field` set
 * `display: flex`, which meant an element carrying both that class and the
 * `hidden` attribute rendered anyway — four empty boxes on /checkout/, twice
 * reported as "two radio buttons but no labels or purpose".
 *
 * !important rather than specificity, deliberately: site.css has 131 `display`
 * declarations and any future one could shadow this again. Nothing else in
 * this file uses `display: … !important`, so there is no tie to lose.
 *
 * ⚠ This does NOT replace the licence server's eight scoped `[hidden]` rules —
 * those guard against the theme being changed or replaced, and a test in that
 * repo refuses their removal on purpose. Same for the per-component rules
 * below (.bc-recipe-card, .bc-search-dropdown): harmless, and a safety net if
 * this line is ever lost.
 *
 * Note `:not([hidden])` patterns (e.g. .bc-mobile-nav) are unaffected — they
 * only apply while the element is not hidden. */
.bc-page [hidden] {
	display: none !important;
}

.bc-page *:not(.bc-savings-calc *),
.bc-page *:not(.bc-savings-calc *)::before,
.bc-page *:not(.bc-savings-calc *)::after {
	box-sizing: border-box;
}

body.bc-page {
	margin: 0;
	background: var(--bc-color-bg);
	color: var(--bc-color-text);
	font-family: var(--bc-font-sans);
	font-size: var(--bc-text-base);
	line-height: var(--bc-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.bc-page img:not(.bc-savings-calc *),
.bc-page svg:not(.bc-savings-calc *),
.bc-page video:not(.bc-savings-calc *) {
	max-width: 100%;
	height: auto;
	display: block;
}

.bc-page h1:not(.bc-savings-calc *),
.bc-page h2:not(.bc-savings-calc *),
.bc-page h3:not(.bc-savings-calc *),
.bc-page h4:not(.bc-savings-calc *),
.bc-page h5:not(.bc-savings-calc *),
.bc-page h6:not(.bc-savings-calc *) {
	word-break: break-word;
	overflow-wrap: break-word;
}


/* ============================================================
   Layout
   ============================================================ */

.bc-page .bc-main {
	max-width: var(--bc-max-width);
	margin-inline: auto;
	padding: var(--bc-space-12) var(--bc-space-6);
	width: 100%;
	min-height: 60vh;
}

.bc-page .bc-header-inner,
.bc-page .bc-footer-inner {
	max-width: var(--bc-max-width);
	margin-inline: auto;
	padding: var(--bc-space-4) var(--bc-space-6);
}


/* ============================================================
   Header
   ============================================================ */

.bc-page .bc-site-header {
	background: var(--bc-color-bg);
	border-bottom: 1px solid var(--bc-color-border);
	position: relative;
	z-index: var(--bc-z-header);
}

.bc-page .bc-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bc-space-6);
}

/* Header account link. Low emphasis on purpose: it is a wayfinding link for
   returning customers, not a call to action, and must not compete with the
   primary CTA in the nav. Rendered by inc/header-nav.php in both the desktop
   header and the mobile drawer. */
.bc-page .bc-account-link {
	flex-shrink: 0;
	font-size: var(--bc-text-sm);
	font-weight: 600;
	color: var(--bc-color-text);
	text-decoration: none;
	padding: var(--bc-space-2) var(--bc-space-4);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-full);
	transition: color var(--bc-transition-fast), border-color var(--bc-transition-fast);
}

.bc-page .bc-account-link:hover,
.bc-page .bc-account-link:focus {
	color: var(--bc-color-link);
	border-color: var(--bc-color-link);
}

/* In the drawer it is a full-width row like the menu items around it. */
.bc-page .bc-account-link--mobile {
	display: block;
	margin-top: var(--bc-space-4);
	text-align: center;
}

.bc-page .bc-logo {
	font-size: var(--bc-text-xl);
	font-weight: 700;
	color: var(--bc-color-text-strong);
	text-decoration: none;
	letter-spacing: -0.01em;
}

/*
 * Target the <ul> directly instead of the .bc-nav-list class. wp_nav_menu()
 * only applies the theme's menu_class when an actual menu has been assigned
 * to the "primary" location in Appearance → Menus; without one it falls back
 * to wp_page_menu(), which emits a bare <ul>. Selecting <ul> here keeps the
 * layout intact either way.
 */
.bc-page .bc-primary-nav ul {
	display: flex;
	gap: var(--bc-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bc-page .bc-primary-nav li {
	margin: 0;
}

.bc-page .bc-primary-nav a {
	color: var(--bc-color-text);
	text-decoration: none;
	font-size: var(--bc-text-sm);
	font-weight: 500;
	transition: color var(--bc-transition-fast);
}

.bc-page .bc-primary-nav a:hover,
.bc-page .bc-primary-nav a:focus {
	color: var(--bc-color-accent);
}

.bc-page .bc-nav-toggle {
	display: none;
	background: transparent;
	border: none;
	padding: var(--bc-space-2);
	cursor: pointer;
	width: 40px;
	height: 40px;
	flex-direction: column;
	justify-content: space-between;
}

.bc-page .bc-nav-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--bc-color-text-strong);
	transition: background var(--bc-transition-fast);
}

.bc-page .bc-nav-toggle[aria-expanded="true"] span {
	background: var(--bc-color-accent);
}

.bc-page .bc-mobile-nav {
	display: none;
	background: var(--bc-color-bg-elevated);
	border-bottom: 1px solid var(--bc-color-border);
	padding: var(--bc-space-4) var(--bc-space-6);
}

.bc-page .bc-mobile-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-3);
}

.bc-page .bc-mobile-nav a {
	color: var(--bc-color-text);
	text-decoration: none;
	font-size: var(--bc-text-base);
	display: block;
	padding: var(--bc-space-2) 0;
}

/* Body scroll lock while the mobile drawer is open — set by nav.js. */
body.bc-nav-open {
	overflow: hidden;
}


/* ============================================================
   Footer
   ============================================================ */

.bc-page .bc-site-footer {
	background: var(--bc-color-bg-subtle);
	border-top: 1px solid var(--bc-color-border);
	margin-top: var(--bc-space-16);
}

/*
 * Two stacked rows: a three-column menu row (.bc-footer__columns) on top,
 * then the full-width brand row (logo + tagline + copyright) beneath.
 */
.bc-page .bc-footer-inner {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-8);
	padding-block: var(--bc-space-12);
}

/*
 * Three equal-width menu columns on desktop; collapses to a single column
 * below the md (768px) breakpoint. Selectors on the child .bc-footer-col
 * continue to drive per-column styling.
 */
.bc-page .bc-footer__columns {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: start;
	gap: var(--bc-space-8);
}

@media (max-width: 767px) {
	.bc-page .bc-footer__columns {
		grid-template-columns: 1fr;
	}
}

.bc-page .bc-footer-col {
	min-width: 0;
}

.bc-page .bc-footer-brand {
	text-align: center;
}

.bc-page .bc-footer-logo {
	font-size: var(--bc-text-lg);
	font-weight: 700;
	color: var(--bc-color-text-strong);
	text-decoration: none;
}

.bc-page .bc-footer-tagline {
	margin: var(--bc-space-2) 0 0;
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-sm);
}

.bc-page .bc-footer-copy {
	margin: var(--bc-space-4) 0 0;
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-sm);
}

/*
 * Target the <ul> directly (same reasoning as the header nav): wp_nav_menu
 * only applies the menu_class when a menu is assigned in Appearance → Menus.
 */
.bc-page .bc-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-2);
}

.bc-page .bc-footer-nav li {
	margin: 0;
}

.bc-page .bc-footer-nav a {
	color: var(--bc-color-text);
	text-decoration: none;
	font-size: var(--bc-text-sm);
	transition: color var(--bc-transition-fast);
}

.bc-page .bc-footer-nav a:hover,
.bc-page .bc-footer-nav a:focus {
	color: var(--bc-color-accent);
}


/* ============================================================
   Typography — page content
   ============================================================ */

.bc-page .bc-page-title {
	font-size: var(--bc-text-3xl);
	line-height: var(--bc-leading-tight);
	color: var(--bc-color-text-strong);
	letter-spacing: -0.01em;
	margin: 0 0 var(--bc-space-6);
}

.bc-page .bc-content {
	max-width: var(--bc-max-width-prose);
	line-height: var(--bc-leading-loose);
}

/* ============================================================
   Page hero — optional image treatment on marketing pages.
   Toggled per page via _bc_hero_image post meta; page.php picks
   .bc-hero--image when the meta resolves to a valid attachment,
   .bc-hero--text otherwise (heading-only, current treatment).
   ============================================================ */

.bc-page .bc-hero--text {
	margin: 0 0 var(--bc-space-6);
}

.bc-page .bc-hero--text .bc-page-title {
	margin-bottom: 0;
}

.bc-page .bc-hero--image {
	position: relative;
	aspect-ratio: 16 / 6;
	margin: 0 0 var(--bc-space-8);
	border-radius: var(--bc-radius-lg);
	overflow: hidden;
	background: var(--bc-color-bg-elevated);
}

.bc-page .bc-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bc-page .bc-hero--image .bc-hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: var(--bc-space-8);
	background: linear-gradient(
		to bottom,
		transparent 40%,
		color-mix(in srgb, var(--bc-color-bg) 85%, transparent) 100%
	);
}

.bc-page .bc-hero--image .bc-hero__title {
	margin: 0;
	max-width: var(--bc-max-width-prose);
	text-shadow: 0 1px 2px color-mix(in srgb, var(--bc-color-bg) 60%, transparent);
}

@media (max-width: 639px) {
	.bc-page .bc-hero--image {
		aspect-ratio: 4 / 3;
		border-radius: var(--bc-radius-md);
	}
	.bc-page .bc-hero--image .bc-hero__overlay {
		padding: var(--bc-space-4);
	}
}

.bc-page .bc-content h1,
.bc-page .bc-content h2,
.bc-page .bc-content h3,
.bc-page .bc-content h4 {
	color: var(--bc-color-text-strong);
	line-height: var(--bc-leading-tight);
	letter-spacing: -0.01em;
	margin: var(--bc-space-8) 0 var(--bc-space-3);
}

.bc-page .bc-content h1 { font-size: var(--bc-text-3xl); }
.bc-page .bc-content h2 { font-size: var(--bc-text-2xl); }
.bc-page .bc-content h3 { font-size: var(--bc-text-xl); }
.bc-page .bc-content h4 { font-size: var(--bc-text-lg); }

.bc-page .bc-content p {
	margin: 0 0 var(--bc-space-4);
}

.bc-page .bc-content a:not(.bc-btn) {
	color: var(--bc-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	transition: color var(--bc-transition-fast);
}

.bc-page .bc-content a:not(.bc-btn):hover,
.bc-page .bc-content a:not(.bc-btn):focus {
	color: var(--bc-color-link-hover);
}

.bc-page .bc-content ul,
.bc-page .bc-content ol {
	margin: 0 0 var(--bc-space-4);
	padding-left: var(--bc-space-6);
}

.bc-page .bc-content li + li {
	margin-top: var(--bc-space-2);
}

.bc-page .bc-content pre {
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	padding: var(--bc-space-4);
	margin: var(--bc-space-6) 0;
	overflow-x: auto;
	font-size: var(--bc-text-sm);
	line-height: var(--bc-leading-normal);
}

.bc-page .bc-content code {
	font-family: var(--bc-font-mono);
	font-size: 0.9em;
}

/*
 * Long identifiers wrap instead of carrying the page sideways on a phone.
 *
 * ⚠⚠ This is deliberately on the prose CONTAINERS, not on `code`. The
 * 2026-10-09 fix put `overflow-wrap: anywhere` on `.bc-content :not(pre) > code`
 * and that was measured as sufficient — but only against the four URLs the
 * batch named. A sweep of all 127 class pages on 2026-10-10 found 15 still
 * overflowing, up to 466px at a 375px viewport, and the same defect on roughly
 * one hook page in seven and one function page in seven. Two separate gaps:
 *
 *   1. The reference singles render their Notes in `.bc-class-notes-body`,
 *      `.bc-func-notes-body` and `.bc-hook-notes-body`, which are NOT inside
 *      `.bc-content`. The earlier fix could never reach them.
 *   2. Some identifiers are plain link text with no <code> wrapper at all —
 *      /hooks/benecaster_token_reactivation_blocked/ has a bare <a> — so any
 *      rule keyed on `code` misses them however many surfaces it lists.
 *
 * Putting the property on the container covers code, links and bare text in one
 * place, which is why it is written this way rather than as a longer list of
 * `... code` selectors. Measured across the 14 worst pages of all three types:
 * every one reaches exactly 375.
 *
 * ⚠ `anywhere` rather than `break-word`, and the difference is the whole point:
 * only `anywhere` reduces a box's min-content size, so it shrinks the ancestors
 * that were being sized by the identifier. `break-word` wraps the glyphs but
 * leaves min-content unchanged, which left the first page measured at 394px.
 *
 * ⚠ It takes effect only where no other wrap is possible, so running prose
 * still breaks at spaces and ordinary long words are untouched; the mid-token
 * break happens on the identifiers that have no break opportunity at all.
 */
.bc-page .bc-content,
.bc-page .bc-docs-body,
.bc-page .bc-class-notes-body,
.bc-page .bc-func-notes-body,
.bc-page .bc-hook-notes-body,
.bc-page .bc-func-return-desc {
	overflow-wrap: anywhere;
}

/*
 * ⚠⚠ Tables opt BACK OUT of the `anywhere` above, and this is load-bearing.
 *
 * The rule above is correct for prose and wrong for a table, for the reason its
 * own comment gives: only `anywhere` reduces a box's min-content size. An
 * auto-layout table sizes its columns FROM min-content, so inheriting
 * `anywhere` into a table lets every cell be squeezed to about one character
 * and the longest column takes all the room. That is the cause of the
 * most-reported defect on the site — roughly 25 operator reports across some 20
 * pages, all "the left column is too narrow" or "names wrap in weird places".
 *
 * Measured 2026-10-19 on live 0.1.1.5, viewport 1280px (641px article column):
 * /docs/dashboard-overview/ rendered its Card column at 60px of a 641px table,
 * and the other two tables on the page at 212 and 96. With this rule they are
 * 121, 231 and 126. /pricing/'s add-on column went 121 → 167 at 1280px,
 * 102 → 159 at 820px and 65 → 124 at 375px.
 *
 * ⚠⚠ It also restores the horizontal scroll the roadmap asked for separately,
 * and that is why one rule closes both items rather than two. The scroll
 * wrapper has existed since the support-doc table work, but a table whose cells
 * can shrink to one character never overflows it, so it never scrolled. Once
 * min-content is a real measure again the wrapper does its job unchanged: at
 * 375px on /pricing/ the plan, breakeven and add-on tables now measure 618, 416
 * and 360 inside a 343px wrapper and scroll, while the document still measures
 * 375. No table `min-width` is involved — forcing one was tried and rejected,
 * because it also pushed small tables that fit perfectly well into scrolling.
 *
 * ⚠ `break-word` rather than `anywhere` on a cell's inline code, and the
 * difference is the whole point again: a long identifier still wraps inside its
 * cell, but it no longer collapses the column's min-content, so the column is
 * sized by the identifier instead of by one character. A table too wide for the
 * column is the scroll wrapper's problem, not the column's.
 *
 * ⚠ `pre` blocks in cells are untouched, as above.
 */
.bc-page .bc-content table,
.bc-page .bc-docs-body table {
	overflow-wrap: normal;
}

.bc-page .bc-content table :not(pre) > code,
.bc-page .bc-docs-body table :not(pre) > code {
	overflow-wrap: break-word;
}

.bc-page .bc-content :not(pre) > code {
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-sm);
	padding: 0.15em 0.4em;
}

.bc-page .bc-content pre code {
	background: none;
	border: none;
	padding: 0;
}

.bc-page .bc-content blockquote {
	margin: var(--bc-space-6) 0;
	padding: var(--bc-space-2) var(--bc-space-6);
	border-left: 3px solid var(--bc-color-accent);
	color: var(--bc-color-text-muted);
	font-style: italic;
}

.bc-page .bc-content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--bc-space-6) 0;
	font-size: var(--bc-text-sm);
}

.bc-page .bc-content th,
.bc-page .bc-content td {
	padding: var(--bc-space-3) var(--bc-space-4);
	text-align: left;
	border-bottom: 1px solid var(--bc-color-border);
}

.bc-page .bc-content th {
	color: var(--bc-color-text-strong);
	font-weight: 600;
	background: var(--bc-color-bg-elevated);
}

.bc-page .bc-content hr {
	border: none;
	border-top: 1px solid var(--bc-color-border);
	margin: var(--bc-space-8) 0;
}


/* ============================================================
   Buttons
   ============================================================ */

.bc-page .bc-btn {
	display: inline-block;
	padding: var(--bc-space-3) var(--bc-space-6);
	font-family: var(--bc-font-sans);
	font-size: var(--bc-text-base);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--bc-radius-md);
	cursor: pointer;
	transition: background var(--bc-transition-fast), color var(--bc-transition-fast), border-color var(--bc-transition-fast);
}

.bc-page .bc-btn--primary {
	background: var(--bc-color-accent);
	color: var(--bc-navy-900);
	border-color: var(--bc-color-accent);
}

.bc-page .bc-btn--primary:hover,
.bc-page .bc-btn--primary:focus {
	background: var(--bc-color-accent-hover);
	border-color: var(--bc-color-accent-hover);
	color: var(--bc-navy-900);
}

.bc-page .bc-btn--primary:active {
	background: var(--bc-color-accent-pressed);
	border-color: var(--bc-color-accent-pressed);
}

.bc-page .bc-btn--secondary {
	background: transparent;
	color: var(--bc-color-text-strong);
	border-color: var(--bc-color-border);
}

.bc-page .bc-btn--secondary:hover,
.bc-page .bc-btn--secondary:focus {
	color: var(--bc-color-accent);
	border-color: var(--bc-color-accent);
}


/* ============================================================
   Skip link (accessibility)
   ============================================================ */

/*
 * First interactive element in the DOM (rendered immediately after
 * wp_body_open() in header.php). Off-screen until focused, then reveals
 * as a floating button anchored to the top-left of the viewport so
 * keyboard users can jump past the header nav to the main landmark.
 *
 * Target: every <main> in the theme carries id="bc-main" tabindex="-1"
 * so the browser can move focus to the region on click.
 */
.bc-page .bc-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-150%);
	z-index: var(--bc-z-skip-link);
	padding: var(--bc-space-2) var(--bc-space-4);
	background: var(--bc-color-accent);
	color: var(--bc-navy-900);
	font-weight: 600;
	font-size: var(--bc-text-sm);
	text-decoration: none;
	border-radius: 0 0 var(--bc-radius-md) 0;
	transition: transform var(--bc-transition-fast);
}

.bc-page .bc-skip-link:focus {
	transform: translateY(0);
	outline: 2px solid var(--bc-color-text-strong);
	outline-offset: 2px;
}

/*
 * The <main id="bc-main" tabindex="-1"> target receives focus after the
 * skip link is activated. Suppress the default focus ring on the region
 * itself — it is a programmatic focus target, not an interactive one.
 */
.bc-page .bc-main:focus {
	outline: none;
}


/* ============================================================
   Focus visible (accessibility baseline)
   ============================================================ */

.bc-page a:focus-visible:not(.bc-savings-calc *),
.bc-page button:focus-visible:not(.bc-savings-calc *),
.bc-page .bc-btn:focus-visible {
	outline: 2px solid var(--bc-color-accent);
	outline-offset: 2px;
}


/* ============================================================
   Blog — archive card layout
   ============================================================ */

.bc-page .bc-archive {
	max-width: var(--bc-max-width);
	margin: 0 auto;
	padding: var(--bc-space-12) var(--bc-space-6);
}

.bc-page .bc-archive-title {
	font-size: var(--bc-text-3xl);
	line-height: var(--bc-leading-tight);
	color: var(--bc-color-text-strong);
	letter-spacing: -0.01em;
	margin: 0 0 var(--bc-space-8);
}

.bc-page .bc-post-list {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-6);
	margin-bottom: var(--bc-space-8);
}

.bc-page .bc-post-card {
	padding: var(--bc-space-6);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	transition: border-color var(--bc-transition-fast);
}

.bc-page .bc-post-card:hover,
.bc-page .bc-post-card:focus-within {
	border-color: var(--bc-color-accent);
}

.bc-page .bc-post-card-title {
	font-size: var(--bc-text-xl);
	line-height: var(--bc-leading-tight);
	margin: 0 0 var(--bc-space-2);
}

.bc-page .bc-post-card-title a {
	color: var(--bc-color-text-strong);
	text-decoration: none;
}

.bc-page .bc-post-card-title a:hover,
.bc-page .bc-post-card-title a:focus {
	color: var(--bc-color-accent);
}

.bc-page .bc-post-card-date {
	display: block;
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-sm);
	margin-bottom: var(--bc-space-4);
}

.bc-page .bc-post-card-excerpt {
	color: var(--bc-color-text);
	line-height: var(--bc-leading-normal);
}

.bc-page .bc-post-card-excerpt p {
	margin: 0;
}
/* .bc-post-list { } */
/* .bc-post-card { } */


/* ============================================================
   Developer reference — recipes
   ============================================================ */

.bc-page .bc-recipe {
	max-width: var(--bc-max-width-prose);
	margin-inline: auto;
}

.bc-page .bc-recipe-header {
	margin-bottom: var(--bc-space-8);
	padding-bottom: var(--bc-space-6);
	border-bottom: 1px solid var(--bc-color-border);
}

.bc-page .bc-recipe-title {
	font-size: var(--bc-text-3xl);
	line-height: var(--bc-leading-tight);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-4);
}

.bc-page .bc-recipe-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bc-space-3);
	font-size: var(--bc-text-sm);
}

.bc-page .bc-recipe-difficulty,
.bc-page .bc-recipe-tier {
	display: inline-block;
	padding: var(--bc-space-1) var(--bc-space-3);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: 1px solid var(--bc-color-border);
	background: var(--bc-color-bg-elevated);
	color: var(--bc-color-text);
}

.bc-page .bc-recipe-difficulty--beginner {
	color: var(--bc-color-success);
	border-color: var(--bc-color-success);
}

.bc-page .bc-recipe-difficulty--intermediate {
	color: var(--bc-color-accent);
	border-color: var(--bc-color-accent);
}

.bc-page .bc-recipe-difficulty--advanced {
	color: var(--bc-color-text-strong);
	border-color: var(--bc-color-text-strong);
}

.bc-page .bc-recipe-tier--paid {
	color: var(--bc-color-accent);
	border-color: var(--bc-color-accent);
}

.bc-page .bc-recipe-tier--free {
	color: var(--bc-color-success);
	border-color: var(--bc-color-success);
}

.bc-page .bc-recipe-github {
	margin-inline-start: auto;
	color: var(--bc-color-link);
	text-decoration: none;
	font-weight: 500;
}

.bc-page .bc-recipe-github:hover,
.bc-page .bc-recipe-github:focus {
	color: var(--bc-color-link-hover);
	text-decoration: underline;
}

.bc-page .bc-recipe-hooks-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bc-space-2);
	font-size: var(--bc-text-sm);
}

.bc-page .bc-recipe-hooks-list li {
	margin: 0;
}

.bc-page .bc-recipe-hooks-list code {
	font-family: var(--bc-font-mono);
	font-size: 0.85em;
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-sm);
	padding: 0.15em 0.4em;
	color: var(--bc-color-text);
}

.bc-page .bc-recipe-hooks-list a {
	text-decoration: none;
}

.bc-page .bc-recipe-hooks-list a:hover code,
.bc-page .bc-recipe-hooks-list a:focus code {
	color: var(--bc-color-accent);
	border-color: var(--bc-color-accent);
}


/* ============================================================
   Developer reference — recipe archive
   ============================================================ */

.bc-page .bc-recipes-header {
	max-width: var(--bc-max-width-prose);
	margin: 0 auto var(--bc-space-8);
	text-align: center;
}

.bc-page .bc-recipes-title {
	font-size: var(--bc-text-3xl);
	line-height: var(--bc-leading-tight);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-3);
}

.bc-page .bc-recipes-lede {
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-lg);
	margin: 0;
}

/*
 * The filter mount is populated by the plugin JS; when empty it has no
 * intrinsic height, so no negative-space penalty on plugin-less renders.
 */
.bc-page .bc-recipe-filters:not(:empty) {
	margin-bottom: var(--bc-space-6);
	padding: var(--bc-space-4);
	background: var(--bc-color-bg-subtle);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
}

.bc-page .bc-recipe-index {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bc-space-4);
	margin: 0;
}

@media (min-width: 640px) {
	.bc-page .bc-recipe-index {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.bc-page .bc-recipe-index {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bc-page .bc-recipe-card {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-3);
	padding: var(--bc-space-6);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	transition: border-color var(--bc-transition-fast), transform var(--bc-transition-fast);
}

.bc-page .bc-recipe-card:hover,
.bc-page .bc-recipe-card:focus-within {
	border-color: var(--bc-color-accent);
}

.bc-page .bc-recipe-card[hidden] {
	display: none;
}

.bc-page .bc-recipe-card-title {
	font-size: var(--bc-text-lg);
	line-height: var(--bc-leading-tight);
	margin: 0;
}

.bc-page .bc-recipe-card-title a {
	color: var(--bc-color-text-strong);
	text-decoration: none;
}

.bc-page .bc-recipe-card-title a:hover,
.bc-page .bc-recipe-card-title a:focus {
	color: var(--bc-color-accent);
}

.bc-page .bc-recipe-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bc-space-2);
	font-size: var(--bc-text-xs);
}

.bc-page .bc-recipe-addon {
	display: inline-block;
	padding: var(--bc-space-1) var(--bc-space-3);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: 1px solid var(--bc-color-border);
	background: var(--bc-color-bg);
	color: var(--bc-color-text-muted);
	font-family: var(--bc-font-mono);
}

.bc-page .bc-recipe-card-excerpt {
	color: var(--bc-color-text);
	font-size: var(--bc-text-sm);
	line-height: var(--bc-leading-normal);
}

.bc-page .bc-recipe-card-excerpt p {
	margin: 0;
}

.bc-page .bc-recipe-empty {
	text-align: center;
	color: var(--bc-color-text-muted);
	padding: var(--bc-space-8) 0;
}

/*
 * Two consumers:
 *   - archive-benecaster_recipe.php builds its own <nav.bc-pagination>
 *     with .bc-pagination-item spans directly inside — flex works on the
 *     nav itself.
 *   - archive.php uses the_posts_pagination(class=>'bc-pagination'),
 *     which emits <nav.bc-pagination><div.nav-links><a.page-numbers>…
 *     — flex has to be applied to the .nav-links wrapper instead.
 * Applying flex to both selectors covers both cases with one rule set.
 */
.bc-page .bc-pagination,
.bc-page .bc-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bc-space-2);
	margin-top: var(--bc-space-8);
}

.bc-page .bc-pagination a,
.bc-page .bc-pagination .current {
	display: inline-block;
	padding: var(--bc-space-2) var(--bc-space-3);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-sm);
	color: var(--bc-color-text);
	text-decoration: none;
	font-size: var(--bc-text-sm);
	min-width: 2.25rem;
	text-align: center;
}

.bc-page .bc-pagination a:hover,
.bc-page .bc-pagination a:focus {
	border-color: var(--bc-color-accent);
	color: var(--bc-color-accent);
}

.bc-page .bc-pagination .current {
	background: var(--bc-color-accent);
	color: var(--bc-navy-900);
	border-color: var(--bc-color-accent);
	font-weight: 600;
}

.bc-page .bc-pagination .dots {
	padding: var(--bc-space-2) var(--bc-space-1);
	color: var(--bc-color-text-muted);
}

/* ============================================================
   Developer reference — hooks
   ============================================================ */

.bc-page .bc-hook {
	max-width: var(--bc-max-width-prose);
	margin-inline: auto;
}

.bc-page .bc-hook-header {
	margin-bottom: var(--bc-space-8);
	padding-bottom: var(--bc-space-6);
	border-bottom: 1px solid var(--bc-color-border);
}

.bc-page .bc-hook-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bc-space-3);
	margin-bottom: var(--bc-space-3);
	font-size: var(--bc-text-sm);
}

.bc-page .bc-hook-title {
	font-size: var(--bc-text-2xl);
	line-height: var(--bc-leading-tight);
	margin: 0;
	overflow-wrap: anywhere;
}

.bc-page .bc-hook-title code {
	font-family: var(--bc-font-mono);
	font-size: inherit;
	background: none;
	border: none;
	padding: 0;
	color: var(--bc-color-text-strong);
}

.bc-page .bc-hook-type {
	display: inline-block;
	padding: var(--bc-space-1) var(--bc-space-3);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: 1px solid var(--bc-color-border);
	background: var(--bc-color-bg-elevated);
	color: var(--bc-color-text);
}

.bc-page .bc-hook-type--action {
	color: var(--bc-color-success);
	border-color: var(--bc-color-success);
}

.bc-page .bc-hook-type--filter {
	color: var(--bc-color-accent);
	border-color: var(--bc-color-accent);
}

.bc-page .bc-hook-since {
	color: var(--bc-color-text-muted);
}

.bc-page .bc-hook-deprecated-badge {
	display: inline-block;
	padding: var(--bc-space-1) var(--bc-space-3);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: transparent;
	color: var(--bc-color-text-strong);
	border: 1px solid var(--bc-color-text-strong);
}

.bc-page .bc-hook-deprecated-note {
	margin: var(--bc-space-4) 0 0;
	padding: var(--bc-space-3) var(--bc-space-4);
	background: var(--bc-color-bg-elevated);
	border-left: 3px solid var(--bc-color-text-strong);
	border-radius: var(--bc-radius-sm);
	color: var(--bc-color-text);
	font-size: var(--bc-text-sm);
}

.bc-page .bc-hook-params {
	margin-bottom: var(--bc-space-8);
}

.bc-page .bc-hook-section-title {
	font-size: var(--bc-text-xl);
	line-height: var(--bc-leading-tight);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-4);
}

.bc-page .bc-hook-params-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--bc-text-sm);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	overflow: hidden;
}

.bc-page .bc-hook-params-table th,
.bc-page .bc-hook-params-table td {
	padding: var(--bc-space-3) var(--bc-space-4);
	text-align: left;
	border-bottom: 1px solid var(--bc-color-border);
	vertical-align: top;
}

.bc-page .bc-hook-params-table tbody tr:last-child th,
.bc-page .bc-hook-params-table tbody tr:last-child td {
	border-bottom: none;
}

.bc-page .bc-hook-params-table th {
	color: var(--bc-color-text-strong);
	font-weight: 600;
	background: var(--bc-color-bg-subtle);
}

.bc-page .bc-hook-params-table code {
	font-family: var(--bc-font-mono);
	font-size: 0.9em;
	color: var(--bc-color-text-strong);
	background: var(--bc-color-bg);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-sm);
	padding: 0.1em 0.4em;
}

/* Base color for the param-type token — same amber wherever it appears. */
.bc-page .bc-hook-param-type {
	color: var(--bc-color-accent);
}

/* Inside the params table, drop the chip chrome (background/border/padding)
   so the type reads as inline text within the table cell. */
.bc-page .bc-hook-params-table .bc-hook-param-type {
	background: transparent;
	border-color: transparent;
	padding-left: 0;
	padding-right: 0;
}

.bc-page .bc-hook-return {
	margin: var(--bc-space-4) 0 0;
	font-size: var(--bc-text-sm);
	display: flex;
	align-items: center;
	gap: var(--bc-space-2);
}

.bc-page .bc-hook-return-label {
	color: var(--bc-color-text-muted);
	font-weight: 500;
}

/* Breadcrumbs, tier + addon badges, example/affects/related sections
   added when the theme took over rendering of the singular hook page. */

.bc-page .bc-hook-breadcrumbs {
	margin: 0 0 var(--bc-space-6);
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text-muted);
}

.bc-page .bc-hook-breadcrumbs ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bc-space-2);
}

.bc-page .bc-hook-breadcrumbs li + li::before {
	content: "›";
	margin-right: var(--bc-space-2);
	color: var(--bc-color-text-muted);
}

.bc-page .bc-hook-breadcrumbs a {
	color: var(--bc-color-link);
}

.bc-page .bc-hook-breadcrumbs code {
	font-family: var(--bc-font-mono);
	font-size: 0.9em;
	color: var(--bc-color-text-strong);
}

.bc-page .bc-hook-header > .bc-hook-title + .bc-hook-meta-row {
	margin-top: var(--bc-space-3);
	margin-bottom: 0;
}

.bc-page .bc-hook-tier,
.bc-page .bc-hook-addon {
	display: inline-block;
	padding: var(--bc-space-1) var(--bc-space-3);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: 1px solid var(--bc-color-border);
	background: var(--bc-color-bg-elevated);
	color: var(--bc-color-text-muted);
}

.bc-page .bc-hook-tier--premium {
	color: var(--bc-color-accent);
	border-color: var(--bc-color-accent);
}

.bc-page .bc-hook-tier--free {
	color: var(--bc-color-success);
	border-color: var(--bc-color-success);
}

.bc-page .bc-hook-example,
.bc-page .bc-hook-examples,
.bc-page .bc-hook-notes,
.bc-page .bc-hook-affects,
.bc-page .bc-hook-related {
	margin-bottom: var(--bc-space-8);
}

/* --- Labeled examples list (repeatable _hook_examples meta). Each item is
 * a labeled <pre><code> block reusing the .bc-hook-example-code treatment
 * defined below. --- */

.bc-page .bc-hook-example-item + .bc-hook-example-item {
	margin-top: var(--bc-space-6);
}

.bc-page .bc-hook-example-label {
	font-size: var(--bc-text-base);
	font-weight: 600;
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-2);
	letter-spacing: -0.005em;
}

/* --- Notes (freeform markdown _hook_notes meta) --- */

.bc-page .bc-hook-notes-body {
	color: var(--bc-color-text);
	line-height: var(--bc-leading-loose);
}

.bc-page .bc-hook-notes-body p {
	margin: 0 0 var(--bc-space-4);
}

.bc-page .bc-hook-notes-body p:last-child {
	margin-bottom: 0;
}

.bc-page .bc-hook-notes-body code {
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	padding: 0.1em 0.35em;
	border-radius: var(--bc-radius-sm);
	font-family: var(--bc-font-mono);
	font-size: 0.9em;
	color: var(--bc-color-text-strong);
}

.bc-page .bc-hook-notes-body a {
	color: var(--bc-color-link);
	text-decoration: underline;
}

.bc-page .bc-hook-notes-body a:hover {
	color: var(--bc-color-link-hover);
}

.bc-page .bc-hook-notes-body strong {
	color: var(--bc-color-text-strong);
	font-weight: 700;
}

.bc-page .bc-hook-example-code {
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	padding: var(--bc-space-4);
	margin: 0;
	overflow-x: auto;
	font-size: var(--bc-text-sm);
	line-height: var(--bc-leading-normal);
}

.bc-page .bc-hook-example-code code {
	font-family: var(--bc-font-mono);
	color: var(--bc-color-text);
	background: none;
	padding: 0;
	border: none;
}

.bc-page .bc-hook-affects-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bc-space-2);
}

.bc-page .bc-hook-affects-list li {
	padding: var(--bc-space-1) var(--bc-space-3);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text);
}

/* Affects entries carry inline markdown links; match the Notes link treatment. */
.bc-page .bc-hook-affects-list a {
	color: var(--bc-color-link);
	text-decoration: underline;
}

.bc-page .bc-hook-affects-list a:hover {
	color: var(--bc-color-link-hover);
}

.bc-page .bc-hook-affects-list code {
	font-family: var(--bc-font-mono);
	font-size: inherit;
	color: inherit;
}

.bc-page .bc-hook-related-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--bc-space-3);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.bc-page .bc-hook-related-card {
	padding: var(--bc-space-4);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	transition: border-color var(--bc-transition-fast);
}

.bc-page .bc-hook-related-card:hover,
.bc-page .bc-hook-related-card:focus-within {
	border-color: var(--bc-color-accent);
}

.bc-page .bc-hook-related-card a {
	color: var(--bc-color-accent);
	text-decoration: none;
	font-weight: 600;
}

.bc-page .bc-hook-related-card a:hover,
.bc-page .bc-hook-related-card a:focus {
	color: var(--bc-color-accent-hover);
	text-decoration: underline;
}

/* ============================================================
   Template parity additions for recipe / shortcode / doc singles
   (added when the theme took over rendering from the plugin).
   Uses existing bc-recipe-* / bc-shortcode-* / bc-doc-* / bc-docs-*
   prefixes so it slots into the existing sections cohesively.
   ============================================================ */

/* Recipe: since pill, code block, related-recipes grid, section title.
   Tier modifiers (--free, --paid) are defined next to their base rule
   in the "Developer reference — recipes" block above. */

.bc-page .bc-recipe-since {
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-sm);
}

.bc-page .bc-recipe-section-title {
	font-size: var(--bc-text-xl);
	line-height: var(--bc-leading-tight);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-4);
}

.bc-page .bc-recipe-code-section,
.bc-page .bc-recipe-hooks-section,
.bc-page .bc-recipe-related {
	margin-bottom: var(--bc-space-8);
}

.bc-page .bc-recipe-code-wrap {
	position: relative;
	margin: 0 0 var(--bc-space-3);
}

.bc-page .bc-recipe-code {
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	padding: var(--bc-space-4);
	margin: 0;
	overflow-x: auto;
	font-size: var(--bc-text-sm);
	line-height: var(--bc-leading-normal);
}

.bc-page .bc-recipe-code code {
	font-family: var(--bc-font-mono);
	color: var(--bc-color-text);
	background: none;
	padding: 0;
	border: none;
}

.bc-page .bc-recipe-code-copy {
	position: absolute;
	top: var(--bc-space-3);
	right: var(--bc-space-3);
	padding: var(--bc-space-1) var(--bc-space-3);
	font-family: var(--bc-font-sans);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bc-color-text-muted);
	background: var(--bc-color-bg);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-sm);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--bc-transition-fast), color var(--bc-transition-fast), border-color var(--bc-transition-fast);
}

.bc-page .bc-recipe-code-wrap:hover .bc-recipe-code-copy,
.bc-page .bc-recipe-code-copy:focus-visible {
	opacity: 1;
	color: var(--bc-color-text-strong);
	outline: none;
}

.bc-page .bc-recipe-code-copy:hover {
	border-color: var(--bc-color-accent);
}

.bc-page .bc-recipe-code-copy.is-copied {
	opacity: 1;
	color: var(--bc-color-success);
	border-color: var(--bc-color-success);
}

.bc-page .bc-recipe-code-github {
	margin: 0;
	font-size: var(--bc-text-sm);
}

.bc-page .bc-recipe-code-github a {
	color: var(--bc-color-link);
	text-decoration: none;
	font-weight: 500;
}

.bc-page .bc-recipe-code-github a:hover {
	color: var(--bc-color-link-hover);
	text-decoration: underline;
}

.bc-page .bc-recipe-related-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--bc-space-3);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.bc-page .bc-recipe-related-card {
	padding: var(--bc-space-4);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
}

.bc-page .bc-recipe-related-card a {
	color: var(--bc-color-link);
	text-decoration: none;
	font-weight: 500;
}

.bc-page .bc-recipe-related-card a:hover {
	color: var(--bc-color-link-hover);
}

/* Shortcode: plan/addon pills, related-recipes grid.
   The .bc-shortcode-type context pill and its --plugin / --marketing-site
   modifiers were removed 2026-09-20 with the _shortcode_context field. */

.bc-page .bc-shortcode-plan,
.bc-page .bc-shortcode-addon {
	display: inline-block;
	padding: var(--bc-space-1) var(--bc-space-3);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: 1px solid var(--bc-color-border);
	background: var(--bc-color-bg-elevated);
	color: var(--bc-color-text-muted);
}

.bc-page .bc-shortcode-related {
	margin-bottom: var(--bc-space-8);
}

.bc-page .bc-shortcode-related-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--bc-space-4);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.bc-page .bc-shortcode-related-card {
	padding: 0;
	background: var(--bc-color-bg-elevated);
	border: 1px solid color-mix(in srgb, var(--bc-gray-400) 40%, transparent);
	border-radius: var(--bc-radius-md);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.35);
	transition: border-color var(--bc-transition-fast), transform var(--bc-transition-fast), box-shadow var(--bc-transition-fast);
}

.bc-page .bc-shortcode-related-card a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5rem;
	padding: var(--bc-space-4);
	/*
	 * Amber, matching .bc-hook-related-card a — the same Related Recipes
	 * cross-link, and the operator's call when they saw the two side by side
	 * ("Related recipe font is white on tablet but yellow in other renderings.
	 * Prefer yellow", 2026-10-11).
	 *
	 * ⚠ There is no tablet media query behind this, and the report's framing
	 * that there is one is worth correcting here so nobody goes looking again.
	 * The colour was --bc-color-text-strong (i.e. --bc-white) unconditionally:
	 * measured on live 0.1.1.5, the computed colour was rgb(255, 255, 255) at
	 * 375px, 820px and 1280px alike, against rgb(240, 165, 0) on the hook
	 * card. The reason it reads as a tablet fault is that the hover state was
	 * already amber — --bc-color-link-hover and --bc-color-accent-hover are
	 * both --bc-amber-400 — so on a pointer device the card turns yellow the
	 * moment you look at it, and on a tablet it never does.
	 *
	 * ⚠ Only the colour is aligned. The centred, min-height, shadowed card is
	 * this template's own treatment and the operator did not ask for the hook
	 * page's plainer text-link card; the 500 weight stays with it.
	 */
	color: var(--bc-color-accent);
	text-decoration: none;
	font-weight: 500;
	line-height: var(--bc-leading-tight);
	text-align: center;
	text-wrap: balance;
}

.bc-page .bc-shortcode-related-card:hover {
	border-color: var(--bc-color-accent);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.4);
}

.bc-page .bc-shortcode-related-card:hover a {
	color: var(--bc-color-link-hover);
}

.bc-page .bc-shortcode-related-card:focus-within {
	border-color: var(--bc-color-accent);
}

/* Doc CPT: category group header in sidebar, addon badges in header. */

.bc-page .bc-doc-nav-group + .bc-doc-nav-group {
	margin-top: var(--bc-space-4);
}

.bc-page .bc-docs-addon-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bc-space-2);
	margin-top: var(--bc-space-3);
}

.bc-page .bc-docs-addon-badge {
	display: inline-block;
	padding: var(--bc-space-1) var(--bc-space-3);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	border: 1px solid var(--bc-color-border);
	background: var(--bc-color-bg-elevated);
	color: var(--bc-color-text-muted);
}

/* ============================================================
   Feedback widget — "Was this helpful?" on the four documentation
   CPTs. Rendered by template-parts/feedback-widget.php; state
   transitions driven by assets/js/feedback-widget.js.
   ============================================================ */

.bc-page .bc-feedback-widget {
	max-width: var(--bc-max-width-prose);
	margin: var(--bc-space-12) auto 0;
	padding: var(--bc-space-6);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
}

.bc-page .bc-feedback-widget__label,
.bc-page .bc-feedback-widget__note-label {
	margin: 0 0 var(--bc-space-3);
	color: var(--bc-color-text-strong);
	font-size: var(--bc-text-base);
	font-weight: 600;
}

.bc-page .bc-feedback-widget__note-optional {
	color: var(--bc-color-text-muted);
	font-weight: 400;
}

.bc-page .bc-feedback-widget__buttons,
.bc-page .bc-feedback-widget__note-actions {
	display: flex;
	gap: var(--bc-space-3);
	flex-wrap: wrap;
}

.bc-page .bc-feedback-widget__btn {
	font-family: var(--bc-font-sans);
	font-size: var(--bc-text-sm);
	font-weight: 600;
	padding: var(--bc-space-2) var(--bc-space-6);
	border-radius: var(--bc-radius-sm);
	border: 1px solid var(--bc-color-border);
	background: transparent;
	color: var(--bc-color-text);
	cursor: pointer;
	transition: background var(--bc-transition-fast), border-color var(--bc-transition-fast), color var(--bc-transition-fast);
}

.bc-page .bc-feedback-widget__btn:hover,
.bc-page .bc-feedback-widget__btn:focus-visible {
	border-color: var(--bc-color-accent);
	color: var(--bc-color-text-strong);
	outline: none;
}

.bc-page .bc-feedback-widget__btn--submit {
	background: var(--bc-color-accent);
	border-color: var(--bc-color-accent);
	color: var(--bc-navy-900);
}

.bc-page .bc-feedback-widget__btn--submit:hover,
.bc-page .bc-feedback-widget__btn--submit:focus-visible {
	background: var(--bc-color-accent-hover);
	border-color: var(--bc-color-accent-hover);
	color: var(--bc-navy-900);
}

.bc-page .bc-feedback-widget__btn--skip,
.bc-page .bc-feedback-widget__btn--retry {
	color: var(--bc-color-text-muted);
}

.bc-page .bc-feedback-widget__textarea {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 var(--bc-space-3);
	padding: var(--bc-space-3);
	font-family: var(--bc-font-sans);
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text);
	background: var(--bc-color-bg);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-sm);
	resize: vertical;
}

.bc-page .bc-feedback-widget__textarea:focus {
	outline: none;
	border-color: var(--bc-color-accent);
}

.bc-page .bc-feedback-widget__sending,
.bc-page .bc-feedback-widget__thanks {
	margin: 0;
	color: var(--bc-color-text-strong);
	font-size: var(--bc-text-base);
	font-weight: 600;
}

.bc-page .bc-feedback-widget__error-msg {
	margin: 0 0 var(--bc-space-3);
	color: var(--bc-color-text-strong);
	font-size: var(--bc-text-sm);
}

/* ============================================================
   Developer reference — shortcodes
   ============================================================ */

.bc-page .bc-shortcode {
	max-width: var(--bc-max-width-prose);
	margin-inline: auto;
}

.bc-page .bc-shortcode-header {
	margin-bottom: var(--bc-space-8);
	padding-bottom: var(--bc-space-6);
	border-bottom: 1px solid var(--bc-color-border);
}

.bc-page .bc-shortcode-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bc-space-3);
	margin-bottom: var(--bc-space-3);
	font-size: var(--bc-text-sm);
}

.bc-page .bc-shortcode-title {
	font-size: var(--bc-text-2xl);
	line-height: var(--bc-leading-tight);
	margin: 0;
	overflow-wrap: anywhere;
}

.bc-page .bc-shortcode-title code {
	font-family: var(--bc-font-mono);
	font-size: inherit;
	background: none;
	border: none;
	padding: 0;
	color: var(--bc-color-text-strong);
}

.bc-page .bc-shortcode-since {
	color: var(--bc-color-text-muted);
}

.bc-page .bc-shortcode-deprecated-badge {
	display: inline-block;
	padding: var(--bc-space-1) var(--bc-space-3);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: transparent;
	color: var(--bc-color-text-strong);
	border: 1px solid var(--bc-color-text-strong);
}

.bc-page .bc-shortcode-deprecated-note {
	margin: var(--bc-space-4) 0 0;
	padding: var(--bc-space-3) var(--bc-space-4);
	background: var(--bc-color-bg-elevated);
	border-left: 3px solid var(--bc-color-text-strong);
	border-radius: var(--bc-radius-sm);
	color: var(--bc-color-text);
	font-size: var(--bc-text-sm);
}

.bc-page .bc-shortcode-attrs,
.bc-page .bc-shortcode-example {
	margin-bottom: var(--bc-space-8);
}

.bc-page .bc-shortcode-section-title {
	font-size: var(--bc-text-xl);
	line-height: var(--bc-leading-tight);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-4);
}

.bc-page .bc-shortcode-attrs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--bc-text-sm);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	overflow: hidden;
}

.bc-page .bc-shortcode-attrs-table th,
.bc-page .bc-shortcode-attrs-table td {
	padding: var(--bc-space-3) var(--bc-space-4);
	text-align: left;
	border-bottom: 1px solid var(--bc-color-border);
	vertical-align: top;
}

.bc-page .bc-shortcode-attrs-table tbody tr:last-child td {
	border-bottom: none;
}

.bc-page .bc-shortcode-attrs-table th {
	color: var(--bc-color-text-strong);
	font-weight: 600;
	background: var(--bc-color-bg-subtle);
	white-space: nowrap;
}

.bc-page .bc-shortcode-attrs-table code {
	font-family: var(--bc-font-mono);
	font-size: 0.9em;
	color: var(--bc-color-text-strong);
}

.bc-page .bc-shortcode-attr-type {
	color: var(--bc-color-accent);
}

.bc-page .bc-shortcode-attr-required {
	color: var(--bc-color-accent);
	font-weight: 600;
	font-size: var(--bc-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bc-page .bc-shortcode-attr-optional {
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bc-page .bc-shortcode-attr-empty {
	color: var(--bc-color-text-muted);
}

.bc-page .bc-shortcode-example-code {
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	padding: var(--bc-space-4);
	margin: 0;
	overflow-x: auto;
	font-size: var(--bc-text-sm);
	line-height: var(--bc-leading-normal);
}

.bc-page .bc-shortcode-example-code code {
	font-family: var(--bc-font-mono);
	background: none;
	border: none;
	padding: 0;
	color: var(--bc-color-text);
}

/* Horizontal scroll rather than table blowout on narrow viewports. */
@media (max-width: 767px) {
	.bc-page .bc-shortcode-attrs {
		overflow-x: auto;
	}
}


/* ============================================================
   Support docs — single-benecaster-doc.php
   ============================================================ */

/*
 * Docs pages override the default .bc-main container to allow a wider,
 * two-column layout (sidebar + article).
 */
.bc-page .bc-main.bc-docs {
	max-width: var(--bc-max-width);
}

.bc-page .bc-docs-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bc-space-8);
}

/* The sidebar column is reserved only when a sidebar is actually rendered.
   benecaster_doc_nav is written by the licence server; when it is empty the
   template emits no aside, and reserving 260px for it left the article pushed
   right against a blank rail at 1024px and again at 1280px. */
@media (min-width: 1024px) {
	.bc-page .bc-docs-layout--with-sidebar {
		grid-template-columns: 260px 1fr;
		gap: var(--bc-space-12);
	}
}

@media (min-width: 1280px) {
	/* TOC but no sidebar: content + right rail. */
	.bc-page .bc-docs-layout--with-toc {
		grid-template-columns: minmax(0, 1fr) 220px;
		gap: var(--bc-space-12);
	}

	.bc-page .bc-docs-layout--with-sidebar.bc-docs-layout--with-toc {
		grid-template-columns: 260px minmax(0, 1fr) 220px;
	}
}

.bc-page .bc-docs-toc {
	display: none;
}

@media (min-width: 1280px) {
	.bc-page .bc-docs-toc {
		display: block;
		font-size: var(--bc-text-sm);
	}
}

.bc-page .bc-docs-toc-inner {
	position: sticky;
	top: var(--bc-space-8);
	max-height: calc(100vh - var(--bc-space-16));
	overflow-y: auto;
	padding-left: var(--bc-space-4);
	border-left: 1px solid var(--bc-color-border);
}

.bc-page .bc-docs-toc-title {
	font-size: var(--bc-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-3);
}

.bc-page .bc-docs-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bc-page .bc-docs-toc-item {
	margin: 0;
}

.bc-page .bc-docs-toc-item a {
	display: block;
	padding: var(--bc-space-1) 0;
	color: var(--bc-color-text-muted);
	text-decoration: none;
	line-height: var(--bc-leading-normal);
	border-left: 2px solid transparent;
	padding-left: var(--bc-space-3);
	margin-left: calc(var(--bc-space-3) * -1);
	transition: color var(--bc-transition-fast), border-color var(--bc-transition-fast);
}

.bc-page .bc-docs-toc-item--h3 a {
	padding-left: var(--bc-space-6);
}

.bc-page .bc-docs-toc-item a:hover,
.bc-page .bc-docs-toc-item a:focus {
	color: var(--bc-color-text);
}

.bc-page .bc-docs-toc-item.is-active > a {
	color: var(--bc-color-accent);
	border-left-color: var(--bc-color-accent);
}

.bc-page .bc-docs-body :is(h2, h3) {
	scroll-margin-top: var(--bc-space-8);
}

/*
 * Wide content tables scroll inside the article column instead of pushing the
 * page sideways. Support docs are the most table-heavy content on the site, so
 * this is the general treatment the roadmap item asked for rather than a fix
 * aimed at one page.
 *
 * Measured on the deployed /docs/email-directory/ 2026-10-05, not the local
 * harness: four of its five tables are wider than the column — 762, 853, 839
 * and 738px. At an 800px viewport (737px column) that gave the document an
 * 877px scrollWidth; at 1280px the column is only 641px and the tables spilled
 * sideways over the table of contents. So the rule is deliberately
 * unconditional. The reference tables at .bc-table-scroll adopted this same
 * treatment on 2026-10-09, for the same reason measured on their own pages, so
 * one mechanism now covers every wide table on the site.
 *
 * The pipeline publishes each table wrapped in a bare <div>, and that div is
 * the scroll container — the theme may not add a wrapper of its own, since
 * the_content() is rendered without transformation (CLAUDE.md). `width: 100%`
 * plus `min-width: min-content` keeps the table at exactly the width its auto
 * layout would have chosen unwrapped, so the rendering is unchanged and only
 * the overflow is caught. ⚠ Not `max-content`, which suppresses cell wrapping
 * altogether and blew these same tables out to 1513–2597px.
 *
 * The second rule is a fallback for an unwrapped table, which the pipeline does
 * not emit today. It costs some column compression that the wrapper path avoids
 * — acceptable for markup that does not currently exist, and still better than
 * a page that scrolls sideways.
 */
.bc-page .bc-docs-body > div:has(> table) {
	overflow-x: auto;
}

.bc-page .bc-docs-body > div:has(> table) > table {
	width: 100%;
	min-width: min-content;
}

.bc-page .bc-docs-body > table {
	display: block;
	overflow-x: auto;
}

/*
 * The same containment for marketing-page tables, which are in .bc-content
 * rather than .bc-docs-body — /pricing/ is the page the operator reported most
 * often, and it is a .bc-content page, so the docs-only rule above could never
 * reach it.
 *
 * ⚠ The pipeline already emits `<div style="overflow-x:auto">` around content
 * tables, so most of these scroll without the theme's help once the cells stop
 * collapsing. This rule is for the ones it misses: on /pricing/ the table
 * inside a FAQ answer has a bare `<div>` with no inline style, and without a
 * container a table wider than the column would push the document sideways —
 * the exact regression the 375px sweep exists to catch. Styling published
 * markup from the stylesheet is not a content transformation; the theme adds no
 * wrapper of its own, because the_content() is rendered as published
 * (CLAUDE.md).
 *
 * ⚠ A descendant selector, not `>` as in the docs rule, and deliberately: the
 * pipeline nests two wrapper divs on some /pricing/ tables, so a direct-child
 * selector matches the outer one and leaves the table's own parent unstyled.
 */
.bc-page .bc-content div:has(> table) {
	overflow-x: auto;
}

.bc-page .bc-content div:has(> table) > table {
	width: 100%;
	min-width: min-content;
}

/*
 * Fallback for an unwrapped content table, mirroring .bc-docs-body > table
 * above. The marketing pipeline always emits a wrapper div, but .bc-content
 * also renders the_content() of the reference CPTs, whose bodies come from
 * hand-written YAML in the content repo rather than from that pipeline — so a
 * bare <table> is markup the theme should expect here even though no page
 * carries one today. Without a container the first-column floor could push such
 * a page sideways, which is the one way this change could regress the 375px
 * sweep. Costs some column compression the wrapper path avoids, exactly as the
 * docs-body fallback does.
 */
.bc-page .bc-content > table {
	display: block;
	overflow-x: auto;
}

/*
 * A floor under the label column of a prose table, in both scopes.
 *
 * The rule restoring `overflow-wrap: normal` on tables is what makes these
 * columns legible at all; this is what makes them CONSISTENT, which the
 * operator reported separately on /docs/email-merge-tags/ ("Tag column in some
 * tables too narrow. Is inconsistent"). Auto layout sizes each table from its
 * own content, so the same logical column lands at a different width in every
 * table on a page. See --bc-table-label-min for the measurements.
 *
 * ⚠ First column only. The reported defect is the label column every time, and
 * a blanket floor on the last column was measured and rejected: the last column
 * is the description on a 2-3 column prose table, but on /pricing/'s seven-
 * column plan comparison and the API tables' Required/Notes columns it is not,
 * and flooring it there forced scrolling on tables that fit.
 *
 * ⚠ This cannot reach the six reference tables, which is intended — they carry
 * their own --bc-table-desc-min and --bc-table-signature-min floors. Verified
 * 2026-10-19 on /classes/membership-subscription-repository/: the methods table
 * is not inside .bc-docs-body (the reference singles render it outside the docs
 * body), so it measures 280/90/70/440 both before and after this change.
 */
.bc-page .bc-content :is(th, td):first-child,
.bc-page .bc-docs-body :is(th, td):first-child {
	min-width: var(--bc-table-label-min);
}

.bc-page .bc-docs-sidebar {
	display: none;
	font-size: var(--bc-text-sm);
}

@media (min-width: 1024px) {
	.bc-page .bc-docs-sidebar {
		display: block;
		position: sticky;
		top: var(--bc-space-8);
		align-self: start;
		max-height: calc(100vh - var(--bc-space-16));
		overflow-y: auto;
		padding-right: var(--bc-space-4);
		border-right: 1px solid var(--bc-color-border);
	}
}

.bc-page .bc-doc-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bc-page .bc-doc-nav-list .bc-doc-nav-list {
	margin-top: var(--bc-space-2);
	margin-left: var(--bc-space-4);
	padding-left: var(--bc-space-3);
	border-left: 1px solid var(--bc-color-border);
}

.bc-page .bc-doc-nav-item {
	margin: 0 0 var(--bc-space-2);
}

.bc-page .bc-doc-nav-item a,
.bc-page .bc-doc-nav-section {
	display: block;
	padding: var(--bc-space-1) 0;
	color: var(--bc-color-text);
	text-decoration: none;
	line-height: var(--bc-leading-normal);
}

.bc-page .bc-doc-nav-section {
	color: var(--bc-color-text-strong);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--bc-text-xs);
	margin-top: var(--bc-space-4);
}

.bc-page .bc-doc-nav-item a:hover,
.bc-page .bc-doc-nav-item a:focus {
	color: var(--bc-color-accent);
}

.bc-page .bc-doc-nav-item.is-current > a {
	color: var(--bc-color-accent);
	font-weight: 600;
}

/*
 * The nav entry for the section the visitor is INSIDE, rather than the page
 * they are on — the Classes Reference entry while a class single is open.
 * Weighted like the current page so the rail still shows where you are, but
 * without the accent colour, which stays reserved for "this is the page you
 * are reading". The markup backs this up: the partial emits
 * aria-current="location" here, not aria-current="page".
 */
.bc-page .bc-doc-nav-item.is-current-section > a {
	color: var(--bc-color-text-strong);
	font-weight: 600;
}

.bc-page .bc-doc-nav-empty {
	color: var(--bc-color-text-muted);
	font-style: italic;
	margin: 0;
}

/*
 * ⚠ `width: 100%` is load-bearing, and `min-width: 0` alone is not enough.
 * Measured 2026-10-09 at 375px: with min-width: 0 computing to 0px the article
 * was still laid out 835px wide inside a 343px track, because a grid item whose
 * content has a larger min-content size gets stretched to it. Giving the inline
 * size a definite value stops the content sizing the item at all, so a wide
 * table's min-content no longer propagates out of the scroll container that is
 * meant to catch it. The single-column mobile track is `1fr`, i.e.
 * `minmax(auto, 1fr)`; setting it to `minmax(0, 1fr)` was tried first and
 * changed nothing, so the track was never the problem. Keep both declarations.
 */
.bc-page .bc-docs-article {
	max-width: var(--bc-max-width-prose);
	min-width: 0; /* prevent grid item from expanding beyond column */
	width: 100%;
}

/*
 * Reference singles in the docs layout (the class reference, 2026-10-05) opt
 * out of the prose width cap. --bc-max-width-prose is a measure for running
 * text; this content is mostly four-column tables of methods and constants,
 * and squeezing them into a reading measure is what the support-doc table
 * overflow fix had to clean up elsewhere. The grid column still bounds it.
 */
.bc-page .bc-docs-article--reference {
	max-width: none;
}

/*
 * Breadcrumbs wrap too, for the same reason as the prose containers above and
 * found the same way — the trail's last crumb is the page's own identifier, so
 * on /hooks/benecaster_token_reactivation_recoverable_reasons/ and
 * /functions/benecaster-count-paying-subscribers-site-wide/ it was the single
 * element still pushing the document sideways (400px and 391px at a 375px
 * viewport) once the notes bodies were fixed. The <ol> is already a wrapping
 * flex row; what it could not do was break a crumb that has no break
 * opportunity inside it.
 *
 * ⚠ Both breadcrumb classes are listed because the reference singles do not
 * share one: hook pages use .bc-hook-breadcrumbs, the rest use .bc-breadcrumbs.
 */
.bc-page .bc-breadcrumbs,
.bc-page .bc-hook-breadcrumbs {
	overflow-wrap: anywhere;
}

.bc-page .bc-breadcrumbs {
	margin-bottom: var(--bc-space-4);
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text-muted);
}

.bc-page .bc-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bc-space-2);
}

.bc-page .bc-breadcrumbs li + li::before {
	content: '/';
	margin-right: var(--bc-space-2);
	color: var(--bc-color-border);
}

.bc-page .bc-breadcrumbs a {
	color: var(--bc-color-text-muted);
	text-decoration: none;
}

.bc-page .bc-breadcrumbs a:hover,
.bc-page .bc-breadcrumbs a:focus {
	color: var(--bc-color-accent);
}

.bc-page .bc-breadcrumbs [aria-current="page"] {
	color: var(--bc-color-text);
}

.bc-page .bc-docs-header {
	margin-bottom: var(--bc-space-6);
	padding-bottom: var(--bc-space-4);
	border-bottom: 1px solid var(--bc-color-border);
}

.bc-page .bc-docs-title {
	font-size: var(--bc-text-3xl);
	line-height: var(--bc-leading-tight);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-2);
}

.bc-page .bc-docs-updated {
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-sm);
	margin: 0;
}

.bc-page .bc-docs-section-title {
	font-size: var(--bc-text-lg);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-3);
}

.bc-page .bc-docs-related,
.bc-page .bc-docs-seealso {
	margin-top: var(--bc-space-8);
	padding: var(--bc-space-4) var(--bc-space-6);
	background: var(--bc-color-bg-subtle);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
}

.bc-page .bc-docs-related + .bc-docs-seealso {
	margin-top: var(--bc-space-4);
}

.bc-page .bc-docs-related-list,
.bc-page .bc-docs-seealso-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--bc-space-2);
}

.bc-page .bc-docs-related-list a,
.bc-page .bc-docs-seealso-list a {
	color: var(--bc-color-link);
	text-decoration: none;
}

.bc-page .bc-docs-related-list a:hover,
.bc-page .bc-docs-related-list a:focus,
.bc-page .bc-docs-seealso-list a:hover,
.bc-page .bc-docs-seealso-list a:focus {
	color: var(--bc-color-link-hover);
	text-decoration: underline;
}

/*
 * ⚠ `overflow-wrap: anywhere` here is the same fix as on the breadcrumbs and
 * the prose containers, and it is what keeps the two tracks inside the column.
 * `1fr` is `minmax(auto, 1fr)`, so each track is floored at its content's
 * min-content size; on /docs/template-episode-explicit-badge/ that gave
 * 183.8px + 189.1px + gap inside a 343px nav and pushed the document to 405px.
 *
 * ⚠⚠ `grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)` is the obvious
 * structural fix and is NOT used, because it was measured and it does not work:
 * with a deliberately unbreakable pager title it still let the document reach
 * 682px, since zeroing the track floor does not stop the item's own content
 * overflowing it. The wrap alone reaches 375 in that same test, and adding
 * minmax on top of the wrap changes nothing — do not add it back.
 */
.bc-page .bc-docs-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bc-space-4);
	margin-top: var(--bc-space-8);
	overflow-wrap: anywhere;
}

.bc-page .bc-docs-pager-prev,
.bc-page .bc-docs-pager-next {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-1);
	padding: var(--bc-space-4);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	text-decoration: none;
	color: var(--bc-color-text);
	transition: border-color var(--bc-transition-fast);
}

.bc-page .bc-docs-pager-next {
	text-align: right;
	grid-column: 2;
}

.bc-page .bc-docs-pager-prev:hover,
.bc-page .bc-docs-pager-prev:focus,
.bc-page .bc-docs-pager-next:hover,
.bc-page .bc-docs-pager-next:focus {
	border-color: var(--bc-color-accent);
}

.bc-page .bc-docs-pager-label {
	font-size: var(--bc-text-xs);
	color: var(--bc-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bc-page .bc-docs-pager-title {
	color: var(--bc-color-text-strong);
	font-weight: 600;
}

.bc-page .bc-docs-pager-spacer {
	display: block;
}

/*
 * Feedback widget mount — the container is empty until plugin JS hydrates it,
 * so no chrome renders when the plugin is absent.
 */
.bc-page .bc-docs-feedback:not(:empty) {
	margin-top: var(--bc-space-8);
	padding: var(--bc-space-4);
	background: var(--bc-color-bg-subtle);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
}


/* ============================================================
   FAQ — archive + single (benecaster_faq CPT)
   ============================================================ */

.bc-page .bc-main.bc-faq-archive,
.bc-page .bc-main.bc-faq-single {
	max-width: var(--bc-max-width-prose);
}

.bc-page .bc-faq-header {
	margin-bottom: var(--bc-space-8);
	padding-bottom: var(--bc-space-4);
	border-bottom: 1px solid var(--bc-color-border);
}

.bc-page .bc-faq-title {
	font-size: var(--bc-text-3xl);
	line-height: var(--bc-leading-tight);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-3);
}

.bc-page .bc-faq-lede {
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-lg);
	line-height: var(--bc-leading-normal);
	margin: 0;
}

.bc-page .bc-faq-empty {
	color: var(--bc-color-text-muted);
	font-style: italic;
}

.bc-page .bc-faq-toc {
	margin-bottom: var(--bc-space-8);
	padding: var(--bc-space-4) var(--bc-space-6);
	background: var(--bc-color-bg-subtle);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
}

.bc-page .bc-faq-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bc-space-3) var(--bc-space-6);
	font-size: var(--bc-text-sm);
}

.bc-page .bc-faq-toc-list a {
	color: var(--bc-color-link);
	text-decoration: none;
}

.bc-page .bc-faq-toc-list a:hover,
.bc-page .bc-faq-toc-list a:focus {
	color: var(--bc-color-link-hover);
	text-decoration: underline;
}

.bc-page .bc-faq-group {
	margin-bottom: var(--bc-space-12);
}

.bc-page .bc-faq-category {
	font-size: var(--bc-text-2xl);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-4);
	scroll-margin-top: var(--bc-space-8);
}

.bc-page .bc-faq-list {
	display: grid;
	gap: var(--bc-space-3);
}

.bc-page .bc-faq-item {
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	scroll-margin-top: var(--bc-space-8);
	transition: border-color var(--bc-transition-fast);
}

.bc-page .bc-faq-item[open] {
	border-color: var(--bc-color-accent);
}

.bc-page .bc-faq-item:target {
	border-color: var(--bc-color-accent);
	box-shadow: 0 0 0 1px var(--bc-color-accent);
}

/* Kill the default disclosure triangle so we can draw our own caret. */
.bc-page .bc-faq-question::-webkit-details-marker {
	display: none;
}
.bc-page .bc-faq-question {
	list-style: none;
}

.bc-page .bc-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bc-space-4);
	padding: var(--bc-space-4) var(--bc-space-6);
	cursor: pointer;
	color: var(--bc-color-text-strong);
	font-weight: 600;
	font-size: var(--bc-text-lg);
	line-height: var(--bc-leading-normal);
}

.bc-page .bc-faq-question:hover .bc-faq-question-text,
.bc-page .bc-faq-question:focus-visible .bc-faq-question-text {
	color: var(--bc-color-accent);
}

.bc-page .bc-faq-caret {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--bc-color-text-muted);
	border-bottom: 2px solid var(--bc-color-text-muted);
	transform: rotate(45deg);
	transition: transform var(--bc-transition-fast), border-color var(--bc-transition-fast);
}

.bc-page .bc-faq-item[open] .bc-faq-caret {
	transform: rotate(-135deg);
	border-color: var(--bc-color-accent);
}

.bc-page .bc-faq-answer {
	padding: 0 var(--bc-space-6) var(--bc-space-4);
	color: var(--bc-color-text);
	line-height: var(--bc-leading-loose);
}

.bc-page .bc-faq-answer > *:first-child {
	margin-top: 0;
}

.bc-page .bc-faq-answer p {
	margin: 0 0 var(--bc-space-3);
}

.bc-page .bc-faq-answer a {
	color: var(--bc-color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.bc-page .bc-faq-answer a:hover,
.bc-page .bc-faq-answer a:focus {
	color: var(--bc-color-link-hover);
}

.bc-page .bc-faq-permalink {
	margin: var(--bc-space-4) 0 0;
	font-size: var(--bc-text-sm);
}

.bc-page .bc-faq-permalink a {
	color: var(--bc-color-text-muted);
	text-decoration: none;
}

.bc-page .bc-faq-permalink a:hover,
.bc-page .bc-faq-permalink a:focus {
	color: var(--bc-color-accent);
}

/* FAQ single */

.bc-page .bc-faq-single-header {
	margin-bottom: var(--bc-space-6);
	padding-bottom: var(--bc-space-4);
	border-bottom: 1px solid var(--bc-color-border);
}

.bc-page .bc-faq-category-chip {
	display: inline-block;
	padding: var(--bc-space-1) var(--bc-space-3);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-xs);
	color: var(--bc-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--bc-space-3);
}

.bc-page .bc-faq-single-title {
	font-size: var(--bc-text-3xl);
	line-height: var(--bc-leading-tight);
	color: var(--bc-color-text-strong);
	margin: 0;
}

.bc-page .bc-faq-back {
	margin-top: var(--bc-space-8);
	padding-top: var(--bc-space-4);
	border-top: 1px solid var(--bc-color-border);
}

.bc-page .bc-faq-back a {
	color: var(--bc-color-link);
	text-decoration: none;
}

.bc-page .bc-faq-back a:hover,
.bc-page .bc-faq-back a:focus {
	color: var(--bc-color-link-hover);
	text-decoration: underline;
}


/* ============================================================
   Home page
   ============================================================ */

/* Override .bc-main defaults so sections can go edge-to-edge with their own bg. */
.bc-page .bc-main.bc-home {
	max-width: none;
	padding: 0;
}

/* Inline text links on the home page (buttons excluded). */
.bc-page .bc-home a:not(.bc-btn) {
	color: var(--bc-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	font-size: inherit;
	transition: color var(--bc-transition-fast);
}

.bc-page .bc-home a:not(.bc-btn):hover,
.bc-page .bc-home a:not(.bc-btn):focus {
	color: var(--bc-color-link-hover);
}

.bc-page .bc-home-section {
	padding: var(--bc-space-16) clamp(1rem, 4vw, 6rem);
}

.bc-page .bc-home-container {
	max-width: var(--bc-max-width);
	margin-inline: auto;
}

.bc-page .bc-home-band {
	background: var(--bc-color-bg-subtle);
}

.bc-page .bc-home-eyebrow {
	color: var(--bc-color-accent);
	font-size: var(--bc-text-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--bc-space-3);
}

.bc-page .bc-home-section-title {
	font-size: var(--bc-text-3xl);
	line-height: var(--bc-leading-tight);
	color: var(--bc-color-text-strong);
	letter-spacing: -0.01em;
	margin: 0 0 var(--bc-space-6);
	max-width: 48ch;
}

.bc-page .bc-home-prose {
	max-width: var(--bc-max-width-prose);
	line-height: var(--bc-leading-loose);
}

.bc-page .bc-home-prose p {
	margin: 0 0 var(--bc-space-4);
}

.bc-page .bc-home-lead {
	font-size: var(--bc-text-lg);
	line-height: var(--bc-leading-normal);
	color: var(--bc-color-text);
	max-width: var(--bc-max-width-prose);
	margin: 0 auto var(--bc-space-6);
}

.bc-page .bc-home-microcopy {
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-sm);
	margin: var(--bc-space-4) 0 0;
}

.bc-page .bc-home-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bc-space-3);
	margin: var(--bc-space-6) 0 0;
}

/* Solo CTA rows center the button and give it hero weight. */
.bc-page .bc-home-cta-row:has(> a:only-child) {
	justify-content: center;
}

.bc-page .bc-home-cta-row:has(> a:only-child) .bc-btn {
	font-size: var(--bc-text-lg);
	font-weight: 700;
	padding: var(--bc-space-4) var(--bc-space-8);
}

.bc-page .bc-home-cta-row.bc-home-cta-row--link {
	display: block;
	text-align: center;
	margin-top: var(--bc-space-4);
}


/* --- Hero --- */

.bc-page .bc-home-hero {
	text-align: center;
	padding-block: var(--bc-space-24);
	background: linear-gradient(180deg, var(--bc-color-bg-elevated) 0%, var(--bc-color-bg) 100%);
	border-bottom: 1px solid var(--bc-color-border);
}

.bc-page .bc-home-hero-title {
	font-size: var(--bc-text-4xl);
	line-height: 1.05;
	color: var(--bc-color-text-strong);
	letter-spacing: -0.02em;
	margin: 0 auto var(--bc-space-6);
	max-width: 32ch;
}

.bc-page .bc-home-hero-sub {
	font-size: var(--bc-text-lg);
	line-height: var(--bc-leading-normal);
	color: var(--bc-color-text-muted);
	max-width: 60ch;
	margin: 0 auto var(--bc-space-8);
}

.bc-page .bc-home-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bc-space-3);
	justify-content: center;
}


/* --- Solution points (3-column grid) --- */

.bc-page .bc-home-points {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bc-space-8);
	list-style: none;
	margin: var(--bc-space-12) 0 0;
	padding: 0;
}

.bc-page .bc-home-points > li {
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-lg);
	padding: var(--bc-space-6);
}

.bc-page .bc-home-point-icon {
	font-size: var(--bc-text-2xl);
	display: block;
	margin-bottom: var(--bc-space-3);
}

.bc-page .bc-home-point-title {
	font-size: var(--bc-text-lg);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-2);
	line-height: var(--bc-leading-tight);
}

.bc-page .bc-home-points p {
	margin: 0;
	color: var(--bc-color-text);
	line-height: var(--bc-leading-normal);
}


/* --- How it works (numbered steps) --- */

.bc-page .bc-home-steps {
	list-style: none;
	counter-reset: bc-step;
	margin: var(--bc-space-8) 0 0;
	padding: 0;
	display: grid;
	gap: var(--bc-space-8);
}

.bc-page .bc-home-steps > li {
	counter-increment: bc-step;
	padding-left: calc(var(--bc-space-12) + var(--bc-space-2));
	position: relative;
	max-width: var(--bc-max-width-prose);
}

.bc-page .bc-home-steps > li::before {
	content: counter(bc-step);
	position: absolute;
	left: 0;
	top: 0;
	width: var(--bc-space-12);
	height: var(--bc-space-12);
	background: var(--bc-color-accent);
	color: var(--bc-navy-900);
	border-radius: var(--bc-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: var(--bc-text-xl);
}

.bc-page .bc-home-step-title {
	font-size: var(--bc-text-xl);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-2);
	line-height: var(--bc-leading-tight);
}

.bc-page .bc-home-steps p {
	margin: 0;
	line-height: var(--bc-leading-loose);
}


/* --- Key features (long-form list) --- */

.bc-page .bc-home-features {
	display: grid;
	gap: var(--bc-space-8);
	margin-top: var(--bc-space-8);
}

.bc-page .bc-home-features article {
	max-width: var(--bc-max-width-prose);
}

.bc-page .bc-home-features h3 {
	font-size: var(--bc-text-xl);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-3);
	line-height: var(--bc-leading-tight);
}

.bc-page .bc-home-features p {
	margin: 0;
	line-height: var(--bc-leading-loose);
}


/* --- Free tier callout --- */

.bc-page .bc-home-free {
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-lg);
	padding: var(--bc-space-12);
}


/* --- Migration (2-column grid) --- */

.bc-page .bc-home-migration {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--bc-space-8);
	margin-top: var(--bc-space-8);
}

.bc-page .bc-home-migration article {
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-lg);
	padding: var(--bc-space-6);
}

.bc-page .bc-home-migration h3 {
	font-size: var(--bc-text-xl);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-3);
}

.bc-page .bc-home-migration p {
	margin: 0 0 var(--bc-space-3);
	line-height: var(--bc-leading-normal);
}

.bc-page .bc-home-migration a {
	color: var(--bc-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.bc-page .bc-home-migration a:hover,
.bc-page .bc-home-migration a:focus {
	color: var(--bc-color-link-hover);
}


/* --- Pull quote --- */

.bc-page .bc-home-pullquote {
	border-left: 3px solid var(--bc-color-accent);
	padding: var(--bc-space-3) var(--bc-space-6);
	margin: var(--bc-space-8) 0 0;
	font-size: var(--bc-text-lg);
	color: var(--bc-color-text-strong);
	font-style: italic;
	max-width: var(--bc-max-width-prose);
}


/* --- Tables (breakeven, pricing) --- */

.bc-page .bc-home-table-scroll {
	overflow-x: auto;
	margin: var(--bc-space-6) 0 0;
}

.bc-page .bc-home-breakeven,
.bc-page .bc-home-pricing-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--bc-text-sm);
	min-width: 720px;
}

.bc-page .bc-home-breakeven th,
.bc-page .bc-home-breakeven td,
.bc-page .bc-home-pricing-table th,
.bc-page .bc-home-pricing-table td {
	padding: var(--bc-space-3) var(--bc-space-4);
	text-align: left;
	border-bottom: 1px solid var(--bc-color-border);
}

.bc-page .bc-home-breakeven th,
.bc-page .bc-home-pricing-table th {
	color: var(--bc-color-text-strong);
	font-weight: 600;
	background: var(--bc-color-bg-subtle);
	border-bottom: 2px solid var(--bc-color-border);
}

/*
 * Pricing table — sits inside a .bc-home-band (bg-subtle), so header and
 * zebra rows use bg-elevated to stand out. Plan column anchors each row;
 * numeric columns right-align with tabular-nums. Hover uses the same
 * accent-tinted overlay as the breakeven table for family resemblance.
 */
.bc-page .bc-home-pricing-table {
	font-size: var(--bc-text-base);
}

.bc-page .bc-home-pricing-table th,
.bc-page .bc-home-pricing-table td {
	padding: var(--bc-space-4);
}

.bc-page .bc-home-pricing-table th {
	background: var(--bc-color-bg-elevated);
}

.bc-page .bc-home-pricing-table td:first-child {
	color: var(--bc-color-text-strong);
	font-weight: 700;
}

.bc-page .bc-home-pricing-table th:nth-child(n+2),
.bc-page .bc-home-pricing-table td:nth-child(n+2) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.bc-page .bc-home-pricing-table tbody tr:nth-child(even) {
	background: var(--bc-color-bg-elevated);
}

.bc-page .bc-home-pricing-table tbody tr:hover {
	background: color-mix(in srgb, var(--bc-color-accent) 10%, transparent);
}

/*
 * Breakeven table — the "You keep" column is the payoff.
 * Right-align money columns (2-4), accent + bold the payoff column,
 * zebra + hover so rows scan cleanly.
 */
.bc-page .bc-home-breakeven th,
.bc-page .bc-home-breakeven td {
	padding: var(--bc-space-4);
}

.bc-page .bc-home-breakeven th:nth-child(n+2),
.bc-page .bc-home-breakeven td:nth-child(n+2) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.bc-page .bc-home-breakeven th:nth-child(5),
.bc-page .bc-home-breakeven td:nth-child(5) {
	color: var(--bc-color-accent);
	font-weight: 700;
}

.bc-page .bc-home-breakeven td:nth-child(5) {
	font-size: var(--bc-text-base);
}

.bc-page .bc-home-breakeven tbody tr:nth-child(even) {
	background: var(--bc-color-bg-subtle);
}

.bc-page .bc-home-breakeven tbody tr:hover {
	background: color-mix(in srgb, var(--bc-color-accent) 10%, transparent);
}

/*
 * Mobile (<768px): rebuild both tables as stacked cards.
 * Each <tr> becomes a bordered card; each <td> becomes a label/value row
 * driven by the data-label attribute. No horizontal scrollbars.
 */
@media (max-width: 767px) {
	.bc-page .bc-home-table-scroll {
		overflow-x: visible;
	}

	.bc-page .bc-home-breakeven,
	.bc-page .bc-home-pricing-table {
		min-width: 0;
		border-collapse: separate;
		border-spacing: 0;
		display: block;
	}

	.bc-page .bc-home-breakeven thead,
	.bc-page .bc-home-pricing-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.bc-page .bc-home-breakeven tbody,
	.bc-page .bc-home-pricing-table tbody {
		display: flex;
		flex-direction: column;
		gap: var(--bc-space-4);
	}

	.bc-page .bc-home-breakeven tbody tr,
	.bc-page .bc-home-pricing-table tbody tr {
		display: block;
		border: 1px solid var(--bc-color-border);
		border-radius: var(--bc-radius-md);
		background: var(--bc-color-bg-elevated);
		padding: var(--bc-space-2) var(--bc-space-4);
	}

	.bc-page .bc-home-breakeven tbody tr:nth-child(even),
	.bc-page .bc-home-pricing-table tbody tr:nth-child(even) {
		background: var(--bc-color-bg-elevated);
	}

	.bc-page .bc-home-breakeven tbody tr:hover,
	.bc-page .bc-home-pricing-table tbody tr:hover {
		background: var(--bc-color-bg-elevated);
	}

	.bc-page .bc-home-breakeven td,
	.bc-page .bc-home-pricing-table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--bc-space-4);
		padding: var(--bc-space-3) 0;
		border-bottom: 1px solid var(--bc-color-border);
		text-align: right;
	}

	.bc-page .bc-home-breakeven td:last-child,
	.bc-page .bc-home-pricing-table td:last-child {
		border-bottom: 0;
	}

	.bc-page .bc-home-breakeven td::before,
	.bc-page .bc-home-pricing-table td::before {
		content: attr(data-label);
		color: var(--bc-color-text-muted);
		font-weight: 500;
		text-align: left;
		flex: 0 0 auto;
	}

	/* First column ("Plan" / "Subscribers") anchors the card — promote it
	   to a card header instead of a label/value row. */
	.bc-page .bc-home-breakeven td:first-child,
	.bc-page .bc-home-pricing-table td:first-child {
		display: block;
		text-align: left;
		font-size: var(--bc-text-lg);
		color: var(--bc-color-text-strong);
		font-weight: 700;
		padding-top: var(--bc-space-2);
	}

	.bc-page .bc-home-breakeven td:first-child::before,
	.bc-page .bc-home-pricing-table td:first-child::before {
		display: none;
	}

	/* Preserve the breakeven table's "You save vs Patreon" accent on the payoff cell. */
	.bc-page .bc-home-breakeven td:nth-child(5) {
		color: var(--bc-color-accent);
		font-weight: 700;
	}
}


/* --- FAQ section --- */

.bc-page .bc-home-faq {
	margin: var(--bc-space-6) 0;
}


/* --- Final CTA --- */

.bc-page .bc-home-final {
	text-align: center;
}

.bc-page .bc-home-final .bc-home-section-title {
	margin-inline: auto;
}

.bc-page .bc-home-final .bc-home-cta-row {
	justify-content: center;
}


/* ============================================================
   Pricing page
   ============================================================ */

/* Wider content column than default prose — tables need room to breathe. */
.bc-page .bc-pricing .bc-content {
	max-width: 960px;
}

.bc-page .bc-pricing .bc-content > table {
	font-size: var(--bc-text-sm);
}



/* ============================================================
   404 — not found
   ============================================================ */

.bc-page .bc-404 {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--bc-space-16) var(--bc-space-6) var(--bc-space-24);
}

.bc-page .bc-404-inner {
	max-width: var(--bc-max-width-prose);
	margin-inline: auto;
	width: 100%;
}

.bc-page .bc-404-code {
	font-family: var(--bc-font-mono);
	font-weight: 700;
	font-size: clamp(calc(var(--bc-text-4xl) * 1.4), 18vw, calc(var(--bc-text-4xl) * 2.6));
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--bc-color-accent);
	margin: 0 0 var(--bc-space-6);
}

.bc-page .bc-404-title {
	font-size: var(--bc-text-3xl);
	color: var(--bc-color-text-strong);
	line-height: var(--bc-leading-tight);
	letter-spacing: -0.01em;
	margin: 0 0 var(--bc-space-4);
}

.bc-page .bc-404-lead {
	font-size: var(--bc-text-lg);
	color: var(--bc-color-text);
	max-width: var(--bc-max-width-narrow);
	margin: 0 auto var(--bc-space-8);
}

/* Search block. The form itself is the shared .bc-search-form component in
   its page (non-`--header`) form, so it already picks up the larger input
   from the .bc-search-form:not(.bc-search-form--header) rule further down —
   nothing here restyles the control, only its surrounding block. */
.bc-page .bc-404-search {
	max-width: var(--bc-max-width-narrow);
	margin: 0 auto var(--bc-space-8);
	text-align: left;
}

.bc-page .bc-404-search-title {
	font-size: var(--bc-text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bc-color-text-muted);
	margin: 0 0 var(--bc-space-3);
}

.bc-page .bc-404-nav-intro {
	font-size: var(--bc-text-base);
	color: var(--bc-color-text-muted);
	margin: 0 0 var(--bc-space-4);
}

.bc-page .bc-404-links {
	list-style: none;
	margin: 0 0 var(--bc-space-12);
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bc-space-4);
	text-align: left;
}

@media (min-width: 640px) {
	.bc-page .bc-404-links {
		grid-template-columns: 1fr 1fr;
	}
}

.bc-page .bc-404-links li {
	margin: 0;
}

.bc-page .bc-404-links a {
	display: block;
	padding: var(--bc-space-6);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--bc-transition-fast), transform var(--bc-transition-fast);
}

.bc-page .bc-404-links a:hover,
.bc-page .bc-404-links a:focus {
	border-color: var(--bc-color-accent);
	transform: translateY(-2px);
}

.bc-page .bc-404-link-label {
	display: block;
	font-size: var(--bc-text-lg);
	font-weight: 600;
	color: var(--bc-color-text-strong);
	margin-bottom: var(--bc-space-1);
	transition: color var(--bc-transition-fast);
}

.bc-page .bc-404-links a:hover .bc-404-link-label,
.bc-page .bc-404-links a:focus .bc-404-link-label {
	color: var(--bc-color-accent);
}

.bc-page .bc-404-link-desc {
	display: block;
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text-muted);
	line-height: var(--bc-leading-normal);
}

.bc-page .bc-404-cta-row {
	margin: 0 0 var(--bc-space-8);
}

.bc-page .bc-404-microcopy {
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-sm);
	margin: 0;
}

.bc-page .bc-404-microcopy a {
	color: var(--bc-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.bc-page .bc-404-microcopy a:hover,
.bc-page .bc-404-microcopy a:focus {
	color: var(--bc-color-link-hover);
}


/* ============================================================
   SureCart account (Customer Dashboard) — benecaster/licenses
   and benecaster/downloads blocks
   ============================================================ */

/*
 * The two Benecaster blocks are inserted into SureCart's Customer Dashboard
 * (default slug /customer-dashboard/, some installs /my-account/). SureCart
 * owns the page template; the theme owns only the visual treatment of the
 * block output. The blocks ship their own inline <style> baked for a light
 * host site — every rule below is specificity-boosted with .bc-page so it
 * overrides those inline defaults on benecaster.com's dark palette.
 *
 * Markup source: benecastor-license-server/templates/customer/
 *   account-licenses.php  → .bnc-account-licenses
 *   account-downloads.php → .bnc-account-downloads
 */

.bc-page .bnc-account-licenses,
.bc-page .bnc-account-downloads {
	max-width: var(--bc-max-width-prose);
	color: var(--bc-color-text);
	font-family: var(--bc-font-sans);
}

.bc-page .bnc-account-licenses section,
.bc-page .bnc-account-downloads section {
	margin: 0 0 var(--bc-space-8);
}

.bc-page .bnc-account-licenses h2,
.bc-page .bnc-account-downloads h2 {
	font-size: var(--bc-text-xl);
	font-weight: 600;
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-3);
	padding-bottom: var(--bc-space-2);
	border-bottom: 1px solid var(--bc-color-border);
}

/* --- Plan summary (definition list) --- */

.bc-page .bnc-plan-summary {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bc-space-2) var(--bc-space-6);
	margin: 0 0 var(--bc-space-2);
}

.bc-page .bnc-plan-summary dt {
	font-weight: 600;
	color: var(--bc-color-text-strong);
}

.bc-page .bnc-plan-summary dd {
	margin: 0;
	color: var(--bc-color-text);
}

.bc-page .bnc-billing-link {
	color: var(--bc-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.bc-page .bnc-billing-link:hover,
.bc-page .bnc-billing-link:focus {
	color: var(--bc-color-link-hover);
}

/* --- Status badge --- */

.bc-page .bnc-status-badge {
	display: inline-block;
	padding: 2px var(--bc-space-2);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	border: 1px solid transparent;
}

.bc-page .bnc-status-badge.active {
	background: color-mix(in srgb, var(--bc-color-success) 15%, transparent);
	color: var(--bc-teal-400);
	border-color: color-mix(in srgb, var(--bc-color-success) 40%, transparent);
}

.bc-page .bnc-status-badge.cancelled,
.bc-page .bnc-status-badge.expired {
	background: color-mix(in srgb, var(--bc-color-error-fill) 12%, transparent);
	color: var(--bc-color-error-text);
	border-color: color-mix(in srgb, var(--bc-color-error-fill) 35%, transparent);
}

.bc-page .bnc-status-badge.suspended {
	background: color-mix(in srgb, var(--bc-color-accent) 15%, transparent);
	color: var(--bc-amber-400);
	border-color: color-mix(in srgb, var(--bc-color-accent) 40%, transparent);
}

/* --- Tables (sites, add-ons, previous versions) --- */

.bc-page .bnc-sites-table,
.bc-page .bnc-addons-table,
.bc-page .bnc-prev-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text);
}

.bc-page .bnc-sites-table th,
.bc-page .bnc-addons-table th,
.bc-page .bnc-prev-table th {
	text-align: left;
	padding: var(--bc-space-2);
	background: var(--bc-color-bg-subtle);
	border-bottom: 2px solid var(--bc-color-border);
	font-weight: 600;
	color: var(--bc-color-text-strong);
}

.bc-page .bnc-sites-table td,
.bc-page .bnc-addons-table td,
.bc-page .bnc-prev-table td {
	padding: var(--bc-space-2);
	border-bottom: 1px solid var(--bc-color-border);
	vertical-align: middle;
}

.bc-page .bnc-sites-table tr:last-child td,
.bc-page .bnc-addons-table tr:last-child td,
.bc-page .bnc-prev-table tr:last-child td {
	border-bottom: none;
}

.bc-page .bnc-site-url {
	font-family: var(--bc-font-mono);
	font-size: var(--bc-text-xs);
	color: var(--bc-color-text-muted);
	word-break: break-all;
}

/* --- Inline action buttons (revoke / migrate) --- */

.bc-page .bnc-revoke-site,
.bc-page .bnc-migrate-url,
.bc-page .bnc-prev-toggle {
	font-family: inherit;
	font-size: var(--bc-text-xs);
	padding: var(--bc-space-1) var(--bc-space-3);
	border-radius: var(--bc-radius-sm);
	background: var(--bc-color-bg-elevated);
	color: var(--bc-color-text);
	border: 1px solid var(--bc-color-border);
	cursor: pointer;
	transition: background var(--bc-transition-fast), border-color var(--bc-transition-fast), color var(--bc-transition-fast);
	white-space: nowrap;
}

.bc-page .bnc-migrate-url {
	margin-right: var(--bc-space-2);
}

.bc-page .bnc-revoke-site:hover,
.bc-page .bnc-revoke-site:focus-visible {
	background: color-mix(in srgb, var(--bc-color-error-fill) 12%, transparent);
	color: var(--bc-color-error-text);
	border-color: color-mix(in srgb, var(--bc-color-error-fill) 50%, transparent);
}

.bc-page .bnc-migrate-url:hover,
.bc-page .bnc-migrate-url:focus-visible,
.bc-page .bnc-prev-toggle:hover,
.bc-page .bnc-prev-toggle:focus-visible {
	background: var(--bc-color-bg-subtle);
	color: var(--bc-color-text-strong);
	border-color: var(--bc-color-accent);
}

.bc-page .bnc-revoke-site:disabled,
.bc-page .bnc-migrate-url:disabled,
.bc-page .bnc-prev-toggle:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* --- Muted helper text --- */

.bc-page .bnc-slot-count,
.bc-page .bnc-connect-hint,
.bc-page .bnc-empty-notice,
.bc-page .bnc-staging-notice,
.bc-page .bnc-rollback-notice,
.bc-page .bnc-wporg-note {
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-sm);
}

.bc-page .bnc-slot-count {
	margin-top: var(--bc-space-2);
}

.bc-page .bnc-empty-notice {
	font-style: italic;
}

.bc-page .bnc-connect-hint {
	margin-top: var(--bc-space-2);
}

.bc-page .bnc-connect-hint a,
.bc-page .bnc-wporg-note a {
	color: var(--bc-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.bc-page .bnc-connect-hint a:hover,
.bc-page .bnc-connect-hint a:focus,
.bc-page .bnc-wporg-note a:hover,
.bc-page .bnc-wporg-note a:focus {
	color: var(--bc-color-link-hover);
}

/* --- Staging environments (collapsible) --- */

.bc-page .bnc-staging-section {
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	overflow: hidden;
	background: var(--bc-color-bg-elevated);
}

.bc-page .bnc-staging-toggle {
	width: 100%;
	text-align: left;
	padding: var(--bc-space-3) var(--bc-space-4);
	background: var(--bc-color-bg-subtle);
	border: none;
	cursor: pointer;
	color: var(--bc-color-text-strong);
	font-family: inherit;
	font-weight: 600;
	font-size: var(--bc-text-sm);
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background var(--bc-transition-fast);
}

.bc-page .bnc-staging-toggle:hover,
.bc-page .bnc-staging-toggle:focus-visible {
	background: var(--bc-color-bg-elevated);
}

.bc-page .bnc-staging-body {
	padding: 0 var(--bc-space-4) var(--bc-space-4);
}

.bc-page .bnc-staging-notice {
	margin-top: var(--bc-space-2);
}

/* --- Add-ons list --- */

.bc-page .bnc-addon-active {
	color: var(--bc-color-success);
	font-weight: 600;
}

.bc-page .bnc-browse-addons {
	display: inline-block;
	margin-top: var(--bc-space-3);
	color: var(--bc-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	font-size: var(--bc-text-sm);
}

.bc-page .bnc-browse-addons:hover,
.bc-page .bnc-browse-addons:focus {
	color: var(--bc-color-link-hover);
}

.bc-page .bnc-bundle-upgrade-notice {
	margin: 0 0 var(--bc-space-4);
	padding: var(--bc-space-3) var(--bc-space-4);
	border: 1px solid color-mix(in srgb, var(--bc-color-accent) 40%, transparent);
	background: color-mix(in srgb, var(--bc-color-accent) 8%, transparent);
	border-radius: var(--bc-radius-md);
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text);
}

.bc-page .bnc-bundle-upgrade-notice a {
	color: var(--bc-color-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.bc-page .bnc-bundle-upgrade-notice a:hover,
.bc-page .bnc-bundle-upgrade-notice a:focus {
	color: var(--bc-color-accent-hover);
}

/* --- Downloads block: product rows --- */

.bc-page .bnc-product-row {
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	margin-bottom: var(--bc-space-3);
	overflow: hidden;
	background: var(--bc-color-bg-elevated);
}

.bc-page .bnc-product-main {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--bc-space-4);
	gap: var(--bc-space-3);
	flex-wrap: wrap;
}

.bc-page .bnc-product-info {
	display: flex;
	align-items: center;
	gap: var(--bc-space-3);
	flex-wrap: wrap;
	min-width: 0;
}

.bc-page .bnc-product-name {
	font-size: var(--bc-text-base);
	font-weight: 600;
	color: var(--bc-color-text-strong);
}

.bc-page .bnc-version-badge {
	display: inline-block;
	padding: 2px var(--bc-space-2);
	background: var(--bc-color-bg-subtle);
	color: var(--bc-color-accent);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	font-family: var(--bc-font-mono);
}

.bc-page .bnc-meta-item {
	font-size: var(--bc-text-xs);
	color: var(--bc-color-text-muted);
}

.bc-page .bnc-product-actions {
	display: flex;
	align-items: center;
	gap: var(--bc-space-2);
	flex-shrink: 0;
}

.bc-page .bnc-download-btn {
	display: inline-block;
	padding: var(--bc-space-2) var(--bc-space-4);
	background: var(--bc-color-accent);
	color: var(--bc-navy-900);
	border-radius: var(--bc-radius-sm);
	font-size: var(--bc-text-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--bc-transition-fast);
}

.bc-page .bnc-download-btn:hover,
.bc-page .bnc-download-btn:focus {
	background: var(--bc-color-accent-hover);
	color: var(--bc-navy-900);
}

.bc-page .bnc-download-btn:active {
	background: var(--bc-color-accent-pressed);
}

.bc-page .bnc-no-download {
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text-muted);
	font-style: italic;
}

/* --- Downloads: previous versions panel --- */

.bc-page .bnc-prev-panel {
	border-top: 1px solid var(--bc-color-border);
	background: var(--bc-color-bg-subtle);
	padding: var(--bc-space-3) var(--bc-space-4);
}

.bc-page .bnc-prev-table th {
	font-size: var(--bc-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bc-color-text-muted);
}

.bc-page .bnc-prev-download {
	color: var(--bc-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	font-size: var(--bc-text-xs);
}

.bc-page .bnc-prev-download:hover,
.bc-page .bnc-prev-download:focus {
	color: var(--bc-color-link-hover);
}

.bc-page .bnc-wporg-note {
	margin-top: var(--bc-space-3);
	line-height: var(--bc-leading-normal);
}


/* ============================================================
   Shop / SureCart product single (single-sc_product.php)
   ============================================================ */

/*
 * SureCart's product-page block emits Gutenberg-style markup with heavy inline
 * styling meant for a light host theme. The overrides below fight that inline
 * styling — hence the pervasive !important, which is deliberate and appropriate
 * for third-party inline styles we can't remove without a render_block filter.
 *
 * Scope: everything is under .bc-page .bc-shop so these rules never leak into
 * pages that don't render single-sc_product.php.
 *
 * SureCart does not publish a template-file override system for individual
 * blocks (unlike WooCommerce). CSS is the right level for pure visual work;
 * for structural changes (rewriting classes, injecting wrappers) reach for
 * the render_block / render_block_surecart/{block-name} filter documented at
 * https://developer.surecart.com/documentation/actions-filters/templates.
 */

/* --- Container width: wider than the .bc-content prose max so the two-column
 * product layout has room to breathe. --- */

.bc-page .bc-shop-content {
	max-width: var(--bc-max-width);
	margin-inline: auto;
}

/* --- Column proportions: SureCart hardcodes flex-basis:36% inline on the
 * details column, which is why the description looks cramped. Force both
 * columns to share space evenly. --- */

.bc-page .bc-shop .wp-block-surecart-product-page > .wp-block-columns {
	gap: var(--bc-space-12);
	align-items: start;
}

.bc-page .bc-shop .wp-block-surecart-product-page > .wp-block-columns > .wp-block-column {
	flex-basis: 0 !important;
	flex-grow: 1 !important;
}

/* --- No-image mode: replace the SureCart placeholder JPG with a branded
 * Benecaster panel (accent-amber gradient + centered navy logomark). Applied
 * when the product has no WP featured image (see .bc-shop--no-image on <main>
 * from single-sc_product.php). Details column keeps its default 50/50 split
 * from the parent .wp-block-columns rule above. Mark rendered via a
 * background-image on ::before so the SureCart block markup underneath is
 * safely hidden. Uses `logomark-navy.svg` — navy on amber gives the highest
 * contrast; the wordmark variants would blend "caster" into the panel. --- */

.bc-page .bc-shop--no-image .wp-block-surecart-product-page > .wp-block-columns > .wp-block-column:first-child {
	background: linear-gradient(135deg, var(--bc-color-accent) 0%, var(--bc-color-accent-pressed) 100%);
	border-radius: var(--bc-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: var(--bc-space-8);
	align-self: stretch;
}

.bc-page .bc-shop--no-image .wp-block-surecart-product-page > .wp-block-columns > .wp-block-column:first-child::before {
	content: "";
	display: block;
	width: 200px;
	aspect-ratio: 116 / 86;
	background-image: url('../img/branding/logomark-navy.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.bc-page .bc-shop--no-image .wp-block-surecart-product-page > .wp-block-columns > .wp-block-column:first-child > * {
	display: none;
}

/* --- Product title / price / description --- */

.bc-page .bc-shop .wp-block-surecart-product-title {
	font-size: var(--bc-text-3xl) !important;
	color: var(--bc-color-text-strong);
	letter-spacing: -0.01em;
	line-height: var(--bc-leading-tight);
	margin: 0 0 var(--bc-space-4) !important;
}

.bc-page .bc-shop .wp-block-surecart-product-selected-price-amount {
	font-size: var(--bc-text-2xl) !important;
	color: var(--bc-color-accent);
	font-weight: 600;
	line-height: var(--bc-leading-tight) !important;
}

.bc-page .bc-shop .wp-block-surecart-product-selected-price-scratch-amount {
	color: var(--bc-color-text-muted) !important;
	font-size: var(--bc-text-lg) !important;
}

.bc-page .bc-shop .wp-block-surecart-product-selected-price-interval {
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-sm);
}

.bc-page .bc-shop .wp-block-surecart-product-description,
.bc-page .bc-shop .sc-prose {
	color: var(--bc-color-text);
	font-size: var(--bc-text-base);
	line-height: var(--bc-leading-normal);
	margin: var(--bc-space-6) 0;
}

.bc-page .bc-shop .sc-prose p {
	margin: 0 0 var(--bc-space-4);
}

.bc-page .bc-shop .sc-prose p:last-child {
	margin-bottom: 0;
}

/* --- Product media: dark-theme border + radius on the image --- */

.bc-page .bc-shop .wp-block-surecart-product-media {
	margin: 0;
}

.bc-page .bc-shop .wp-block-surecart-product-media img {
	border-radius: var(--bc-radius-md);
	border: 1px solid var(--bc-color-border);
	background: var(--bc-color-bg-elevated);
}

/* --- Quantity control: legibility on the dark theme (fixes "black text on
 * blue background"). Label styled as an uppercase micro-label to match the
 * form treatment used elsewhere in the theme. --- */

.bc-page .bc-shop .wp-block-surecart-product-quantity {
	margin: var(--bc-space-4) 0;
}

.bc-page .bc-shop .sc-form-label {
	display: block;
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--bc-space-2);
}

.bc-page .bc-shop .sc-input-group {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	overflow: hidden;
	background: var(--bc-color-bg-elevated);
}

.bc-page .bc-shop .sc-form-control {
	background: var(--bc-color-bg-elevated) !important;
	color: var(--bc-color-text-strong) !important;
	border: 0 !important;
	padding: var(--bc-space-2) var(--bc-space-3) !important;
	font-size: var(--bc-text-base) !important;
	min-width: 3em;
	text-align: center;
}

.bc-page .bc-shop .sc-input-group-text {
	background: var(--bc-color-bg-subtle);
	color: var(--bc-color-text);
	border: 0;
	padding: var(--bc-space-2) var(--bc-space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--bc-transition-fast), color var(--bc-transition-fast);
}

.bc-page .bc-shop .sc-input-group-text:hover:not(.button--disabled) {
	background: var(--bc-color-accent);
	color: var(--bc-color-bg);
}

.bc-page .bc-shop .sc-input-group-text.button--disabled,
.bc-page .bc-shop .sc-input-group-text[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* --- Buy buttons: amber primary for "Add to Cart", amber outline for
 * "Buy Now" (SureCart applies .is-style-outline to the second button). --- */

.bc-page .bc-shop .wp-block-surecart-product-buy-buttons.wp-block-buttons {
	gap: var(--bc-space-3);
	margin: var(--bc-space-6) 0 0;
}

.bc-page .bc-shop .wp-block-surecart-product-buy-button .wp-block-button__link {
	background: var(--bc-color-accent) !important;
	color: var(--bc-color-bg) !important;
	border: 1px solid var(--bc-color-accent) !important;
	border-radius: var(--bc-radius-md) !important;
	padding: var(--bc-space-3) var(--bc-space-6) !important;
	font-weight: 600 !important;
	font-size: var(--bc-text-base) !important;
	transition: background var(--bc-transition-fast), color var(--bc-transition-fast), border-color var(--bc-transition-fast);
}

.bc-page .bc-shop .wp-block-surecart-product-buy-button .wp-block-button__link:hover,
.bc-page .bc-shop .wp-block-surecart-product-buy-button .wp-block-button__link:focus {
	background: var(--bc-color-accent-hover) !important;
	border-color: var(--bc-color-accent-hover) !important;
}

.bc-page .bc-shop .wp-block-surecart-product-buy-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--bc-color-accent) !important;
	border: 1px solid var(--bc-color-accent) !important;
}

.bc-page .bc-shop .wp-block-surecart-product-buy-button.is-style-outline .wp-block-button__link:hover,
.bc-page .bc-shop .wp-block-surecart-product-buy-button.is-style-outline .wp-block-button__link:focus {
	background: var(--bc-color-accent) !important;
	color: var(--bc-color-bg) !important;
}

/* --- Sale badge --- */

.bc-page .bc-shop .wp-block-surecart-product-sale-badge {
	background: var(--bc-color-accent) !important;
	color: var(--bc-color-bg) !important;
	border-radius: var(--bc-radius-full) !important;
}

/* --- Related products ("You may also like") --- */

.bc-page .bc-shop .wp-block-surecart-product-list-related {
	margin-top: var(--bc-space-16) !important;
	padding-top: var(--bc-space-12);
	border-top: 1px solid var(--bc-color-border);
}

.bc-page .bc-shop .wp-block-surecart-product-list-related h3 {
	color: var(--bc-color-text-strong);
	font-size: var(--bc-text-2xl) !important;
	margin: 0;
}

.bc-page .bc-shop .wp-block-surecart-product-pagination-previous,
.bc-page .bc-shop .wp-block-surecart-product-pagination-next {
	border-color: var(--bc-color-border) !important;
	color: var(--bc-color-text-muted);
	transition: border-color var(--bc-transition-fast), color var(--bc-transition-fast);
}

.bc-page .bc-shop .wp-block-surecart-product-pagination-previous:hover,
.bc-page .bc-shop .wp-block-surecart-product-pagination-next:hover {
	border-color: var(--bc-color-accent) !important;
	color: var(--bc-color-accent);
}

/* Related product card: dark surface + amber-on-hover, matching the treatment
 * used by .bc-recipe-card. SureCart wraps each card in a
 * .wp-block-group.has-background with light-mode inline colors we override. */
.bc-page .bc-shop .sc-product-item .wp-block-group.has-background {
	background: var(--bc-color-bg-elevated) !important;
	border-color: var(--bc-color-border) !important;
	transition: border-color var(--bc-transition-fast), transform var(--bc-transition-fast);
}

.bc-page .bc-shop .sc-product-item-link {
	text-decoration: none;
	color: inherit;
}

.bc-page .bc-shop .sc-product-item:hover .wp-block-group.has-background,
.bc-page .bc-shop .sc-product-item:focus-within .wp-block-group.has-background {
	border-color: var(--bc-color-accent) !important;
	transform: translateY(-2px);
}

/* The card cover is a light-gray aspect-ratio-1 placeholder when a product has
 * no image. Hiding it lets the title/tag/price stand up as the actual content
 * of the card. Restore this rule when real product imagery ships. */
.bc-page .bc-shop .sc-product-item .wp-block-cover.has-aspect-ratio {
	display: none;
}

.bc-page .bc-shop .sc-product-item .wp-block-surecart-product-title {
	font-size: var(--bc-text-lg) !important;
	color: var(--bc-color-text-strong);
	line-height: var(--bc-leading-tight);
	margin: 0 0 var(--bc-space-2) !important;
}

.bc-page .bc-shop .sc-product-item .wp-block-surecart-product-list-price {
	font-size: var(--bc-text-base) !important;
	color: var(--bc-color-accent);
	font-weight: 600 !important;
}

/* Collection tag pill ("Add-On") — matches the .bc-recipe-addon treatment used
 * on the recipes index. */
.bc-page .bc-shop .wp-block-surecart-product-collection-tag {
	background: var(--bc-color-bg) !important;
	color: var(--bc-color-text-muted) !important;
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-full);
	padding: var(--bc-space-1) var(--bc-space-3) !important;
	font-family: var(--bc-font-mono);
	font-size: var(--bc-text-xs) !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	display: inline-block;
	margin-bottom: var(--bc-space-2) !important;
}

@media (max-width: 767px) {
	.bc-page .bc-shop .wp-block-surecart-product-page > .wp-block-columns {
		flex-direction: column;
		gap: var(--bc-space-8);
	}

	.bc-page .bc-shop .wp-block-surecart-product-buy-buttons.wp-block-buttons {
		flex-direction: column;
	}

	.bc-page .bc-shop .wp-block-surecart-product-buy-button.wp-block-button__width-100 {
		width: 100%;
	}
}

/* Two-column comparison layout used on plan pages (e.g. Launch vs WordPress.org free). */
.bc-page .bc-compare-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bc-space-8);
	margin: var(--bc-space-6) 0;
}

@media (max-width: 767px) {
	.bc-page .bc-compare-cols {
		grid-template-columns: 1fr;
	}
}

/* --- Content CTA buttons (every page) ---
 * The pipeline marks real conversion CTAs with .bc-btn and leaves
 * navigational links as prose (operator decision 2026-09-20: the primary /
 * secondary distinction is made content-side, because CSS cannot infer it —
 * the trailing arrow is on both kinds). A paragraph holding only a button is
 * centred, which is what the Content CTA Button Centering item asked for.
 *
 * Only :has(> .bc-btn:only-child) matches, so a paragraph that is just a
 * plain link stays left-aligned body copy.
 *
 * The /shop/* rule below still wins where it applies: it makes the paragraph
 * inline-block for monthly/annual pairs, and centring inside a shrink-wrapped
 * inline-block has no visible effect. Verified the shop layout is unchanged. */

.bc-page .bc-content p:has(> .bc-btn:only-child) {
	text-align: center;
}

/* --- Plan page (/shop/plans/*) content layout ---
 * Drop the .bc-content prose max-width (900px) on /shop/* pages so plan copy,
 * comparison tables, and CTA rows can use the full main-container width. The
 * gutter is supplied by .bc-main's own padding-inline (var(--bc-space-6)),
 * and .bc-main is already max-width capped + centered.
 *
 * Markdown-published CTA links land as `<p><a class="bc-btn">…</a></p>`.
 * Default flow stacks each on its own line with label-driven widths, which
 * looks haphazard. Convert single-button paragraphs to inline-block on
 * desktop so monthly/annual pairs sit side-by-side; a min-width gives short
 * labels a floor. On mobile, restore block flow and center. */

.bc-page.bc-shop .bc-content {
	max-width: none;
}

.bc-page.bc-shop .bc-content p:has(> .bc-btn:only-child) {
	display: inline-block;
	margin: 0 var(--bc-space-3) var(--bc-space-4) 0;
}

.bc-page.bc-shop .bc-content p:has(> .bc-btn:only-child) > .bc-btn {
	min-width: 260px;
	text-align: center;
}

@media (max-width: 767px) {
	.bc-page.bc-shop .bc-content p:has(> .bc-btn:only-child) {
		display: block;
		margin: 0 auto var(--bc-space-3);
		text-align: center;
	}
}


/* ============================================================
   Setup comparison shortcode — [benecaster_setup_comparison]
   ============================================================ */

/*
 * Renders the Standard Setup vs Migration + Setup comparison table on
 * /shop/setup-standard/ and /shop/setup-migration/. The shortcode is
 * plugin-emitted (benecastor-license-server →
 * src/Marketing/Services/SetupComparisonShortcode.php) and uses BEM-style
 * `benecaster-setup-comparison__*` classes, not the `.bc-*` theme prefix —
 * hence the double-underscore selectors below.
 *
 * Markup contract (fixed 3 columns × 7 rows, no modifier classes, no icons):
 *   <div class="benecaster-setup-comparison">
 *     <table class="benecaster-setup-comparison__table">
 *       <thead><tr><th scope="col">…</th> × 3</tr></thead>
 *       <tbody><tr><th scope="row">feature</th><td>…</td><td>…</td></tr> × 7</tbody>
 *     </table>
 *   </div>
 *
 * Visual treatment mirrors .bc-hook-params-table so data tables read
 * consistently across the site.
 */

.bc-page .benecaster-setup-comparison {
	max-width: 100%;
	overflow-x: auto;
	margin: var(--bc-space-6) 0;
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
}

.bc-page .benecaster-setup-comparison__table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: var(--bc-text-sm);
	background: transparent;
}

.bc-page .benecaster-setup-comparison__table th,
.bc-page .benecaster-setup-comparison__table td {
	padding: var(--bc-space-3) var(--bc-space-4);
	text-align: left;
	border-bottom: 1px solid var(--bc-color-border);
	vertical-align: top;
}

.bc-page .benecaster-setup-comparison__table thead th {
	color: var(--bc-color-text-strong);
	font-weight: 600;
	background: var(--bc-color-bg-subtle);
	white-space: nowrap;
}

.bc-page .benecaster-setup-comparison__table tbody th {
	color: var(--bc-color-text-strong);
	font-weight: 600;
	width: 40%;
}

.bc-page .benecaster-setup-comparison__table tbody td {
	color: var(--bc-color-text);
}

.bc-page .benecaster-setup-comparison__table tbody tr:last-child th,
.bc-page .benecaster-setup-comparison__table tbody tr:last-child td {
	border-bottom: none;
}


/* ============================================================
   Site-wide support search — .bc-search-*
   ============================================================ */

/*
 * Two surfaces share the same class family:
 *
 *   .bc-search-form--header  — compact form rendered in the site header
 *                              (desktop) and mobile nav on docs +
 *                              developer-CPT surfaces. Emitted by
 *                              bc_render_header_search() in functions.php.
 *                              JS (assets/js/search.js) creates a floating
 *                              .bc-search-dropdown below it with up to 8
 *                              live results.
 *
 *   .bc-search               — main container on search.php. Full-page
 *                              form + status + results list. JS renders
 *                              up to 20 result articles into
 *                              .bc-search-results.
 *
 * Class contract:
 *   .bc-search-form                — <form>, base
 *   .bc-search-form--header        — modifier: compact header/mobile-nav
 *   .bc-search-input               — <input type="search" name="s">
 *   .bc-search-submit              — submit button
 *   .bc-search-status              — <p> aria-live region (page only)
 *   .bc-search-results             — page results container (page only)
 *   .bc-search-dropdown            — JS-created floating panel (header only)
 *   .bc-search-result              — <a> in dropdown, <article> on page
 *   .bc-search-result--focused     — keyboard highlight (dropdown only)
 *   .bc-search-result-type         — small type badge
 *   .bc-search-result-title        — title (inline in dropdown, <h2>><a> on page)
 *   .bc-search-result-excerpt      — excerpt (contains <mark>)
 *   .bc-search-empty               — no-results / error text in dropdown
 */

/* --- Base form + input (shared) --- */

.bc-page .bc-search-form {
	display: flex;
	gap: var(--bc-space-2);
	align-items: stretch;
	margin: 0;
}

.bc-page .bc-search-input {
	flex: 1;
	min-width: 0;
	background: var(--bc-color-bg);
	color: var(--bc-color-text);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	padding: var(--bc-space-2) var(--bc-space-3);
	font-family: inherit;
	font-size: var(--bc-text-sm);
	line-height: var(--bc-leading-normal);
	transition: border-color var(--bc-transition-fast), box-shadow var(--bc-transition-fast);
}

.bc-page .bc-search-input:focus,
.bc-page .bc-search-input:focus-visible {
	outline: none;
	border-color: var(--bc-color-accent);
	box-shadow: 0 0 0 2px var(--bc-color-accent);
}

.bc-page .bc-search-input::placeholder {
	color: var(--bc-color-text-muted);
}

.bc-page .bc-search-submit {
	background: var(--bc-color-accent);
	color: var(--bc-navy-900);
	border: 1px solid var(--bc-color-accent);
	border-radius: var(--bc-radius-md);
	padding: var(--bc-space-2) var(--bc-space-4);
	font-family: inherit;
	font-size: var(--bc-text-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--bc-transition-fast), border-color var(--bc-transition-fast);
}

.bc-page .bc-search-submit:hover,
.bc-page .bc-search-submit:focus {
	background: var(--bc-color-accent-hover);
	border-color: var(--bc-color-accent-hover);
}

.bc-page .bc-search-submit:active {
	background: var(--bc-color-accent-pressed);
	border-color: var(--bc-color-accent-pressed);
}

/* --- Header form: compact, right-aligned in .bc-header-inner --- */

.bc-page .bc-search-form--header {
	position: relative;
	flex: 0 1 320px;
	max-width: 100%;
}

/* Push the header form to the right so it clusters with the nav rather
   than floating in the space-between center between logo and nav. */
.bc-page .bc-header-inner .bc-search-form--header {
	margin-left: auto;
}

/* Mobile-nav copy: full width, stacks above the nav list. */
.bc-page .bc-mobile-nav .bc-search-form--header {
	flex: 1 1 auto;
	margin-bottom: var(--bc-space-4);
}

/* --- Dropdown (JS-created inside .bc-search-form--header) --- */

.bc-page .bc-search-dropdown {
	position: absolute;
	top: calc(100% + var(--bc-space-2));
	left: 0;
	right: 0;
	min-width: 320px;
	max-height: 60vh;
	overflow-y: auto;
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	z-index: var(--bc-z-dropdown);
}

.bc-page .bc-search-dropdown[hidden] {
	display: none;
}

/* Dropdown result — flat link row */
.bc-page .bc-search-dropdown .bc-search-result {
	display: block;
	padding: var(--bc-space-3) var(--bc-space-4);
	border-bottom: 1px solid var(--bc-color-border);
	color: var(--bc-color-text);
	text-decoration: none;
	transition: background var(--bc-transition-fast);
}

.bc-page .bc-search-dropdown .bc-search-result:last-child {
	border-bottom: none;
}

.bc-page .bc-search-dropdown .bc-search-result:hover,
.bc-page .bc-search-dropdown .bc-search-result--focused {
	background: var(--bc-color-bg-subtle);
}

.bc-page .bc-search-dropdown .bc-search-result-type {
	display: inline-block;
	font-family: var(--bc-font-mono);
	font-size: var(--bc-text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bc-color-text-muted);
	margin-right: var(--bc-space-2);
}

.bc-page .bc-search-dropdown .bc-search-result-title {
	display: inline;
	font-weight: 600;
	color: var(--bc-color-text-strong);
}

.bc-page .bc-search-dropdown .bc-search-result-excerpt {
	display: block;
	margin-top: var(--bc-space-1);
	font-size: var(--bc-text-sm);
	line-height: var(--bc-leading-normal);
	color: var(--bc-color-text-muted);
}

.bc-page .bc-search-empty {
	padding: var(--bc-space-4);
	margin: 0;
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-sm);
	text-align: center;
}

/* --- Full-page search results (search.php) --- */

.bc-page .bc-main.bc-search {
	max-width: var(--bc-max-width-prose);
	padding: var(--bc-space-12) var(--bc-space-6);
	margin-inline: auto;
}

.bc-page .bc-search-header {
	margin-bottom: var(--bc-space-6);
}

.bc-page .bc-search-title {
	font-size: var(--bc-text-3xl);
	line-height: var(--bc-leading-tight);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-6);
}

.bc-page .bc-search-title em {
	color: var(--bc-color-accent);
	font-style: normal;
}

/* Page form is larger than the header variant. */
.bc-page .bc-search-form:not(.bc-search-form--header) .bc-search-input {
	font-size: var(--bc-text-base);
	padding: var(--bc-space-3) var(--bc-space-4);
}

.bc-page .bc-search-status {
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-sm);
	margin: 0 0 var(--bc-space-6);
	min-height: 1.5em;  /* reserve space so results don't jump on first status text */
}

.bc-page .bc-search-status:empty {
	margin: 0;
	min-height: 0;
}

.bc-page .bc-search-results {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-4);
}

/* Page result — card style. Originally mirrored .bc-hook-archive-card, which was removed 2026-09-20 along with the unreachable hook archive; these rules now stand on their own. */
.bc-page .bc-search-results .bc-search-result {
	display: block;
	padding: var(--bc-space-6);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	transition: border-color var(--bc-transition-fast);
}

.bc-page .bc-search-results .bc-search-result:hover,
.bc-page .bc-search-results .bc-search-result:focus-within {
	border-color: var(--bc-color-accent);
}

.bc-page .bc-search-results .bc-search-result-type {
	display: inline-block;
	font-family: var(--bc-font-mono);
	font-size: var(--bc-text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bc-color-text-muted);
	margin-bottom: var(--bc-space-2);
}

.bc-page .bc-search-results .bc-search-result-title {
	font-size: var(--bc-text-lg);
	line-height: var(--bc-leading-tight);
	margin: 0 0 var(--bc-space-2);
}

.bc-page .bc-search-results .bc-search-result-title a {
	color: var(--bc-color-text-strong);
	text-decoration: none;
}

.bc-page .bc-search-results .bc-search-result-title a:hover,
.bc-page .bc-search-results .bc-search-result-title a:focus {
	color: var(--bc-color-accent);
}

.bc-page .bc-search-results .bc-search-result-excerpt {
	color: var(--bc-color-text);
	font-size: var(--bc-text-sm);
	line-height: var(--bc-leading-normal);
	margin: 0;
}

/* --- Excerpt term highlight (endpoint-emitted <mark> tags) --- */

.bc-page .bc-search-result-excerpt mark {
	background: var(--bc-color-accent);
	color: var(--bc-navy-900);
	padding: 0 0.15em;
	border-radius: var(--bc-radius-sm);
	font-weight: 600;
}

/* --- Responsive: header search hidden on mobile; mobile-nav copy serves
   mobile users after they open the hamburger. --- */

@media (max-width: 767px) {
	.bc-page .bc-header-inner .bc-search-form--header {
		display: none;
	}

	.bc-page .bc-search-title {
		font-size: var(--bc-text-2xl);
	}
}


/* ============================================================
   Savings calculator isolation
   ============================================================ */

/*
 * The savings calculator container (class .bc-savings-calc) is injected by the
 * benecaster.com plugin on /savings via shortcode. The container renders inside
 * .bc-page (which lives on <body>), so any .bc-page-scoped bare-element rule
 * would still match elements inside the calculator without an explicit guard.
 *
 * Every bare-element rule under .bc-page in this file must therefore carry the
 * :not(.bc-savings-calc *) guard on each element in the selector. Class-based
 * rules (e.g. .bc-btn, .bc-content h1) do not need the guard — they only match
 * where the class is present, and no theme class is applied inside the calc
 * container.
 *
 * Last audited 2026-08-09 (code review pass). Guarded bare-element
 * rules — grep `:not\(\.bc-savings-calc \*\)` in this file to find
 * them; line numbers drift so no hard references are given here:
 *
 *   Guarded:
 *     - .bc-page *                        (box-sizing: border-box)
 *     - .bc-page img / svg / video        (max-width, height, display: block)
 *     - .bc-page a:focus-visible / button:focus-visible (outline)
 *
 *   Deliberately NOT guarded:
 *     - body.bc-page { font-family, font-size, line-height, color, bg }
 *       These are inherited defaults; a calc UI that wants site typography
 *       will just work, and inherited properties can be overridden by the
 *       calc's own root rules without specificity headaches.
 *
 * Verification: grep '^\.bc-page [a-z*]' assets/css/site.css should return
 * only guarded selectors. Any new bare-element rule added here without a
 * :not(.bc-savings-calc *) guard is a regression.
 *
 * The /savings page uses the generic page.php template — no page-savings.php
 * is needed because the guard here is the whole story. If deeper isolation is
 * ever required, wrap additional rules under .bc-page :not(.bc-savings-calc *).
 */


/* ============================================================
   Forms — .bc-form contract
   ============================================================
   Class contract emitted by ALL Benecaster site forms — the
   contact form template AND every plugin-generated form
   shortcode. Any shortcode-registered form (academic
   application, referral link surface, subscribe forms, etc.)
   MUST render this same class vocabulary so styling stays
   consistent without per-form CSS.

   Structure:
     <form class="bc-form">
       <div class="bc-form__field">              wrapper
         <label class="bc-form__label" for="…">  label above field
         <input class="bc-form__input" …>        text/email/tel/url/number
         <select class="bc-form__select"> …      or select
         <textarea class="bc-form__textarea">    or textarea
         <div class="bc-form__hint">             optional hint line
         <div class="bc-form__error">            inline error (when validation fails)
       </div>
       <div class="bc-form__row">                two-column pair on ≥768px
         <div class="bc-form__field">…</div>
         <div class="bc-form__field">…</div>
       </div>
       <label class="bc-form__file">             file drop-zone
         <input type="file" class="bc-form__file-input">
         <span class="bc-form__file-button">Choose file</span>
         <span class="bc-form__file-name">No file selected</span>
       </label>
       <div class="bc-form__hp" aria-hidden="true">honeypot (off-screen)</div>
       <div class="bc-form__actions">
         <button class="bc-btn bc-btn--primary bc-form__submit">Submit</button>
       </div>
     </form>

   Field-level error state: add .bc-form__field--error to the
   wrapper — the input border turns red and .bc-form__error is
   revealed for the inline message.

   Form-level messaging (banners rendered above the form on
   redirect-style flows): .bc-form__banner with
   --success / --error modifiers.

   Current consumers (as of last audit):
     - page-contact.php uses: .bc-form, .bc-form--contact,
       .bc-form__field, .bc-form__label, .bc-form__input,
       .bc-form__textarea, .bc-form__hp, .bc-form__actions,
       .bc-form__submit, .bc-form__turnstile, .bc-form__banner
   Contract-only (no live consumer in the theme yet — reserved for
   plugin-registered shortcode forms):
     - .bc-form__row, .bc-form__file*, .bc-form__radio*,
       .bc-form__checkbox*, .bc-form__label--group, .bc-form__required,
       .bc-form__select, .bc-form__hint, .bc-form__error
   The `#loginform` block below the .bc-form rules covers the WP-emitted
   wp_login_form() template-tag markup should it appear in a page context
   (the standalone wp-login.php surface is styled by login.css).

   Do not delete "contract-only" selectors — they anchor the plugin
   contract. Grep the plugin repo before flagging as dead.
   ============================================================ */

.bc-page .bc-form {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-6);
	max-width: var(--bc-max-width-narrow);
}

.bc-page .bc-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-2);
}

.bc-page .bc-form__row {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-6);
}

@media (min-width: 768px) {
	.bc-page .bc-form__row {
		flex-direction: row;
	}
	.bc-page .bc-form__row > .bc-form__field {
		flex: 1;
	}
}

.bc-page .bc-form__label {
	font-size: var(--bc-text-base);
	color: var(--bc-color-text);
}

.bc-page .bc-form__label--group {
	font-size: var(--bc-text-base);
	font-weight: 600;
	color: var(--bc-color-text-strong);
	letter-spacing: 0.02em;
	margin-bottom: var(--bc-space-2);
}

.bc-page .bc-form__hint {
	font-size: var(--bc-text-xs);
	color: var(--bc-color-text-muted);
}

.bc-page .bc-form__required {
	color: var(--bc-color-accent);
	margin-left: var(--bc-space-1);
}

.bc-page .bc-form__input,
.bc-page .bc-form__select,
.bc-page .bc-form__textarea {
	width: 100%;
	padding: var(--bc-space-3) var(--bc-space-4);
	font-family: var(--bc-font-sans);
	font-size: var(--bc-text-base);
	line-height: var(--bc-leading-normal);
	color: var(--bc-color-text-strong);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	transition: border-color var(--bc-transition-fast), box-shadow var(--bc-transition-fast);
}

.bc-page .bc-form__textarea {
	resize: vertical;
	min-height: 8rem;
}

.bc-page .bc-form__input:focus,
.bc-page .bc-form__select:focus,
.bc-page .bc-form__textarea:focus {
	outline: none;
	border-color: var(--bc-color-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc-color-accent) 25%, transparent);
}

/* Field-level error state */
.bc-page .bc-form__field--error .bc-form__input,
.bc-page .bc-form__field--error .bc-form__select,
.bc-page .bc-form__field--error .bc-form__textarea {
	border-color: var(--bc-color-error);
}

.bc-page .bc-form__error {
	font-size: var(--bc-text-xs);
	color: var(--bc-color-error);
}

/* File upload — the <label> is the drop-target; the native
   <input type="file"> is layered on top invisibly so a click
   anywhere on the surface opens the picker. The .bc-form__file-name
   element is updated by JS to show the selected filename (JS lives
   with the form shortcode that ships the file field). */
.bc-page .bc-form__file {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--bc-space-3);
	padding: var(--bc-space-4);
	background: var(--bc-color-bg-elevated);
	border: 1px dashed var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	cursor: pointer;
	transition: border-color var(--bc-transition-fast), background var(--bc-transition-fast);
}

.bc-page .bc-form__file:hover,
.bc-page .bc-form__file--dragover {
	border-color: var(--bc-color-accent);
	background: var(--bc-color-bg-subtle);
}

.bc-page .bc-form__file-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.bc-page .bc-form__file-button {
	padding: var(--bc-space-2) var(--bc-space-3);
	font-size: var(--bc-text-sm);
	font-weight: 600;
	color: var(--bc-color-text-strong);
	background: var(--bc-color-bg-subtle);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-sm);
	pointer-events: none;
}

.bc-page .bc-form__file-name {
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text-muted);
}

/* Radio + checkbox groups */
.bc-page .bc-form__radio-group,
.bc-page .bc-form__checkbox-group {
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-2);
}

.bc-page .bc-form__radio,
.bc-page .bc-form__checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--bc-space-2);
	font-size: var(--bc-text-base);
	color: var(--bc-color-text);
	cursor: pointer;
}

.bc-page .bc-form__radio input[type="radio"],
.bc-page .bc-form__checkbox input[type="checkbox"] {
	accent-color: var(--bc-color-accent);
	margin-top: 0.25rem;
}

/* Cloudflare Turnstile widget slot — a field row with reserved
   height so it doesn't jump when the widget hydrates. */
.bc-page .bc-form__turnstile {
	min-height: 65px;
}

/* Honeypot — always off-screen. Also inline-styled in markup so
   it hides even before CSS loads. */
.bc-page .bc-form__hp {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Actions row */
.bc-page .bc-form__actions {
	display: flex;
	justify-content: flex-start;
	gap: var(--bc-space-4);
}

.bc-page .bc-form__submit {
	min-width: 12rem;
}

/* Form-level banner (success or error state, rendered above the
   form on redirect-style flows). */
.bc-page .bc-form__banner {
	padding: var(--bc-space-4) var(--bc-space-6);
	margin-bottom: var(--bc-space-8);
	border-radius: var(--bc-radius-md);
	border: 1px solid var(--bc-color-border);
	background: var(--bc-color-bg-elevated);
}

.bc-page .bc-form__banner h2 {
	margin: 0 0 var(--bc-space-2);
	font-size: var(--bc-text-xl);
	color: var(--bc-color-text-strong);
}

.bc-page .bc-form__banner p {
	margin: 0;
	color: var(--bc-color-text);
}

.bc-page .bc-form__banner--success {
	border-color: var(--bc-color-success);
}

.bc-page .bc-form__banner--success h2 {
	color: var(--bc-color-success);
}

.bc-page .bc-form__banner--error {
	border-color: var(--bc-color-error);
}

.bc-page .bc-form__banner--error h2 {
	color: var(--bc-color-error);
}


/* ============================================================
   wp_login_form() — inline login form on .bc-page surfaces

   Template-tag output emits `#loginform` with `<p>` wrappers
   classed `.login-username`, `.login-password`, `.login-remember`,
   `.login-submit`. No page currently embeds it, but shipping the
   rules ensures any future usage picks up the theme look without
   another CSS change. wp-login.php is styled separately by
   assets/css/login.css.
   ============================================================ */

.bc-page #loginform {
	max-width: var(--bc-max-width-narrow);
	padding: var(--bc-space-8);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
}

.bc-page #loginform p {
	margin: 0 0 var(--bc-space-6);
}

.bc-page #loginform p:last-of-type {
	margin-bottom: 0;
}

.bc-page #loginform label {
	display: block;
	margin: 0 0 var(--bc-space-2);
	font-size: var(--bc-text-base);
	color: var(--bc-color-text);
}

.bc-page #loginform input[type="text"],
.bc-page #loginform input[type="email"],
.bc-page #loginform input[type="password"] {
	width: 100%;
	padding: var(--bc-space-3) var(--bc-space-4);
	font-family: var(--bc-font-sans);
	font-size: var(--bc-text-base);
	line-height: var(--bc-leading-normal);
	color: var(--bc-color-text-strong);
	background: var(--bc-color-bg-subtle);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	transition: border-color var(--bc-transition-fast), box-shadow var(--bc-transition-fast);
}

.bc-page #loginform input[type="text"]:focus,
.bc-page #loginform input[type="email"]:focus,
.bc-page #loginform input[type="password"]:focus {
	outline: none;
	border-color: var(--bc-color-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc-color-accent) 25%, transparent);
}

.bc-page #loginform .login-remember {
	display: flex;
	align-items: center;
	gap: var(--bc-space-2);
	font-size: var(--bc-text-sm);
}

.bc-page #loginform .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: var(--bc-space-2);
	margin: 0;
	font-size: var(--bc-text-sm);
}

.bc-page #loginform .login-remember input[type="checkbox"] {
	accent-color: var(--bc-color-accent);
	margin: 0;
}

.bc-page #loginform .login-submit input[type="submit"],
.bc-page #loginform input#wp-submit {
	display: inline-block;
	min-width: 12rem;
	padding: var(--bc-space-3) var(--bc-space-6);
	font-family: var(--bc-font-sans);
	font-size: var(--bc-text-base);
	font-weight: 600;
	line-height: 1.2;
	color: var(--bc-navy-900);
	background: var(--bc-color-accent);
	border: 1px solid var(--bc-color-accent);
	border-radius: var(--bc-radius-md);
	cursor: pointer;
	transition: background var(--bc-transition-fast), border-color var(--bc-transition-fast);
}

.bc-page #loginform .login-submit input[type="submit"]:hover,
.bc-page #loginform .login-submit input[type="submit"]:focus,
.bc-page #loginform input#wp-submit:hover,
.bc-page #loginform input#wp-submit:focus {
	background: var(--bc-color-accent-hover);
	border-color: var(--bc-color-accent-hover);
}

.bc-page #loginform .login-submit input[type="submit"]:active,
.bc-page #loginform input#wp-submit:active {
	background: var(--bc-color-accent-pressed);
	border-color: var(--bc-color-accent-pressed);
}


/* ============================================================
   Contact page layout
   ============================================================ */

.bc-page .bc-contact-article {
	max-width: var(--bc-max-width-narrow);
	margin-inline: auto;
}

.bc-page .bc-contact-header {
	margin-bottom: var(--bc-space-8);
}

.bc-page .bc-contact-intro {
	color: var(--bc-color-text);
	margin-top: var(--bc-space-4);
}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 767px) {

	/* Hide the desktop copy of the account link at the same width the desktop
	   nav goes away; the drawer renders its own. */
	.bc-page .bc-header-inner > .bc-account-link {
		display: none;
	}

	.bc-page .bc-primary-nav {
		display: none;
	}

	.bc-page .bc-nav-toggle {
		display: flex;
	}

	.bc-page .bc-mobile-nav:not([hidden]) {
		display: block;
	}

	.bc-page .bc-header-inner,
	.bc-page .bc-footer-inner {
		padding-inline: var(--bc-space-4);
	}

	/* On mobile, tighten the vertical rhythm between the menus row and
	   the brand row. Column collapse for .bc-footer__columns is handled
	   in the Footer section's own @media rule. */
	.bc-page .bc-footer-inner {
		gap: var(--bc-space-6);
	}
	.bc-page .bc-footer-brand {
		text-align: left;
	}

	.bc-page .bc-main {
		padding: var(--bc-space-8) var(--bc-space-4);
	}

	.bc-page .bc-page-title {
		font-size: var(--bc-text-2xl);
	}

	.bc-page .bc-content h1 { font-size: var(--bc-text-2xl); }
	.bc-page .bc-content h2 { font-size: var(--bc-text-xl); }

	/* Home page: stack grids, tighten section padding, scale hero */
	.bc-page .bc-home-section {
		padding: var(--bc-space-12) var(--bc-space-4);
	}
	.bc-page .bc-home-hero {
		padding-block: var(--bc-space-16);
	}
	.bc-page .bc-home-hero-title {
		font-size: var(--bc-text-3xl);
	}
	.bc-page .bc-home-section-title {
		font-size: var(--bc-text-2xl);
	}
	.bc-page .bc-home-points,
	.bc-page .bc-home-migration {
		grid-template-columns: 1fr;
	}
	.bc-page .bc-home-free {
		padding: var(--bc-space-6);
	}
	.bc-page .bc-home-steps > li {
		padding-left: 0;
		padding-top: calc(var(--bc-space-12) + var(--bc-space-2));
	}
	.bc-page .bc-home-steps > li::before {
		width: var(--bc-space-8);
		height: var(--bc-space-8);
		font-size: var(--bc-text-lg);
	}

	/* On mobile CTA rows switch to a column stack: centered, full-width
	   buttons capped at the narrow container width. Prevents the
	   mismatched-width "weird stack" seen when two paired CTAs have very
	   different label lengths (e.g. the pricing preview's "See full
	   pricing" + "See the Studio tier"). Also unifies the hero / solo /
	   final CTA centering convention across the home page. */
	.bc-page .bc-home-cta-row,
	.bc-page .bc-home-hero-ctas {
		flex-direction: column;
		align-items: center;
	}

	.bc-page .bc-home-cta-row .bc-btn,
	.bc-page .bc-home-hero-ctas .bc-btn {
		width: 100%;
		max-width: var(--bc-max-width-narrow);
		text-align: center;
	}

	/* Forms: full-width submit on mobile so the tap target spans
	   the container instead of floating at a fixed 12rem width. */
	.bc-page .bc-form__actions .bc-btn,
	.bc-page .bc-form__submit {
		width: 100%;
		min-width: 0;
	}

}

/* ============================================================
   Class + Function reference singles
   single-benecaster_class.php / single-benecaster_function.php

   Both templates follow single-benecaster_hook.php, so these rules
   mirror the .bc-hook-* treatments on the .bc-class-* / .bc-func-*
   class names. Breadcrumbs use the shared .bc-breadcrumbs rules —
   the hook template's own .bc-hook-breadcrumbs is the outlier.
   ============================================================ */

.bc-page .bc-class,
.bc-page .bc-func {
	max-width: var(--bc-max-width-prose);
	margin-inline: auto;
}

.bc-page .bc-class-header,
.bc-page .bc-func-header {
	margin-bottom: var(--bc-space-8);
	padding-bottom: var(--bc-space-6);
	border-bottom: 1px solid var(--bc-color-border);
}

.bc-page .bc-class-title,
.bc-page .bc-func-title {
	font-size: var(--bc-text-2xl);
	line-height: var(--bc-leading-tight);
	margin: 0;
	overflow-wrap: anywhere;
}

.bc-page .bc-class-title code,
.bc-page .bc-func-title code {
	font-family: var(--bc-font-mono);
	font-size: inherit;
	background: none;
	border: none;
	padding: 0;
	color: var(--bc-color-text-strong);
}

/* Fully-qualified name sits under the title as a muted mono subtitle. */
.bc-page .bc-class-fqn {
	margin: var(--bc-space-2) 0 0;
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text-muted);
	overflow-wrap: anywhere;
}

.bc-page .bc-class-fqn code {
	font-family: var(--bc-font-mono);
	font-size: inherit;
	background: none;
	border: none;
	padding: 0;
	color: inherit;
}

.bc-page .bc-class-meta-row,
.bc-page .bc-func-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bc-space-3);
	margin-top: var(--bc-space-4);
	font-size: var(--bc-text-sm);
}

/* Type / group / tier chips — neutral chrome, matching .bc-hook-type. */
.bc-page .bc-class-type,
.bc-page .bc-func-group,
.bc-page .bc-class-tier,
.bc-page .bc-func-tier,
.bc-page .bc-class-addon,
.bc-page .bc-func-addon,
.bc-page .bc-class-deprecated-badge,
.bc-page .bc-func-deprecated-badge {
	display: inline-block;
	padding: var(--bc-space-1) var(--bc-space-3);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: 1px solid var(--bc-color-border);
	background: var(--bc-color-bg-elevated);
	color: var(--bc-color-text);
}

/* Interfaces, traits and abstracts read as contracts, not concrete types. */
.bc-page .bc-class-type--class {
	color: var(--bc-color-accent);
	border-color: var(--bc-color-accent);
}

.bc-page .bc-class-type--abstract,
.bc-page .bc-class-type--interface,
.bc-page .bc-class-type--trait {
	color: var(--bc-color-success);
	border-color: var(--bc-color-success);
}

.bc-page .bc-class-tier--premium,
.bc-page .bc-func-tier--premium {
	color: var(--bc-color-accent);
	border-color: var(--bc-color-accent);
}

.bc-page .bc-class-tier--free,
.bc-page .bc-func-tier--free {
	color: var(--bc-color-success);
	border-color: var(--bc-color-success);
}

.bc-page .bc-class-since,
.bc-page .bc-func-since {
	color: var(--bc-color-text-muted);
}

.bc-page .bc-class-deprecated-badge,
.bc-page .bc-func-deprecated-badge {
	background: transparent;
	color: var(--bc-color-text-strong);
	border-color: var(--bc-color-text-strong);
}

.bc-page .bc-class-deprecated-note,
.bc-page .bc-func-deprecated-note {
	margin: var(--bc-space-4) 0 0;
	padding: var(--bc-space-3) var(--bc-space-4);
	background: var(--bc-color-bg-elevated);
	border-left: 3px solid var(--bc-color-text-strong);
	border-radius: var(--bc-radius-sm);
	color: var(--bc-color-text);
	font-size: var(--bc-text-sm);
}

/* A deprecated method dims its whole row, not just the badge. */
.bc-page .bc-class-method--deprecated td {
	color: var(--bc-color-text-muted);
}

.bc-page .bc-class-section-title,
.bc-page .bc-func-section-title {
	font-size: var(--bc-text-xl);
	line-height: var(--bc-leading-tight);
	color: var(--bc-color-text-strong);
	margin: 0 0 var(--bc-space-4);
}

.bc-page .bc-class-deps,
.bc-page .bc-class-methods,
.bc-page .bc-class-constants,
.bc-page .bc-class-hooks-fired,
.bc-page .bc-class-notes,
.bc-page .bc-func-params,
.bc-page .bc-func-return,
.bc-page .bc-func-example,
.bc-page .bc-func-hooks-fired,
.bc-page .bc-func-notes {
	margin-bottom: var(--bc-space-8);
}

/* Signature block above the content, same chrome as a code example. */
.bc-page .bc-func-signature {
	margin-bottom: var(--bc-space-8);
}

.bc-page .bc-func-signature-code,
.bc-page .bc-func-example-code {
	margin: 0;
	padding: var(--bc-space-4);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	overflow-x: auto;
}

.bc-page .bc-func-signature-code code,
.bc-page .bc-func-example-code code {
	font-family: var(--bc-font-mono);
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text-strong);
	background: none;
	border: none;
	padding: 0;
	white-space: pre;
}

/* Tables — the .bc-hook-params-table treatment across all four. */
.bc-page .bc-class-deps-table,
.bc-page .bc-class-methods-table,
.bc-page .bc-class-constants-table,
.bc-page .bc-func-params-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--bc-text-sm);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	overflow: hidden;
}

.bc-page .bc-class-deps-table th,
.bc-page .bc-class-deps-table td,
.bc-page .bc-class-methods-table th,
.bc-page .bc-class-methods-table td,
.bc-page .bc-class-constants-table th,
.bc-page .bc-class-constants-table td,
.bc-page .bc-func-params-table th,
.bc-page .bc-func-params-table td {
	padding: var(--bc-space-3) var(--bc-space-4);
	text-align: left;
	border-bottom: 1px solid var(--bc-color-border);
	vertical-align: top;
}

.bc-page .bc-class-deps-table tbody tr:last-child td,
.bc-page .bc-class-methods-table tbody tr:last-child td,
.bc-page .bc-class-constants-table tbody tr:last-child td,
.bc-page .bc-func-params-table tbody tr:last-child td {
	border-bottom: none;
}

.bc-page .bc-class-deps-table th,
.bc-page .bc-class-methods-table th,
.bc-page .bc-class-constants-table th,
.bc-page .bc-func-params-table th {
	color: var(--bc-color-text-strong);
	font-weight: 600;
	background: var(--bc-color-bg-subtle);
}

.bc-page .bc-class-deps-table code,
.bc-page .bc-class-methods-table code,
.bc-page .bc-class-constants-table code,
.bc-page .bc-func-params-table code {
	font-family: var(--bc-font-mono);
	font-size: 0.9em;
	color: var(--bc-color-text-strong);
	background: var(--bc-color-bg);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-sm);
	padding: 0.1em 0.4em;
}

/* Type and default cells hold short identifiers that must not break mid-word;
   the table scrolls horizontally on narrow viewports instead. */
.bc-page .bc-class-methods-table td:nth-child(2),
.bc-page .bc-class-constants-table td:nth-child(2),
.bc-page .bc-func-params-table td:nth-child(2),
.bc-page .bc-func-params-table td:nth-child(3) {
	white-space: nowrap;
}

.bc-page .bc-func-param-type {
	color: var(--bc-color-accent);
}

/* Inside the params table, drop the chip chrome so the type reads inline. */
.bc-page .bc-func-params-table .bc-func-param-type {
	background: transparent;
	border-color: transparent;
	padding-left: 0;
	padding-right: 0;
}

.bc-page .bc-func-param-required {
	color: var(--bc-color-text-strong);
	font-weight: 600;
}

.bc-page .bc-func-param-optional {
	color: var(--bc-color-text-muted);
}

.bc-page .bc-func-return-type {
	margin: 0 0 var(--bc-space-2);
	font-size: var(--bc-text-sm);
	display: flex;
	align-items: center;
	gap: var(--bc-space-2);
}

.bc-page .bc-func-return-label {
	color: var(--bc-color-text-muted);
	font-weight: 500;
}

.bc-page .bc-func-return-desc {
	margin: 0;
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text);
}

/* Hooks-fired list — the .bc-hook-affects-list chip row.
 *
 * ⚠ `overflow-wrap: anywhere` is the chip-row half of the prose-container fix
 * further up this file, and the two are not interchangeable — this list sits
 * outside every container named there, so that rule does not reach it. Measured
 * 2026-10-09 at 375px on /classes/membership-price-change-price-change-applier/:
 * each rule alone left the document at 394px and 393px respectively, because
 * the prose and the chip row overflow independently; together they reach 375.
 * `min-width: 0` on the flex items was tried and changed nothing, since
 * `anywhere` already reduces their min-content size — do not add it back.
 */
.bc-page .bc-class-hooks-fired-list,
.bc-page .bc-func-hooks-fired-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bc-space-2);
	overflow-wrap: anywhere;
}

.bc-page .bc-class-hooks-fired-list li,
.bc-page .bc-func-hooks-fired-list li {
	padding: var(--bc-space-1) var(--bc-space-3);
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text);
}

.bc-page .bc-class-hooks-fired-list a,
.bc-page .bc-func-hooks-fired-list a {
	color: var(--bc-color-link);
	text-decoration: underline;
}

.bc-page .bc-class-hooks-fired-list a:hover,
.bc-page .bc-func-hooks-fired-list a:hover {
	color: var(--bc-color-link-hover);
}

.bc-page .bc-class-hooks-fired-list code,
.bc-page .bc-func-hooks-fired-list code {
	font-family: var(--bc-font-mono);
	font-size: inherit;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
}

/* Notes body — same markdown treatment as .bc-hook-notes-body. */
/* Match .bc-hook-notes-body exactly. The smaller size here was accidental --
   this rule's own comment claims the same treatment as the hook pages -- and
   on class and function pages Notes often carries the most important caveats
   on the page, so it should read at body size like the description above it. */
.bc-page .bc-class-notes-body,
.bc-page .bc-func-notes-body {
	color: var(--bc-color-text);
	line-height: var(--bc-leading-loose);
}

.bc-page .bc-class-notes-body p,
.bc-page .bc-func-notes-body p {
	margin: 0 0 var(--bc-space-3);
}

.bc-page .bc-class-notes-body p:last-child,
.bc-page .bc-func-notes-body p:last-child {
	margin-bottom: 0;
}

.bc-page .bc-class-notes-body code,
.bc-page .bc-func-notes-body code {
	font-family: var(--bc-font-mono);
	font-size: 0.9em;
	color: var(--bc-color-text-strong);
	background: var(--bc-color-bg);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-sm);
	padding: 0.1em 0.4em;
}

.bc-page .bc-class-notes-body a,
.bc-page .bc-func-notes-body a {
	color: var(--bc-color-link);
	text-decoration: underline;
}

.bc-page .bc-class-notes-body a:hover,
.bc-page .bc-func-notes-body a:hover {
	color: var(--bc-color-link-hover);
}

.bc-page .bc-class-notes-body strong,
.bc-page .bc-func-notes-body strong {
	color: var(--bc-color-text-strong);
	font-weight: 700;
}

/*
 * Reference tables scroll inside the article column instead of pushing the
 * document sideways. Wraps all six: deps, methods and constants on the class
 * single, params on the hook and function singles, attrs on the shortcode
 * single. The templates emit the .bc-table-scroll div themselves — theme-owned
 * markup, so no filter is involved.
 *
 * ⚠ This replaced a `max-width: 767px` block that put `display: block;
 * overflow-x: auto` on the two widest tables with a `min-width: 8rem` cell prop
 * to restore the discarded table layout. Measured on the deployed
 * /classes/membership-subscription-repository/ 2026-10-09 at a 375px viewport:
 * that technique did not contain anything. The article is a grid item in the
 * docs layout, and a block-level table's min-content size propagates up the
 * normal-flow chain to it — `overflow` only zeroes a box's automatic minimum
 * size for flex and grid items, not for a block in normal flow. The article
 * was sized to 835px inside a 343px track and the "scrolling" table was
 * stretched to match, giving the document an 852px scrollWidth. So the
 * technique is gone rather than extended, and one mechanism covers the site.
 *
 * That mechanism is the support-doc treatment at .bc-docs-body > div:has(>
 * table): an overflow container with `width: 100%; min-width: min-content` on
 * the table. It keeps table layout — the cell `min-width` prop is no longer
 * needed — renders at exactly the width auto layout would have chosen, and is
 * unconditional, because a four-column table of method signatures overflows a
 * 641px desktop column too, not only a phone.
 */
.bc-page .bc-table-scroll {
	overflow-x: auto;
}

.bc-page .bc-table-scroll > table {
	width: 100%;
	min-width: min-content;
}

/*
 * Give the Description column a floor so rows stop being mostly blank.
 *
 * All six reference tables end with a Description, and it is by a wide margin
 * the tallest cell in its row. When the column is auto-sized narrow, that one
 * cell sets a row height the short columns beside it — Visibility, Since,
 * Default — cannot fill, and because the table scrolls sideways the tall cell
 * is usually off-screen: the reader sees a short method name next to a large
 * empty block and no reason for it. Measured 2026-10-10 at a 375px viewport,
 * tallest row → whole table: /classes/token-revocation-reasons/ 844 → 193px
 * and 2149 → 784px; /classes/rest-cadence-switch-controller/ 277 → 172px;
 * /hooks/benecaster_token_reactivation_blocked/ 298 → 88px.
 *
 * ⚠ Deliberately unconditional, like the .bc-table-scroll rule above it. The
 * gap is not a phone problem: at 1280px the article column is 641px and these
 * tables scroll there too, with the same 277 → 172px improvement measured.
 *
 * ⚠ `td:last-child` rather than `:nth-child(n)` because the column count
 * differs per table (2 to 5) while Description is last in all six — see the
 * <th> lists in the four single-benecaster_* templates.
 *
 * ⚠⚠ Stacking the rows into cards below 767px was prototyped first and
 * rejected on measurement: it made the page LONGER (1144px of rows against
 * 713px) because every cell gets its own line, and dropping the scroll
 * container to do it broke the document back out to 616px wide. Tightening
 * cell padding was also tried and contributes almost nothing next to the
 * width (172 → 164px), so the spacing tokens are left alone.
 */
.bc-page .bc-class-deps-table td:last-child,
.bc-page .bc-class-methods-table td:last-child,
.bc-page .bc-class-constants-table td:last-child,
.bc-page .bc-func-params-table td:last-child,
.bc-page .bc-hook-params-table td:last-child,
.bc-page .bc-shortcode-attrs-table td:last-child {
	min-width: var(--bc-table-desc-min);
}

/*
 * The signature column needs the same floor, for the same reason.
 *
 * ⚠ Only the methods table: it is the one reference column holding a full
 * signature rather than a short name, so it is the only first column that
 * wraps. On the params and attrs tables that column is a parameter name and a
 * floor would just waste width.
 *
 * With Description floored above, auto layout gives the leftovers to the other
 * columns, and on pages whose descriptions are short it squeezed Method to
 * 106-137px — an 82-character signature then wrapped to 231px and the row was
 * mostly blank, the original complaint in a new place. Measured 2026-10-10 at
 * 375px, rows per table: /classes/membership-buyup-decline-repository/
 * 759 → 423px, /classes/support-signed-link/ 516 → 348px,
 * /classes/rest-cadence-switch-controller/ 587 → 524px.
 *
 * ℹ Pages already dominated by a genuinely long description do not move —
 * /classes/membership-cadence-switch-cadence-switch-service/ stays at 3500px,
 * where one cell holds 1801 characters filling 96% of its row. That is content,
 * not a gap, and no column floor can or should change it.
 */
.bc-page .bc-class-methods-table td:first-child {
	min-width: var(--bc-table-signature-min);
}

/* Services CTA — template-parts/services-cta.php, on the four
   developer-reference singles. Body copy that links out, deliberately not a
   .bc-btn: an ad-shaped module on a hooks page costs more credibility than it
   earns leads (operator, 2026-09-09). Sits between the reference material and
   the feedback widget, separated by a rule rather than a panel. */
.bc-page .bc-services-cta {
	max-width: var(--bc-max-width-prose);
	margin: var(--bc-space-8) auto 0;
	padding-top: var(--bc-space-6);
	border-top: 1px solid var(--bc-color-border);
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text-muted);
}

.bc-page .bc-services-cta a {
	color: var(--bc-color-link);
	text-decoration: underline;
}

.bc-page .bc-services-cta a:hover {
	color: var(--bc-color-link-hover);
}

/* ============================================================
   Embedded recipe — [benecaster_recipe] shortcode
   .benecaster-recipe--full, 25 embeds across 22 pages

   The markup is plugin-generated and the plugin ships its own
   assets/css/recipes.css, which carries light-theme colours
   (#eef1f5 / #333 badges) onto a dark site and has no rule at all for
   .benecaster-recipe--full or .benecaster-recipe__title. Those two
   therefore render at browser defaults — which is why the embedded
   title lands at 24px/700, identical to .bc-hook-section-title, and
   why the embed has no container.

   ⚠ There was NO abandoned card treatment to recover. The roadmap read
   a computed `border-color: rgb(230, 232, 240)` with zero width as a
   half-finished design; that value is --bc-off-white, i.e. the theme's
   text colour, because the CSS initial value of border-color is
   currentColor. No rule was ever written and none was reverted.

   These rules give the embed a frame, a label, a subordinate title and
   badges that read as card metadata rather than page status — the last
   being the real problem, since a FREE hook page rendering a "Premium"
   badge 300px down reads as the page contradicting itself.
   ============================================================ */

.bc-page .benecaster-recipe--full {
	position: relative;
	margin: var(--bc-space-8) 0;
	padding: var(--bc-space-6);
	padding-top: var(--bc-space-8);
	background: var(--bc-color-bg-subtle);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-lg);
}

/* Eyebrow. Generated rather than marked up, because the theme does not
   own this markup — see the note above. */
.bc-page .benecaster-recipe--full::before {
	content: "Worked example";
	position: absolute;
	top: var(--bc-space-4);
	left: var(--bc-space-6);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bc-color-accent);
}

/* Title drops to the .bc-hook-example-label level — a clear step below
   the host page's own section titles, matching the <h3>-inside-<h2>
   semantics the markup already had right. */
.bc-page .benecaster-recipe--full .benecaster-recipe__title {
	font-size: var(--bc-text-base);
	font-weight: 600;
	line-height: var(--bc-leading-normal);
	letter-spacing: -0.005em;
	margin: 0 0 var(--bc-space-3);
	color: var(--bc-color-text-strong);
}

/* The title is already a link to the recipe's own page; nothing said so.
   The arrow is the affordance — a separate "View full recipe" line would
   need markup the theme does not own. */
.bc-page .benecaster-recipe--full .benecaster-recipe__title a {
	color: inherit;
	text-decoration: none;
}

.bc-page .benecaster-recipe--full .benecaster-recipe__title a::after {
	content: " \2192";
	color: var(--bc-color-link);
}

.bc-page .benecaster-recipe--full .benecaster-recipe__title a:hover,
.bc-page .benecaster-recipe--full .benecaster-recipe__title a:focus {
	color: var(--bc-color-link);
	text-decoration: underline;
}

/* Badges: recipe-library metadata, not page status. Muted to a single
   neutral treatment inside the card frame so a "Premium" recipe badge
   cannot be misread as the host hook's own tier. Overrides the plugin's
   per-variant light-theme fills. */
.bc-page .benecaster-recipe--full .benecaster-recipe__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bc-space-2);
	margin: 0 0 var(--bc-space-4);
}

.bc-page .benecaster-recipe--full .benecaster-recipe__badge,
.bc-page .benecaster-recipe--full .benecaster-recipe__badge--free,
.bc-page .benecaster-recipe--full .benecaster-recipe__badge--premium,
.bc-page .benecaster-recipe--full .benecaster-recipe__badge--difficulty,
.bc-page .benecaster-recipe--full .benecaster-recipe__badge--addon {
	padding: var(--bc-space-1) var(--bc-space-3);
	border-radius: var(--bc-radius-full);
	font-size: var(--bc-text-xs);
	font-weight: 600;
	text-transform: none;
	background: transparent;
	border: 1px solid var(--bc-color-border);
	color: var(--bc-color-text-muted);
}

.bc-page .benecaster-recipe--full .benecaster-recipe__intro {
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text);
}

.bc-page .benecaster-recipe--full .benecaster-recipe__intro > :first-child {
	margin-top: 0;
}

.bc-page .benecaster-recipe--full .benecaster-recipe__intro > :last-child {
	margin-bottom: 0;
}

/* Code block sits on the page background so it reads as inset within
   the card, the inverse of .bc-hook-example-code on the flat page. */
.bc-page .benecaster-recipe--full .benecaster-recipe__code {
	margin: var(--bc-space-4) 0 0;
	padding: var(--bc-space-4);
	background: var(--bc-color-bg);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-md);
	overflow-x: auto;
}

.bc-page .benecaster-recipe--full .benecaster-recipe__code code {
	font-family: var(--bc-font-mono);
	font-size: var(--bc-text-sm);
	color: var(--bc-color-text-strong);
	background: none;
	border: none;
	padding: 0;
	white-space: pre;
}

.bc-page .benecaster-recipe--full .benecaster-recipe__github {
	margin: var(--bc-space-4) 0 0;
	font-size: var(--bc-text-sm);
}

.bc-page .benecaster-recipe--full .benecaster-recipe__github a {
	color: var(--bc-color-link);
	text-decoration: underline;
}

.bc-page .benecaster-recipe--full .benecaster-recipe__github a:hover {
	color: var(--bc-color-link-hover);
}

/* Two embeds in one article is where the old rendering read worst;
   keep them from touching. */
.bc-page .benecaster-recipe--full + .benecaster-recipe--full {
	margin-top: var(--bc-space-6);
}

@media (max-width: 767px) {

	.bc-page .benecaster-recipe--full {
		padding: var(--bc-space-4);
		padding-top: var(--bc-space-8);
	}

	.bc-page .benecaster-recipe--full::before {
		left: var(--bc-space-4);
	}

}


/* ============================================================
   Syntax highlighting — Prism overrides
   Vendored theme: assets/vendor/prism/prism-tomorrow.min.css
   ============================================================ */

/*
 * prism-tomorrow's `code[class*="language-"]` rule sets
 * `font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace`,
 * which is not the site's mono face. Put --bc-font-mono back.
 *
 * The theme's own two code blocks (.bc-recipe-code code and
 * .bc-func-example-code code) already win this on specificity (0,2,1 against
 * Prism's 0,1,1), so this rule exists for the third surface: the licence
 * server's [benecaster_recipe] embed on hook pages, whose .benecaster-recipe__code
 * is styled by the plugin and carries no theme rule to win with.
 *
 * ⚠ The vendored files are never edited — an upgrade replaces them wholesale,
 * so every adjustment the theme needs belongs here instead.
 *
 * Only the font is reclaimed. The token colours are the whole point of loading
 * a highlighter theme, and per CLAUDE.md they are allowed to stay as the
 * vendored CSS ships them: they are vendored values, not theme design values,
 * so they do not belong in tokens.css.
 */
.bc-page code[class*="language-"],
.bc-page pre[class*="language-"] {
	font-family: var(--bc-font-mono);
}