/* ==========================================================
   Custom Poker Chips Theme — Main Stylesheet
   Version: 1.0.0 | Author: Steve Austen | The PCGP
   ========================================================== */

/* ── Custom properties ──────────────────────────────────── */
:root {
	--cpc-bg:        #0f1117;
	--cpc-surface:   #1a1d27;
	--cpc-surface2:  #22263a;
	--cpc-border:    #2e3347;
	--cpc-gold:      #d4a843;
	--cpc-gold-lt:   #f0c65a;
	--cpc-text:      #e8eaf2;
	--cpc-text-sub:  #8b92b0;
	--cpc-green:     #22c55e;
	--cpc-red:       #ef4444;
	--cpc-radius:    10px;
	--cpc-container: 1200px;
	--cpc-header-h:  64px;
}

/* ── Reset ───────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--cpc-bg);
	color: var(--cpc-text);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

img, video, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--cpc-gold);
	text-decoration: none;
	transition: color .15s;
}
a:hover { color: var(--cpc-gold-lt); }
a:focus-visible {
	outline: 2px solid var(--cpc-gold);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ── Skip link (accessibility) ───────────────────────────── */
.cpc-skip-link {
	position: absolute;
	top: -100%;
	left: 16px;
	background: var(--cpc-gold);
	color: #1a1000;
	padding: 8px 16px;
	border-radius: 0 0 var(--cpc-radius) var(--cpc-radius);
	font-weight: 700;
	z-index: 9999;
	transition: top .2s;
}
.cpc-skip-link:focus { top: 0; color: #1a1000; }

/* ── Site header ─────────────────────────────────────────── */
.cpc-header {
	position: sticky;
	top: 0;
	z-index: 200;
	width: 100%;
	height: var(--cpc-header-h);
	background: var(--cpc-bg);
	border-bottom: 1px solid var(--cpc-border);
	box-shadow: 0 2px 12px rgba(0,0,0,.4);
}

/* Admin bar offset */
.admin-bar .cpc-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .cpc-header { top: 46px; }
}

.cpc-header__inner {
	max-width: var(--cpc-container);
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 40px);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Branding */
.cpc-header__site-name {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--cpc-gold);
	text-decoration: none;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.cpc-header__site-name:hover { color: var(--cpc-gold-lt); }
.cpc-header__tagline {
	font-size: .7rem;
	color: var(--cpc-text-sub);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-top: 2px;
}
.cpc-header__brand .custom-logo {
	max-height: 44px;
	width: auto;
}

/* Primary navigation */
.cpc-nav-list {
	list-style: none;
	display: flex;
	gap: clamp(16px, 2vw, 32px);
	align-items: center;
}
.cpc-nav-list a {
	color: var(--cpc-text);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .03em;
	padding: 4px 0;
	position: relative;
}
.cpc-nav-list a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--cpc-gold);
	transition: width .2s;
}
.cpc-nav-list a:hover,
.cpc-nav-list .current-menu-item > a { color: var(--cpc-gold); }
.cpc-nav-list a:hover::after,
.cpc-nav-list .current-menu-item > a::after { width: 100%; }

/* Mobile menu toggle */
.cpc-header__menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	margin-left: auto;
}
.cpc-header__menu-toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--cpc-text);
	border-radius: 2px;
	transition: transform .2s, opacity .2s;
}
.cpc-header__menu-toggle.is-active .cpc-header__menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cpc-header__menu-toggle.is-active .cpc-header__menu-toggle-bar:nth-child(2) { opacity: 0; }
.cpc-header__menu-toggle.is-active .cpc-header__menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Main content area ───────────────────────────────────── */
.cpc-main {
	flex: 1;
	padding: clamp(32px, 5vw, 64px) 0;
}

/* ── Container ───────────────────────────────────────────── */
.cpc-container {
	max-width: var(--cpc-container);
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 40px);
}

/* ── Page / Post content ─────────────────────────────────── */
.cpc-page-content__title,
.cpc-single-post__title {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 800;
	color: var(--cpc-gold);
	margin-bottom: 24px;
	line-height: 1.2;
}
.cpc-single-post__meta {
	font-size: .82rem;
	color: var(--cpc-text-sub);
	margin-bottom: 24px;
}
.cpc-single-post__thumb {
	border-radius: var(--cpc-radius);
	overflow: hidden;
	margin-bottom: 28px;
}
.cpc-single-post__thumb img { width: 100%; }

/* Prose styles — content output by the_content() */
.cpc-page-content__body,
.cpc-single-post__body {
	max-width: 72ch;
	color: var(--cpc-text);
	line-height: 1.8;
}
.cpc-page-content__body h2,
.cpc-single-post__body h2 { font-size: 1.4rem; color: var(--cpc-gold); margin: 28px 0 12px; }
.cpc-page-content__body h3,
.cpc-single-post__body h3 { font-size: 1.15rem; color: var(--cpc-text); margin: 20px 0 8px; }
.cpc-page-content__body p,
.cpc-single-post__body p  { margin-bottom: 16px; }
.cpc-page-content__body ul,
.cpc-single-post__body ul,
.cpc-page-content__body ol,
.cpc-single-post__body ol  { padding-left: 20px; margin-bottom: 16px; }
.cpc-page-content__body blockquote,
.cpc-single-post__body blockquote {
	border-left: 3px solid var(--cpc-gold);
	padding-left: 16px;
	color: var(--cpc-text-sub);
	font-style: italic;
	margin: 20px 0;
}

/* ── Post grid (archive / index) ─────────────────────────── */
.cpc-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 30%, 360px), 1fr));
	gap: 24px;
}
.cpc-card {
	background: var(--cpc-surface);
	border: 1px solid var(--cpc-border);
	border-radius: var(--cpc-radius);
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}
.cpc-card:hover {
	border-color: var(--cpc-gold);
	box-shadow: 0 4px 24px rgba(212,168,67,.15);
}
.cpc-card__thumb-link { display: block; }
.cpc-card__thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.cpc-card__body { padding: 20px; }
.cpc-card__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.cpc-card__title a { color: var(--cpc-text); }
.cpc-card__title a:hover { color: var(--cpc-gold); }
.cpc-card__meta { font-size: .78rem; color: var(--cpc-text-sub); margin-bottom: 10px; }
.cpc-card__excerpt { font-size: .88rem; color: var(--cpc-text-sub); margin-bottom: 16px; }

/* ── Post navigation ─────────────────────────────────────── */
.cpc-post-nav .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--cpc-border);
}

/* ── 404 ─────────────────────────────────────────────────── */
.cpc-404 {
	text-align: center;
	padding: clamp(40px, 8vw, 80px) 20px;
}
.cpc-404__title {
	font-size: clamp(4rem, 12vw, 8rem);
	font-weight: 900;
	color: var(--cpc-gold);
	line-height: 1;
	margin-bottom: 16px;
}
.cpc-404__message {
	font-size: 1.1rem;
	color: var(--cpc-text-sub);
	margin-bottom: 28px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.cpc-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 20px;
	border-radius: 7px;
	border: none;
	font-size: .9rem;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: opacity .15s, transform .1s, box-shadow .15s;
	white-space: nowrap;
}
.cpc-btn:hover  { opacity: .88; transform: translateY(-1px); }
.cpc-btn:active { transform: translateY(0); }
.cpc-btn--primary {
	background: var(--cpc-gold);
	color: #1a1000;
}
.cpc-btn--primary:hover { box-shadow: 0 4px 16px rgba(212,168,67,.4); color: #1a1000; }
.cpc-btn--outline {
	background: transparent;
	border: 1.5px solid var(--cpc-gold);
	color: var(--cpc-gold);
}

/* ── Site footer ─────────────────────────────────────────── */
.cpc-footer {
	background: #0a0c12;
	border-top: 1px solid var(--cpc-border);
	padding: 32px clamp(16px, 3vw, 40px);
}
.cpc-footer__inner {
	max-width: var(--cpc-container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.cpc-footer__site-name {
	font-size: .95rem;
	font-weight: 800;
	color: var(--cpc-gold);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.cpc-footer__site-name:hover { color: var(--cpc-gold-lt); }
.cpc-footer__brand .custom-logo { max-height: 36px; width: auto; }
.cpc-footer-nav-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}
.cpc-footer-nav-list a { color: var(--cpc-text-sub); font-size: .85rem; font-weight: 600; }
.cpc-footer-nav-list a:hover { color: var(--cpc-gold); }
.cpc-footer__copy {
	font-size: .78rem;
	color: var(--cpc-text-sub);
	width: 100%;
	text-align: center;
	padding-top: 16px;
	border-top: 1px solid var(--cpc-border);
}

/* ── Misc ────────────────────────────────────────────────── */
.cpc-empty {
	color: var(--cpc-text-sub);
	font-size: .88rem;
	font-style: italic;
}

/* Pagination */
.nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 6px;
	background: var(--cpc-surface);
	border: 1px solid var(--cpc-border);
	color: var(--cpc-text);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s, background .15s;
}
.page-numbers:hover,
.page-numbers.current {
	background: var(--cpc-gold);
	border-color: var(--cpc-gold);
	color: #1a1000;
}

/* WP admin bar spacing */
.admin-bar body { padding-top: 0; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
	/* Show mobile toggle */
	.cpc-header__menu-toggle { display: flex; }

	/* Hide nav by default on mobile */
	.cpc-header__nav {
		display: none;
		position: absolute;
		top: var(--cpc-header-h);
		left: 0;
		width: 100%;
		background: var(--cpc-surface);
		border-bottom: 1px solid var(--cpc-border);
		padding: 16px clamp(16px, 3vw, 40px);
		box-shadow: 0 8px 24px rgba(0,0,0,.4);
	}
	.cpc-header__nav.is-open { display: block; }

	.cpc-nav-list {
		flex-direction: column;
		gap: 4px;
	}
	.cpc-nav-list a { display: block; padding: 10px 0; }
	.cpc-nav-list a::after { display: none; }

	.cpc-footer__inner { flex-direction: column; align-items: flex-start; }
	.cpc-post-grid { grid-template-columns: 1fr; }
}