/*
Theme Name: CamsNerd
Theme URI: https://camsnerd.com
Author: CamsNerd Editorial
Author URI: https://camsnerd.com
Description: Block theme for CamsNerd — the independent guide to adult webcam platforms for viewers and broadcasters. Typography-led editorial publication aesthetic. Requires the camsnerd-core companion plugin for dynamic blocks, CPTs, and affiliate routing.
Version: 0.1.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: Proprietary — HAKT
License URI: https://camsnerd.com/license
Text Domain: camsnerd
Tags: editorial, publication, block-theme, full-site-editing, accessibility-ready, two-column, custom-colors, custom-logo
*/

/* ---------------------------------------------------------------------------
   CamsNerd Theme — Custom Styles
   Typography-led editorial publication. All design tokens in theme.json.
   CSS here handles only what block styles cannot.
   --------------------------------------------------------------------------- */

/* Self-hosted fonts: register face declarations.
   Latin subset only — fonts are subsetted to Latin Basic + Latin Extended
   to stay under the 500KB initial-transfer budget. Italic faces load on demand. */
@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
	src: url("assets/fonts/source-serif-4.woff2") format("woff2");
}

@font-face {
	font-family: "Source Serif 4";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
	src: url("assets/fonts/source-serif-4-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
	src: url("assets/fonts/source-sans-3.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
	src: url("assets/fonts/source-sans-3-italic.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Editorial content measure — constrain for readability */
.cn-content-measure {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Skip-to-content
   --------------------------------------------------------------------------- */

.cn-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 12px 20px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-weight: 600;
	font-size: 0.9375rem;
	border-radius: 0 0 2px 0;
	text-decoration: none;
}

.cn-skip-link:focus {
	left: 0;
	color: var(--wp--preset--color--paper);
}

/* ---------------------------------------------------------------------------
   Audience-lane indicator
   --------------------------------------------------------------------------- */

.cn-audience-indicator {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 3px 10px;
	border-radius: 1px;
}

.cn-audience-indicator--viewer {
	color: var(--wp--preset--color--viewer);
	border: 1px solid var(--wp--preset--color--viewer);
}

.cn-audience-indicator--broadcaster {
	color: var(--wp--preset--color--broadcaster);
	border: 1px solid var(--wp--preset--color--broadcaster);
}

.cn-audience-indicator--neutral {
	color: var(--wp--preset--color--ink-secondary);
	border: 1px solid var(--wp--preset--color--rule);
}

/* ---------------------------------------------------------------------------
   Freshness / confidence badges
   Status conveyed via text label, not color alone.
   --------------------------------------------------------------------------- */

.cn-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 1px;
	line-height: 1.5;
}

.cn-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.cn-badge--verified {
	color: var(--wp--preset--color--status-verified);
	background: rgba(46, 107, 61, 0.08);
}
.cn-badge--verified::before {
	background: var(--wp--preset--color--status-verified);
}

.cn-badge--fixture {
	color: var(--wp--preset--color--status-fixture);
	background: rgba(156, 107, 30, 0.08);
}
.cn-badge--fixture::before {
	background: var(--wp--preset--color--status-fixture);
}

.cn-badge--stale {
	color: var(--wp--preset--color--status-fixture);
	background: rgba(156, 107, 30, 0.08);
}
.cn-badge--stale::before {
	background: var(--wp--preset--color--status-fixture);
}

.cn-badge--disputed {
	color: var(--wp--preset--color--status-disputed);
	background: rgba(156, 61, 46, 0.08);
}
.cn-badge--disputed::before {
	background: var(--wp--preset--color--status-disputed);
}

.cn-badge--retracted {
	color: var(--wp--preset--color--status-disputed);
	background: rgba(156, 61, 46, 0.08);
}
.cn-badge--retracted::before {
	background: var(--wp--preset--color--status-disputed);
}

/* ---------------------------------------------------------------------------
   Platform status badge (active/sunset/restricted)
   --------------------------------------------------------------------------- */

.cn-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 1px;
	line-height: 1.5;
}

.cn-status-badge--active {
	color: var(--wp--preset--color--status-verified);
	border: 1px solid rgba(46, 107, 61, 0.3);
}

.cn-status-badge--sunset {
	color: var(--wp--preset--color--ink-secondary);
	border: 1px solid var(--wp--preset--color--rule);
}

.cn-status-badge--restricted {
	color: var(--wp--preset--color--status-disputed);
	border: 1px solid rgba(156, 61, 46, 0.3);
}

.cn-status-badge--unknown {
	color: var(--wp--preset--color--ink-muted);
	border: 1px solid var(--wp--preset--color--rule);
}

/* ---------------------------------------------------------------------------
   Platform identity header
   --------------------------------------------------------------------------- */

.cn-platform-identity {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.cn-platform-identity__name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Audience navigation (Hub / Viewer / Broadcaster tabs)
   Server-routed links with aria-current, NOT an ARIA tab widget.
   --------------------------------------------------------------------------- */

.cn-audience-nav {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: 0;
}

.cn-audience-nav__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 24px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink-secondary);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.cn-audience-nav__link:hover {
	color: var(--wp--preset--color--teal);
	text-decoration: none;
}

.cn-audience-nav__link:focus {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: -2px;
}

.cn-audience-nav__link[aria-current="page"] {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--teal);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Platform card
   --------------------------------------------------------------------------- */

.cn-platform-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--white);
	transition: border-color 0.15s ease;
}

.cn-platform-card:hover {
	border-color: var(--wp--preset--color--teal);
}

.cn-platform-card:focus-within {
	border-color: var(--wp--preset--color--teal);
}

.cn-platform-card__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.cn-platform-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cn-platform-card__title a:hover {
	color: var(--wp--preset--color--teal);
}

.cn-platform-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-secondary);
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Scorecard (definition-list / table layout)
   --------------------------------------------------------------------------- */

.cn-scorecard {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.cn-scorecard th,
.cn-scorecard td {
	text-align: left;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	vertical-align: top;
	overflow-wrap: break-word;
	word-break: break-word;
}

.cn-scorecard th {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	width: 35%;
	padding-right: 24px;
}

.cn-scorecard td {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-secondary);
}

/* Mobile scorecard: stacked cards (NOT horizontal scroll) */
@media (max-width: 767px) {
	.cn-scorecard,
	.cn-scorecard thead,
	.cn-scorecard tbody,
	.cn-scorecard tr,
	.cn-scorecard th,
	.cn-scorecard td {
		display: block;
		width: 100%;
	}

	.cn-scorecard th {
		padding-bottom: 4px;
		border-bottom: none;
	}

	.cn-scorecard td {
		padding-bottom: 16px;
	}
}

/* ---------------------------------------------------------------------------
   Comparison table
   --------------------------------------------------------------------------- */

.cn-comparison-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--wp--preset--color--rule);
	padding: 0;
	position: relative;
}

.cn-comparison-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	min-width: 540px;
}

.cn-comparison-table th,
.cn-comparison-table td {
	text-align: left;
	padding: 14px 16px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	vertical-align: top;
	line-height: 1.5;
}

.cn-comparison-table thead th {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper-deep);
}

.cn-comparison-table tbody th {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper-deep);
	width: 180px;
}

.cn-comparison-table td {
	color: var(--wp--preset--color--ink-secondary);
}

/* Mobile scroll affordance — CSS-only gradient fade + accessible text */
@media (max-width: 767px) {
	.cn-comparison-scroll {
		/*
		 * Fade mask on the right edge signals more content to scroll.
		 * mask-image is supported in all modern browsers; -webkit prefix
		 * covers Safari. Fallback: no mask = solid border (still usable).
		 */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
	}

	.cn-comparison-scroll__hint {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		font-size: 0.75rem;
		font-weight: 600;
		color: var(--wp--preset--color--teal);
		padding: 8px 0 4px;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.cn-comparison-scroll__hint::before {
		content: "◄";
		font-size: 0.625rem;
	}

	.cn-comparison-scroll__hint::after {
		content: "►";
		font-size: 0.625rem;
	}
}

@media (min-width: 768px) {
	.cn-comparison-scroll__hint {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Source ledger
   --------------------------------------------------------------------------- */

.cn-source-ledger {
	counter-reset: source;
	list-style: none;
	padding: 0;
	margin: 0;
}

.cn-source-ledger__item {
	counter-increment: source;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	font-size: 0.875rem;
	line-height: 1.5;
}

.cn-source-ledger__item::before {
	content: counter(source) ".";
	font-weight: 600;
	color: var(--wp--preset--color--ink-muted);
	flex-shrink: 0;
	width: 24px;
}

.cn-source-ledger__name {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	text-decoration: underline;
}

.cn-source-ledger__name:hover {
	color: var(--wp--preset--color--teal);
}

.cn-source-ledger__url {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
	word-break: break-all;
}

.cn-source-ledger__date {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------------
   Verdict block
   --------------------------------------------------------------------------- */

.cn-verdict {
	padding: 24px;
	border-left: 3px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--white);
}

.cn-verdict--viewer {
	border-left-color: var(--wp--preset--color--viewer);
}

.cn-verdict--broadcaster {
	border-left-color: var(--wp--preset--color--broadcaster);
}

.cn-verdict__label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
}

.cn-verdict__label--viewer {
	color: var(--wp--preset--color--viewer);
}

.cn-verdict__label--broadcaster {
	color: var(--wp--preset--color--broadcaster);
}

.cn-verdict__text {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
   Platform facts panel
   --------------------------------------------------------------------------- */

.cn-facts {
	display: grid;
	gap: 0;
}

.cn-facts__item {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	font-size: 0.9375rem;
}

.cn-facts__label {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	min-width: 140px;
	flex-shrink: 0;
}

.cn-facts__value {
	color: var(--wp--preset--color--ink-secondary);
	flex: 1;
}

/* ---------------------------------------------------------------------------
   CTA + disclosure
   --------------------------------------------------------------------------- */

.cn-cta-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.cn-cta {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 32px;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 2px;
	transition: background 0.15s ease;
}

.cn-cta:hover {
	background: var(--wp--preset--color--teal-hover);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.cn-cta:focus {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.cn-cta {
		width: 100%;
	}
}

.cn-disclosure {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-secondary);
	padding: 12px 16px;
	border-left: 2px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--paper-deep);
	border-radius: 0 2px 2px 0;
}

/* ---------------------------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------------------------- */

.cn-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-muted);
	padding: 0;
	margin-bottom: 24px;
}

.cn-breadcrumbs a {
	color: var(--wp--preset--color--ink-secondary);
	text-decoration: none;
	padding: 4px 0;
}

.cn-breadcrumbs a:hover {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
}

.cn-breadcrumbs__separator {
	padding: 0 8px;
	color: var(--wp--preset--color--ink-muted);
}

.cn-breadcrumbs__current {
	color: var(--wp--preset--color--ink-secondary);
	font-weight: 500;
	padding: 4px 0;
}

/* ---------------------------------------------------------------------------
   Post meta line
   --------------------------------------------------------------------------- */

.cn-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-secondary);
	line-height: 1.5;
}

.cn-post-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cn-post-meta__separator {
	color: var(--wp--preset--color--ink-muted);
}

/* ---------------------------------------------------------------------------
   Update card
   --------------------------------------------------------------------------- */

.cn-update-card {
	padding: 20px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.cn-update-card:last-child {
	border-bottom: none;
}

.cn-update-card__headline {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 6px;
}

.cn-update-card__headline a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cn-update-card__headline a:hover {
	color: var(--wp--preset--color--teal);
}

.cn-update-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-secondary);
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Search result card
   --------------------------------------------------------------------------- */

.cn-search-result {
	padding: 24px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.cn-search-result__type {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--teal);
	margin-bottom: 6px;
}

.cn-search-result__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 8px;
}

.cn-search-result__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cn-search-result__title a:hover {
	color: var(--wp--preset--color--teal);
}

.cn-search-result__excerpt {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--copy-secondary);
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Empty / error states
   --------------------------------------------------------------------------- */

.cn-empty-state {
	text-align: left;
	padding: 48px 24px;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--white);
}

.cn-empty-state__heading {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 12px;
}

.cn-empty-state__text {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-secondary);
	margin: 0 0 24px;
}

.cn-error-state {
	text-align: center;
	padding: 64px 24px;
}

.cn-error-state__code {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 4rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1;
	margin-bottom: 16px;
}

.cn-error-state__heading {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.75rem;
	font-weight: 600;
	margin: 0 0 12px;
}

.cn-error-state__text {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-secondary);
	margin: 0 0 32px;
}

/* ---------------------------------------------------------------------------
   Section header (kicker + title pattern)
   --------------------------------------------------------------------------- */

.cn-section-header {
	margin-bottom: 32px;
}

.cn-kicker {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
letter-spacing: 0.1em;
	color: var(--wp--preset--color--teal);
	margin-bottom: 8px;
}

.cn-section-header h2 {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Homepage hero (editorial intro, NOT generic SaaS hero)
   --------------------------------------------------------------------------- */

.cn-hero {
	padding: 0;
}

.cn-hero__kicker {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--teal);
	margin-bottom: 12px;
}

.cn-hero__headline {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 16px;
	color: var(--wp--preset--color--ink);
}

.cn-hero__deck {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.125rem, 2.5vw, 1.5rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-secondary);
	margin: 0 0 24px;
	max-width: 640px;
}

/* Tighten hero top/bottom on mobile so lane choice enters first viewport */
@media (max-width: 767px) {
	.cn-hero {
		padding-top: 40px !important;
		padding-bottom: 32px !important;
	}
	.cn-hero__headline {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
	}
	.cn-hero__deck {
		font-size: 1.0625rem;
		margin-bottom: 20px;
	}
}

/* Audience lane entry points */
.cn-lane-entries {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 32px;
}

@media (max-width: 767px) {
	.cn-lane-entries {
		grid-template-columns: 1fr;
	}
}

.cn-lane-entry {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 24px;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--white);
	text-decoration: none;
	min-height: 44px;
	transition: border-color 0.15s ease;
}

.cn-lane-entry:hover {
	border-color: var(--wp--preset--color--teal);
	text-decoration: none;
}

.cn-lane-entry:focus {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}

.cn-lane-entry__label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.cn-lane-entry--viewer .cn-lane-entry__label {
	color: var(--wp--preset--color--viewer);
}

.cn-lane-entry--broadcaster .cn-lane-entry__label {
	color: var(--wp--preset--color--broadcaster);
}

.cn-lane-entry__text {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------------------- */

.cn-platform-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 48px;
}

/* Prevent grid children from forcing overflow at narrow widths */
.cn-platform-layout > .wp-block-group,
.cn-platform-layout > div {
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
}

@media (max-width: 1024px) {
	.cn-platform-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.cn-sidebar-panel {
	padding: 24px;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--white);
}

.cn-sidebar-panel__title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink-secondary);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.cn-footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

/* Mobile: compact two-column layout to reduce vertical scroll */
@media (max-width: 767px) {
	.cn-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 24px 20px;
	}
}

.cn-footer-col-title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink-secondary);
	margin: 0 0 8px;
}

.cn-footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cn-footer-list li {
	margin-bottom: 0;
}

.cn-footer-list a {
	color: var(--wp--preset--color--ink-secondary);
	font-size: 0.875rem;
	text-decoration: none;
	/* 44px touch target: ensure anchors are at least 44px tall */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 0;
}

.cn-footer-list a:hover {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
}

/*
 * Footer copyright/disclosure inline links and any interactive anchor inside
 * footer/disclosure paragraphs: enforce a 44px touch target at every width.
 * Uses inline-flex so the link keeps its place in flowing text while gaining a
 * real 44px hit area via min-height + vertical padding. Line-height is locked
 * so the visible text does not shift when the larger hit box is applied.
 */
footer p a,
.cn-disclosure p a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 4px;
	margin: -10px -4px;
	line-height: 1.4;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Focus-visible polyfill behavior for keyboard users
   --------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   Responsive typography overrides for mobile
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.cn-platform-identity__name {
		font-size: 1.75rem;
	}

	.cn-audience-nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* Constrain to viewport; horizontal scroll stays within container */
		max-width: 100%;
		white-space: nowrap;
	}

	.cn-audience-nav__link {
		white-space: nowrap;
		padding: 10px 12px;
		font-size: 0.875rem;
	}

	/* Reduce footer internal padding on mobile for compact two-column layout */
	footer.cn-footer,
	footer .wp-block-group {
		padding-top: 40px !important;
		padding-bottom: 32px !important;
	}
}

/* Archive link (homepage platform section) */
.cn-archive-link a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
}

.cn-archive-link a:hover {
	color: var(--wp--preset--color--teal-hover);
	text-decoration: underline;
}

/*
 * Source ledger links: enforce 44px touch target at all widths.
 * The source row is a flex row; making each link a 44px hit area keeps
 * the visual layout intact while satisfying touch-target minimums.
 */
.cn-source-ledger__name,
.cn-source-ledger__url {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/*
 * Mobile-only touch-target enforcement for elements that are comfortable
 * at smaller sizes on desktop but must meet 44px on touch devices.
 * These rules are scoped to <=767px so desktop typography and density
 * are NOT affected.
 */
@media (max-width: 767px) {
	/*
	 * WordPress core navigation responsive buttons.
	 *
	 * Core renders the mobile hamburger and overlay close as:
	 *   button.wp-block-navigation__responsive-container-open
	 *   button.wp-block-navigation__responsive-container-close
	 * Each button has padding:0/margin:0 and contains a 24x24 SVG, so the
	 * hit box collapses to 24x24 — below the 44px touch minimum.
	 *
	 * We give each button a real 44x44 hit area via min-height/min-width
	 * plus centered padding, while leaving the inner SVG at its native 24px
	 * (pointer-events:none on the SVG means the button receives all taps).
	 * The buttons use display:flex + align/justify center so the icon stays
	 * visually centered inside the larger hit box. Desktop nav is untouched
	 * (this block is scoped to <=767px and these buttons are hidden >=600px).
	 */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
	}

	.wp-block-navigation .wp-block-navigation-item__content {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/*
	 * Breadcrumb links: expand hit area on mobile only.
	 * Inline-flex keeps the link in the breadcrumb flow; padding is
	 * balanced with negative margin so layout doesn't shift.
	 */
	.cn-breadcrumbs a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 10px 8px;
		margin: -10px -8px;
	}

	.cn-breadcrumbs__current {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		padding: 10px 0;
	}

	/*
	 * Archive link ("See all platforms →"): expand to 44px on mobile.
	 * Inline-flex with balanced padding keeps the arrow inline.
	 */
	.cn-archive-link a,
	.cn-archive-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/*
 * Compact WordPress mobile navigation panel.
 *
 * Core's responsive navigation defaults to a full-viewport white modal. With
 * only five links that leaves almost half the screen empty and visually hides
 * the page. Preserve Core's dialog, focus trap, close button, and Escape
 * handling, but constrain the open container to a dense panel below the site
 * header. WordPress switches to the responsive control below 600px, so this
 * geometry is deliberately narrower than the general 767px touch rules.
 */
@media (max-width: 599px) {
	.has-modal-open .wp-block-navigation__responsive-container-open {
		opacity: 0;
		pointer-events: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 96px 12px auto 12px !important;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: calc(100dvh - 108px) !important;
		box-sizing: border-box;
		padding: 12px 16px 16px !important;
		overflow-x: hidden;
		overflow-y: auto;
		background: var(--wp--preset--color--paper, #f7f5ef);
		border: 1px solid var(--wp--preset--color--rule, #d9d5cc);
		box-shadow: 0 12px 32px rgba(25, 24, 21, 0.14);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		width: 100%;
		margin: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: 8px;
		right: 8px;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
		padding-top: 56px !important;
		align-items: stretch;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		width: 100%;
		gap: 2px !important;
		align-items: stretch !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		margin: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		width: 100%;
		box-sizing: border-box;
		justify-content: flex-start;
		padding: 10px 12px;
		border-radius: 2px;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
		background: rgba(13, 98, 103, 0.08);
		text-decoration: none;
	}
}

/* ===========================================================================
   Plugin-rendered dynamic-block classes (camsnerd-core companion plugin)
   The theme owns layout and visual treatment; the plugin owns data and
   semantic markup. These rules style the ACTUAL classes emitted by
   packages/plugin/camsnerd-core/src/Blocks/Renderer.php — not the early
   design-comp .cn-* placeholders that appear in some patterns.
   ========================================================================= */

/* Platform identity header (plugin-rendered wrapper) */
.wp-block-camsnerd-platform-identity {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: 0;
}

.wp-block-camsnerd-platform-identity h1 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 4px;
	flex-basis: 100%;
}

/* Status badge — plugin renders <span class="camsnerd-status camsnerd-status--{status}"> */
.camsnerd-status {
	display: inline-flex;
	align-items: center;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 1px;
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink-secondary);
}

.camsnerd-status--active {
	color: var(--wp--preset--color--status-verified);
	border-color: rgba(46, 107, 61, 0.3);
}

.camsnerd-status--sunset {
	color: var(--wp--preset--color--ink-secondary);
}

.camsnerd-status--restricted,
.camsnerd-status--disputed {
	color: var(--wp--preset--color--status-disputed);
	border-color: rgba(156, 61, 46, 0.3);
}

/* Official website action — visibly separated from status badge via
   border/background treatment. Restrained inline affordance, not a button. */
.camsnerd-official-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 16px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 2px;
	background: var(--wp--preset--color--white);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.camsnerd-official-link:hover {
	color: var(--wp--preset--color--teal-hover);
	border-color: var(--wp--preset--color--teal);
	text-decoration: none;
}

.camsnerd-official-link:focus {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}

/* Audience navigation — Hub / Viewer / Broadcaster horizontal tabs.
   Server-routed links with aria-current; NOT an ARIA tablist widget.
   Plugin renders: <nav class="camsnerd-audience-nav"><ul><li><a> */
.camsnerd-audience-nav {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin: 24px 0 0;
}

.camsnerd-audience-nav ul {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.camsnerd-audience-nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.camsnerd-audience-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 24px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink-secondary);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.camsnerd-audience-nav a:hover {
	color: var(--wp--preset--color--teal);
	text-decoration: none;
}

.camsnerd-audience-nav a:focus {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: -2px;
}

.camsnerd-audience-nav a[aria-current="page"] {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--teal);
	font-weight: 600;
}

/* Affiliate CTA — restrained inline action at body text scale.
   Plugin renders: <a class="camsnerd-affiliate-cta"> inside <p>. */
a.camsnerd-affiliate-cta {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 32px;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 2px;
	transition: background 0.15s ease;
}

a.camsnerd-affiliate-cta:hover {
	background: var(--wp--preset--color--teal-hover);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

a.camsnerd-affiliate-cta:focus {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	a.camsnerd-affiliate-cta {
		width: 100%;
	}
}

/* Affiliate disclosure text (plugin-rendered) */
.camsnerd-disclosure {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-secondary);
	padding: 12px 16px;
	border-left: 2px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--paper-deep);
	border-radius: 0 2px 2px 0;
	margin-top: 12px;
}

.camsnerd-affiliate-disclosure {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-secondary);
	margin-top: 16px;
}

/* Platform updates list (plugin-rendered section — block emits its own H2) */
.camsnerd-platform-updates {
	margin-top: 48px;
}

.camsnerd-platform-updates h2 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 16px;
}

.camsnerd-platform-updates ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.camsnerd-platform-updates li {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.camsnerd-platform-updates li:last-child {
	border-bottom: none;
}

.camsnerd-platform-updates li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.camsnerd-platform-updates li a:hover {
	color: var(--wp--preset--color--teal);
}

/* Platform verdict (plugin-rendered) */
.camsnerd-platform-verdict {
	margin-top: 32px;
}

.camsnerd-verdict h2 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 8px;
}

.camsnerd-confidence {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink-muted);
	margin-bottom: 12px;
}

.camsnerd-verdict-unavailable {
	color: var(--wp--preset--color--ink-secondary);
	font-style: italic;
}

/* Source ledger (plugin-rendered) */
.camsnerd-source-ledger,
.camsnerd-sources-pending {
	font-size: 0.8125rem;
	line-height: 1.5;
}

.camsnerd-source-ledger {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: source;
}

.camsnerd-source-ledger li {
	counter-increment: source;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.camsnerd-source-ledger li:last-child {
	border-bottom: none;
}

.camsnerd-source-ledger li::before {
	content: counter(source) ".";
	font-weight: 600;
	color: var(--wp--preset--color--ink-muted);
	min-width: 1.5em;
}

.camsnerd-source-ledger a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
}

.camsnerd-source-ledger a:hover {
	text-decoration: underline;
}

.camsnerd-source-ledger span {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.75rem;
}

/* Platform facts (plugin-rendered definition list) */
.camsnerd-platform-facts {
	margin: 0;
}

.camsnerd-platform-facts dt {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink-secondary);
	margin-top: 16px;
}

.camsnerd-platform-facts dt:first-child {
	margin-top: 0;
}

.camsnerd-platform-facts dd {
	margin: 4px 0 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
	word-break: break-word;
}

/* Scorecard (plugin-rendered) */
.camsnerd-scorecard {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.camsnerd-scorecard th,
.camsnerd-scorecard td {
	text-align: left;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	vertical-align: top;
	overflow-wrap: break-word;
	word-break: break-word;
}

.camsnerd-scorecard th {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	width: 35%;
	padding-right: 24px;
}

.camsnerd-scorecard td {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-secondary);
}

.camsnerd-scorecard td p {
	margin: 4px 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-muted);
}

@media (max-width: 767px) {
	.camsnerd-scorecard,
	.camsnerd-scorecard thead,
	.camsnerd-scorecard tbody,
	.camsnerd-scorecard tr,
	.camsnerd-scorecard th,
	.camsnerd-scorecard td {
		display: block;
		width: 100%;
	}
	.camsnerd-scorecard th {
		padding-bottom: 4px;
		border-bottom: none;
	}
	.camsnerd-scorecard td {
		padding-bottom: 16px;
	}
}

/* Review section wrapper (plugin-rendered) */
.camsnerd-review-section {
	margin-top: 24px;
}

.camsnerd-review-section h2 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 16px;
}

/* Freshness badge (plugin-rendered) */
.camsnerd-freshness-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 1px;
	line-height: 1.5;
}

.camsnerd-freshness--verified {
	color: var(--wp--preset--color--status-verified);
}

.camsnerd-freshness--fixture,
.camsnerd-freshness--stale {
	color: var(--wp--preset--color--status-fixture);
}

.camsnerd-freshness--disputed,
.camsnerd-freshness--retracted {
	color: var(--wp--preset--color--status-disputed);
}

/* Comparison table (plugin-rendered) */
.camsnerd-comparison-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.camsnerd-comparison-table caption {
	text-align: left;
	padding: 12px 0;
	font-weight: 600;
}

.camsnerd-comparison-table th,
.camsnerd-comparison-table td {
	text-align: left;
	padding: 12px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.camsnerd-comparison-table th {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.camsnerd-comparison-table td {
	color: var(--wp--preset--color--ink-secondary);
}

.camsnerd-comparison-table td p {
	margin: 4px 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-muted);
}

/*
 * Mobile touch-target enforcement for site title and card/listing title links.
 * Scoped to <=767px so desktop typography and density are unaffected.
 * Inline-flex + min-height expands the anchor hit box to 44px without
 * changing the visible text size or bloating the card layout.
 */
@media (max-width: 767px) {
	/* Site title / home link — wp:site-title renders <p class="wp-block-site-title"><a> */
	.wp-block-site-title,
	.wp-block-site-title a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/*
	 * Card and listing title links — actionable anchors inside platform
	 * cards, update cards, search results, and archive/homepage listings.
	 */
	.cn-platform-card__title a,
	.cn-update-card__headline a,
	.cn-search-result__title a,
	.wp-block-post-title a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}