/*
Theme Name: GamePulse
Theme URI: https://example.com/gamepulse
Author: GamePulse
Description: A bright, energetic theme for online game news, reviews and patch notes. The header and footer are PHP so updates always land; the body of every page is block content, built in the editor.
Version: 4.8.0
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gamepulse
Tags: blog, news, block-patterns, one-column, two-columns, right-sidebar, custom-colors, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Tokens

   Colours come from theme.json as --wp--preset--color--*, which means the
   same values reach the block editor's palette. The Customizer overrides
   those properties, so there is one source of truth and no drift. Only the
   sizes below are the theme's own.
   ========================================================================== */

:root {
	--gp-wrap: 1200px;
	--gp-wrap-narrow: 760px;
	--gp-radius: 16px;
	--gp-radius-sm: max(4px, calc(var(--gp-radius) * 0.45));
	--gp-radius-pill: 999px;
	--gp-brand-icon: 36px;

	--gp-gap: clamp(1rem, 2.4vw, 1.75rem);
	--gp-section-y: clamp(2.5rem, 6vw, 4.5rem);
	--gp-ease: cubic-bezier(.2, .7, .3, 1);
	--gp-dur: .28s;

	--gp-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 12px 32px -12px rgba(0, 0, 0, .55);
	--gp-shadow-lift: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px -16px rgba(0, 0, 0, .65);

	color-scheme: dark;
}

/* Light scheme. Only the six neutrals are redefined, so a brand colour
   changed in the Customizer still applies in both. */
:root[data-theme="light"] {
	--wp--preset--color--background: #f6f5ff;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--surface-2: #ecebff;
	--wp--preset--color--text: #16142b;
	--wp--preset--color--muted: #5b5a7d;
	--wp--preset--color--border: #dedcf5;
	--gp-shadow: 0 1px 2px rgba(24, 20, 60, .06), 0 12px 30px -14px rgba(24, 20, 60, .28);
	--gp-shadow-lift: 0 2px 6px rgba(24, 20, 60, .1), 0 26px 50px -18px rgba(24, 20, 60, .34);
	color-scheme: light;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	background: var(--gp-body-bg, var(--wp--preset--color--background));
	background-attachment: fixed;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* One soft aurora behind everything. Static — the only moving gradient is in
   the hero, so the whole page does not shimmer. */
body::before {
	content: "";
	position: fixed;
	inset: -20vh -10vw auto;
	height: 70vh;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(48% 60% at 18% 0%, color-mix(in srgb, var(--wp--preset--color--primary) 28%, transparent), transparent 70%),
		radial-gradient(42% 55% at 82% 6%, color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent), transparent 70%);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--wp--preset--color--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .22em; }

img, video, iframe, embed, object { max-width: 100%; height: auto; }
img { display: block; }
figure { margin: 0 0 1.5em; }
ul, ol { padding-left: 1.35em; }

code, pre, kbd {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .92em;
}

code {
	background: var(--wp--preset--color--surface-2);
	border-radius: var(--gp-radius-sm);
	padding: .15em .45em;
}

pre {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--gp-radius);
	padding: 1.15rem 1.25rem;
	overflow-x: auto;
}
pre code { background: none; padding: 0; }

blockquote {
	margin: 1.75rem 0;
	padding: .25rem 0 .25rem 1.35rem;
	border-left: 4px solid var(--wp--preset--color--highlight);
	color: var(--wp--preset--color--muted);
}

hr { border: 0; height: 1px; background: var(--wp--preset--color--border); margin: 2.5rem 0; }

table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
th, td { border: 1px solid var(--wp--preset--color--border); padding: .6rem .8rem; text-align: left; }
th { background: var(--wp--preset--color--surface-2); font-family: var(--wp--preset--font-family--heading); }

:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: var(--gp-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 999;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	padding: .7rem 1.15rem;
	border-radius: var(--gp-radius-sm);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	transition: top var(--gp-dur) var(--gp-ease);
}
.skip-link:focus { top: 1rem; text-decoration: none; }

/* ==========================================================================
   3. Layout
   ========================================================================== */

.gp-wrap { width: min(100% - 2.5rem, var(--gp-wrap)); margin-inline: auto; }
.gp-wrap--narrow { width: min(100% - 2.5rem, var(--gp-wrap-narrow)); }

.gp-section { padding-block: var(--gp-section-y); }
.gp-page-content { padding-block: clamp(2rem, 5vw, 3.5rem); }

/* The homepage body in a panel, matching the cards. Switched off in the
   Customizer for a body that sits directly on the page. */
.gp-page-content--framed .gp-content {
	padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--gp-radius);
}

.gp-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: calc(var(--gp-gap) * 1.1);
}
.gp-section-head h2 { margin: 0; }

.gp-more {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: .95rem;
	color: var(--wp--preset--color--accent);
	white-space: nowrap;
}

.gp-layout { display: grid; gap: calc(var(--gp-gap) * 1.5); align-items: start; }
.gp-layout--sidebar { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1000px) {
	.gp-layout--sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
	.gp-no-sidebar .gp-layout--sidebar { grid-template-columns: minmax(0, 1fr); }
}

/* The gradient tick above a section title. Also offered to Heading blocks in
   the editor as a named style. */
.gp-section-title::before,
.is-style-gp-section-title::before {
	content: "";
	display: block;
	width: 46px;
	height: 4px;
	margin-bottom: .6rem;
	border-radius: var(--gp-radius-pill);
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--highlight));
}

/* ==========================================================================
   4. Buttons, chips, badges
   ========================================================================== */

.gp-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .85rem 1.5rem;
	border: 0;
	border-radius: var(--gp-radius-pill);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--gp-dur) var(--gp-ease),
	            box-shadow var(--gp-dur) var(--gp-ease),
	            color var(--gp-dur) var(--gp-ease);
}
.gp-btn:hover { text-decoration: none; transform: translateY(-2px); }

/*
 * --gp-btn-bg and --gp-btn-fg are set inline on a header button when its own
 * colours are chosen. Everything falls back to the palette, and because the
 * override is a custom property rather than an inline background, hover still
 * works.
 */
.gp-btn--primary {
	background: var(--gp-btn-bg, var(--wp--preset--gradient--primary-highlight));
	color: var(--gp-btn-fg, var(--wp--preset--color--on-primary));
	box-shadow: 0 10px 26px -12px var(--gp-btn-glow, color-mix(in srgb, var(--wp--preset--color--primary) 90%, transparent));
}
.gp-btn--primary:hover {
	box-shadow: 0 16px 34px -12px var(--gp-btn-glow, color-mix(in srgb, var(--wp--preset--color--highlight) 85%, transparent));
}

.gp-btn--ghost {
	background: transparent;
	color: var(--gp-btn-fg, var(--wp--preset--color--text));
	box-shadow: inset 0 0 0 2px var(--gp-btn-bg, color-mix(in srgb, var(--wp--preset--color--text) 28%, transparent));
}
.gp-btn--ghost:hover {
	box-shadow: inset 0 0 0 2px var(--gp-btn-bg, var(--wp--preset--color--accent));
	color: var(--gp-btn-fg, var(--wp--preset--color--accent));
}

.gp-btn--sm { padding: .6rem 1.05rem; font-size: .88rem; }

.gp-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .32rem .8rem;
	border: 0;
	border-radius: var(--gp-radius-pill);
	background: color-mix(in srgb, var(--wp--preset--color--highlight) 16%, transparent);
	color: var(--wp--preset--color--highlight);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: .74rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--gp-dur) var(--gp-ease), color var(--gp-dur) var(--gp-ease);
}
.gp-chip:hover {
	background: var(--wp--preset--color--highlight);
	color: var(--wp--preset--color--on-primary);
	text-decoration: none;
}

.gp-chip--accent {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
	color: var(--wp--preset--color--accent);
}
.gp-chip--accent:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

.gp-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .38rem .9rem;
	border-radius: var(--gp-radius-pill);
	background: color-mix(in srgb, var(--wp--preset--color--highlight) 14%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--highlight) 40%, transparent);
	color: var(--wp--preset--color--highlight);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.gp-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--highlight);
	animation: gp-pulse 2s var(--gp-ease) infinite;
}

@keyframes gp-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--highlight) 70%, transparent); }
	70%  { box-shadow: 0 0 0 9px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* Button looks for the block editor. Each yields to a colour chosen by hand,
   which arrives with .has-background. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) {
	background: var(--wp--preset--gradient--primary-highlight);
	color: var(--wp--preset--color--on-primary);
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background: transparent;
	color: var(--wp--preset--color--text);
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--text) 28%, transparent);
}
.wp-block-button.is-style-gp-accent > .wp-block-button__link:not(.has-background) {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}
.wp-block-button.is-style-gp-highlight > .wp-block-button__link:not(.has-background) {
	background: var(--wp--preset--color--highlight);
	color: var(--wp--preset--color--on-primary);
}
.wp-block-button.is-style-gp-ghost > .wp-block-button__link:not(.has-background) {
	background: transparent;
	color: var(--wp--preset--color--text);
	padding-inline: .5rem;
}
.wp-block-button.is-style-gp-ghost > .wp-block-button__link:not(.has-background):hover {
	color: var(--wp--preset--color--accent);
}

/* A Group block styled as one of the theme's cards. */
.is-style-gp-card-style {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--gp-radius);
	padding: clamp(1.25rem, 3vw, 2rem);
	box-shadow: var(--gp-shadow);
}

/* ==========================================================================
   5. Header
   ========================================================================== */

.gp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--gp-header-bg, color-mix(in srgb, var(--wp--preset--color--background) 88%, transparent));
	color: var(--gp-header-fg, var(--wp--preset--color--text));
	backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--gp-dur) var(--gp-ease), background-color var(--gp-dur) var(--gp-ease);
}
.gp-header.is-stuck {
	border-bottom-color: var(--wp--preset--color--border);
	background: var(--gp-header-bg, color-mix(in srgb, var(--wp--preset--color--background) 95%, transparent));
}

.admin-bar .gp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .gp-header { top: 46px; } }

.gp-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 72px;
	position: relative;
}

.gp-brand { display: flex; align-items: center; }

.gp-brand__link {
	display: flex;
	align-items: center;
	gap: .65rem;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}
.gp-brand__link:hover { text-decoration: none; }

.gp-brand__icon {
	width: var(--gp-brand-icon);
	height: var(--gp-brand-icon);
	object-fit: contain;
	flex-shrink: 0;
	border-radius: var(--gp-radius-sm);
}

.gp-brand__logo { max-height: 46px; width: auto; }
.gp-brand__names { display: grid; min-width: 0; }

.gp-brand__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: -.02em;
	line-height: 1.15;
	/* Solid first: the gradient below only takes over where clipping text
	   actually works, otherwise transparent text would erase the name. */
	color: var(--gp-header-fg, var(--wp--preset--color--text));
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.gp-brand__title {
		background: linear-gradient(100deg, var(--wp--preset--color--text), var(--wp--preset--color--accent));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.gp-brand__tagline {
	font-size: .78rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.25;
}

.gp-nav { margin-left: clamp(.75rem, 2vw, 1.75rem); }
.gp-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .2rem; }
.gp-nav li { position: relative; }

.gp-nav a {
	display: block;
	padding: .55rem .85rem;
	border-radius: var(--gp-radius-sm);
	color: var(--gp-nav-color, var(--gp-header-fg, var(--wp--preset--color--text)));
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	transition: color var(--gp-dur) var(--gp-ease), background-color var(--gp-dur) var(--gp-ease);
}
.gp-nav a:hover {
	color: var(--gp-nav-hover, var(--wp--preset--color--accent));
	background: var(--wp--preset--color--surface);
	text-decoration: none;
}

.gp-nav .current-menu-item > a,
.gp-nav .current_page_item > a,
.gp-nav .current-menu-ancestor > a { color: var(--gp-nav-active, var(--wp--preset--color--accent)); }

.gp-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: .4rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--gp-radius-sm);
	box-shadow: var(--gp-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--gp-dur) var(--gp-ease), transform var(--gp-dur) var(--gp-ease), visibility var(--gp-dur);
}
.gp-nav li:hover > .sub-menu,
.gp-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.gp-header__actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; }

.gp-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--gp-radius-sm);
	background: transparent;
	color: var(--gp-header-fg, var(--wp--preset--color--text));
	cursor: pointer;
	transition: border-color var(--gp-dur) var(--gp-ease), color var(--gp-dur) var(--gp-ease), background-color var(--gp-dur) var(--gp-ease);
}
.gp-icon-btn:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
}
.gp-icon-btn svg { width: 20px; height: 20px; }

.gp-theme-toggle .gp-icon-moon { display: none; }
:root[data-theme="light"] .gp-theme-toggle .gp-icon-moon { display: block; }
:root[data-theme="light"] .gp-theme-toggle .gp-icon-sun { display: none; }

.gp-theme-toggle__label { display: none; }
.gp-nav__tools { display: none; }
.gp-nav-toggle { display: none; }

.gp-header__cta { display: flex; align-items: center; gap: .5rem; margin-left: .35rem; }

/* Mobile: the row wraps, the partner buttons take their own full-width line,
   the menu becomes a panel and the light/dark control moves into it. */
@media (max-width: 899px) {
	.gp-nav-toggle { display: inline-grid; }

	.gp-header__inner {
		flex-wrap: wrap;
		min-height: 0;
		padding-block: .8rem;
		row-gap: .8rem;
	}

	.gp-brand { flex: 1; min-width: 0; }
	.gp-brand__title { font-size: 1.2rem; }

	.gp-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-left: 0;
		max-height: 72dvh;
		overflow-y: auto;
		padding: 1rem 1.25rem 2rem;
		background: var(--wp--preset--color--background);
		border-bottom: 1px solid var(--wp--preset--color--border);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--gp-dur) var(--gp-ease), transform var(--gp-dur) var(--gp-ease), visibility var(--gp-dur);
	}
	.gp-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

	.gp-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.gp-nav a { padding: .85rem .5rem; border-bottom: 1px solid var(--wp--preset--color--border); border-radius: 0; }

	.gp-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 1rem;
		background: transparent;
	}

	.gp-header__cta { order: 5; flex-basis: 100%; margin: 0; gap: .6rem; }
	.gp-header__cta .gp-btn { flex: 1; min-width: 0; justify-content: center; padding-block: .78rem; }

	.gp-header__actions .gp-theme-toggle { display: none; }

	.gp-nav__tools { display: block; margin-top: 1.1rem; }
	.gp-theme-toggle--nav {
		width: 100%;
		height: 46px;
		gap: .6rem;
		grid-auto-flow: column;
		justify-content: center;
	}
	.gp-theme-toggle__label {
		display: inline;
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 600;
		font-size: .92rem;
	}
}

/* Just above the breakpoint the header gets tight. Tighten the menu rather
   than dropping a button — a hidden button is an unreachable one. */
@media (min-width: 900px) and (max-width: 1120px) {
	.gp-nav { margin-left: .5rem; min-width: 0; }
	.gp-nav > ul { overflow-x: auto; scrollbar-width: none; }
	.gp-nav > ul::-webkit-scrollbar { display: none; }
	.gp-nav a { padding-inline: .55rem; font-size: .9rem; }
	.gp-btn--sm { padding: .55rem .85rem; font-size: .84rem; }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.gp-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: calc(var(--gp-radius) * 1.5);
	margin-top: clamp(1.25rem, 3vw, 2.25rem);
	padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
	background: var(--gp-hero-bg, var(--wp--preset--color--surface));
	box-shadow: var(--gp-shadow);
}

/* The one ambient animation on the site. */
.gp-hero::before {
	content: "";
	position: absolute;
	inset: -40%;
	z-index: -1;
	opacity: .55;
	background:
		radial-gradient(38% 46% at 24% 32%, color-mix(in srgb, var(--wp--preset--color--primary) 72%, transparent), transparent 68%),
		radial-gradient(34% 42% at 74% 26%, color-mix(in srgb, var(--wp--preset--color--highlight) 58%, transparent), transparent 66%),
		radial-gradient(40% 48% at 58% 82%, color-mix(in srgb, var(--wp--preset--color--accent) 46%, transparent), transparent 70%);
	animation: gp-drift 22s var(--gp-ease) infinite alternate;
}

@keyframes gp-drift {
	from { transform: translate3d(-3%, -2%, 0) scale(1); }
	to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

/* Faint scanline grid — gaming-flavoured but quiet. */
.gp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(color-mix(in srgb, var(--wp--preset--color--text) 5%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--text) 5%, transparent) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}

.gp-hero__inner { max-width: 46rem; }
.gp-hero h1 { margin: 1rem 0 .65rem; font-size: clamp(2.2rem, 6vw, 4rem); }
.gp-hero__sub { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--wp--preset--color--muted); max-width: 38rem; }
.gp-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ==========================================================================
   7. Cards
   ========================================================================== */

.gp-grid {
	display: grid;
	gap: var(--gp-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.gp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--gp-radius);
	overflow: hidden;
	box-shadow: var(--gp-shadow);
	transition: transform var(--gp-dur) var(--gp-ease),
	            box-shadow var(--gp-dur) var(--gp-ease),
	            border-color var(--gp-dur) var(--gp-ease);
}
.gp-card:hover,
.gp-card:focus-within {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent);
	box-shadow: var(--gp-shadow-lift);
}

.gp-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--surface-2);
}
.gp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--gp-ease); }
.gp-card:hover .gp-card__media img { transform: scale(1.05); }

/* Posts with no featured image get the gradient rather than a hole. */
.gp-card__media--empty {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--wp--preset--color--primary) 40%, var(--wp--preset--color--surface)),
		color-mix(in srgb, var(--wp--preset--color--highlight) 30%, var(--wp--preset--color--surface)));
}

.gp-card__chips { position: absolute; top: .75rem; left: .75rem; display: flex; flex-wrap: wrap; gap: .35rem; z-index: 2; }
.gp-card__chips .gp-chip { background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(6px); color: #fff; }
.gp-card__chips .gp-chip:hover { background: var(--wp--preset--color--highlight); }

.gp-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.25rem 1.35rem; }

.gp-card__title { font-size: 1.12rem; line-height: 1.4; margin: 0 0 .55rem; }
.gp-card__title a { color: var(--wp--preset--color--text); text-decoration: none; }
.gp-card__title a:hover { color: var(--wp--preset--color--accent); text-decoration: none; }

/* The title link covers the card, so the whole card is clickable, while chips
   and the author link stay independently reachable. */
.gp-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.gp-card__excerpt { font-size: .93rem; color: var(--wp--preset--color--muted); margin: 0 0 1rem; }

.gp-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: auto;
	font-size: .82rem;
	color: var(--wp--preset--color--muted);
}
.gp-card__meta a { color: inherit; position: relative; z-index: 2; }
.gp-card__meta a:hover { color: var(--wp--preset--color--accent); }
.gp-sep { opacity: .5; }

.gp-avatar { border-radius: 50%; width: 24px; height: 24px; }
.gp-meta-author { display: inline-flex; align-items: center; gap: .4rem; }

.gp-card--feature .gp-card__media { aspect-ratio: 16 / 10; }
.gp-card--feature .gp-card__title { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
.gp-card--feature .gp-card__body { padding: 1.5rem 1.6rem 1.7rem; }

.gp-card--compact { flex-direction: row; align-items: stretch; box-shadow: none; }
.gp-card--compact .gp-card__media { flex: 0 0 96px; aspect-ratio: 1; }
.gp-card--compact .gp-card__body { padding: .8rem .95rem; }
.gp-card--compact .gp-card__title { font-size: .96rem; margin-bottom: .35rem; }

/* post_class() puts .sticky on the card element itself. */
.gp-card.sticky { border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent); }

/* ==========================================================================
   8. Archive header, breadcrumbs
   ========================================================================== */

.gp-page-head {
	padding-block: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 3vw, 2rem);
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin-bottom: var(--gp-section-y);
}
.gp-page-head h1 { margin-bottom: .3rem; }
.gp-page-head__desc { color: var(--wp--preset--color--muted); max-width: 44rem; margin: 0; }
.gp-page-head__count {
	display: inline-block;
	margin-top: .75rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: .82rem;
	letter-spacing: .06em;
	color: var(--wp--preset--color--muted);
}

.gp-breadcrumbs { font-size: .85rem; color: var(--wp--preset--color--muted); margin-bottom: .75rem; }
.gp-breadcrumbs a { color: inherit; }
.gp-breadcrumbs a:hover { color: var(--wp--preset--color--accent); }
.gp-breadcrumbs__sep { padding: 0 .4rem; opacity: .55; }

/* ==========================================================================
   9. Single post
   ========================================================================== */

.gp-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 200;
	pointer-events: none;
}
.gp-progress__bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg,
		var(--wp--preset--color--primary),
		var(--wp--preset--color--highlight),
		var(--wp--preset--color--accent));
	transition: width .1s linear;
}

.gp-single__head { padding-block: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 3vw, 2rem); }
.gp-single__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.gp-single__title { margin-bottom: .85rem; }

.gp-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	font-size: .9rem;
	color: var(--wp--preset--color--muted);
}
.gp-single__meta a { color: inherit; }

.gp-single__hero {
	margin-block: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--gp-radius);
	overflow: hidden;
	box-shadow: var(--gp-shadow);
}
.gp-single__hero img { width: 100%; }
.gp-single__hero figcaption {
	padding: .7rem 1rem;
	background: var(--wp--preset--color--surface);
	font-size: .84rem;
	color: var(--wp--preset--color--muted);
}

/* Article and page bodies. Block content lives here. */
.gp-content > * + * { margin-top: 1.15em; }
.gp-content h2 { margin-top: 2em; }
.gp-content h3 { margin-top: 1.6em; }
.gp-content img { border-radius: var(--gp-radius); }
.gp-content li + li { margin-top: .4em; }
.gp-content a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

.gp-content .alignwide { width: min(100vw - 2.5rem, var(--gp-wrap)); margin-inline: auto; }
.gp-content .alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.gp-content .aligncenter { margin-inline: auto; }

.gp-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2.5rem; }

.gp-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.75rem; }
.gp-share__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-right: .25rem;
}

.gp-author-box {
	display: flex;
	gap: 1.15rem;
	align-items: flex-start;
	margin-top: 2.5rem;
	padding: 1.4rem 1.5rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--gp-radius);
}
.gp-author-box img { border-radius: 50%; flex-shrink: 0; }
.gp-author-box h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.gp-author-box p { margin: 0; font-size: .92rem; color: var(--wp--preset--color--muted); }

.gp-post-nav { display: grid; gap: var(--gp-gap); margin-top: 2.5rem; }
@media (min-width: 700px) { .gp-post-nav { grid-template-columns: 1fr 1fr; } }

.gp-post-nav a {
	display: block;
	padding: 1.15rem 1.3rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--gp-radius);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: border-color var(--gp-dur) var(--gp-ease), transform var(--gp-dur) var(--gp-ease);
}
.gp-post-nav a:hover { border-color: var(--wp--preset--color--accent); transform: translateY(-2px); text-decoration: none; }
.gp-post-nav__label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: .35rem;
}
.gp-post-nav__title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; line-height: 1.4; }
.gp-post-nav--next { text-align: right; }

/* ==========================================================================
   10. Forms
   ========================================================================== */

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
textarea, select {
	width: 100%;
	padding: .75rem 1rem;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--gp-radius-sm);
	font-family: inherit;
	font-size: .97rem;
	transition: border-color var(--gp-dur) var(--gp-ease), box-shadow var(--gp-dur) var(--gp-ease);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
	outline: none;
}
::placeholder { color: var(--wp--preset--color--muted); opacity: 1; }

.gp-search-form { display: flex; gap: .5rem; }
.gp-search-form input[type="search"] { flex: 1; min-width: 0; }
.gp-search-form button {
	padding: .75rem 1.25rem;
	border: 0;
	border-radius: var(--gp-radius-pill);
	background: var(--wp--preset--gradient--primary-highlight);
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

/* ==========================================================================
   11. Sidebar and widgets
   ========================================================================== */

.gp-sidebar { display: grid; gap: var(--gp-gap); position: sticky; top: 92px; }

.gp-widget {
	padding: 1.3rem 1.4rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--gp-radius);
}

.gp-widget__title {
	font-size: 1rem;
	margin-bottom: 1rem;
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.gp-widget ul { list-style: none; margin: 0; padding: 0; }
.gp-widget li + li { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--wp--preset--color--border); }
.gp-widget a { color: var(--wp--preset--color--text); }
.gp-widget a:hover { color: var(--wp--preset--color--accent); }

@media (max-width: 999px) { .gp-sidebar { position: static; } }

/* ==========================================================================
   12. Pagination
   ========================================================================== */

.gp-pagination { margin-top: calc(var(--gp-gap) * 2); }
.gp-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }

.gp-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 .75rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--gp-radius-sm);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--gp-dur) var(--gp-ease), color var(--gp-dur) var(--gp-ease);
}
.gp-pagination .page-numbers:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); text-decoration: none; }
.gp-pagination .page-numbers.current {
	background: var(--wp--preset--gradient--primary-highlight);
	border-color: transparent;
	color: var(--wp--preset--color--on-primary);
}
.gp-pagination .page-numbers.dots { background: none; border-color: transparent; }

/* ==========================================================================
   13. Empty states and 404
   ========================================================================== */

.gp-empty {
	padding: clamp(2.5rem, 7vw, 4.5rem) 1.5rem;
	text-align: center;
	background: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--gp-radius);
}
.gp-empty__icon { font-size: 3rem; line-height: 1; margin-bottom: .75rem; }
.gp-empty p { color: var(--wp--preset--color--muted); max-width: 34rem; margin-inline: auto; }
.gp-empty .gp-search-form { max-width: 26rem; margin: 1.5rem auto 0; }

.gp-404__code {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(5rem, 20vw, 11rem);
	font-weight: 700;
	line-height: .9;
	margin: 0;
	background: linear-gradient(120deg,
		var(--wp--preset--color--primary),
		var(--wp--preset--color--highlight),
		var(--wp--preset--color--accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ==========================================================================
   14. Footer
   ========================================================================== */

.gp-footer {
	margin-top: var(--gp-section-y);
	padding-top: clamp(2.5rem, 6vw, 4rem);
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--gp-footer-bg, color-mix(in srgb, var(--wp--preset--color--surface) 45%, var(--wp--preset--color--background)));
}

.gp-footer__widgets {
	display: grid;
	gap: calc(var(--gp-gap) * 1.4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	padding-bottom: clamp(2rem, 5vw, 3rem);
}
.gp-footer .gp-widget { background: transparent; border: 0; padding: 0; }

.gp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.35rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: .88rem;
	color: var(--wp--preset--color--muted);
}
.gp-footer__bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0; padding: 0; }
.gp-footer__bottom a { color: inherit; }
.gp-footer__bottom a:hover { color: var(--wp--preset--color--accent); }

/* ==========================================================================
   15. Motion preferences

   Everything animated above is switched off here. The site must be fully
   usable and legible with zero motion.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.gp-card:hover { transform: none; }
	.gp-card:hover .gp-card__media img { transform: none; }
	.gp-btn:hover { transform: none; }
	.gp-post-nav a:hover { transform: none; }
	.gp-hero::before { animation: none; }
	.gp-badge__dot { animation: none; }
}

/* ==========================================================================
   16. WordPress core classes
   ========================================================================== */

.alignleft { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption { font-size: .86rem; color: var(--wp--preset--color--muted); }
.gallery { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.gallery-item { margin: 0; }
.gallery-item img { border-radius: var(--gp-radius-sm); width: 100%; }

@media print {
	.gp-header, .gp-footer, .gp-sidebar, .gp-progress,
	.gp-share, .gp-post-nav, .gp-hero { display: none !important; }
	body { background: #fff; color: #000; }
	body::before { display: none; }
}

/* Footer fallback columns: the logo sits above the editable blurb. */
.gp-footer__about .custom-logo-link { display: inline-block; margin-bottom: .75rem; }
.gp-footer__about .custom-logo { max-height: 44px; width: auto; }
.gp-footer__about-text {
	color: var(--wp--preset--color--muted);
	font-size: .9rem;
}
.gp-footer__about-text p { margin: 0 0 .6em; }
.gp-footer__about-text p:last-child { margin-bottom: 0; }

/* ==========================================================================
   17. Slider

   A scroll-snap track. The browser does the scrolling, the swiping and the
   momentum; script only adds the arrows and dots and keeps them in step. That
   means it still works — as a plain horizontal scroller — with JavaScript off.
   ========================================================================== */

.gp-slider { position: relative; }

.gp-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--gp-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--gp-radius);
}
.gp-slider__track::-webkit-scrollbar { display: none; }

.gp-slide {
	position: relative;
	scroll-snap-align: center;
	overflow: hidden;
	border-radius: var(--gp-radius);
	background: var(--wp--preset--color--surface);
	min-height: clamp(220px, 38vw, 460px);
}

.gp-slide__image { margin: 0; height: 100%; }
.gp-slide__image img {
	width: 100%;
	height: 100%;
	min-height: clamp(220px, 38vw, 460px);
	object-fit: cover;
}

/* Text sits over the image, on a gradient so it stays readable whatever the
   photograph is doing underneath. */
.gp-slide__body {
	position: absolute;
	inset: auto 0 0;
	padding: clamp(1.25rem, 4vw, 2.5rem);
	background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .35) 55%, transparent);
	color: #fff;
}
.gp-slide__body :where(h1, h2, h3, h4, p) { color: #fff; }
.gp-slide__body > :last-child { margin-bottom: 0; }

/* Arrows and dots, both created by main.js. */
.gp-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--background) 78%, transparent);
	backdrop-filter: blur(8px);
	color: var(--gp-header-fg, var(--wp--preset--color--text));
	cursor: pointer;
	transition: background-color var(--gp-dur) var(--gp-ease), color var(--gp-dur) var(--gp-ease);
}
.gp-slider__arrow:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }
.gp-slider__arrow[disabled] { opacity: .35; cursor: default; }
.gp-slider__arrow svg { width: 22px; height: 22px; }
.gp-slider__arrow--prev { left: .75rem; }
.gp-slider__arrow--next { right: .75rem; }

.gp-slider__dots {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: 1rem;
}
.gp-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--text) 28%, transparent);
	cursor: pointer;
	transition: background-color var(--gp-dur) var(--gp-ease), width var(--gp-dur) var(--gp-ease);
}
.gp-slider__dot[aria-current="true"] {
	width: 26px;
	border-radius: var(--gp-radius-pill);
	background: var(--wp--preset--color--accent);
}

/* Add gp-slider--auto in the block's Advanced > Additional CSS class to make
   it advance on its own. It pauses on hover, on focus, and off-screen. */

@media (max-width: 599px) {
	.gp-slider__arrow { display: none; }
}

/* ==========================================================================
   18. Pop-up
   ========================================================================== */

.gp-popup {
	position: fixed;
	z-index: 300;
	max-width: min(var(--gp-popup-width, 520px), calc(100vw - 2rem));
	height: var(--gp-popup-height, auto);
	max-height: calc(100dvh - 2rem);
	overflow: auto;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--gp-radius);
	background: var(--gp-popup-bg, var(--wp--preset--color--surface));
	color: var(--gp-popup-fg, var(--wp--preset--color--text));
	box-shadow: var(--gp-shadow-lift);
}

.gp-popup::backdrop { background: rgba(6, 6, 20, .68); backdrop-filter: blur(3px); }

/* Each position is a different set of insets; nothing else changes. */
.gp-popup--center { inset: 0; margin: auto; }

.gp-popup--bottom-right { inset: auto 1rem 1rem auto; margin: 0; }
.gp-popup--bottom-left { inset: auto auto 1rem 1rem; margin: 0; }

.gp-popup--bottom-bar,
.gp-popup--top-bar {
	max-width: none;
	width: 100%;
	left: 0;
	right: 0;
	margin: 0;
	border-radius: 0;
	border-inline: 0;
}
.gp-popup--bottom-bar { inset: auto 0 0; border-bottom: 0; }
.gp-popup--top-bar { inset: 0 0 auto; border-top: 0; }

.gp-popup__close {
	position: absolute;
	top: .6rem;
	right: .6rem;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	opacity: .7;
	cursor: pointer;
	transition: opacity var(--gp-dur) var(--gp-ease), background-color var(--gp-dur) var(--gp-ease);
}
.gp-popup__close:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.gp-popup__close svg { width: 20px; height: 20px; }

.gp-popup__body > :first-child { margin-top: 0; }
.gp-popup__body > :last-child { margin-bottom: 0; }
.gp-popup__body img { border-radius: var(--gp-radius-sm); }

/* A pop-up that does not cover the page still needs to sit above it. */
.gp-popup[data-modal="0"] { box-shadow: var(--gp-shadow-lift), 0 0 0 1px var(--wp--preset--color--border); }

@media (prefers-reduced-motion: no-preference) {
	.gp-popup[open] { animation: gp-popup-in .32s var(--gp-ease); }

	@keyframes gp-popup-in {
		from { opacity: 0; transform: translateY(12px); }
		to   { opacity: 1; transform: none; }
	}
}