/*
 * BenefitExcel Blog Templates — shared stylesheet
 * Brand: dark (#0a0a0a) + gold (#c99a4a) + cream (#fbf7ef)
 * Loaded only on pages/posts using one of this plugin's templates.
 *
 * LAYOUT MODEL (matches Elementor's own section behaviour):
 *   .bxbt-wrap        — breaks out of the theme's narrow content column so
 *                        every section can span the FULL browser width,
 *                        exactly like an Elementor "Full Width" section row.
 *   section/header     — each section owns its own full-bleed background
 *                        and vertical padding only (no horizontal padding).
 *   .bxbt-container    — sits INSIDE every section; centers the actual
 *                        content at a max 1180px and adds the 40px side
 *                        padding. This is the equivalent of Elementor's
 *                        "Boxed" content width setting inside a row.
 */

:root {
	--bxbt-dark: #0a0a0a;
	--bxbt-dark2: #141414;
	--bxbt-gold: #c99a4a;
	--bxbt-cream: #fbf7ef;
	--bxbt-cream2: #e5dccd;
	--bxbt-white: #ffffff;
	--bxbt-muted: #555555;
	--bxbt-text: #2a2a2a;
}

.bxbt-wrap * {
	box-sizing: border-box;
}

/* ── Full-width breakout ──────────────────────────────────────────────
   Forces this wrapper (and everything inside it) to span the entire
   browser viewport width, regardless of how narrow the active theme's
   content column or sidebar layout is. Same technique used by page
   builders for "stretch section" / "Full Width" rows. */
.bxbt-wrap {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow-x: hidden;
}

/* ── Centered content container (used inside every section) ─────────── */
.bxbt-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 40px;
}

.bxbt-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--bxbt-gold);
	margin-bottom: 14px;
}

.bxbt-eyebrow--center {
	display: block;
	text-align: center;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.bxbt-hero {
	background: var(--bxbt-dark);
	padding: 90px 0;
	text-align: center;
}

.bxbt-h1 {
	color: var(--bxbt-white);
	font-size: 48px;
	font-weight: 800;
	line-height: 1.12;
	margin: 0 0 16px;
}

.bxbt-hero-sub {
	color: var(--bxbt-cream2);
	font-size: 16px;
	line-height: 1.7;
	max-width: 560px;
	margin: 0 auto;
}

/* ── Search + filter bar ─────────────────────────────────────────── */
.bxbt-filterbar {
	background: var(--bxbt-cream);
	border-bottom: 1px solid var(--bxbt-cream2);
	padding: 28px 0;
}

.bxbt-filterbar .bxbt-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.bxbt-search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bxbt-white);
	border: 1px solid var(--bxbt-cream2);
	border-radius: 8px;
	padding: 14px 18px;
	max-width: 420px;
	flex: 1;
	min-width: 220px;
}

.bxbt-search svg {
	color: var(--bxbt-muted);
	flex-shrink: 0;
}

.bxbt-search input {
	border: none;
	outline: none;
	font-size: 14px;
	flex: 1;
	background: transparent;
	color: var(--bxbt-text);
}

.bxbt-cat-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.bxbt-pill {
	background: transparent;
	color: var(--bxbt-muted);
	border: 1px solid var(--bxbt-cream2);
	border-radius: 100px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: 0.15s ease;
}

.bxbt-pill:hover {
	border-color: var(--bxbt-gold);
	color: var(--bxbt-text);
}

.bxbt-pill.is-active {
	background: var(--bxbt-gold);
	color: var(--bxbt-dark);
	border-color: var(--bxbt-gold);
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.bxbt-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--bxbt-gold);
	color: var(--bxbt-dark);
	border: 2px solid var(--bxbt-gold);
	border-radius: 8px;
	padding: 15px 28px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: 0.15s ease;
}

.bxbt-btn:hover {
	background: transparent;
	color: var(--bxbt-gold);
}

/* ── Featured post section ───────────────────────────────────────── */
.bxbt-featured-section {
	background: var(--bxbt-white);
	padding: 70px 0 30px;
}

.bxbt-featured {
	display: grid;
	grid-template-columns: 45% 55%;
	gap: 0;
	align-items: center;
}

.bxbt-featured-img {
	position: relative;
	height: 340px;
	border-radius: 12px;
	overflow: hidden;
}

.bxbt-featured-img img,
.bxbt-placeholder-svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bxbt-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	background: var(--bxbt-dark);
	color: var(--bxbt-gold);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 7px 16px;
	border-radius: 100px;
}

.bxbt-featured-body {
	padding-left: 44px;
}

.bxbt-featured-title {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 16px;
}

.bxbt-featured-title a {
	color: var(--bxbt-dark);
	text-decoration: none;
}

.bxbt-featured-excerpt {
	color: var(--bxbt-muted);
	font-size: 15px;
	line-height: 1.75;
	margin: 0 0 22px;
}

.bxbt-meta-row,
.bxbt-author-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.bxbt-author-chip,
.bxbt-author-block {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bxbt-author-block strong {
	display: block;
	font-size: 14px;
	color: var(--bxbt-white);
}

.bxbt-author-block span {
	font-size: 12px;
	color: var(--bxbt-cream2);
}

.bxbt-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--bxbt-gold);
	color: var(--bxbt-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 13px;
	flex-shrink: 0;
}

.bxbt-avatar--sm {
	width: 24px;
	height: 24px;
	font-size: 10px;
}

.bxbt-avatar--lg {
	width: 40px;
	height: 40px;
	font-size: 14px;
}

.bxbt-avatar--xl {
	width: 60px;
	height: 60px;
	font-size: 20px;
}

.bxbt-author-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--bxbt-dark);
}

.bxbt-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--bxbt-cream2);
	flex-shrink: 0;
}

.bxbt-meta-text {
	font-size: 13px;
	color: var(--bxbt-muted);
}

/* ── Article grid section ────────────────────────────────────────── */
.bxbt-grid-section {
	background: var(--bxbt-white);
	padding: 30px 0 70px;
}

.bxbt-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.bxbt-card {
	background: var(--bxbt-white);
	border: 1px solid var(--bxbt-cream2);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bxbt-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(10, 10, 10, 0.08);
}

.bxbt-card-img {
	display: block;
	height: 200px;
	position: relative;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
	background: var(--bxbt-dark2);
}

.bxbt-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bxbt-card-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: rgba(10, 10, 10, 0.78);
	color: var(--bxbt-gold);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 5px 13px;
	border-radius: 100px;
}

.bxbt-card-body {
	padding: 22px 22px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.bxbt-card-title {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 10px;
}

.bxbt-card-title a {
	color: var(--bxbt-dark);
	text-decoration: none;
}

.bxbt-card-excerpt {
	font-size: 13px;
	color: var(--bxbt-muted);
	line-height: 1.65;
	margin: 0 0 18px;
	flex: 1;
}

.bxbt-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid var(--bxbt-cream);
}

.bxbt-card-author {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bxbt-card-author-name {
	font-size: 12px;
	font-weight: 700;
	color: var(--bxbt-dark);
}

.bxbt-card-date {
	font-size: 11px;
	color: var(--bxbt-muted);
}

/* ── Pagination ───────────────────────────────────────────────────── */
.bxbt-pagination-section {
	background: var(--bxbt-white);
	padding: 0 0 70px;
}

.bxbt-pagination {
	display: flex;
	justify-content: center;
}

.bxbt-pagination ul.page-numbers {
	list-style: none;
	display: flex;
	gap: 8px;
	padding: 0;
	margin: 0;
}

.bxbt-pagination .page-numbers li a,
.bxbt-pagination .page-numbers li span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	border: 1px solid var(--bxbt-cream2);
	background: var(--bxbt-white);
	color: var(--bxbt-dark);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.bxbt-pagination .page-numbers li .current {
	background: var(--bxbt-gold);
	border-color: var(--bxbt-gold);
}

.bxbt-empty-section {
	background: var(--bxbt-white);
	padding: 60px 0;
}

.bxbt-empty {
	text-align: center;
	color: var(--bxbt-muted);
}

.bxbt-empty p {
	margin-bottom: 20px;
}

/* ── Newsletter ───────────────────────────────────────────────────── */
.bxbt-newsletter {
	background: var(--bxbt-dark);
	padding: 70px 0;
}

.bxbt-newsletter-inner {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.bxbt-newsletter-inner h2 {
	color: var(--bxbt-white);
	font-size: 30px;
	font-weight: 800;
	margin: 0 0 14px;
}

.bxbt-newsletter-inner p {
	color: var(--bxbt-cream2);
	font-size: 15px;
	margin: 0 0 32px;
	line-height: 1.7;
}

.bxbt-news-form {
	display: flex;
	gap: 10px;
	max-width: 420px;
	margin: 0 auto;
}

.bxbt-news-form input {
	flex: 1;
	padding: 15px 18px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.05);
	color: var(--bxbt-white);
	font-size: 14px;
	outline: none;
}

.bxbt-news-form button {
	background: var(--bxbt-gold);
	color: var(--bxbt-dark);
	border: none;
	padding: 15px 26px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   SINGLE POST TEMPLATE
   ════════════════════════════════════════════════════════════════════ */

.bxbt-single .bxbt-article-hero {
	background-color: var(--bxbt-dark);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 90px 0 60px;
	position: relative;
}

/* When a featured image is present, the inline style attribute layers a
   dark gradient over it (set in PHP) so the white text stays readable
   regardless of how bright or busy the photo is. */
.bxbt-single .bxbt-article-hero--has-image {
	padding: 110px 0 70px;
}

.bxbt-crumb {
	font-size: 13px;
	color: var(--bxbt-cream2);
	margin-bottom: 24px;
}

.bxbt-crumb a {
	color: var(--bxbt-cream2);
	text-decoration: none;
}

.bxbt-crumb span {
	color: var(--bxbt-gold);
}

.bxbt-article-title {
	color: var(--bxbt-white);
	font-size: 38px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 26px;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

/* Layout: share | content | toc */
.bxbt-body-section {
	background: var(--bxbt-white);
	padding: 60px 0 0;
}

.bxbt-article-layout {
	display: grid;
	grid-template-columns: 80px 1fr 260px;
	gap: 44px;
	align-items: start;
}

.bxbt-share-sidebar {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bxbt-share-label {
	font-size: 11px;
	font-weight: 800;
	color: var(--bxbt-muted);
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.bxbt-share-btn {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	border: 1px solid var(--bxbt-cream2);
	background: var(--bxbt-white);
	color: var(--bxbt-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	transition: 0.15s ease;
}

.bxbt-share-btn:hover {
	border-color: var(--bxbt-gold);
	color: var(--bxbt-gold);
}

.bxbt-article-body {
	font-size: 16px;
	color: var(--bxbt-text);
	line-height: 1.95;
}

.bxbt-article-body h2 {
	font-size: 26px;
	font-weight: 800;
	color: var(--bxbt-dark);
	margin: 46px 0 18px;
	scroll-margin-top: 110px;
}

.bxbt-article-body h3 {
	font-size: 20px;
	font-weight: 800;
	color: var(--bxbt-dark);
	margin: 34px 0 14px;
}

.bxbt-article-body p {
	margin: 0 0 24px;
}

.bxbt-article-body ul,
.bxbt-article-body ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

.bxbt-article-body li {
	margin-bottom: 10px;
	line-height: 1.9;
}

.bxbt-article-body blockquote {
	border-left: 4px solid var(--bxbt-gold);
	background: var(--bxbt-cream);
	border-radius: 0 12px 12px 0;
	padding: 26px 30px;
	margin: 34px 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--bxbt-dark);
}

.bxbt-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	margin: 20px 0;
}

.bxbt-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 44px 0 0;
	padding-top: 32px;
	border-top: 1px solid var(--bxbt-cream2);
}

.bxbt-tag {
	background: var(--bxbt-cream);
	border: 1px solid var(--bxbt-cream2);
	border-radius: 100px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bxbt-muted);
	text-decoration: none;
}

.bxbt-author-card {
	display: flex;
	gap: 18px;
	align-items: center;
	background: var(--bxbt-cream);
	border-radius: 16px;
	padding: 28px;
	margin-top: 32px;
}

.bxbt-author-card strong {
	display: block;
	font-size: 16px;
	font-weight: 800;
	color: var(--bxbt-dark);
	margin-bottom: 4px;
}

.bxbt-author-card p {
	font-size: 13px;
	color: var(--bxbt-muted);
	margin: 0;
	line-height: 1.6;
}

.bxbt-toc-sidebar {
	position: sticky;
	top: 110px;
	background: var(--bxbt-cream);
	border-radius: 14px;
	padding: 26px;
}

.bxbt-toc-title {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bxbt-muted);
	margin-bottom: 18px;
}

.bxbt-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bxbt-toc-list a {
	display: block;
	font-size: 13.5px;
	color: var(--bxbt-muted);
	text-decoration: none;
	padding: 8px 12px;
	border-left: 2px solid transparent;
	border-radius: 6px;
}

.bxbt-toc-list a.is-active,
.bxbt-toc-list a:hover {
	color: var(--bxbt-dark);
	font-weight: 700;
	border-left-color: var(--bxbt-gold);
	background: rgba(201, 154, 74, 0.08);
}

.bxbt-toc-cta {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--bxbt-cream2);
	text-align: center;
}

.bxbt-toc-cta p {
	font-size: 13px;
	color: var(--bxbt-muted);
	margin: 0 0 14px;
	line-height: 1.6;
}

.bxbt-toc-cta-btn {
	display: block;
	background: var(--bxbt-gold);
	color: var(--bxbt-dark);
	text-decoration: none;
	font-size: 13px;
	font-weight: 800;
	padding: 13px;
	border-radius: 8px;
}

/* ── CTA strip ────────────────────────────────────────────────────── */
.bxbt-cta-strip {
	background: var(--bxbt-dark);
	margin-top: 70px;
	padding: 70px 0;
	text-align: center;
}

.bxbt-cta-strip h3 {
	color: var(--bxbt-white);
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 12px;
}

.bxbt-cta-strip p {
	color: var(--bxbt-cream2);
	font-size: 15px;
	margin: 0 0 28px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* ── Related posts ────────────────────────────────────────────────── */
.bxbt-related {
	background: var(--bxbt-cream);
	padding: 70px 0;
}

.bxbt-related-title {
	text-align: center;
	font-size: 26px;
	font-weight: 800;
	color: var(--bxbt-dark);
	margin: 0 0 32px;
}

.bxbt-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1100px;
	margin: 0 auto;
}

.bxbt-r-card {
	background: var(--bxbt-white);
	border: 1px solid var(--bxbt-cream2);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	display: block;
	transition: transform 0.2s ease;
}

.bxbt-r-card:hover {
	transform: translateY(-3px);
}

.bxbt-r-card-img {
	height: 160px;
	position: relative;
	background: var(--bxbt-dark2);
}

.bxbt-r-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bxbt-r-card-body {
	padding: 20px;
}

.bxbt-r-card-body h4 {
	font-size: 15px;
	font-weight: 800;
	color: var(--bxbt-dark);
	line-height: 1.4;
	margin: 0;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.bxbt-container {
		padding: 0 24px;
	}

	.bxbt-grid,
	.bxbt-related-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bxbt-featured {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.bxbt-featured-body {
		padding-left: 0;
	}

	.bxbt-article-layout {
		grid-template-columns: 1fr;
	}

	.bxbt-share-sidebar {
		flex-direction: row;
		position: static;
		justify-content: center;
		border-bottom: 1px solid var(--bxbt-cream2);
		padding-bottom: 24px;
	}

	.bxbt-toc-sidebar {
		position: static;
	}
}

@media (max-width: 640px) {
	.bxbt-container {
		padding: 0 18px;
	}

	.bxbt-h1 {
		font-size: 32px;
	}

	.bxbt-article-title {
		font-size: 26px;
	}

	.bxbt-grid,
	.bxbt-related-grid {
		grid-template-columns: 1fr;
	}

	.bxbt-news-form {
		flex-direction: column;
	}

	.bxbt-author-card {
		flex-direction: column;
		text-align: center;
	}

	.bxbt-single .bxbt-article-hero--has-image {
		padding: 80px 0 50px;
	}
}