/*
Theme Name: Chaotic Enchanter Genesis
Theme URI: https://chaoticenchanter.com/
Description: Custom Genesis child theme for Chaotic Enchanter — tech & tools reviews and chaotic builds for makers.
Author: Chaotic Enchanter
Author URI: https://chaoticenchanter.com/
Version: 1.0.0
Template: genesis
Text Domain: chaotic-enchanter-genesis
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Tags: accessibility-ready, custom-logo, custom-colors, custom-menu, editor-style, full-width-template, one-column, dark
*/

/* =============================================================
   DESIGN TOKENS — dungeon-workshop palette (see mood board)
   ============================================================= */
:root {
	--ce-void: #0a0a1f;        /* page background */
	--ce-surface: #14122b;     /* card / panel background */
	--ce-surface-raised: #1d1a3d;
	--ce-stone: #2a2440;       /* borders, dividers */
	--ce-purple: #8b5cf6;      /* primary brand */
	--ce-purple-deep: #4c1d95;
	--ce-cyan: #22e5ff;        /* neon accent — headings, links, glow */
	--ce-gold: #f5c542;        /* accent — badges, prices, CTAs */
	--ce-green: #6bcb77;       /* accent — success/stat badges */
	--ce-text: #f4f1ff;
	--ce-text-muted: #b6aed6;
	--ce-font-display: 'Press Start 2P', 'VT323', monospace;
	--ce-font-stat: 'Handjet', 'Press Start 2P', monospace;
	--ce-font-heading: 'Baloo 2', 'Nunito', sans-serif;
	--ce-font-body: 'Inter', -apple-system, sans-serif;
	--ce-radius: 10px;
	--ce-glow-cyan: 0 0 6px rgba(34, 229, 255, .55), 0 0 18px rgba(34, 229, 255, .25);
	--ce-glow-purple: 0 0 6px rgba(139, 92, 246, .55), 0 0 18px rgba(139, 92, 246, .25);
}

/* =============================================================
   BASE
   ============================================================= */
body {
	background: var(--ce-void);
	color: var(--ce-text);
	font-family: var(--ce-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--ce-cyan);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--ce-gold);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title {
	font-family: var(--ce-font-heading);
	color: var(--ce-text);
	font-weight: 700;
	line-height: 1.25;
}

.entry-title a {
	color: var(--ce-text);
}

.entry-title a:hover {
	color: var(--ce-cyan);
}

::selection {
	background: var(--ce-purple);
	color: var(--ce-void);
}

/* Genesis outputs the skip-links markup but ships no CSS to hide them —
   without this they render as plain visible text above the site title. */
.genesis-skip-link {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style: none;
}

.genesis-skip-link li {
	position: absolute;
}

.genesis-skip-link a {
	position: absolute;
	top: -999px;
	left: -999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.genesis-skip-link a:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	overflow: visible;
	z-index: 999999;
	padding: .75em 1.25em;
	background: var(--ce-purple);
	color: var(--ce-void);
	border-radius: var(--ce-radius);
	font-family: var(--ce-font-heading);
	font-weight: 700;
}

/* Genesis's structural-wrap `.wrap` divs (header/nav/footer/footer-widgets)
   and our own get their max-width + gutters from here — Genesis ships none. */
.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Genesis's own content-sidebar-wrap (single post/CPT, search, 404 — anything
   still using genesis_do_loop instead of a custom loop) never gets a `.wrap`
   of its own, so it ran edge-to-edge with zero gutters. Same fix, same reason. */
.content-sidebar-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* =============================================================
   HEADER
   ============================================================= */
.site-header {
	background: var(--ce-void);
	border-bottom: 2px solid var(--ce-stone);
}

.site-title,
.site-title a {
	font-family: var(--ce-font-display);
	font-size: 1.4rem;
	color: var(--ce-cyan);
	text-shadow: var(--ce-glow-cyan);
}

.site-description {
	font-family: var(--ce-font-heading);
	color: var(--ce-purple);
	letter-spacing: .02em;
}

.nav-primary {
	position: relative;
}

.genesis-nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: .5rem 0;
}

.genesis-nav-menu li {
	position: relative;
	margin: 0;
}

.genesis-nav-menu a {
	display: inline-block;
	font-family: var(--ce-font-heading);
	color: var(--ce-text-muted);
	font-weight: 600;
	padding: .25rem 0;
}

.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a {
	color: var(--ce-cyan);
}

.genesis-nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 200px;
	background: var(--ce-surface);
	border: 1px solid var(--ce-stone);
	border-radius: var(--ce-radius);
	padding: .5rem;
}

/* =============================================================
   CARDS / ENTRIES
   ============================================================= */
.entry,
.ce-card {
	background: var(--ce-surface);
	border: 1px solid var(--ce-stone);
	border-radius: var(--ce-radius);
	padding: 1.75rem;
}

.entry-meta,
.entry-footer {
	color: var(--ce-text-muted);
	font-size: .875rem;
}

/* =============================================================
   BUTTONS
   ============================================================= */
.button,
button,
input[type="submit"],
.wp-block-button__link {
	font-family: var(--ce-font-heading);
	background: var(--ce-purple);
	color: var(--ce-void);
	border: none;
	border-radius: var(--ce-radius);
	padding: .75em 1.5em;
	font-weight: 700;
	box-shadow: var(--ce-glow-purple);
	transition: transform .15s ease, box-shadow .15s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background: var(--ce-cyan);
	color: var(--ce-void);
	box-shadow: var(--ce-glow-cyan);
	transform: translateY(-1px);
}

.button-secondary {
	background: transparent;
	color: var(--ce-cyan);
	box-shadow: none;
	border: 2px solid var(--ce-cyan);
}

/* =============================================================
   CHAOTIC ENCHANTER COMPONENTS
   ============================================================= */

/* Hero */
.ce-hero {
	background: radial-gradient(ellipse at top, var(--ce-purple-deep) 0%, var(--ce-void) 65%);
	border-bottom: 2px solid var(--ce-stone);
	padding: 4rem 1.5rem;
	text-align: center;
	/* the pixel-font title's glow (text-shadow) paints a few px past its own
	   box on narrow viewports — without this it forces a horizontal scrollbar
	   on the whole page (measured ~106px on a 390px viewport). */
	overflow: hidden;
}

.ce-hero-title {
	font-family: var(--ce-font-display);
	/* Press Start 2P renders ~1em advance per character, so a fixed-floor
	   clamp (old: 1.75rem, 5vw, 3rem) never actually shrinks on phones —
	   "ChaoticEnchanter" just got clipped by the hero's overflow:hidden
	   instead of scaling down. This floor tracks the actual available
	   width (viewport minus hero+wrap gutters) down to ~320px. */
	font-size: clamp(0.85rem, calc(6vw - 0.375rem), 3rem);
	color: var(--ce-cyan);
	text-shadow: var(--ce-glow-cyan);
	margin-bottom: 1rem;
}

.ce-hero-tagline {
	font-family: var(--ce-font-heading);
	color: var(--ce-purple);
	font-size: 1.25rem;
	max-width: 40em;
	margin: 0 auto 2rem;
}

.ce-hero-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* Content sections — banded backgrounds so "Latest Builds" / "From the Quest
   Log" / etc. read as distinct blocks instead of one undifferentiated page. */
.ce-section {
	padding: 3rem 0;
	border-top: 1px solid var(--ce-stone);
}

.ce-section--tint {
	background: var(--ce-surface);
}

/* Archive/taxonomy intro header — same banded treatment as .ce-section. */
.archive-description {
	background: var(--ce-surface);
	border-bottom: 2px solid var(--ce-stone);
	padding: 3rem 1.5rem;
	margin-bottom: 2rem;
}

.archive-description .archive-title {
	margin-bottom: .5rem;
}

/* Bottom breathing room for custom archive/loop templates so an empty state
   ("No builds yet…") doesn't butt straight up against the footer. */
.ce-archive-body {
	padding-bottom: 3rem;
}

/* Category filter pills — Loadout archive + its per-category pages. */
.ce-pill-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 2rem;
}

.ce-pill {
	font-family: var(--ce-font-heading);
	font-weight: 600;
	font-size: .9rem;
	color: var(--ce-text-muted);
	background: var(--ce-surface);
	border: 1px solid var(--ce-stone);
	border-radius: 999px;
	padding: .5em 1.1em;
}

.ce-pill:hover {
	color: var(--ce-cyan);
	border-color: var(--ce-cyan);
}

.ce-pill--active {
	color: var(--ce-void);
	background: var(--ce-purple);
	border-color: var(--ce-purple);
	box-shadow: var(--ce-glow-purple);
}

.ce-pill--active:hover {
	color: var(--ce-void);
}

/* Placeholder shown on a card when a Build/Gear item has no featured image,
   so the card keeps a visual anchor instead of an empty gap above the title. */
.ce-card-thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	background: var(--ce-surface-raised);
	color: var(--ce-stone);
	font-size: 2rem;
}

/* =============================================================
   SIDEBAR / WIDGETS — Genesis's default content-sidebar-wrap loop
   (single post, single Build/Gear, search, 404) ships widget markup
   with zero theme styling: raw browser-default search input, unstyled
   widget titles, no card treatment to match `.entry`.
   ============================================================= */
.sidebar-primary {
	margin-top: 2rem;
}

.widget {
	background: var(--ce-surface);
	border: 1px solid var(--ce-stone);
	border-radius: var(--ce-radius);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.widget ul,
.widget ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li {
	margin-bottom: .5rem;
}

.wp-block-search__input {
	background: var(--ce-void);
	border: 1px solid var(--ce-stone);
	color: var(--ce-text);
	border-radius: var(--ce-radius);
	padding: .6em 1em;
}

.wp-block-search__input::placeholder {
	color: var(--ce-text-muted);
}

.wp-block-search__inside-wrapper {
	display: flex;
	gap: .5rem;
}

/* Core block-library CSS ships its own (higher-specificity) dark-gray button
   for the search block — match its selector weight to actually override it. */
.wp-block-search__button-outside .wp-block-search__button {
	background: var(--ce-purple);
	color: var(--ce-void);
	border-radius: var(--ce-radius);
	box-shadow: none;
}

.wp-block-search__button-outside .wp-block-search__button:hover {
	background: var(--ce-cyan);
}

/* Stat / chaos-rating badge — "+5 FOCUS" style */
.ce-badge {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-family: var(--ce-font-stat);
	font-size: 1.5rem;
	color: var(--ce-gold);
	background: var(--ce-surface-raised);
	border: 1px solid var(--ce-stone);
	border-radius: 6px;
	padding: .25em .75em;
}

.ce-badge--green { color: var(--ce-green); }
.ce-badge--cyan { color: var(--ce-cyan); }

/* Inside a card, the badge is the last element (no price/Shop-This button
   anymore) — it needs its own line below the title, not trailing space
   after it, so this separates from the title above rather than pushing
   the card's bottom padding out. */
.ce-card > .ce-badge {
	display: flex;
	margin-top: .25rem;
}

/* Chaos rating (difficulty) dice pips */
.ce-chaos-rating {
	font-family: var(--ce-font-heading);
	color: var(--ce-text-muted);
	font-size: .9rem;
}

.ce-chaos-rating .ce-die {
	color: var(--ce-stone);
}

.ce-chaos-rating .ce-die--filled {
	color: var(--ce-purple);
	text-shadow: var(--ce-glow-purple);
}

/* Card grid — projects / reviews. Plain PHP-rendered markup (front-page.php,
   archive-ce_build.php), not a Gutenberg block, so no layout-wrapping quirks. */
.ce-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

.ce-card-title {
	font-family: var(--ce-font-heading);
	font-size: 1.15rem;
	margin: .75rem 0 .5rem;
}

.ce-card-thumb {
	border-radius: var(--ce-radius);
	overflow: hidden;
	border: 1px solid var(--ce-stone);
}

/* VS duel comparison — a core wp:columns block, so responsive stacking is free */
.ce-vs {
	background: var(--ce-surface);
	border: 1px solid var(--ce-stone);
	border-radius: var(--ce-radius);
	padding: 2rem;
	text-align: center;
	align-items: center;
}

.ce-vs-divider {
	font-family: var(--ce-font-display);
	color: var(--ce-gold);
	font-size: 1.5rem;
	text-shadow: 0 0 8px rgba(245, 197, 66, .5);
}

.ce-vs-price {
	font-family: var(--ce-font-stat);
	font-size: 2rem;
	color: var(--ce-green);
}

/* Guild CTA (newsletter / discord) */
.ce-guild-cta {
	background: var(--ce-surface-raised);
	border: 2px dashed var(--ce-purple);
	border-radius: var(--ce-radius);
	padding: 2.5rem;
	text-align: center;
}

/* Merch grid */
.ce-merch-item {
	text-align: center;
}

.ce-merch-price {
	font-family: var(--ce-font-stat);
	color: var(--ce-gold);
	font-size: 1.5rem;
}

.ce-section-intro {
	color: var(--ce-text-muted);
	max-width: 40em;
}

/* Now page */
.ce-now-updated {
	font-family: var(--ce-font-stat);
	color: var(--ce-gold);
	font-size: 1.1rem;
}

/* Grimoire — public diary timeline */
.ce-diary-feed {
	position: relative;
	margin: 1.5rem 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--ce-stone);
}

.ce-diary-entry {
	position: relative;
	margin-bottom: 2rem;
}

.ce-diary-entry::before {
	content: "";
	position: absolute;
	left: -1.95rem;
	top: .4rem;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ce-purple);
	box-shadow: var(--ce-glow-purple);
}

.ce-diary-date {
	display: block;
	font-family: var(--ce-font-stat);
	color: var(--ce-gold);
	font-size: 1.1rem;
	margin-bottom: .25rem;
}

.ce-diary-title {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
}

.ce-diary-body p {
	color: var(--ce-text-muted);
	margin: 0;
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
	background: var(--ce-void);
	border-top: 2px solid var(--ce-stone);
	color: var(--ce-text-muted);
	font-size: .875rem;
}

.site-footer a {
	color: var(--ce-purple);
}

.ce-footer-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
	padding: 3rem 0 2rem;
}

.ce-footer-col h3 {
	font-family: var(--ce-font-heading);
	color: var(--ce-text);
	font-size: 1rem;
	margin-bottom: .75rem;
}

.ce-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ce-footer-col li {
	margin-bottom: .4rem;
}

.ce-footer-social {
	display: flex;
	gap: 1rem;
	margin-top: .75rem;
	flex-wrap: wrap;
}

.ce-footer-credits {
	border-top: 1px solid var(--ce-stone);
	padding: 1.25rem 0;
	font-size: .8rem;
}

.ce-footer-credits p {
	margin: 0;
}

/* =============================================================
   RESPONSIVE MENU
   ============================================================= */
.menu-toggle {
	display: none;
	background: var(--ce-purple);
	color: var(--ce-void);
	border: none;
	border-radius: var(--ce-radius);
	padding: .6em 1em;
	font-family: var(--ce-font-heading);
	font-weight: 700;
}

@media (max-width: 859px) {
	.js .menu-toggle {
		display: inline-block;
	}

	.js .genesis-nav-menu {
		display: none;
	}

	.js .genesis-nav-menu.toggled {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: .25rem;
	}

	.js .genesis-nav-menu .sub-menu {
		position: static;
		border: none;
		padding: 0 0 0 1rem;
	}
}