/*
Theme Name:  Onchain Circus
Theme URI:   https://onchaincircus.com
Author:      Onchain Circus
Description: Pastel Big Top: the custom editorial theme for Onchain Circus. Memecoins, degen culture, and the stories behind the chaos.
Version:     1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License:     GPL-2.0-or-later
Text Domain: onchain-circus
*/

/* =============================================================
   Tokens: Pastel Big Top
   ============================================================= */
:root {
	--oc-paper: #fffbf5;
	--oc-ink: #33254e;
	--oc-ink-soft: #6b5e85;
	--oc-line: #e9e0f0;
	--oc-accent: #e85d75; /* ringmaster rose: links & CTAs */
	--oc-accent-deep: #c23d58;

	/* Category pastels (soft = wash, deep = text-safe) */
	--oc-pink-soft: #ffd9e4;   --oc-pink-deep: #b3315f;
	--oc-yellow-soft: #fff0b8; --oc-yellow-deep: #8a6d00;
	--oc-lilac-soft: #e6dcfa;  --oc-lilac-deep: #6d4aa3;
	--oc-peach-soft: #ffe1c7;  --oc-peach-deep: #b04a14;
	--oc-mint-soft: #cdeedc;   --oc-mint-deep: #1e7a4e;
	--oc-sky-soft: #d6e4ff;    --oc-sky-deep: #3b5bb5;

	--oc-font-display: 'Grandstander', 'Comic Sans MS', cursive;
	--oc-font-wordmark: 'Rye', serif;
	--oc-font-body: 'Nunito Sans', system-ui, sans-serif;
	--oc-font-mono: 'IBM Plex Mono', Consolas, monospace;

	--oc-radius: 16px;
	--oc-shadow: 0 3px 0 var(--oc-ink);
	--oc-maxw: 1180px;
}

/* =============================================================
   Base
   ============================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--oc-paper);
	color: var(--oc-ink);
	font-family: var(--oc-font-body);
	font-size: 1.05rem;
	line-height: 1.65;
}
img { max-width: 100%; height: auto; }
a { color: var(--oc-accent-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--oc-accent); }
:focus-visible { outline: 3px solid var(--oc-ink); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 {
	font-family: var(--oc-font-display);
	font-weight: 700;
	line-height: 1.15;
	color: var(--oc-ink);
	margin: 0 0 0.5em;
}

.oc-container { max-width: var(--oc-maxw); margin: 0 auto; padding: 0 1.25rem; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* =============================================================
   Header, awning, nav
   ============================================================= */
.oc-header { background: var(--oc-paper); padding: 1.5rem 0 0.75rem; text-align: center; }

.oc-wordmark {
	font-family: var(--oc-font-wordmark);
	font-weight: 400;
	font-size: clamp(2rem, 6vw, 3.4rem);
	letter-spacing: 0.02em;
	margin: 0;
}
.oc-wordmark a { color: var(--oc-ink); text-decoration: none; }
.oc-wordmark .oc-star { color: var(--oc-accent); }

.oc-tagline {
	margin: 0.2rem 0 0;
	color: var(--oc-ink-soft);
	font-size: 0.95rem;
	font-family: var(--oc-font-display);
	font-weight: 500;
}

.oc-nav { margin-top: 1rem; }
.oc-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0; padding: 0; }
.oc-nav a {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 2px solid var(--oc-ink);
	border-radius: 999px;
	background: #fff;
	color: var(--oc-ink);
	text-decoration: none;
	font-family: var(--oc-font-display);
	font-weight: 600;
	font-size: 0.88rem;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.oc-nav a:hover, .oc-nav .current-menu-item a { transform: translateY(-2px); box-shadow: var(--oc-shadow); }
/* Each nav pill takes its section's pastel */
.oc-nav li:nth-child(6n+1) a { background: var(--oc-pink-soft); }
.oc-nav li:nth-child(6n+2) a { background: var(--oc-yellow-soft); }
.oc-nav li:nth-child(6n+3) a { background: var(--oc-lilac-soft); }
.oc-nav li:nth-child(6n+4) a { background: var(--oc-peach-soft); }
.oc-nav li:nth-child(6n+5) a { background: var(--oc-mint-soft); }
.oc-nav li:nth-child(6n+6) a { background: var(--oc-sky-soft); }

/* Scalloped awning: the signature divider */
.oc-awning { display: block; width: 100%; height: 34px; margin-top: 0.9rem; }

/* =============================================================
   Section framework (front page)
   ============================================================= */
.oc-home-sec { padding: 2.5rem 0; }
.oc-home-sec.oc-washed { background: color-mix(in srgb, var(--sec-soft) 38%, var(--oc-paper)); }

.oc-sec-head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.oc-badge {
	display: inline-block;
	background: var(--sec-soft, var(--oc-lilac-soft));
	color: var(--sec-deep, var(--oc-ink));
	border: 2px solid var(--oc-ink);
	box-shadow: var(--oc-shadow);
	border-radius: 10px;
	padding: 0.3rem 0.85rem;
	font-family: var(--oc-font-display);
	font-weight: 800;
	font-size: 1.15rem;
	transform: rotate(-1.2deg);
}
.oc-sec-sub { color: var(--oc-ink-soft); font-size: 0.92rem; }
.oc-sec-all { margin-left: auto; font-family: var(--oc-font-display); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

/* =============================================================
   Cards
   ============================================================= */
.oc-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }

.oc-card {
	background: #fff;
	border: 2px solid var(--oc-ink);
	border-radius: var(--oc-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.oc-card:hover { transform: translateY(-3px) rotate(-0.3deg); box-shadow: 0 5px 0 var(--oc-ink); }
.oc-card-thumb { aspect-ratio: 16/9; background: var(--sec-soft, var(--oc-lilac-soft)); display: block; }
.oc-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-card-thumb .oc-placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.4rem; }
.oc-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.oc-card h3 { font-size: 1.12rem; margin: 0; }
.oc-card h3 a { color: var(--oc-ink); text-decoration: none; }
.oc-card h3 a:hover { color: var(--oc-accent-deep); }
.oc-card-excerpt { color: var(--oc-ink-soft); font-size: 0.9rem; margin: 0; }
.oc-card-meta { margin-top: auto; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; font-size: 0.76rem; color: var(--oc-ink-soft); font-family: var(--oc-font-mono); }

.oc-cat-pill {
	display: inline-block;
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	background: var(--pill-soft, var(--oc-lilac-soft));
	color: var(--pill-deep, var(--oc-ink));
	border: 1.5px solid currentColor;
	font-family: var(--oc-font-display);
	font-weight: 700;
	font-size: 0.72rem;
	text-decoration: none;
	white-space: nowrap;
}
.oc-type-pill {
	font-family: var(--oc-font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--oc-ink-soft);
	text-decoration: none;
}

/* =============================================================
   Hero (Center Ring)
   ============================================================= */
.oc-hero { padding: 2.25rem 0 2.5rem; background: color-mix(in srgb, var(--oc-pink-soft) 45%, var(--oc-paper)); }
.oc-hero-card {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 0;
	background: #fff;
	border: 3px solid var(--oc-ink);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 6px 0 var(--oc-ink);
}
.oc-hero-media { background: var(--oc-pink-soft); min-height: 300px; }
.oc-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-hero-media .oc-placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-size: 5rem; }
.oc-hero-body { padding: 2rem 2.2rem; display: flex; flex-direction: column; gap: 0.8rem; justify-content: center; }
.oc-hero-kicker { font-family: var(--oc-font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oc-pink-deep); }
.oc-hero-body h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); margin: 0; }
.oc-hero-body h2 a { color: var(--oc-ink); text-decoration: none; }
.oc-hero-body h2 a:hover { color: var(--oc-accent-deep); }
.oc-hero-excerpt { color: var(--oc-ink-soft); margin: 0; }

/* =============================================================
   Kepler's Orbit block
   ============================================================= */
.oc-kepler {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.5rem;
	align-items: center;
	background: #fff;
	border: 2px solid var(--oc-ink);
	border-radius: var(--oc-radius);
	padding: 1.6rem 1.8rem;
	box-shadow: var(--oc-shadow);
}
.oc-kepler-avatar {
	width: 88px; height: 88px; border-radius: 50%;
	border: 3px solid var(--oc-ink);
	background: var(--oc-sky-soft);
	display: grid; place-items: center; font-size: 2.6rem;
	overflow: hidden;
}
.oc-kepler-avatar img { width: 100%; height: 100%; object-fit: cover; }
.oc-kepler h3 { margin: 0 0 0.2rem; }
.oc-kepler h3 a { color: var(--oc-ink); text-decoration: none; }
.oc-kepler p { margin: 0.2rem 0 0; color: var(--oc-ink-soft); font-size: 0.95rem; }
.oc-kepler .oc-kepler-intro { font-size: 0.85rem; }

/* =============================================================
   Listing pages (archives, search)
   ============================================================= */
.oc-archive-head {
	padding: 2.4rem 0;
	background: color-mix(in srgb, var(--sec-soft, var(--oc-lilac-soft)) 45%, var(--oc-paper));
	margin-bottom: 2rem;
}
.oc-archive-head h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0; }
.oc-archive-sub { color: var(--sec-deep, var(--oc-ink-soft)); font-family: var(--oc-font-display); font-weight: 600; margin: 0.2rem 0 0; }
.oc-archive-desc { color: var(--oc-ink-soft); max-width: 60ch; margin: 0.6rem 0 0; }
.oc-listing { padding-bottom: 3rem; }

.oc-pagination { display: flex; gap: 0.4rem; justify-content: center; margin: 2.2rem 0 0; font-family: var(--oc-font-display); }
.oc-pagination .page-numbers {
	padding: 0.3rem 0.8rem; border: 2px solid var(--oc-ink); border-radius: 999px;
	background: #fff; text-decoration: none; color: var(--oc-ink);
}
.oc-pagination .page-numbers.current { background: var(--oc-ink); color: var(--oc-paper); }

/* =============================================================
   Single post
   ============================================================= */
.oc-single-head { padding: 2.6rem 0 2rem; background: color-mix(in srgb, var(--sec-soft, var(--oc-lilac-soft)) 45%, var(--oc-paper)); }
.oc-single-head .oc-crumbs { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.oc-single-head h1 { font-size: clamp(1.8rem, 4.4vw, 2.9rem); margin: 0; max-width: 22ch; }
.oc-single-meta { margin-top: 0.9rem; color: var(--oc-ink-soft); font-size: 0.85rem; font-family: var(--oc-font-mono); }

.oc-single-content { max-width: 720px; margin: 0 auto; padding: 2.4rem 1.25rem 3rem; }
.oc-single-content > * { margin-block: 0 1.15em; }
.oc-single-content h2 { font-size: 1.55rem; margin-top: 1.6em; }
.oc-single-content h3 { font-size: 1.25rem; margin-top: 1.4em; }
.oc-single-content img { border-radius: var(--oc-radius); border: 2px solid var(--oc-ink); }
.oc-single-content blockquote {
	border-left: 4px solid var(--oc-accent);
	background: #fff;
	margin: 0 0 1.15em;
	padding: 0.9rem 1.2rem;
	border-radius: 0 12px 12px 0;
	font-family: var(--oc-font-display);
	font-weight: 500;
}
.oc-single-content pre { background: var(--oc-ink); color: #ffe9f0; padding: 1rem 1.2rem; border-radius: 12px; overflow-x: auto; font-family: var(--oc-font-mono); font-size: 0.88rem; }
.oc-single-content code { font-family: var(--oc-font-mono); font-size: 0.9em; background: var(--oc-line); padding: 0.1em 0.35em; border-radius: 6px; }
.oc-single-content pre code { background: none; padding: 0; }
.oc-single-content .wp-caption-text, .oc-single-content figcaption { font-size: 0.82rem; color: var(--oc-ink-soft); text-align: center; }

.oc-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 2rem; }
.oc-tags a {
	font-size: 0.78rem;
	padding: 0.2rem 0.7rem;
	background: #fff;
	border: 1.5px solid var(--oc-ink-soft);
	border-radius: 999px;
	color: var(--oc-ink-soft);
	text-decoration: none;
	font-family: var(--oc-font-mono);
}
.oc-tags a:hover { border-color: var(--oc-accent-deep); color: var(--oc-accent-deep); }

.oc-single-footer-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.4rem; font-family: var(--oc-font-display); font-size: 0.9rem; }

/* =============================================================
   Pages, 404
   ============================================================= */
.oc-page-head { padding: 2.4rem 0 1rem; }
.oc-page-head h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.oc-404 { text-align: center; padding: 4rem 1rem; }
.oc-404 .oc-404-emoji { font-size: 4.5rem; display: block; margin-bottom: 0.4rem; }

/* =============================================================
   Footer
   ============================================================= */
.oc-footer { background: var(--oc-ink); color: #efe7f7; margin-top: 3rem; padding: 2.6rem 0 2rem; }
.oc-footer a { color: #ffd9e4; }
.oc-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; }
.oc-footer .oc-wordmark { font-size: 1.6rem; }
.oc-footer .oc-wordmark a { color: #fff8f0; }
.oc-footer-desc { color: #bdb0d6; font-size: 0.92rem; max-width: 52ch; }
.oc-footer h4 { color: #fff8f0; font-size: 1rem; }
.oc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.oc-footer-rings { margin-top: 1rem; font-size: 0.82rem; color: #bdb0d6; font-family: var(--oc-font-mono); }
.oc-footer-fine { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #4a3a6b; font-size: 0.78rem; color: #9c8fbd; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 860px) {
	.oc-hero-card { grid-template-columns: 1fr; }
	.oc-hero-media { min-height: 200px; }
	.oc-footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.oc-kepler { grid-template-columns: 1fr; text-align: center; }
	.oc-kepler-avatar { margin: 0 auto; }
	.oc-sec-all { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.oc-card, .oc-nav a { transition: none; }
	.oc-card:hover, .oc-nav a:hover { transform: none; }
}