/*
 * Dark glass for everything Kadence renders outside the custom homepage and the 404, matching the approved
 * Next.js rebuild: the fixed DNA layer shows through and content sits on glass. Locked tetradic-glass tokens
 * only (--txc-* from tx-chrome.css). Red text uses --txc-red-text; --txc-red is for fills only.
 */

@property --txc-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@keyframes txc-spin-border {
	to {
		--txc-angle: 360deg;
	}
}

/* ── Kadence palette → glass tokens ─────────────────────────────────────────────────────────────── */

body.txc-glass {
	--global-palette1: #e1341e;
	--global-palette2: #eef7f8;
	--global-palette3: #eef7f8;
	--global-palette4: #eef7f8;
	--global-palette5: #a8bec2;
	--global-palette6: rgba(128, 176, 184, 0.18);
	--global-palette7: rgba(15, 29, 35, 0.72);
	--global-palette8: #071013;
	--global-palette9: #0d1a1f;
	--global-palette-highlight: #e1341e;
	--global-palette-highlight-alt: #eef7f8;
	--global-palette-highlight-alt2: #071013;
	--global-palette-btn: #ffffff;
	--global-palette-btn-hover: #ffffff;
	--global-palette-btn-bg: #e1341e;
	--global-palette-btn-bg-hover: #e1341e;
	--global-palette-btn-sec: #eef7f8;
	--global-palette-btn-sec-hover: #ffffff;
	--global-palette-btn-sec-bg: rgba(15, 29, 35, 0.72);
	--global-palette-btn-sec-bg-hover: rgba(30, 203, 225, 0.16);
	margin: 0;
	padding: 0;
	background: var(--txc-bg-deep);
	color: var(--txc-text);
	color-scheme: dark;
}

/* Some pages store a whole HTML document (with its own <style>) in their content. Its body/html rules
   (padding, background) would otherwise apply to the real page and inset the header. */
html:has(body.txc-glass) {
	margin: 0;
	padding: 0;
	background: var(--txc-bg-deep);
}

/* Kadence paints its wrappers white; the DNA layer sits behind them. */
body.txc-glass #wrapper.site,
body.txc-glass #inner-wrap,
body.txc-glass .content-bg,
body.txc-glass .content-area,
body.txc-glass .content-container,
body.txc-glass .site-main,
body.txc-glass .entry-hero-container-inner,
body.txc-glass .hero-section-overlay,
body.txc-glass .entry-related {
	background: transparent;
}

body.txc-glass .entry-header .entry-title,
body.txc-glass .entry-hero .entry-title {
	font-family: var(--txc-font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--txc-text);
}

/* ── Glass panel (posts and plain pages) ────────────────────────────────────────────────────────── */

body.txc-glass-panel article.entry.single-entry {
	border: 1px solid var(--txc-border);
	border-radius: 24px;
	background: var(--txc-panel);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

body.txc-glass-panel article.entry.single-entry > .entry-content-wrap {
	padding: 24px;
}

@media (min-width: 768px) {
	body.txc-glass-panel article.entry.single-entry > .entry-content-wrap {
		padding: 48px 56px;
	}
}

body.page.txc-glass-panel .content-container.site-container {
	max-width: 1040px;
}

body.page.txc-glass-panel .entry-header .entry-title {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.1;
}

body.txc-glass-panel .entry-content :is(h2, h3, h4, h5, h6) {
	font-family: var(--txc-font-display);
	letter-spacing: -0.01em;
	color: var(--txc-text);
}

body.txc-glass-panel .entry-content figcaption,
body.txc-glass-panel .entry-content .wp-element-caption {
	color: var(--txc-text-soft);
}

/* Highlighted words (<mark>, links) use the exact brand red of the buttons, #E1341E (Rees's call, 2026-09-15). */
body.txc-glass-panel .entry-content a:not([class*="btn"]):not([class*="button"]):not(.kb-button):hover {
	color: var(--txc-text);
}

body.txc-glass-panel .entry-content mark {
	padding: 0 0.2em;
	border-radius: 4px;
	background: rgba(225, 52, 30, 0.18);
	color: var(--txc-text);
}

body.txc-glass-panel .entry-content blockquote {
	margin-inline: 0;
	padding: 16px 20px;
	border-left: 3px solid var(--txc-red);
	border-radius: 0 12px 12px 0;
	background: rgba(225, 52, 30, 0.06);
	color: var(--txc-text);
}

body.txc-glass-panel .entry-content table {
	border-collapse: collapse;
	border: 1px solid var(--txc-border);
	color: var(--txc-text);
}

body.txc-glass-panel .entry-content :is(th, td) {
	padding: 10px 12px;
	border: 1px solid var(--txc-border);
}

body.txc-glass-panel .entry-content :is(th, thead td) {
	background: rgba(30, 203, 225, 0.08);
	color: var(--txc-text);
}

body.txc-glass-panel .entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: rgba(128, 176, 184, 0.06);
}

body.txc-glass-panel .entry-content :is(code, pre) {
	border-radius: 8px;
	background: rgba(7, 16, 19, 0.6);
	color: var(--txc-text);
}

body.txc-glass-panel .entry-content hr {
	border-color: var(--txc-border);
}

body.txc-glass-panel .kb-table-of-content-nav .kb-table-of-content-wrap {
	border: 1px solid var(--txc-border);
	border-radius: 16px;
	background: var(--txc-panel-soft);
	box-shadow: none;
}

body.txc-glass-panel .kb-table-of-content-nav :is(.kb-table-of-contents-title, a) {
	color: var(--txc-text);
}

body.txc-glass-panel .kb-table-of-content-nav a:hover {
	color: var(--txc-red);
}

/* ── Pages whose stored HTML was designed for a white page ─────────────────────────────────────────
   Legal documents and ThriveXFitness pages keep their structure; their own colour variables and fixed
   colours switch to the glass tokens so the text stays readable on the glass panel. */

body.txc-light-doc {
	--bg-light: transparent;
}

body.txc-light-doc .entry-content {
	--text-dark: #eef7f8;
	--text-gray: #a8bec2;
	--text-light: #ffffff;
	--primary-color: #e1341e;
	--primary-dark: #1ecbe1;
	--secondary-color: #e1341e;
	--bg-light: transparent;
	color: var(--txc-text);
}

body.txc-light-doc .entry-content :is(.tx-legal-doc, .legal-content, .legal-content strong, .content strong, .story-content p, .story-content strong, .platform span, .step-content h3) {
	color: var(--txc-text);
}

body.txc-light-doc .entry-content :is(.tx-legal-doc a, .legal-content a, .content a) {
	color: var(--txc-red);
}

body.txc-light-doc .entry-content :is(.tx-legal-doc a, .legal-content a, .content a):hover {
	color: var(--txc-text);
}

body.txc-light-doc .entry-content :is(.legal-content h3, .content h3, .danger-box h3, .warning-box h3) {
	color: var(--txc-red-text);
}

body.txc-light-doc .entry-content .info-box h3 {
	color: var(--txc-text);
}

body.txc-light-doc .entry-content :is(.document-info, .footer) {
	border-radius: 12px;
	background: var(--txc-panel-soft);
	color: var(--txc-text-soft);
}

body.txc-light-doc .entry-content .footer p {
	color: var(--txc-text-soft);
}

/* White-page notice boxes and grey body text inside those documents (measured by the contrast audit):
   boxes take the brand's tinted alert backgrounds, grey text takes the soft text token. */
body.txc-light-doc .entry-content :is(.callout, [class*="box"], [class*="notice"], [class*="highlight"]) {
	border-radius: 12px;
	background: rgba(30, 203, 225, 0.08);
	color: var(--txc-text);
}

body.txc-light-doc .entry-content :is(.danger-box, [class*="danger"], [class*="warning"], [class*="critical"]) {
	background: rgba(225, 52, 30, 0.1);
}

body.txc-light-doc .entry-content :is(p, li, td, .last-updated) {
	color: var(--txc-text-soft);
}

body.txc-light-doc .entry-content :is(strong, b, h1, h2, h4, h5, h6) {
	color: var(--txc-text);
}

body.txc-light-doc .entry-content :is(.callout, [class*="box"], [class*="notice"], [class*="highlight"]) :is(p, li, strong) {
	color: var(--txc-text);
}

/* Closing notes in the legal documents carry an inline grey colour (style="color:#4a5568"), which only an
   !important rule can override. Scoped to text elements with an inline colour inside these documents. */
body.txc-light-doc .entry-content :is(p, li, span, small)[style*="color"] {
	color: var(--txc-text-soft) !important;
}

/* ── Kadence fixed heading colours and component fixes ─────────────────────────────────────────────
   Kadence prints heading colours from the customizer as element rules (e.g. #020202 on the search title).
   :where() keeps this at element specificity, so any page that colours its own headings keeps them. */
:where(body.txc-glass) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--txc-text);
}

/* White cards stored in post content (tx-card charts, reader polls) stay white by design. The glass link
   colour (cyan) is unreadable on white, so links inside them use dark text with a cyan underline. */
body.txc-glass .entry-content :is(.tx-card, .tx-poll, .tx-src) a:not([class*="btn"]):not([class*="button"]) {
	color: var(--txc-bg-mid);
	text-decoration: underline;
	text-decoration-color: var(--txc-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

body.txc-glass .entry-content :is(.tx-card, .tx-poll, .tx-src) a:not([class*="btn"]):not([class*="button"]):hover {
	color: var(--txc-bg-deep);
}

/* Chart source links: the stored chart markup sets `.tx-src a { color: #13a3b8 !important }` (2.75:1 on its
   pale grey footer), so only an !important rule can make them readable. */
body.txc-glass .entry-content .tx-src a {
	color: var(--txc-bg-mid) !important;
}

/* Chart titles and the poll label sit on white/pale cards: the glass caption colour would wash them out. */
body.txc-glass-panel .entry-content .tx-card :is(figcaption, .tx-card__title),
body.txc-glass .entry-content .tx-poll .tx-poll__eyebrow {
	color: var(--txc-bg-mid);
}

/* Directory "Your Stack" sidebar title: dark slate on the dark glass sidebar (already so on live). */
body.txc-glass .tx-stack-sidebar .tx-stack-title {
	color: var(--txc-text);
}

/* Store cart drawer heading (dark text on the dark drawer). */
body.txc-glass #cartDrawer .cart-header h3 {
	color: var(--txc-text);
}

/* Some page templates recolour every link, which turned the theme's red buttons' text cyan. */
body.txc-glass a.txc-btn.txc-btn--primary,
body.txc-glass a.txc-btn.txc-btn--primary:hover,
body.txc-glass .entry-content a.btn.btn-primary,
body.txc-glass .entry-content a.btn.btn-primary:hover {
	color: #ffffff !important;
}

/* Tool pages (directory plugin, body.tx-toolpage) print `body.tx-toolpage a { color: var(--tx-cyan) !important }`,
   which turned the site header, logo, drawer and footer links cyan and hid the white text on the PDF toolkit's
   own gradient button. Restore the site chrome's colours there; only these pages carry that class. */
body.tx-toolpage .txc-header a.txc-logo {
	color: var(--txc-text) !important;
}

body.tx-toolpage a.txc-logo .txc-logo__x {
	color: var(--txc-red-text) !important;
}

body.tx-toolpage a.txc-logo .txc-logo__dna {
	color: var(--txc-cyan) !important;
}

body.tx-toolpage :is(.txc-header, .txc-drawer, .txc-footer) a:not(.txc-btn):not(.txc-logo) {
	color: rgba(255, 255, 255, 0.8) !important;
}

body.tx-toolpage :is(.txc-header, .txc-drawer, .txc-footer) a:not(.txc-btn):not(.txc-logo):hover,
body.tx-toolpage :is(.txc-header, .txc-drawer, .txc-footer) a:not(.txc-btn):not(.txc-logo):focus-visible {
	color: #ffffff !important;
}

body.tx-toolpage a.txc-btn.txc-btn--cyan {
	color: var(--txc-cyan) !important;
}

body.tx-toolpage a.tx-pdf-cta-btn {
	color: #ffffff !important;
}

/* /featured-pricing (plugin template): slate list text and a brown savings line on the dark page. */
body.txc-glass .txp-dofollow-info li {
	color: var(--txc-text-soft);
}

body.txc-glass .txp-savings {
	color: var(--txc-green);
}

/* ── Post hero (approved Next.js layout) ────────────────────────────────────────────────────────── */

.txc-post-hero {
	position: relative;
	z-index: 1;
}

.txc-post-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	padding-block: 40px 16px;
}

.txc-post-hero__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding-top: 32px;
	text-align: center;
}

.txc-post-hero__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.txc-post-hero__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--txc-font-body);
	font-size: 14px;
	line-height: 20px;
	color: var(--txc-text-soft);
}

.txc-post-hero__rule {
	width: 16px;
	height: 1px;
	background: currentColor;
	opacity: 0.75;
}

.txc-post-hero__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.txc-chip {
	--txc-chip: var(--txc-cyan);
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 6px;
	background: color-mix(in oklab, var(--txc-chip) 10%, transparent);
	font-family: var(--txc-font-body);
	font-size: 14px;
	line-height: 16px;
	color: var(--txc-chip);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.txc-chip:hover,
.txc-chip:focus-visible {
	background: color-mix(in oklab, var(--txc-chip) 20%, transparent);
	color: var(--txc-chip);
}

.txc-chip--cyan {
	--txc-chip: var(--txc-cyan);
}

.txc-chip--green {
	--txc-chip: var(--txc-green);
}

.txc-chip--red {
	--txc-chip: var(--txc-red-text);
}

.txc-post-hero__title {
	margin: 0;
	font-family: var(--txc-font-display);
	font-size: clamp(2.25rem, 7vw, 3rem);
	line-height: 1.17;
	font-weight: 500;
	letter-spacing: -0.04em;
	color: var(--txc-text);
	text-wrap: balance;
}

/* Titles over 80 characters (a few posts run past 110): smaller, so the summary and image stay near the top. */
.txc-post-hero__title--long {
	font-size: clamp(1.75rem, 5.2vw, 2.5rem);
}

/* Kadence Blocks light palette backgrounds (kb-palette-6 #b9b9b9, -7 and -8 #f7f7f7) keep their colour in content,
   so the text on them goes dark, and links get the red underline used in white content cards. */
body.txc-glass .entry-content :is(.has-kb-palette-6-background-color, .has-kb-palette-7-background-color, .has-kb-palette-8-background-color),
body.txc-glass .entry-content :is(.has-kb-palette-6-background-color, .has-kb-palette-7-background-color, .has-kb-palette-8-background-color) :is(td, th, p, li, span, strong, em, caption) {
	color: var(--txc-bg-mid);
}

body.txc-glass .entry-content :is(.has-kb-palette-6-background-color, .has-kb-palette-7-background-color, .has-kb-palette-8-background-color) a:not([class*="btn"]):not([class*="button"]) {
	color: var(--txc-bg-mid);
	text-decoration: underline;
	text-decoration-color: var(--txc-red);
}

.txc-post-hero__summary {
	margin: 0;
	max-width: 60ch;
	font-family: var(--txc-font-body);
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: var(--txc-text-soft);
}

.txc-post-hero__author {
	display: flex;
	align-items: center;
	gap: 8px;
}

.txc-post-hero__avatar {
	width: 32px;
	height: 32px;
	border-radius: 9999px;
}

.txc-post-hero__byline {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	font-family: var(--txc-font-body);
	font-size: 12px;
	line-height: 12px;
	font-weight: 500;
}

.txc-post-hero__name {
	color: var(--txc-text);
}

.txc-post-hero__role {
	color: var(--txc-text-soft);
}

.txc-post-hero__media {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--txc-border);
	border-radius: 24px;
	background: rgba(7, 16, 19, 0.4);
	align-self: center;
}

/* The whole featured image, at its own proportions: a fixed ratio with object-fit: cover cut the sides off
   wide images. */
.txc-post-hero__img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 1024px) {
	.txc-post-hero__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 60px;
		padding-block: 96px 32px;
	}

	.txc-post-hero--no-media .txc-post-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 960px;
	}

	.txc-post-hero__text,
	.txc-post-hero__top {
		align-items: flex-start;
		text-align: left;
	}

	.txc-post-hero__text {
		padding-top: 0;
	}

	.txc-post-hero__chips {
		justify-content: flex-start;
	}
}

/* ── Glow CTA card (mirrors the homepage glow card, which is scoped to the homepage stylesheet) ─────── */

.txc-post-cta {
	position: relative;
	z-index: 1;
	padding-block: 24px 56px;
}

.txc-post-cta .txc-container {
	display: flex;
	justify-content: center;
}

.txc-post-cta .txc-glow-card {
	position: relative;
	isolation: isolate;
	display: flex;
	width: 100%;
	max-width: 800px;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--txc-border);
	border-radius: 16px;
	background: var(--txc-panel);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-sizing: border-box;
}

.txc-post-cta .txc-glow-card::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from var(--txc-angle), var(--txc-cyan), var(--txc-violet), var(--txc-red), var(--txc-green), var(--txc-cyan));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	filter: brightness(1.5) saturate(1.5);
	transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	animation: txc-spin-border 4s linear infinite;
	animation-play-state: paused;
}

.txc-post-cta .txc-glow-card:hover::after,
.txc-post-cta .txc-glow-card:focus-within::after {
	opacity: 1;
	animation-play-state: running;
}

.txc-post-cta .txc-glow-card:hover,
.txc-post-cta .txc-glow-card:focus-within {
	box-shadow: 0 12px 40px rgba(225, 52, 30, 0.5), 0 0 40px rgba(30, 203, 225, 0.6);
}

.txc-post-cta__title {
	margin: 0;
	font-family: var(--txc-font-display);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	color: var(--txc-text);
}

.txc-post-cta__text {
	margin: 0;
	max-width: 42rem;
	font-family: var(--txc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--txc-text-soft);
}

.txc-post-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

@media (min-width: 640px) {
	.txc-post-cta__title {
		font-size: 30px;
		line-height: 36px;
	}
}

@media (max-width: 900px) {
	.txc-post-cta .txc-glow-card::after {
		filter: brightness(1.3) saturate(1.3);
	}

	.txc-post-cta .txc-glow-card:hover::after {
		opacity: 0;
	}

	.txc-post-cta .txc-glow-card:active::after,
	.txc-post-cta .txc-glow-card:focus-within::after {
		opacity: 1;
		animation-play-state: running;
	}
}

/* ── Below the article: author, post navigation, related posts, comments ──────────────────────── */

body.txc-post .entry-author {
	margin-top: 32px;
	padding: 24px;
	border: 1px solid var(--txc-border);
	border-radius: 16px;
	background: var(--txc-panel-soft);
}

body.txc-post .post-navigation .nav-links {
	gap: 16px;
}

body.txc-post .post-navigation :is(.nav-previous, .nav-next) a {
	display: block;
	height: 100%;
	padding: 16px 20px;
	border: 1px solid var(--txc-border);
	border-radius: 16px;
	background: var(--txc-panel-soft);
	color: var(--txc-text);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

body.txc-post .post-navigation :is(.nav-previous, .nav-next) a:hover {
	border-color: rgba(225, 52, 30, 0.45);
	color: var(--txc-red);
}

body.txc-post .post-navigation-sub,
body.txc-post .post-navigation-sub small {
	color: var(--txc-text-soft);
}

body.txc-post .entry-related {
	padding-block: 48px;
}

body.txc-post .entry-related-title {
	font-family: var(--txc-font-display);
	color: var(--txc-text);
}

body.txc-post .comments-area {
	color: var(--txc-text);
}

@media (prefers-reduced-motion: reduce) {
	.txc-post-cta .txc-glow-card::after {
		animation: none;
	}

	.txc-chip,
	body.txc-post .post-navigation :is(.nav-previous, .nav-next) a {
		transition: none;
	}
}