/* ==========================================================================
   Playbooks — Archive & Single
   Uses Caddy design tokens: --f-headings (Nudge), --f-body (Inter),
   --c-purp, --c-pale-lime, --c-lime, --c-drk-blue, --c-mute-beige
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset: override GeneratePress defaults for playbook pages
   -------------------------------------------------------------------------- */

/* Fix sticky positioning — overflow on ANY ancestor breaks position: sticky.
   core.css sets body { overflow-x: hidden } which kills sticky.
   Override every element in the chain from body down to the TOC parent. */
body.single-playbook {
	overflow: visible !important;
	overflow-x: visible !important;
}

body.single-playbook .site,
body.single-playbook .site-content,
body.single-playbook .content-area,
body.single-playbook .site-main,
body.single-playbook .inside-article,
body.single-playbook .entry-content,
body.single-playbook .playbook-single,
body.single-playbook .pb-single-body,
body.single-playbook .pb-single-body__inner {
	overflow: visible !important;
}

.playbooks-archive .grid-container,
.playbook-single .grid-container {
	max-width: 100%;
}

.playbooks-archive .inside-article,
.playbook-single .inside-article {
	padding: 0;
	background: transparent;
}

.playbooks-archive #content,
.playbook-single #content {
	padding: 0;
}

/* Remove GP sidebar on playbook pages */
.playbooks-archive .site-main,
.playbook-single .site-main {
	width: 100%;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   ARCHIVE — Hero
   -------------------------------------------------------------------------- */
.pb-hero {
	background-color: #0a0a0a;
	padding: 80px 40px 60px;
	text-align: center;
}

.pb-hero__inner {
	max-width: 1300px;
	margin: 0 auto;
}

.pb-hero__eyebrow {
	display: inline-block;
	font-family: var(--f-mono, 'Mace', monospace);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--c-pale-lime, #e5ff80);
	margin-bottom: 20px;
}

.pb-hero__title {
	font-family: var(--f-headings, 'Nudge', sans-serif) !important;
	font-size: clamp(36px, 5vw, 56px);
	font-weight: normal !important;
	text-transform: uppercase !important;
	line-height: 100% !important;
	color: #fff;
	margin: 0 0 20px;
	letter-spacing: -0.01em;
}

.pb-hero__desc {
	font-size: 18px;
	line-height: 160%;
	color: #999;
	margin: 0 auto;
	max-width: 600px;
}

/* --------------------------------------------------------------------------
   ARCHIVE — Category Filters
   -------------------------------------------------------------------------- */
.pb-filters {
	background-color: #0a0a0a;
	border-bottom: 1px solid #222;
	padding: 0 40px;
	position: sticky;
	top: 0;
	z-index: 100;
}

.pb-filters__inner {
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	gap: 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 0;
}

.pb-filters__inner::-webkit-scrollbar {
	display: none;
}

.pb-filters__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 14px 20px;
	font-family: var(--f-body, 'Inter', sans-serif);
	font-size: 14px;
	font-weight: 500;
	color: #888;
	text-decoration: none;
	white-space: nowrap;
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.pb-filters__tab:hover {
	color: #fff;
	text-decoration: none;
}

.pb-filters__tab--active {
	color: #fff;
	border-bottom-color: var(--c-purp, #5e4ccf);
}

.pb-filters__count {
	font-size: 11px;
	font-weight: 600;
	background: #222;
	color: #888;
	padding: 1px 7px;
	border-radius: 10px;
}

.pb-filters__tab--active .pb-filters__count {
	background: var(--c-purp, #5e4ccf);
	color: #fff;
}

/* --------------------------------------------------------------------------
   ARCHIVE — Card Grid
   -------------------------------------------------------------------------- */
.pb-grid {
	background-color: #0a0a0a;
	padding: 50px 40px 80px;
	min-height: 50vh;
}

.pb-grid__inner {
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
}

/* --------------------------------------------------------------------------
   Playbook Card (shared between archive and related)
   -------------------------------------------------------------------------- */
.pb-card {
	display: flex;
	flex-direction: column;
	background: #111;
	border: 1px solid #222;
	border-radius: 12px;
	padding: 28px 28px 24px;
	text-decoration: none;
	color: #fff;
	transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
	position: relative;
}

.pb-card:hover {
	border-color: var(--c-purp, #5e4ccf);
	transform: translateY(-4px);
	box-shadow: 0 8px 30px rgba(94, 76, 207, 0.15);
	text-decoration: none;
	color: #fff;
}

.pb-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.pb-card__category {
	font-family: var(--f-mono, 'Mace', monospace);
	font-size: 11px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--c-pale-lime, #e5ff80);
}

.pb-card__time {
	font-size: 12px;
	color: #555;
}

.pb-card__name {
	font-family: var(--f-headings, 'Nudge', sans-serif) !important;
	font-size: 26px;
	font-weight: normal !important;
	text-transform: uppercase !important;
	line-height: 110% !important;
	color: #fff;
	margin: 0 0 8px;
}

.pb-card__subtitle {
	font-size: 15px;
	line-height: 150%;
	color: #777;
	margin: 0 0 auto;
	padding-bottom: 20px;
}

.pb-card__features {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
	margin-top: auto;
}

.pb-card__feature {
	font-size: 11px;
	font-weight: 500;
	color: #aaa;
	background: #1a1a1a;
	border: 1px solid #2a2a2a;
	border-radius: 6px;
	padding: 3px 10px;
}

.pb-card:hover .pb-card__feature {
	border-color: #333;
}

.pb-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-purp, #5e4ccf);
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #1a1a1a;
}

.pb-card:hover .pb-card__cta {
	color: var(--c-pale-purp, #b4a8fd);
}

.pb-card__cta svg {
	transition: transform 0.2s;
}

.pb-card:hover .pb-card__cta svg {
	transform: translateX(3px);
}

/* Card filter hide/show */
.pb-card--hidden {
	display: none;
}

/* --------------------------------------------------------------------------
   ARCHIVE — Empty state
   -------------------------------------------------------------------------- */
.pb-empty {
	background: #0a0a0a;
	padding: 80px 40px;
	text-align: center;
	color: #666;
	font-size: 16px;
}

/* --------------------------------------------------------------------------
   SINGLE — Hero
   -------------------------------------------------------------------------- */
.pb-single-hero {
	background-color: #0a0a0a;
	padding: 80px 40px 60px;
}

.pb-single-hero__inner {
	max-width: 1300px;
	margin: 0 auto;
	text-align: center;
}

.pb-single-hero__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 24px;
}

.pb-single-hero__category {
	font-family: var(--f-mono, 'Mace', monospace);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--c-pale-lime, #e5ff80);
	text-decoration: none;
	transition: color 0.2s;
}

.pb-single-hero__category:hover {
	color: var(--c-lime, #cdff71);
	text-decoration: none;
}

.pb-single-hero__time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: #666;
}

.pb-single-hero__title {
	font-family: var(--f-headings, 'Nudge', sans-serif) !important;
	font-size: clamp(36px, 5vw, 52px);
	font-weight: normal !important;
	text-transform: uppercase !important;
	line-height: 100% !important;
	color: #fff;
	margin: 0 0 16px;
}

.pb-single-hero__subtitle {
	font-size: 20px;
	line-height: 155%;
	color: #999;
	margin: 0 0 28px;
}

.pb-single-hero__features {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.pb-single-hero__features-label {
	font-size: 12px;
	color: #555;
	margin-right: 4px;
}

.pb-single-hero__feature {
	font-size: 12px;
	font-weight: 500;
	color: #ccc;
	background: #1a1a1a;
	border: 1px solid #2a2a2a;
	border-radius: 6px;
	padding: 4px 12px;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

a.pb-single-hero__feature:hover {
	border-color: var(--c-purp, #5e4ccf);
	color: #fff;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   SINGLE — Body (content + TOC sidebar)
   -------------------------------------------------------------------------- */
.pb-single-body {
	background-color: #fff;
	padding: 60px 40px 80px;
}

.pb-single-body__inner {
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 60px;
	align-items: start;
}

/* --------------------------------------------------------------------------
   SINGLE — TOC Sidebar
   -------------------------------------------------------------------------- */
.pb-toc {
	position: relative;
}

.pb-toc__sticky {
	/* Sticky handled by JS to avoid overflow:hidden ancestor issues */
}

.pb-toc__heading {
	display: block;
	font-family: var(--f-mono, 'Mace', monospace);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #999;
	margin-bottom: 16px;
}

.pb-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: toc;
}

.pb-toc__item {
	counter-increment: toc;
	margin-bottom: 0;
	padding: 0;
}

.pb-toc__link {
	display: block;
	padding: 8px 0;
	font-size: 13px;
	line-height: 140%;
	color: #666;
	text-decoration: none;
	border-left: 2px solid #e5e5e5;
	padding-left: 16px;
	transition: color 0.2s, border-color 0.2s;
}

.pb-toc__link:hover {
	color: #111;
	border-left-color: var(--c-purp, #5e4ccf);
	text-decoration: none;
}

.pb-toc__link.is-active {
	color: #111;
	font-weight: 600;
	border-left-color: var(--c-purp, #5e4ccf);
}

.pb-toc__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 28px;
	font-size: 13px;
	font-weight: 500;
	color: var(--c-purp, #5e4ccf);
	text-decoration: none;
	transition: color 0.2s;
}

.pb-toc__back:hover {
	color: #333;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   SINGLE — Article Content
   -------------------------------------------------------------------------- */
.pb-single-content {
	font-size: 17px;
	line-height: 175%;
	color: #333;
}

.pb-single-content h2.wp-block-heading {
	font-family: var(--f-headings, 'Nudge', sans-serif) !important;
	font-size: 32px;
	text-transform: uppercase !important;
	line-height: 110% !important;
	color: #000;
	margin-top: 56px;
	margin-bottom: 20px;
	padding-top: 32px;
	border-top: 1px solid #e5e5e5;
	scroll-margin-top: 24px;
}

.pb-single-content h2.wp-block-heading:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.pb-single-content h3.wp-block-heading {
	font-family: var(--f-headings, 'Nudge', sans-serif) !important;
	font-size: 22px;
	text-transform: uppercase !important;
	line-height: 120% !important;
	color: #111;
	margin-top: 36px;
	margin-bottom: 12px;
}

.pb-single-content p {
	margin-bottom: 20px;
	color: #444;
}

.pb-single-content strong {
	color: #111;
	font-weight: 600;
}

.pb-single-content a {
	color: var(--c-purp, #5e4ccf);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pb-single-content a:hover {
	color: #111;
}

.pb-single-content ul,
.pb-single-content ol {
	margin-bottom: 24px;
	padding-left: 24px;
}

.pb-single-content li {
	margin-bottom: 8px;
	color: #444;
}

.pb-single-content li strong {
	color: #111;
}

.pb-single-content hr.wp-block-separator {
	border: none;
	border-top: 1px solid #e5e5e5;
	margin: 48px 0;
}

/* --------------------------------------------------------------------------
   SINGLE — Bottom CTA
   -------------------------------------------------------------------------- */
.pb-single-cta {
	background: #0a0a0a;
	padding: 80px 40px;
	text-align: center;
}

.pb-single-cta__inner {
	max-width: 1300px;
	margin: 0 auto;
	text-align: center;
}

.pb-single-cta__title {
	font-family: var(--f-headings, 'Nudge', sans-serif) !important;
	font-size: 36px;
	font-weight: normal !important;
	text-transform: uppercase !important;
	line-height: 110% !important;
	color: #fff;
	margin: 0 auto 12px;
	max-width: 540px;
}

.pb-single-cta__desc {
	font-size: 17px;
	color: #888;
	margin: 0 auto 32px;
	line-height: 155%;
	max-width: 540px;
}

.pb-single-cta__actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.pb-single-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	font-family: var(--f-body, 'Inter', sans-serif);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 0.2s, color 0.2s, transform 0.15s;
}

.pb-single-cta__btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.pb-single-cta__btn--primary {
	background: var(--c-purp, #5e4ccf);
	color: #fff;
}

.pb-single-cta__btn--primary:hover {
	background: #4d3cb8;
	color: #fff;
}

.pb-single-cta__btn--secondary {
	background: transparent;
	color: #999;
	border: 1px solid #333;
}

.pb-single-cta__btn--secondary:hover {
	border-color: #666;
	color: #fff;
}

/* --------------------------------------------------------------------------
   SINGLE — Related Playbooks
   -------------------------------------------------------------------------- */
.pb-related {
	background: #0a0a0a;
	padding: 0 40px 80px;
	border-top: 1px solid #1a1a1a;
}

.pb-related__inner {
	max-width: 1300px;
	margin: 0 auto;
	padding-top: 60px;
}

.pb-related__title {
	font-family: var(--f-headings, 'Nudge', sans-serif) !important;
	font-size: 28px;
	font-weight: normal !important;
	text-transform: uppercase !important;
	line-height: 110% !important;
	color: #fff;
	margin: 0 0 32px;
	text-align: center;
}

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

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.pb-single-body__inner {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.pb-toc {
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 24px;
		margin-bottom: 40px;
	}

	.pb-toc__sticky {
		position: static;
	}

	.pb-toc__list {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	.pb-toc__link {
		border-left: none;
		padding-left: 0;
		padding: 4px 12px;
		background: #f5f5f5;
		border-radius: 6px;
		font-size: 12px;
	}

	.pb-toc__link:hover,
	.pb-toc__link.is-active {
		background: #eee;
		border-left: none;
	}
}

@media (max-width: 768px) {
	.pb-hero {
		padding: 60px 24px 40px;
	}

	.pb-filters {
		padding: 0 24px;
	}

	.pb-grid {
		padding: 32px 24px 60px;
	}

	.pb-grid__inner {
		grid-template-columns: 1fr;
	}

	.pb-single-hero {
		padding: 60px 24px 40px;
	}

	.pb-single-body {
		padding: 40px 24px 60px;
	}

	.pb-single-content {
		font-size: 16px;
	}

	.pb-single-content h2.wp-block-heading {
		font-size: 26px;
	}

	.pb-single-content h3.wp-block-heading {
		font-size: 19px;
	}

	.pb-single-cta {
		padding: 60px 24px;
	}

	.pb-related {
		padding: 0 24px 60px;
	}

	.pb-related__grid {
		grid-template-columns: 1fr;
		max-width: 100%;
	}

	.pb-card__name {
		font-size: 22px;
	}
}

@media (max-width: 480px) {
	.pb-hero__title {
		font-size: 32px;
	}

	.pb-single-hero__title {
		font-size: 30px;
	}

	.pb-filters__tab {
		padding: 12px 14px;
		font-size: 13px;
	}

	.pb-single-hero__features {
		gap: 6px;
	}

	.pb-single-hero__feature {
		font-size: 11px;
		padding: 3px 8px;
	}
}