/*
Theme Name: CritPixel
Author: Jenish
Description: A dark, neon-accented block theme for gaming blogs. Featured-story hero, card grids, platform chips, a game review scorecard pattern and a newsletter call-to-action. Fully editable in the Site Editor.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.9.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: critpixel
Tags: blog, news, entertainment, dark, block-patterns, full-site-editing, wide-blocks, featured-images, grid-layout, editor-style
*/

/* ---------- Global polish ---------- */

/* Long words and web addresses wrap instead of pushing the page sideways on phones. */
.wp-block-post-content :where(p, li, td, th, h2, h3, h4) {
	overflow-wrap: anywhere;
}

/*
 * Backup fonts sized to match Chakra Petch and Inter, so text doesn't jump
 * when the real fonts finish loading on a slow connection (layout shift / CLS).
 * Values were measured against Arial; devices without Arial skip these.
 */
@font-face {
	font-family: "Chakra Petch Fallback";
	src: local("Arial");
	font-weight: 400;
	size-adjust: 102%;
	ascent-override: 97%;
	descent-override: 30.4%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Chakra Petch Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 500 900;
	size-adjust: 97.9%;
	ascent-override: 101.1%;
	descent-override: 31.7%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Inter Fallback";
	src: local("Arial");
	font-weight: 100 500;
	size-adjust: 107.1%;
	ascent-override: 90.6%;
	descent-override: 22.4%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Inter Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 900;
	size-adjust: 102.3%;
	ascent-override: 94.8%;
	descent-override: 23.5%;
	line-gap-override: 0%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image:
		radial-gradient(60rem 30rem at 85% -10%, rgba(106, 61, 240, 0.12), transparent 60%),
		radial-gradient(50rem 25rem at -10% 10%, rgba(0, 168, 118, 0.1), transparent 60%);
	background-repeat: no-repeat;
}

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

:where(a, button, input, textarea, select, summary, .wp-block-search__button):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Visible to search engines and screen readers only (the home page H1). */
.respawn-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px !important;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Header ---------- */

/* The template-part wrapper is what sits in the page flow, so it is the element that sticks. */
.wp-block-template-part:has(> .respawn-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .wp-block-template-part:has(> .respawn-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* The blur lives on a pseudo-element: backdrop-filter on the header itself would make it the containing
   block for the fixed mobile menu overlay, clipping the open menu to the header's height. */
.respawn-header {
	position: relative;
	isolation: isolate;
}

.respawn-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background: rgba(255, 255, 255, 0.88);
}

/* On phones the header wraps to two rows (about 150px), too much to keep pinned while reading.
   It stays relative with a z-index, or the page below would paint over the open mobile menu. */
@media (max-width: 599px) {
	.wp-block-template-part:has(> .respawn-header) {
		position: relative;
	}
}

/* Mobile menu overlay: full-width, left-aligned links with dividers. */
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: stretch;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding: 56px 24px 24px;
}

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

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	text-align: left;
	font-size: 1.35rem;
	padding: 1rem 0.25rem;
}

@media (max-width: 899px) {
	/* Phones and tablets: logo and menu on one row, search full width below (instead of three rows). */
	.respawn-header > .alignwide > .wp-block-group:last-child {
		display: contents;
	}

	.respawn-header .wp-block-search {
		flex-basis: 100%;
	}
}

/* Comfortable tap targets: the menu icons are 24px, the nav links only as tall as their text. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	align-items: center;
}

.respawn-header .wp-block-navigation-item__content {
	padding-block: 0.5rem;
}

.respawn-header .wp-block-search__input {
	min-width: 11rem;
}

/* Search fields: keep the "button inside" wrapper dark instead of the default white. */
.wp-block-search__inside-wrapper,
.wp-block-search__input {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--line);
	border-radius: 0.6rem;
}

/* Button beside the field (404 and search pages): no shared dark panel, violet button. */
.wp-block-search__button-outside .wp-block-search__inside-wrapper {
	background: transparent;
}

/* Let the field shrink, or field + button overflow 360px phones. */
.wp-block-search__button-outside .wp-block-search__input {
	min-width: 0;
	width: 100%;
}

.wp-block-search__button-outside .wp-block-search__button {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: 0;
	border-radius: 0.6rem;
}

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

/* ---------- Forms (comments) ---------- */

:where(.wp-block-post-comments-form) :where(input:not([type="submit"]):not([type="checkbox"]), textarea) {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.6rem;
	padding: 0.7rem 0.9rem;
}

:where(.wp-block-post-comments-form) :where(input, textarea):focus {
	border-color: var(--wp--preset--color--primary);
}

/* ---------- "Up next" list in the hero ---------- */

.respawn-upnext .wp-block-post-featured-image {
	flex: 0 0 92px;
	width: 92px;
}

.respawn-upnext .wp-block-post-featured-image img {
	width: 92px;
	height: 92px;
	object-fit: cover;
	/* Square crop of the 16:9 cover: show the topic icon on the right, not half of the headline. */
	object-position: 100% 50%;
}

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

.wp-block-categories-list {
	list-style: none;
	padding-left: 0;
	columns: 2;
	column-gap: 1.5rem;
}

.wp-block-categories-list li {
	margin-bottom: 0.35rem;
}

.wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.wp-block-tag-cloud a {
	margin: 0 !important;
	padding: 0.2rem 0.65rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--muted);
	font-size: 0.8rem !important;
	text-decoration: none;
}

.wp-block-tag-cloud a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* ---------- Cards ---------- */

.is-style-respawn-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	overflow: hidden;
}

.is-style-respawn-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 12px 32px -12px rgba(106, 61, 240, 0.35);
}

/* "Up next" head: title, Up / Next pager (shown by upnext.js) and a See all link. */
.respawn-upnext-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}

.respawn-upnext-title {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.respawn-upnext-controls {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.respawn-upnext-controls[hidden] {
	display: none;
}

.respawn-pager,
.respawn-see-all {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 36px;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.respawn-pager:hover:not(:disabled),
.respawn-see-all:hover,
.respawn-see-all:focus-visible {
	background: var(--wp--preset--color--accent);
	color: #fff;
	text-decoration: none;
}

.respawn-see-all {
	background: var(--wp--preset--color--accent);
	color: #fff;
}

.respawn-pager:disabled {
	opacity: 0.35;
	cursor: default;
}

.respawn-page {
	min-width: 2.6rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.wp-block-post-template > li[hidden] {
	display: none !important;
}

/* Phones: thumb scrolling beats small buttons, so show the first three stories and only "See all". */
@media (max-width: 781px) {
	.respawn-upnext-controls {
		display: none !important;
	}

	.respawn-upnext-head ~ .wp-block-query .wp-block-post-template > li:nth-child(-n+3) {
		display: list-item !important;
	}

	.respawn-upnext-head ~ .wp-block-query .wp-block-post-template > li:nth-child(n+4) {
		display: none !important;
	}
}

/* The whole card is clickable: the title link stretches over it. Category chips stay separately clickable. */
.is-style-respawn-card {
	position: relative;
}

.is-style-respawn-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.is-style-respawn-card .is-style-respawn-chips {
	position: relative;
	z-index: 2;
}

.is-style-respawn-card:focus-within {
	border-color: var(--wp--preset--color--primary) !important;
}

.is-style-respawn-card .wp-block-post-featured-image {
	overflow: hidden;
}

.is-style-respawn-card .wp-block-post-featured-image img {
	transition: transform 0.4s ease;
}

.is-style-respawn-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* Make each grid card stretch to equal height. */
.wp-block-post-template.is-layout-grid > li {
	display: flex;
}

.wp-block-post-template.is-layout-grid > li > .is-style-respawn-card {
	flex: 1;
}

/* ---------- Category chips ---------- */

.is-style-respawn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.is-style-respawn-chips a {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	border: 1px solid rgba(0, 122, 85, 0.35);
	border-radius: 999px;
	background: rgba(0, 122, 85, 0.08);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.is-style-respawn-chips a:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* The separator would otherwise render as stray text between chips. */
.is-style-respawn-chips .wp-block-post-terms__separator {
	display: none;
}

/* ---------- Hero ---------- */

.respawn-hero .wp-block-cover__background {
	/* Solid violet behind the title on the left, fading out over the cover's icon on the right. */
	background: linear-gradient(90deg, rgb(45, 20, 120) 0%, rgb(45, 20, 120) 52%, rgba(45, 20, 120, 0.5) 80%, rgba(45, 20, 120, 0.25) 100%) !important;
	opacity: 1 !important;
}

/* The hero box is narrower than the 16:9 cover art, so the sides get cropped; anchoring to the right
   keeps the cover's topic icon in view (its headline sits under the overlay on the left). */
.respawn-hero .wp-block-cover__image-background {
	object-position: 100% 50%;
}


.respawn-hero .wp-block-post-title a {
	text-decoration: none;
}

/* A white button stands out on the violet overlay; violet on white meets WCAG AA (5.9:1). */
.respawn-hero .wp-block-read-more {
	background: #fff !important;
	color: var(--wp--preset--color--primary) !important;
}

/* The hero lays a violet overlay over the bright cover art, so its text and chips are white. */
.respawn-hero,
.respawn-hero .wp-block-post-title a,
.respawn-hero .wp-block-post-excerpt {
	color: #fff !important;
}

.respawn-hero .is-style-respawn-chips a {
	border-color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

/* ---------- Buttons ---------- */

.wp-block-button.is-style-respawn-neon .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--accent);
	border: 2px solid var(--wp--preset--color--accent);
	box-shadow: 0 0 14px rgba(0, 168, 118, 0.25), inset 0 0 10px rgba(0, 168, 118, 0.1);
}

.wp-block-button.is-style-respawn-neon .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* ---------- Review scorecard ---------- */

.respawn-score {
	display: grid;
	place-items: center;
	width: 7.5rem;
	height: 7.5rem;
	margin-inline: auto;
	border-radius: 50%;
	background:
		radial-gradient(closest-side, var(--wp--preset--color--surface) 78%, transparent 80% 100%),
		conic-gradient(var(--wp--preset--color--accent) 0 var(--respawn-score, 85%), rgba(21, 26, 48, 0.08) 0);
	box-shadow: 0 0 28px rgba(0, 168, 118, 0.2);
}

.respawn-score p {
	margin: 0;
}

.respawn-score-50 { --respawn-score: 50%; }
.respawn-score-60 { --respawn-score: 60%; }
.respawn-score-70 { --respawn-score: 70%; }
.respawn-score-80 { --respawn-score: 80%; }
.respawn-score-90 { --respawn-score: 90%; }
.respawn-score-100 { --respawn-score: 100%; }

.respawn-pros li::marker {
	content: "+  ";
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

.respawn-cons li::marker {
	content: "−  ";
	color: var(--wp--preset--color--hot);
	font-weight: 700;
}

/* ---------- Single post ---------- */

/* Drop cap on the opening paragraph; if a post starts with a note box, it goes on the paragraph after it. */
.respawn-article .wp-block-post-content > p:first-child:not(.has-background)::first-letter,
.respawn-article .wp-block-post-content > p.has-background:first-child + p::first-letter {
	float: left;
	margin: 0.1em 0.12em 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.6em;
	font-weight: 700;
	line-height: 0.8;
	color: var(--wp--preset--color--accent);
}

.wp-block-post-content :where(h2, h3) {
	scroll-margin-top: 6rem;
}

/* ---------- Pagination ---------- */

.wp-block-query-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.5rem;
	text-decoration: none;
}

/* ---------- Tables and note boxes in posts ---------- */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

/* Phones: size columns to their content and keep a wide table scrolling inside its box, not the page. */
@media (max-width: 599px) {
	.wp-block-table table.has-fixed-layout {
		table-layout: auto;
	}

	.wp-block-table table th,
	.wp-block-table table td {
		padding: 0.5rem 0.6rem;
		hyphens: auto;
	}
}

/* Specific enough to beat core's ".wp-block-table td" border (which uses the text colour). */
.wp-block-table table th,
.wp-block-table table td {
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	text-align: left;
}

.wp-block-table table th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: 0.03em;
}

.wp-block-table table thead {
	border-bottom: 2px solid var(--wp--preset--color--accent);
}

/* Unfinished parts the author must replace before publishing: deliberately loud. */
.respawn-todo {
	padding: 0.9rem 1.2rem;
	border: 2px dashed var(--wp--preset--color--hot);
	border-radius: 0.5rem;
	background: rgba(216, 27, 85, 0.08);
}

.wp-block-post-content p.has-background {
	padding: 0.9rem 1.2rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0.5rem;
}

/* Explanation graphics inside articles (figure lines in content/posts). */
.wp-block-post-content .critpixel-figure {
	margin-block: var(--wp--preset--spacing--40, 2rem);
}

.wp-block-post-content .critpixel-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9; /* graphics are 1600 × 900: reserve the space before they load */
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.75rem;
}

.wp-block-post-content .critpixel-figure figcaption {
	margin-top: 0.6rem;
	text-align: center;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}