/*
Theme Name:  GNClassroom Modern
Theme URI:   https://gnclassroom.com
Description: Modern minimalist child theme for GeneratePress — fluid typography, native dark mode, zero external dependencies.
Author:      GNClassroom
Template:    generatepress
Version:     1.0.0
Requires at least: 6.4
Tested up to: 6.8
License: GNU General Public License v2 or later
Text Domain: gnclassroom-modern
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Brand */
	--gn-brand: #0d9488;
	--gn-brand-strong: #0f766e;
	--gn-accent: #d97706;

	/* Warm editorial palette */
	--gn-bg: #ffffff;
	--gn-surface: #ffffff;
	--gn-alt: #faf9f6;
	--gn-text: #1d1c19;
	--gn-text-muted: #6e6a5f;
	--gn-border: #e7e4db;
	--gn-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 18px -8px rgb(0 0 0 / 0.08);

	/* Typography */
	--gn-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
	--gn-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Fluid type scale (min → max between 360px and 1200px viewports) */
	--gn-text-xs: clamp(0.75rem, 0.72rem + 0.16vw, 0.85rem);
	--gn-text-sm: clamp(0.875rem, 0.85rem + 0.18vw, 1rem);
	--gn-text-base: clamp(1rem, 0.97rem + 0.18vw, 1.125rem);
	--gn-text-lg: clamp(1.125rem, 1.06rem + 0.34vw, 1.35rem);
	--gn-text-xl: clamp(1.35rem, 1.22rem + 0.62vw, 1.8rem);
	--gn-text-2xl: clamp(1.65rem, 1.42rem + 1.1vw, 2.5rem);
	--gn-text-3xl: clamp(2.05rem, 1.68rem + 1.85vw, 3.5rem);

	/* Fluid spacing */
	--gn-space-xs: clamp(0.5rem, 0.47rem + 0.12vw, 0.65rem);
	--gn-space-sm: clamp(0.75rem, 0.68rem + 0.28vw, 1.1rem);
	--gn-space-md: clamp(1.25rem, 1.05rem + 0.7vw, 2rem);
	--gn-space-lg: clamp(2rem, 1.5rem + 1.9vw, 3.75rem);
	--gn-space-xl: clamp(3rem, 1.9rem + 4.2vw, 6.5rem);

	--gn-radius-sm: 8px;
	--gn-radius: 12px;
	--gn-radius-lg: 18px;
	--gn-ring: 0 0 0 3px color-mix(in srgb, var(--gn-brand) 35%, transparent);

	color-scheme: light;
}

/*
 * Map GeneratePress global colors onto our tokens. Our stylesheet loads after
 * GP's dynamic CSS (same :root specificity), so every GP rule — body, header,
 * nav, footer, search modal, hovers — automatically follows light/dark mode.
 */
:root {
	--contrast: var(--gn-text);
	--contrast-2: var(--gn-text-muted);
	--contrast-3: color-mix(in srgb, var(--gn-text-muted) 55%, var(--gn-border));
	--base: color-mix(in srgb, var(--gn-bg) 94%, var(--gn-text));
	--base-2: var(--gn-bg);
	--base-3: var(--gn-surface);
	--accent: var(--gn-brand);
	--accent-2: var(--gn-accent);
}

[data-theme="dark"] {
	--gn-bg: #141412;
	--gn-surface: #1d1c18;
	--gn-alt: #23221d;
	--gn-text: #ece9e2;
	--gn-text-muted: #a29e92;
	--gn-border: #302e27;
	--gn-brand: #2dd4bf;
	--gn-brand-strong: #5eead4;
	--gn-accent: #f5b557;
	--gn-shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 22px -10px rgb(0 0 0 / 0.6);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="dark"]) {
		--gn-bg: #141412;
		--gn-surface: #1d1c18;
		--gn-alt: #23221d;
		--gn-text: #ece9e2;
		--gn-text-muted: #a29e92;
		--gn-border: #302e27;
		--gn-brand: #2dd4bf;
		--gn-brand-strong: #5eead4;
		--gn-accent: #f5b557;
		--gn-shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 22px -10px rgb(0 0 0 / 0.6);
	}
}

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

body {
	background-color: var(--gn-bg);
	color: var(--gn-text);
	font-family: var(--gn-serif);
	font-size: var(--gn-text-base);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * GP's dynamic CSS emits font-family:"" (empty) on these elements when its
 * typography settings are blank — explicitly assign the intended family so
 * buttons/nav/widgets never fall into the empty-font trap.
 */
button:not(.gn-theme-toggle):not(.menu-toggle),
input[type="submit"],
.button,
.wp-block-button .wp-block-button__link,
a.wp-block-button__link,
.gb-button-wrapper a.gb-button,
.mc4wp-form input[type="submit"],
form.searchandfilter input[type="submit"] {
	font-family: var(--gn-sans) !important;
}

input:not([type="submit"]),
select,
textarea {
	font-family: var(--gn-sans);
}

.main-navigation a,
.menu-toggle {
	font-family: var(--gn-sans) !important;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.widget-title,
.gb-headline,
.wp-block-heading {
	font-family: var(--gn-serif);
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: var(--gn-text);
}

h1 { font-size: var(--gn-text-2xl); }
h2 { font-size: var(--gn-text-xl); }
h3 { font-size: var(--gn-text-lg); }
h4 { font-size: var(--gn-text-base); }

a {
	color: var(--gn-brand);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--gn-brand-strong);
	text-decoration-thickness: 2px;
}

::selection {
	background: color-mix(in srgb, var(--gn-brand) 80%, white);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--gn-brand);
	outline-offset: 3px;
	border-radius: 4px;
}

hr {
	border: 0;
	border-top: 1px solid var(--gn-border);
}

blockquote {
	border-left: 3px solid var(--gn-brand);
	background: var(--gn-surface);
	padding: var(--gn-space-sm) var(--gn-space-md);
	border-radius: 0 var(--gn-radius-sm) var(--gn-radius-sm) 0;
	font-size: var(--gn-text-lg);
}

code {
	background: color-mix(in srgb, var(--gn-text) 7%, transparent);
	padding: 0.15em 0.45em;
	border-radius: 6px;
	font-size: 0.88em;
}

pre {
	background: var(--gn-surface) !important;
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius-sm);
}

/* ==========================================================================
   3. GeneratePress chrome reskin
   ========================================================================== */

.site-header {
	background: var(--gn-surface);
	border-bottom: 1px solid var(--gn-border);
	box-shadow: none;
}

@supports (backdrop-filter: blur(12px)) {
	.site-header {
		background: color-mix(in srgb, var(--gn-surface) 82%, transparent);
		backdrop-filter: saturate(180%) blur(12px);
		-webkit-backdrop-filter: saturate(180%) blur(12px);
	}
}

.main-navigation,
.main-navigation ul ul {
	background: var(--gn-surface) !important;
	border-bottom: 1px solid var(--gn-border);
}

.main-navigation ul ul li a {
	background: var(--gn-surface);
	color: var(--gn-text) !important;
}

.main-navigation .main-nav ul li a,
.menu-toggle,
.main-navigation .mobile-bar-items a {
	color: var(--gn-text) !important;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.sfHover > a {
	color: var(--gn-brand) !important;
	background: transparent;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--gn-brand) !important;
	background: transparent !important;
	font-weight: 600;
}

.main-navigation ul ul li[class*="current-menu-"] > a {
	background: var(--gn-base, #f1f1f3) !important;
}

.site-logo img {
	border-radius: calc(var(--gn-radius-sm) / 2);
}

/* GP forces title/tagline colors via dynamic CSS — re-tokenize them */
.main-title a,
.site-description {
	color: var(--gn-text) !important;
}

.site-description {
	color: var(--gn-text-muted) !important;
}

/* Articles / boxed containers */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container .inside-article {
	background: var(--gn-surface);
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius-lg);
	box-shadow: var(--gn-shadow);
	padding: clamp(1.25rem, 1rem + 2.2vw, 3rem);
}

.entry-title {
	font-size: var(--gn-text-2xl);
}

.entry-title a {
	color: inherit;
	text-decoration: none;
}

.entry-title a:hover {
	color: var(--gn-brand);
}

.entry-meta {
	color: var(--gn-text-muted);
	font-size: var(--gn-text-sm);
}

.entry-header {
	margin-bottom: var(--gn-space-md);
}

.post-image-above-header .inside-article .featured-image {
	margin-bottom: var(--gn-space-md);
}

.wp-post-image {
	border-radius: var(--gn-radius);
}

.read-more,
.more-link {
	font-weight: 600;
}

/* Sidebar + widgets */
.widget-area .widget {
	background: var(--gn-surface);
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius-lg);
	padding: var(--gn-space-md);
	box-shadow: var(--gn-shadow);
}

.widget-title {
	font-size: var(--gn-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gn-text-muted);
	margin-bottom: var(--gn-space-sm);
}

/* Footer */
.site-footer,
.footer-widgets {
	background: var(--gn-surface);
	border-top: 1px solid var(--gn-border);
	color: var(--gn-text-muted);
	font-size: var(--gn-text-sm);
}

.footer-widgets .widget-title {
	color: var(--gn-text-muted);
}

.site-info {
	color: var(--gn-text-muted);
}

.site-footer a {
	color: var(--gn-text-muted);
}

.site-footer a:hover {
	color: var(--gn-brand);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	background: var(--gn-surface);
	color: var(--gn-text);
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius-sm);
	padding: 0.65em 0.9em;
	font-size: var(--gn-text-base);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--gn-brand);
	box-shadow: var(--gn-ring);
}

::placeholder {
	color: color-mix(in srgb, var(--gn-text-muted) 70%, transparent);
}

/* Buttons — !important intentionally overrides GP Customizer + core global styles.
   .menu-toggle is excluded so GP's responsive show/hide display logic stays intact. */
 button:not(.gn-theme-toggle):not(.menu-toggle),
 input[type="submit"],
 .button,
 .wp-block-button .wp-block-button__link,
 a.wp-block-button__link {
	display: inline-block;
	background: var(--gn-brand) !important;
	color: #fff !important;
	border: 0;
	border-radius: var(--gn-radius-sm);
	padding: 0.62em 1.5em;
	font-size: var(--gn-text-sm);
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

@media (prefers-reduced-motion: no-preference) {
	button:not(.gn-theme-toggle):not(.menu-toggle):hover,
	input[type="submit"]:hover,
	.button:hover,
	.wp-block-button__link:hover {
		transform: translateY(-1px);
		background-color: var(--gn-brand-strong) !important;
		box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--gn-brand) 55%, transparent);
	}

	button:not(.gn-theme-toggle):not(.menu-toggle):active,
	input[type="submit"]:active,
	.button:active,
	.wp-block-button__link:active {
		transform: translateY(0);
	}
}

/* Mobile menu toggle — colors only; GP controls its display responsively */
.menu-toggle {
	background: var(--gn-brand) !important;
	color: #fff !important;
	border: 0;
	border-radius: var(--gn-radius-sm);
	font-weight: 600;
}

.main-navigation.toggled .menu-toggle {
	background: transparent !important;
	color: var(--gn-text) !important;
}

/* Ghost button variant — use class "gn-btn-ghost" on the wp-block-button wrapper */
.gn-btn-ghost.wp-block-button .wp-block-button__link,
.gn-btn-ghost .wp-block-button__link {
	background: transparent !important;
	color: var(--gn-text) !important;
	border: 1.5px solid var(--gn-border);
	box-shadow: none;
}

.gn-btn-ghost.wp-block-button .wp-block-button__link:hover,
.gn-btn-ghost .wp-block-button__link:hover {
	border-color: var(--gn-brand);
	color: var(--gn-brand) !important;
	background: transparent !important;
	box-shadow: none;
}

/* ==========================================================================
   4. Dark mode toggle (floating action button)
   ========================================================================== */

.gn-theme-toggle {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--gn-border);
	background: color-mix(in srgb, var(--gn-surface) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--gn-text);
	cursor: pointer;
	box-shadow: var(--gn-shadow);
}

.gn-theme-toggle svg {
	width: 20px;
	height: 20px;
	stroke-width: 2;
	fill: none;
	stroke: currentColor;
}

.gn-theme-toggle .gn-icon-sun { display: none; }

[data-theme="dark"] .gn-theme-toggle .gn-icon-sun { display: block; }
[data-theme="dark"] .gn-theme-toggle .gn-icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="dark"]) .gn-theme-toggle .gn-icon-sun {
		display: block;
	}

	:root:not([data-theme="light"]):not([data-theme="dark"]) .gn-theme-toggle .gn-icon-moon {
		display: none;
	}
}

.gn-theme-toggle:hover {
	border-color: var(--gn-brand);
	color: var(--gn-brand);
}

@media print {
	.gn-theme-toggle,
	.site-header,
	.site-footer,
	#scroll-up {
		display: none !important;
	}
}

/* Smooth theme switch — armed by JS after first paint to avoid load flash */
html.gn-theme-ready body,
html.gn-theme-ready .site-header,
html.gn-theme-ready .site-footer,
html.gn-theme-ready .inside-article,
html.gn-theme-ready .comments-area,
html.gn-theme-ready .widget-area .widget,
html.gn-theme-ready input,
html.gn-theme-ready textarea,
html.gn-theme-ready select,
html.gn-theme-ready .wp-block-button__link {
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	html.gn-theme-ready body,
	html.gn-theme-ready .site-header,
	html.gn-theme-ready .site-footer,
	html.gn-theme-ready .inside-article,
	html.gn-theme-ready .comments-area,
	html.gn-theme-ready .widget-area .widget,
	html.gn-theme-ready input,
	html.gn-theme-ready textarea,
	html.gn-theme-ready select,
	html.gn-theme-ready .wp-block-button__link,
	button:not(.gn-theme-toggle),
	.button,
	.wp-block-button__link {
		transition: none !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ==========================================================================
   5. Pattern components
   ========================================================================== */

/* --- Shared section rhythm ---
   Sections own their centering (independent of WP layout quirks):
   full-bleed background, constrained 1200px content column. */
.gn-section {
	padding-block: var(--gn-space-xl);
}

.gn-hero > *,
.gn-section > * {
	max-width: var(--gn-wide, 1200px);
	margin-left: auto;
	margin-right: auto;
}

@supports (width: 1cqw) {
	:root { --gn-wide: 1200px; }
}

/* --- Hero --- */
.gn-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--gn-space-xl);
	border-bottom: 1px solid var(--gn-border);
	background: linear-gradient(180deg, var(--gn-alt), var(--gn-bg));
}

.gn-hero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--gn-brand), transparent);
	opacity: 0.5;
}

.gn-hero-title {
	font-size: var(--gn-text-3xl);
	max-width: 21ch;
	margin-inline: auto;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.gn-lede {
	font-size: var(--gn-text-lg);
	color: var(--gn-text-muted);
	max-width: 58ch;
	margin-inline: auto;
}

.gn-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	width: fit-content;
	margin-inline: auto;
	color: var(--gn-brand);
	font-family: var(--gn-sans);
	font-size: var(--gn-text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gn-eyebrow::before,
.gn-eyebrow::after {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--gn-border);
}

.gn-hero-stats {
	gap: var(--gn-space-md);
	margin-top: var(--gn-space-lg);
	text-align: center;
}

.gn-hero-stats .gn-stat-number {
	font-size: var(--gn-text-xl);
	font-weight: 700;
	color: var(--gn-brand);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.gn-hero-stats .gn-stat-label {
	font-size: var(--gn-text-sm);
	color: var(--gn-text-muted);
}

/* --- Card grid --- */
.gn-cards {
	gap: var(--gn-space-md) !important;
}

.gn-card {
	background: var(--gn-surface);
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius);
	padding: clamp(1.25rem, 1.1rem + 0.8vw, 2rem);
	box-shadow: var(--gn-shadow);
	height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.gn-card {
		transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.gn-card:hover {
		transform: translateY(-3px);
		border-color: color-mix(in srgb, var(--gn-brand) 40%, var(--gn-border));
	}
}

.gn-card h3 {
	margin: var(--gn-space-sm) 0 var(--gn-space-xs);
	font-family: var(--gn-serif);
}

.gn-card p {
	color: var(--gn-text-muted);
	font-size: var(--gn-text-sm);
	margin: 0;
}

.gn-card svg {
	width: 34px;
	height: 34px;
	padding: 7px;
	border-radius: 10px;
	box-sizing: content-box;
	background: color-mix(in srgb, var(--gn-brand) 10%, transparent);
	color: var(--gn-brand);
	stroke-width: 1.9;
	fill: none;
	stroke: currentColor;
}

/* --- CTA band --- */
.gn-cta-band {
	position: relative;
	overflow: hidden;
	border-radius: var(--gn-radius-lg);
	border: 1px solid color-mix(in srgb, var(--gn-brand) 35%, var(--gn-border));
	padding: clamp(2rem, 1.4rem + 3vw, 4.5rem);
	text-align: center;
	background:
		radial-gradient(80% 120% at 50% -20%, color-mix(in srgb, var(--gn-brand) 22%, transparent), transparent 75%),
		var(--gn-surface);
}

.gn-cta-band h2 {
	font-size: var(--gn-text-xl);
	max-width: 26ch;
	margin-inline: auto;
}

.gn-cta-band p {
	color: var(--gn-text-muted);
	max-width: 52ch;
	margin-inline: auto;
}

/* Editor preview niceties so patterns look right inside Gutenberg */
.editor-styles-wrapper .gn-hero-stats {
	gap: var(--gn-space-md);
}

/* ==========================================================================
   6. WP Show Posts → modern card grid
   ========================================================================== */

section.wp-show-posts {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: var(--gn-space-md);
	float: none;
	margin-left: auto !important;
	margin-right: auto !important;
}

.wp-show-posts-single {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.wp-show-posts-inner {
	background: var(--gn-surface);
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius);
	overflow: hidden;
	height: 100%;
	margin: 0 !important;
	box-shadow: var(--gn-shadow);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-show-posts-inner {
		transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.wp-show-posts-single:hover .wp-show-posts-inner {
		transform: translateY(-4px);
		border-color: color-mix(in srgb, var(--gn-brand) 45%, var(--gn-border));
	}

	.wp-show-posts-image img {
		transition: transform 0.35s ease;
	}

	.wp-show-posts-single:hover .wp-show-posts-image img {
		transform: scale(1.045);
	}
}

.wp-show-posts-image {
	margin: 0 !important;
}

.wp-show-posts-image a {
	display: block;
}

.wp-show-posts-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.wp-show-posts-entry-header {
	padding: var(--gn-space-sm) var(--gn-space-md) var(--gn-space-md);
}

.wp-show-posts-entry-title {
	font-size: var(--gn-text-lg);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.wp-show-posts-entry-title a {
	color: var(--gn-text);
	text-decoration: none;
}

.wp-show-posts-entry-title a:hover {
	color: var(--gn-brand);
}

.wp-show-posts-entry-summary,
.wp-show-posts-read-more {
	padding-inline: var(--gn-space-md);
}

.wp-show-posts-read-more {
	display: inline-block;
	padding-bottom: var(--gn-space-md);
	font-weight: 600;
}

.wp-show-posts-entry-meta,
.wp-show-posts-posted-on {
	padding-inline: var(--gn-space-md);
	color: var(--gn-text-muted);
	font-size: var(--gn-text-xs);
}

/* ==========================================================================
   7. GenerateBlocks legacy-color overrides (teal era → design tokens)
   ========================================================================== */

.gb-button-wrapper a.gb-button {
	background-color: var(--gn-brand) !important;
	color: #fff !important;
	border-radius: 999px !important;
	text-decoration: none;
}

.gb-button-wrapper a.gb-button:hover,
.gb-button-wrapper a.gb-button:focus {
	background-color: var(--gn-brand-strong) !important;
	color: #fff !important;
}

/* Text-link style button (transparent variant) */
.gb-button-wrapper a.gb-button-afde258c {
	background-color: transparent !important;
	color: var(--gn-brand) !important;
	font-weight: 600;
}

.gb-button-wrapper a.gb-button-afde258c:hover,
.gb-button-wrapper a.gb-button-afde258c:focus {
	background-color: transparent !important;
	color: var(--gn-brand-strong) !important;
}

/* Containers that had hardcoded backgrounds */
.gb-container-c03f1376 {
	background-color: var(--gn-surface) !important;
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius-lg);
}

.gb-container-ac12ed75 {
	background-color: var(--gn-brand) !important;
}

.gb-container-ac12ed75 .gb-headline,
.gb-container-ac12ed75 .gb-headline a {
	color: #fff;
}

/* Team photo card */
.gn-team-photo img {
	border-radius: var(--gn-radius);
	width: 100%;
	height: auto;
}

.gn-card .mc4wp-form,
.gn-card .mc4wp-form-fields {
	display: flex;
	flex-direction: column;
	gap: var(--gn-space-xs);
}

.gn-card .mc4wp-form input[type="email"] {
	width: 100%;
}

.gn-card .mc4wp-form input[type="submit"] {
	align-self: flex-start;
}

/* ==========================================================================
   8. Graphic Novel Database archive (GP Elements + Search & Filter)
   ========================================================================== */

/* --- Cover card grid --- */
.dynamic-content-template.generate-columns {
	margin-bottom: var(--gn-space-md);
}

.dynamic-content-template .gb-container {
	background: var(--gn-surface);
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius);
	box-shadow: var(--gn-shadow);
	height: 100%;
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.dynamic-content-template .gb-container {
		transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.dynamic-content-template .gb-container:hover {
		transform: translateY(-4px);
		border-color: color-mix(in srgb, var(--gn-brand) 45%, var(--gn-border));
	}

	.dynamic-content-template .gb-container img {
		transition: transform 0.35s ease;
	}

	.dynamic-content-template .gb-container:hover img {
		transform: scale(1.03);
	}
}

.dynamic-content-template .gb-inside-container {
	padding: var(--gn-space-sm);
	text-align: left;
}

.dynamic-content-template .gb-inside-container > a {
	display: block;
	overflow: hidden;
	border-radius: var(--gn-radius);
}

.dynamic-content-template .gb-inside-container img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	display: block;
}

.dynamic-content-template h2.gb-headline {
	font-size: var(--gn-text-lg);
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: var(--gn-space-sm) 0 4px;
}

.dynamic-content-template h2.gb-headline a {
	color: var(--gn-text);
	text-decoration: none;
}

.dynamic-content-template h2.gb-headline a:hover {
	color: var(--gn-brand);
}

.dynamic-content-template p.gb-headline {
	color: var(--gn-text-muted);
	font-size: var(--gn-text-sm);
	margin: 0 0 var(--gn-space-xs);
	line-height: 1.5;
}

.dynamic-content-template p.gb-headline a {
	color: inherit;
	text-decoration: none;
}

.dynamic-content-template p.gb-headline a:hover {
	color: var(--gn-brand);
}

/* --- Search & Filter panel --- */
.searchandfilter,
.searchandfilter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

form.searchandfilter {
	display: flex;
	flex-direction: column;
	gap: var(--gn-space-md);
	background: var(--gn-surface);
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius-lg);
	padding: var(--gn-space-md);
	box-shadow: var(--gn-shadow);
	font-size: var(--gn-text-sm);
}

form.searchandfilter > ul {
	display: flex;
	flex-direction: column;
	gap: var(--gn-space-md);
}

form.searchandfilter li {
	list-style: none;
}

form.searchandfilter li.sf-field-search input.sf-input-text {
	width: 100%;
	background: var(--gn-bg);
}

form.searchandfilter li input[type="checkbox"],
form.searchandfilter li input[type="radio"] {
	display: inline-block;
	vertical-align: middle;
	accent-color: var(--gn-brand);
	width: 16px;
	height: 16px;
	margin: 0 0.5em 0 0;
	flex-shrink: 0;
}

form.searchandfilter li label.sf-label-checkbox,
form.searchandfilter li label.sf-label-radio {
	display: inline-block;
	vertical-align: middle;
	color: var(--gn-text);
	cursor: pointer;
	padding: 0.25em 0;
}

form.searchandfilter li.sf-level-0 {
	padding: 0.1em 0;
}

form.searchandfilter select {
	width: 100%;
}

form.searchandfilter ul ul {
	margin-left: 1.4em;
	display: flex;
	flex-direction: column;
}

.sf-results-count,
.searchandfilter p:not(.sf-field) {
	color: var(--gn-text-muted);
	font-size: var(--gn-text-xs);
}

/* S&F AJAX loading state */
.searchandfilter.loading:after,
.lsf-loading {
	opacity: 0.5;
}

/* ==========================================================================
   9. Blog / recommendations archive — editorial card grid
   ========================================================================== */

body.blog .generate-columns-container {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--gn-space-lg);
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.blog .generate-columns-container > article.generate-columns {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.blog .generate-columns-container .inside-article {
	height: 100%;
	margin: 0 !important;
	padding: var(--gn-space-md) !important;
	background: var(--gn-surface);
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius);
	box-shadow: var(--gn-shadow);
}

@media (prefers-reduced-motion: no-preference) {
	body.blog .generate-columns-container .inside-article {
		transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	}

	body.blog .generate-columns-container article.generate-columns:hover .inside-article {
		transform: translateY(-3px);
		border-color: color-mix(in srgb, var(--gn-brand) 40%, var(--gn-border));
	}
}

body.blog .generate-columns-container .entry-title {
	font-size: var(--gn-text-lg) !important;
	line-height: 1.3;
	margin-bottom: var(--gn-space-xs);
}

body.blog .generate-columns-container .entry-title a {
	color: var(--gn-text);
	text-decoration: none;
}

body.blog .generate-columns-container .entry-title a:hover {
	color: var(--gn-brand);
}

body.blog .generate-columns-container .entry-summary {
	font-size: var(--gn-text-sm);
	line-height: 1.6;
	color: var(--gn-text-muted);
}

body.blog .generate-columns-container .entry-summary p {
	margin: 0;
}

body.blog .generate-columns-container .post-image {
	margin-bottom: var(--gn-space-sm);
}

body.blog .generate-columns-container .post-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--gn-radius-sm);
}

body.blog .generate-columns-container .entry-meta {
	font-size: var(--gn-text-xs);
	color: var(--gn-text-muted);
}

/* ==========================================================================
   10. Editorial details
   ========================================================================== */

/* Flat archive/page header for the GN database & taxonomies */
.archive .page-header,
.blog .page-header {
	border: 0;
	border-top: 1px solid var(--gn-border);
	border-bottom: 1px solid var(--gn-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding: var(--gn-space-md) 0;
}

.archive .page-header .page-title,
.blog .page-header .page-title {
	font-family: var(--gn-serif);
	font-size: var(--gn-text-2xl);
}

/* Warm paper for alternating surfaces */
.gn-alt-bg {
	background: var(--gn-alt);
}

/* Footer social strip cleanup */
.lsi-social-icons {
	margin: 0;
}

/* Image captions + figures inherit ink */
.wp-caption-text,
figcaption {
	color: var(--gn-text-muted);
	font-size: var(--gn-text-xs);
}

/* ==========================================================================
   11. Global page hero (GP Premium page-hero element, container ac12ed75)
   ========================================================================== */

/*
 * Render the page-hero element as a clean editorial band everywhere — pages,
 * the blog listing, and archives (Recommendations + Graphic Novel Database)
 * all share one consistent look: warm paper, ink serif title, thin rule.
 */
body.page .gb-container-ac12ed75,
body.blog .gb-container-ac12ed75,
body.archive .gb-container-ac12ed75 {
	background-color: var(--gn-alt) !important;
	border-bottom: 1px solid var(--gn-border);
}

body.page .gb-container-ac12ed75::before,
body.blog .gb-container-ac12ed75::before,
body.archive .gb-container-ac12ed75::before {
	background-image: none !important;
	opacity: 0 !important;
}

body.page .gb-container-ac12ed75 > .gb-inside-container,
body.blog .gb-container-ac12ed75 > .gb-inside-container,
body.archive .gb-container-ac12ed75 > .gb-inside-container {
	padding-top: clamp(2.5rem, 1.6rem + 3.5vw, 4.25rem) !important;
	padding-bottom: clamp(2.5rem, 1.6rem + 3.5vw, 4.25rem) !important;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

body.page .gb-container-ac12ed75 .gb-headline,
body.blog .gb-container-ac12ed75 .gb-headline,
body.archive .gb-container-ac12ed75 .gb-headline {
	color: var(--gn-text) !important;
	font-family: var(--gn-serif);
	font-size: var(--gn-text-2xl) !important;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

/* ==========================================================================
   12. GP literal-color cleanup — every layout container onto theme tokens
   ========================================================================== */

/*
 * GP's dynamic CSS bakes light-mode hexes into the layout containers
 * (e.g. .one-container .container { background:#fff; color:#18181b }). These
 * overrides force the main sheet, article box, top bar and footer onto the
 * theme tokens so dark mode flips every surface correctly. Light mode is
 * unchanged because the light tokens equal those hexes.
 */
.one-container .container,
.one-container .site-content,
.separate-containers .site-content,
.inside-article,
.entry-content,
.content-area {
	background: var(--gn-bg) !important;
	color: var(--gn-text) !important;
}

.separate-containers .inside-article,
.one-container .container .inside-article {
	background: var(--gn-surface) !important;
}

.top-bar,
.site-info,
.footer-widgets {
	background: var(--gn-surface) !important;
	color: var(--gn-text-muted) !important;
}

.top-bar a,
.site-info a,
.footer-widgets a {
	color: var(--gn-text-muted);
}

.top-bar a:hover,
.site-info a:hover,
.footer-widgets a:hover {
	color: var(--gn-brand);
}

/* Mobile slideout panel */
.slideout-navigation,
.slideout-navigation ul ul {
	background: var(--gn-surface) !important;
	color: var(--gn-text);
}

.slideout-navigation .main-nav ul li a {
	color: var(--gn-text);
}

/* GenerateBlocks containers with hardcoded light backgrounds — dark surfaces */
[data-theme="dark"] .gb-container,
[data-theme="dark"] .gb-inside-container {
	background-color: var(--gn-surface) !important;
}

:root:not([data-theme="light"]):not([data-theme="dark"]) .gb-container,
:root:not([data-theme="light"]):not([data-theme="dark"]) .gb-inside-container {
	background-color: var(--gn-surface) !important;
}

/* Titles / meta that GP & GB color literally (light hexes) — flip to ink */
[data-theme="dark"] .entry-title,
[data-theme="dark"] .entry-title a,
[data-theme="dark"] .main-title,
[data-theme="dark"] .main-title a,
[data-theme="dark"] .site-title,
[data-theme="dark"] .site-title a,
[data-theme="dark"] .gb-headline,
[data-theme="dark"] .gb-headline a {
	color: var(--gn-text) !important;
}

[data-theme="dark"] .entry-meta,
[data-theme="dark"] .entry-meta a {
	color: var(--gn-text-muted) !important;
}

:root:not([data-theme="light"]):not([data-theme="dark"]) .entry-title,
:root:not([data-theme="light"]):not([data-theme="dark"]) .entry-title a,
:root:not([data-theme="light"]):not([data-theme="dark"]) .gb-headline,
:root:not([data-theme="light"]):not([data-theme="dark"]) .gb-headline a {
	color: var(--gn-text) !important;
}

/* Sidebar widgets — GP colors these with literal light-mode hexes too */
.widget,
.widget-area .widget,
.sidebar .widget {
	color: var(--gn-text);
}

.widget-title,
.widget-area .widget-title,
.sidebar .widget-title {
	color: var(--gn-text-muted);
}

.widget a,
.widget-area .widget a,
.sidebar .widget a {
	color: var(--gn-brand);
}

.widget a:hover,
.widget-area .widget a:hover,
.sidebar .widget a:hover {
	color: var(--gn-brand-strong);
}