/*
 * 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).
 */


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

.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;
}


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

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

.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;
}


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

/*
 * Three equal columns: Footer Left menu | brand/HTML block | Footer Right menu.
 * Collapses to a single column on the mobile breakpoint (see Responsive section).
 */
.bc-page .bc-footer-inner {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: start;
	gap: var(--bc-space-8);
	padding-block: var(--bc-space-12);
}

.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);
}

.bc-page .bc-footer-nav--right {
	text-align: right;
}

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

.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 {
	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:hover,
.bc-page .bc-content a: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;
}

.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: 1000;
	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 — placeholder for Batch 5
   ============================================================ */

/* .bc-archive { } */
/* .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-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 {
	margin-top: var(--bc-space-4);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bc-space-2) var(--bc-space-3);
	font-size: var(--bc-text-sm);
}

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

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

.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;
}

.bc-page .bc-pagination {
	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);
}

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

.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;
}

/* ============================================================
   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-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-accent);
	background: var(--bc-color-bg-elevated);
	color: var(--bc-color-accent);
}

.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 — page-docs.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);
}

@media (min-width: 1024px) {
	.bc-page .bc-docs-layout {
		grid-template-columns: 260px 1fr;
		gap: var(--bc-space-12);
	}
}

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

@media (min-width: 1024px) {
	.bc-page .bc-docs-sidebar {
		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;
}

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

.bc-page .bc-docs-article {
	max-width: var(--bc-max-width-prose);
	min-width: 0; /* prevent grid item from expanding beyond column */
}

.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-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-seealso-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--bc-space-2);
}

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

.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;
}

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

.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);
}


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

.bc-page .bc-home-section {
	padding: var(--bc-space-16) var(--bc-space-6);
}

.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: 22ch;
}

.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;
}


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

.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: 640px;
}

.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);
}

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


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

/* --- Fallback tables (interim until the plugin ships the shortcodes) ---
 * Same shell used by the pricing-table fallback and the savings-calc breakeven
 * fallback. Both are wrapped in .bc-pricing-fallback so the removal scope is
 * unambiguous when the shortcodes land. */

.bc-page .bc-pricing-fallback {
	background: var(--bc-color-bg-elevated);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-lg);
	padding: var(--bc-space-6);
	margin: var(--bc-space-6) 0;
}

.bc-page .bc-pricing-fallback-note {
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-sm);
	margin: 0 0 var(--bc-space-4);
	font-style: italic;
}

.bc-page .bc-pricing-fallback-note code {
	font-style: normal;
	background: var(--bc-color-bg);
	border: 1px solid var(--bc-color-border);
	border-radius: var(--bc-radius-sm);
	padding: 0.1em 0.35em;
	font-family: var(--bc-font-mono);
	font-size: 0.9em;
}

.bc-page .bc-pricing-fallback-scroll {
	overflow-x: auto;
}

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

.bc-page .bc-pricing-fallback-table th,
.bc-page .bc-pricing-fallback-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-pricing-fallback-table thead th {
	color: var(--bc-color-text-strong);
	font-weight: 600;
	background: var(--bc-color-bg-subtle);
	border-bottom: 2px solid var(--bc-color-border);
}

.bc-page .bc-pricing-fallback-table tbody th[scope="row"] {
	color: var(--bc-color-text-muted);
	font-weight: 500;
}

.bc-page .bc-pricing-fallback-cta-row td {
	padding-top: var(--bc-space-4);
	border-bottom: none;
}

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


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

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

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

.bc-page .bc-404-code {
	font-family: var(--bc-font-mono);
	font-size: var(--bc-text-lg);
	color: var(--bc-color-accent);
	letter-spacing: 0.12em;
	margin: 0 0 var(--bc-space-3);
}

.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);
	margin: 0 0 var(--bc-space-8);
}

.bc-page .bc-404-links {
	list-style: none;
	margin: 0 0 var(--bc-space-8);
	padding: 0;
	text-align: left;
	display: inline-block;
}

.bc-page .bc-404-links li {
	margin: 0 0 var(--bc-space-2);
	color: var(--bc-color-text-muted);
	font-size: var(--bc-text-base);
}

.bc-page .bc-404-links a {
	color: var(--bc-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	font-weight: 600;
	transition: color var(--bc-transition-fast);
}

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

.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: rgba(45, 182, 125, 0.15);
	color: var(--bc-teal-400);
	border-color: rgba(45, 182, 125, 0.4);
}

.bc-page .bnc-status-badge.cancelled,
.bc-page .bnc-status-badge.expired {
	background: rgba(255, 99, 99, 0.12);
	color: #ff9a9a;
	border-color: rgba(255, 99, 99, 0.35);
}

.bc-page .bnc-status-badge.suspended {
	background: rgba(240, 165, 0, 0.15);
	color: var(--bc-amber-400);
	border-color: rgba(240, 165, 0, 0.4);
}

/* --- 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: rgba(255, 99, 99, 0.12);
	color: #ff9a9a;
	border-color: rgba(255, 99, 99, 0.5);
}

.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 rgba(240, 165, 0, 0.4);
	background: rgba(240, 165, 0, 0.08);
	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);
}


/* ============================================================
   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.
 *
 * Audit performed 2026-07-21 (Batch 2, page-savings guard item):
 *
 *   Guarded:
 *     - .bc-page *              (box-sizing: border-box)  → line ~14
 *     - .bc-page img/svg/video  (max-width, height, display: block) → line ~29
 *     - .bc-page a/button :focus-visible (outline)  → line ~400
 *
 *   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 *).
 */


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

@media (max-width: 768px) {

	.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);
	}

	/* Collapse the 3-column footer to a single column on mobile and
	   normalize the right-menu alignment back to left. */
	.bc-page .bc-footer-inner {
		grid-template-columns: 1fr;
		gap: var(--bc-space-6);
	}
	.bc-page .bc-footer-nav--right,
	.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);
	}

}