/*
Theme Name:   Toxic
Author:       GameSync WP
Author URI:   https://gamesyncwp.com
Description:  A dark, teal-accented gaming/news magazine theme with a hero slider, card-grid archives, tag-colored categories and a rich sidebar. Designed to showcase games alongside regular blog posts, with every game's details (screenshots, trailers, genres and more) filled in by hand -- either directly on the game's edit screen, or through the companion AdultGameHaven Games plugin.
Version: 3.3.7
Requires at least: 5.8
Requires PHP: 7.4
License:      GPL v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  toxic
Tags:         news, blog, entertainment, custom-menu, featured-images, footer-widgets, full-width-template, sticky-post, threaded-comments

This is a from-scratch original theme. Any resemblance to other magazine/news
themes is a matter of shared genre convention (bold section banners, card
grids, colored category pills) rather than copied code or assets.
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	/* --agh-red/--agh-red-dark keep their original names (site owners'
	   saved "accent color" choice below still targets these two variables
	   by name) but now default to a teal accent as part of this theme's
	   dark, teal-accented design language, rather than the original red. */
	--agh-red: #2dd4bf;
	--agh-red-dark: #26b4a2;
	--agh-black: #0e1014;
	--agh-dark: #1b1f26;
	--agh-gray-900: #222329;
	--agh-gray-700: #52535a;
	--agh-gray-500: #767781;
	--agh-gray-300: #d9dadd;
	--agh-gray-100: #f4f4f6;
	--agh-white: #ffffff;
	--agh-green: #16a34a;
	--agh-blue: #2f7fe0;
	--agh-pink: #ec4899;
	--agh-purple: #8b5cf6;
	--agh-orange: #fb923c;
	--agh-teal: #0d9488;
	--agh-yellow: #eab308;

	--agh-font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--agh-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--agh-radius: 10px;
	--agh-container: 1240px;
	--agh-shadow: 0 2px 10px rgba(20, 20, 25, 0.06);

	/* Semantic tokens: everything above is the raw palette. This theme is
	   dark-only (there is no light/auto color scheme option any more), so
	   these are just the site's actual page-background/surface/text colors
	   directly -- there used to be a light-mode default here with a
	   `:root[data-agh-theme="dark"]` override block beneath it, switched by
	   a site option and a visitor-facing toggle; both the option and the
	   toggle are gone, so this is the only palette now. */
	color-scheme: dark;
	--agh-page-bg: #0e1014;
	--agh-surface: #1b1f26;
	--agh-surface-alt: #20242c;
	--agh-border: #262b33;
	--agh-text: #f3f4f6;
	--agh-text-strong: #ffffff;
	--agh-text-secondary: #c7cbd3;
	--agh-text-muted: #a0a7b4;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--agh-font-body);
	color: var(--agh-text);
	background: var(--agh-page-bg);
	font-size: 16px;
	line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--agh-font-heading);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.5em;
	letter-spacing: 0.2px;
}
p { margin: 0 0 1.2em; }
.agh-container {
	max-width: var(--agh-container);
	margin: 0 auto;
	padding: 0 20px;
}
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* "Skip to content" link: invisible until a keyboard user tabs to it, so
   they aren't forced through the whole header/nav on every page load. */
.agh-skip-link {
	position: absolute;
	top: -100px;
	left: 10px;
	z-index: 999999;
	background: var(--agh-black);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--agh-radius) var(--agh-radius);
	transition: top .2s ease;
}
.agh-skip-link:focus {
	top: 0;
	outline: 2px solid var(--agh-red);
	outline-offset: -2px;
}

/* ==========================================================================
   Icons (CSS-mask based, inherit currentColor)
   ========================================================================== */
.agh-icon {
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	vertical-align: -2px;
	margin-right: 5px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.agh-icon-calendar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v3M17 2v3M3 9h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v3M17 2v3M3 9h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
.agh-icon-user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
.agh-icon-comment { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v12H8l-4 4V4z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v12H8l-4 4V4z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.agh-icon-clock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 7v5l4 2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 7v5l4 2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.agh-icon-eye { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
.agh-icon-search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M21 21l-4.3-4.3' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M21 21l-4.3-4.3' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.agh-icon-heart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.5 8 2 4.5 5.6 4c2-.3 3.7.7 6.4 3 2.7-2.3 4.4-3.3 6.4-3C22 4.5 23.5 8 22 11.7 19.5 16.4 12 21 12 21z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.5 8 2 4.5 5.6 4c2-.3 3.7.7 6.4 3 2.7-2.3 4.4-3.3 6.4-3C22 4.5 23.5 8 22 11.7 19.5 16.4 12 21 12 21z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.agh-icon-cart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h2l2.4 12.4a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.6L21 8H6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='21' r='1.4'/%3E%3Ccircle cx='18' cy='21' r='1.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h2l2.4 12.4a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.6L21 8H6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='21' r='1.4'/%3E%3Ccircle cx='18' cy='21' r='1.4'/%3E%3C/svg%3E"); }
.agh-icon-menu { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.agh-icon-grid { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='1.5'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1.5'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.5'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='1.5'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1.5'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.5'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1.5'/%3E%3C/svg%3E"); }
.agh-icon-list { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='4' cy='6' r='1.6'/%3E%3Ccircle cx='4' cy='12' r='1.6'/%3E%3Ccircle cx='4' cy='18' r='1.6'/%3E%3Cpath d='M9 6h12M9 12h12M9 18h12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='4' cy='6' r='1.6'/%3E%3Ccircle cx='4' cy='12' r='1.6'/%3E%3Ccircle cx='4' cy='18' r='1.6'/%3E%3Cpath d='M9 6h12M9 12h12M9 18h12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.agh-icon-chevron-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); margin-right: 6px; }
.agh-icon-arrow-up { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); margin-right: 0; }
.agh-icon-phone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L8 9.7a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L8 9.7a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Social icons: colored circular badges (brand-neutral solid dot + initial-less glyph via mask) */
.agh-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--agh-gray-700);
	position: relative;
	flex: 0 0 auto;
	transition: transform .15s ease, box-shadow .15s ease;
}
.agh-social-icon::before {
	content: '';
	position: absolute;
	inset: 10px;
	background-color: #fff;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
}
a:hover > .agh-social-icon,
.agh-social-icon:hover {
	transform: scale(1.08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.agh-social-facebook { background-color: #1877f2; }
.agh-social-twitter { background-color: #14171a; }
.agh-social-linkedin { background-color: #0a66c2; }
.agh-social-pinterest { background-color: #e60023; }
.agh-social-instagram { background: radial-gradient(circle at 30% 110%, #fdf497, #fd5949 45%, #d6249f 70%, #285AEB); }
.agh-social-youtube { background-color: #ff0000; }
.agh-social-facebook::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 9h3V6h-3c-2 0-3.5 1.5-3.5 3.5V11H8v3h2.5v7h3v-7H16l.5-3h-3V9.7c0-.4.3-.7.5-.7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 9h3V6h-3c-2 0-3.5 1.5-3.5 3.5V11H8v3h2.5v7h3v-7H16l.5-3h-3V9.7c0-.4.3-.7.5-.7z'/%3E%3C/svg%3E"); }
/* X (formerly Twitter)'s current wordmark glyph -- the bird logo this icon
   used to show was retired in 2023, so keeping it was the "not correct"
   part of task #85; the network key/URL option (agh_social_twitter)
   is unchanged since renaming it would drop every site's saved link. */
.agh-social-twitter::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2.3h3.7l-8 9.2 9.5 12.2h-7.4l-5.8-7.6-6.6 7.6H.6l8.6-9.9L0 2.3h7.6l5.3 6.9 6-6.9zm-1.3 19h2l-12.8-17h-2.2l13 17z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2.3h3.7l-8 9.2 9.5 12.2h-7.4l-5.8-7.6-6.6 7.6H.6l8.6-9.9L0 2.3h7.6l5.3 6.9 6-6.9zm-1.3 19h2l-12.8-17h-2.2l13 17z'/%3E%3C/svg%3E"); }
.agh-social-linkedin::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM3 9h4v12H3V9zm7 0h3.8v1.7h.05c.53-1 1.83-2 3.77-2 4.03 0 4.77 2.65 4.77 6.1V21H18v-5.6c0-1.35-.02-3.08-1.88-3.08-1.88 0-2.17 1.47-2.17 2.98V21H10V9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM3 9h4v12H3V9zm7 0h3.8v1.7h.05c.53-1 1.83-2 3.77-2 4.03 0 4.77 2.65 4.77 6.1V21H18v-5.6c0-1.35-.02-3.08-1.88-3.08-1.88 0-2.17 1.47-2.17 2.98V21H10V9z'/%3E%3C/svg%3E"); }
.agh-social-pinterest::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-3.6 19.3c0-.8 0-1.8.2-2.6l1.4-6s-.3-.7-.3-1.7c0-1.6 1-2.8 2.1-2.8 1 0 1.5.7 1.5 1.6 0 1-.6 2.4-1 3.8-.3 1.1.6 2 1.7 2 2 0 3.6-2.2 3.6-5.2 0-2.7-2-4.6-4.8-4.6-3.3 0-5.2 2.4-5.2 4.9 0 1 .4 2 .9 2.6.1.1.1.2.1.4l-.4 1.3c0 .2-.2.3-.4.2-1.4-.6-2.3-2.6-2.3-4.2 0-3.4 2.5-6.6 7.2-6.6 3.8 0 6.7 2.7 6.7 6.2 0 3.7-2.3 6.7-5.6 6.7-1.1 0-2.1-.6-2.5-1.2l-.7 2.6c-.2 1-.9 2.2-1.4 3A10 10 0 1 0 12 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-3.6 19.3c0-.8 0-1.8.2-2.6l1.4-6s-.3-.7-.3-1.7c0-1.6 1-2.8 2.1-2.8 1 0 1.5.7 1.5 1.6 0 1-.6 2.4-1 3.8-.3 1.1.6 2 1.7 2 2 0 3.6-2.2 3.6-5.2 0-2.7-2-4.6-4.8-4.6-3.3 0-5.2 2.4-5.2 4.9 0 1 .4 2 .9 2.6.1.1.1.2.1.4l-.4 1.3c0 .2-.2.3-.4.2-1.4-.6-2.3-2.6-2.3-4.2 0-3.4 2.5-6.6 7.2-6.6 3.8 0 6.7 2.7 6.7 6.2 0 3.7-2.3 6.7-5.6 6.7-1.1 0-2.1-.6-2.5-1.2l-.7 2.6c-.2 1-.9 2.2-1.4 3A10 10 0 1 0 12 2z'/%3E%3C/svg%3E"); }
.agh-social-instagram::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2'/%3E%3C/svg%3E"); }
.agh-social-youtube::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9l5 3-5 3V9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9l5 3-5 3V9z'/%3E%3C/svg%3E"); }

/* ==========================================================================
   Header: single row -- logo, nav and utility links all together, the
   header's own background left the same flat --agh-page-bg as the rest of
   the page (rather than a lighter --agh-surface panel) so the only thing
   separating it from the content below is the thin border-bottom, matching
   gamesyncwp.com's flat single-tone header.
   ========================================================================== */
.agh-header { background: var(--agh-page-bg); border-bottom: 1px solid var(--agh-border); position: relative; z-index: 30; }
/* A 3-column grid (rather than flex + margin-right:auto/margin-left:auto)
   is what actually centers the nav in the middle of the WHOLE row -- with
   flex, the nav would only center in the space left over between the logo
   and the actions group, which drifts off-center whenever those two groups
   are different widths. Deliberately NOT the site's .agh-container class:
   that has a 1240px max-width and auto side-margins meant for centering the
   page's own content column, which on any wider screen pinned the logo and
   login/register well in from the true edges instead of flush against
   them. This row gets its own full-width padding instead, so the logo sits
   at the header's actual left edge and login/register at its actual right
   edge, matching gamesyncwp.com. */
.agh-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; width: 100%; padding: 16px 32px; box-sizing: border-box; }
.agh-branding { display: flex; flex-direction: column; justify-self: start; }
/* Logo: a small accent-colored badge holding just the site name's first
   letter (.agh-logo-mark), followed by the rest of the name in plain white
   (.agh-logo-rest) -- the badge-plus-wordmark pattern, rather than coloring
   the whole name. header.php splits get_bloginfo('name') into the two
   spans this targets. */
.agh-logo-text {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.agh-logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--agh-red);
	color: var(--agh-black);
	font-family: var(--agh-font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	flex: 0 0 auto;
}
.agh-logo-rest {
	font-family: var(--agh-font-heading);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0.2px;
	color: var(--agh-text-strong);
}
.agh-logo-text:hover .agh-logo-rest { color: var(--agh-red); }
.agh-tagline { font-size: 11px; letter-spacing: 1.5px; color: var(--agh-text-muted); text-transform: uppercase; }
.custom-logo-link img { max-height: 56px; width: auto; }

.agh-main-nav { justify-self: center; }
.agh-nav-menu { display: flex; gap: 28px; align-items: center; }
.agh-nav-menu > li { position: relative; }
.agh-nav-menu > li > a {
	display: block;
	padding: 10px 0;
	font-family: var(--agh-font-heading);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--agh-text-muted);
}
.agh-nav-menu > li > a:hover,
.agh-nav-menu > li.current-menu-item > a { color: var(--agh-red); }
.agh-nav-menu ul {
	position: absolute;
	top: 100%; left: 0;
	background: var(--agh-surface);
	min-width: 200px;
	box-shadow: var(--agh-shadow);
	border-top: 3px solid var(--agh-red);
	display: none;
	z-index: 40;
}
.agh-nav-menu li:hover > ul { display: block; }
.agh-nav-menu ul li a { display: block; padding: 10px 16px; font-size: 14px; text-transform: none; font-weight: 500; }
.agh-nav-menu ul li a:hover { background: var(--agh-surface-alt); color: var(--agh-red); }

.agh-header__actions { display: flex; align-items: center; gap: 16px; justify-self: end; }
.agh-icon-btn { background: none; border: none; padding: 8px; color: var(--agh-text-strong); display: inline-flex; border-radius: 999px; transition: background-color .15s ease, color .15s ease; }
.agh-icon-btn .agh-icon { width: 18px; height: 18px; margin: 0; }
.agh-icon-btn:hover, .agh-icon-btn:focus-visible { background: var(--agh-surface-alt); }
.agh-header-search[hidden] { display: none; }

.agh-header__socials { display: flex; gap: 8px; }
.agh-header__socials .agh-social-icon { width: 30px; height: 30px; }

/* Login/Register/My Account/Log Out, in the header's top-right corner. */
.agh-header__auth { display: flex; align-items: center; gap: 18px; font-size: 13px; }
.agh-header__auth-link { color: var(--agh-text-muted); }
.agh-header__auth-link:hover { color: var(--agh-text-strong); }

/* Search box display variant (Toxic -> Display Options -> Search box
   style). "Expand below" is the original full-width behaviour; "inline
   dropdown" instead floats a compact panel directly under the search icon,
   so opening it doesn't push the rest of the header/page down. */
.agh-header-search--expand { background: var(--agh-surface-alt); border-bottom: 1px solid var(--agh-border); padding: 16px 0; }
.agh-header-search--inline {
	position: absolute;
	top: 100%;
	right: 20px;
	width: min(360px, calc(100% - 40px));
	background: var(--agh-surface);
	border: 1px solid var(--agh-border);
	border-radius: var(--agh-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
	padding: 14px;
	z-index: 40;
}

.agh-floating-cta {
	position: fixed;
	right: 24px;
	bottom: 90px;
	background: var(--agh-green);
	color: #fff;
	font-weight: 700;
	padding: 12px 22px;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(0,0,0,.2);
	z-index: 50;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.agh-hero { position: relative; height: 34vh; min-height: 240px; max-height: 340px; overflow: hidden; background: var(--agh-black); }
.agh-hero__slides { position: relative; width: 100%; height: 100%; }
.agh-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease; }
.agh-hero__slide.is-active { opacity: 1; visibility: visible; }
.agh-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.agh-hero__bg--placeholder { background: linear-gradient(135deg, #2a2c33, #46474e); }
/* Same treatment as the single game page's cover art (.agh-single__media--game):
   a blurred, darkened copy of the image fills the banner as a backdrop, while
   the real image sits on top of it uncropped ("contain"), so none of the
   artwork is cut off no matter its aspect ratio -- this shows more of each
   game's image than the old cover/crop background did. */
.agh-hero__bg-backdrop {
	position: absolute;
	inset: -20px;
	background-size: cover;
	background-position: center;
	filter: blur(24px) brightness(.5);
	transform: scale(1.1);
}
.agh-hero__bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.agh-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,12,.9) 0%, rgba(10,10,12,.55) 45%, rgba(10,10,12,.15) 100%); }
.agh-hero__content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 640px; color: #fff; }
.agh-hero__title { font-size: 44px; margin: 14px 0 12px; }
/* White (inherited from .agh-hero__content) rather than the accent color:
   this theme's design language reserves its accent color for small
   interactive elements (badges, buttons, links) and keeps large headline
   text neutral -- the hover state below is this heading's own accent
   touch, matching that pattern instead of coloring the whole headline. */
.agh-hero__title a:hover { color: var(--agh-red); }
.agh-hero__excerpt { color: #d7d8dd; max-width: 480px; }
.agh-entry-meta--hero { margin-bottom: 6px; color: #d7d8dd; }
.agh-entry-meta--hero .agh-icon { background-color: var(--agh-red); }
.agh-hero__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,.15); color: #fff; border: none;
	font-size: 24px; z-index: 5;
}
.agh-hero__nav:hover { background: rgba(255,255,255,.3); }
.agh-hero__nav--prev { left: 20px; }
.agh-hero__nav--next { right: 20px; }

/* ==========================================================================
   Section banners & layout grids
   ========================================================================== */
.agh-section-bar {
	background: var(--agh-red);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	margin-bottom: 20px;
	border-radius: var(--agh-radius);
}
/* Text is black (not var(--agh-text-strong)) on purpose: this bar's
   background is always the accent color itself (see .agh-section-bar
   above), so its title needs to stay legible against whatever accent
   color is picked in Display Options, independent of the light/dark
   surface tokens used everywhere else. */
/* min-width:0 lets this flex item shrink below its content size (flex items
   default to min-width:auto, which would otherwise force the parent bar to
   overflow instead of truncating); white-space/overflow/text-overflow then
   guarantee the red bar can never grow past one line no matter how long a
   title is or which font actually renders (see the mobile font-size rule
   below for why that matters -- a longer title like "Notification
   Preferences" combined with a wider fallback font, if the heading webfont
   hasn't loaded yet, could otherwise wrap to two lines on a narrow phone).
   The actual bug reported against this bar turned out to be a DIFFERENT
   problem than either of those, though: every page-style template
   (My Account, My Favorites, Profile, single game pages, ...) wraps its
   content -- section banners included -- in .agh-single__content, and that
   wrapper has its own ".agh-single__content h2, .agh-single__content h3 {
   margin-top: 1.4em; }" rule for spacing out prose headings a visitor
   might add via the block editor. That selector (a class plus a type
   selector) is MORE specific than plain ".agh-section-bar__title" (a single
   class), so it was winning and adding ~25px of top margin above this
   title -- shifting the text down inside a red box that was still only
   one line tall, which is what actually looked like "the header takes up
   space for two lines" (not a text-wrap issue at all; every fix aimed at
   wrapping left this untouched because it was solving a different bug).
   Doubling up the class selector here (".agh-section-bar
   .agh-section-bar__title") raises this rule's specificity above that
   prose-heading rule -- and above any similar future one -- without
   resorting to !important. */
.agh-section-bar__title,
.agh-section-bar .agh-section-bar__title { color: #000; font-size: 18px; font-weight: 700; text-transform: uppercase; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agh-section-bar__more { color: #000; opacity: .75; }
.agh-section-bar__more .agh-icon { margin: 0; width: 16px; height: 16px; }

/* Taxonomy archive term description (Genre/Theme "about" text) */
.agh-term-description { margin: -6px 0 24px; padding: 16px 18px; background: var(--agh-surface-alt); border-radius: var(--agh-radius); color: var(--agh-text-secondary); font-size: 15px; line-height: 1.6; }
.agh-term-description p { margin-bottom: 1em; }
.agh-term-description p:last-child { margin-bottom: 0; }

/* "My Favorites" page (template-favorites.php): logged-out/empty/no-search-
   match message, and the live search box above the Thumbnail/List listing. */
.agh-favorites-empty { margin-bottom: 20px; padding: 16px 18px; background: var(--agh-surface-alt); border-radius: var(--agh-radius); color: var(--agh-text-secondary); font-size: 15px; line-height: 1.6; }
.agh-favorites-search { position: relative; margin-bottom: 20px; max-width: 420px; }
.agh-favorites-search .agh-icon-search { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); margin: 0; color: var(--agh-text-muted); }
.agh-favorites-search__input { width: 100%; border: 1px solid var(--agh-border); border-radius: var(--agh-radius); padding: 12px 14px 12px 38px; background: var(--agh-surface); color: var(--agh-text); font-size: 14px; }
.agh-favorites-search__input:focus { outline: none; border-color: var(--agh-red); }

/* My Account page (template-account.php) and public Profile page
   (template-profile.php). */
.agh-account-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 18px; background: var(--agh-surface-alt); border-radius: var(--agh-radius); margin-bottom: 28px; }
.agh-account-summary__row { display: flex; align-items: center; gap: 12px; }
.agh-account-summary__row img { border-radius: 50%; }
.agh-account-summary__email { font-size: 13px; color: var(--agh-text-muted); }
.agh-account-section { margin-bottom: 28px; }
.agh-account-section__hint { color: var(--agh-text-secondary); font-size: 14px; margin-bottom: 12px; }
.agh-account-section__form { max-width: 420px; }
.agh-account-follow-form__group { border: 1px solid var(--agh-border); border-radius: var(--agh-radius); padding: 12px 16px; margin-bottom: 14px; }
.agh-account-follow-form__group legend { padding: 0 6px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--agh-text-secondary); }
.agh-account-follow-form__option { display: inline-flex; align-items: center; gap: 6px; margin: 4px 16px 4px 0; font-size: 14px; }
.agh-profile__header { display: flex; align-items: center; gap: 14px; }
.agh-profile__header img { border-radius: 50%; }
.agh-profile-ratings__stars { margin-left: 10px; color: var(--agh-red); letter-spacing: 1px; }

.agh-home-columns { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(260px, 1fr); gap: 34px; padding-top: 40px; }
.agh-page-columns { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(260px, 1fr); gap: 34px; padding: 40px 20px; }
/* Sidebar position (Toxic -> Sidebar Sections -> Sidebar position): the
   .agh-sidebar-left body class swaps the grid's column proportions and pulls
   .agh-sidebar in front of the main content, on both the front-page and the
   page/archive/single grid -- see agh_sidebar_position_body_class()
   in functions.php. The mobile breakpoint below collapses both grids to a
   single column, where left/right has nothing left to flip. */
.agh-sidebar-left .agh-home-columns,
.agh-sidebar-left .agh-page-columns { grid-template-columns: minmax(260px, 1fr) minmax(0, 2.6fr); }
.agh-sidebar-left .agh-sidebar { order: -1; }
.agh-home-section { margin-bottom: 40px; }
/* Related Games on the single game page directly follows whatever the last
   game-detail block happened to be (Related Links, videos, screenshots...),
   none of which reserve space below themselves -- without its own top
   margin it sat right up against that content. */
.agh-home-section--related-games { margin-top: 40px; }
.agh-home-main { min-width: 0; }

/* ==========================================================================
   Pills / badges
   ========================================================================== */
.agh-pill {
	display: inline-block;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 3px;
}
/* .agh-pill is sometimes the clickable element itself (a direct <a class="agh-pill">,
   e.g. the single game page's genre tag row) and sometimes just a colored
   wrapper around an inner <a> (agh_tag_pill(), used on every card grid/
   list item and video card) -- targeting only "a.agh-pill" missed every pill of
   the second kind. Targeting the class itself, regardless of element, covers
   both consistently. */
.agh-pill:hover { opacity: .9; }

/* ==========================================================================
   Cards: grid
   ========================================================================== */
.agh-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* A smaller, denser grid for the My Account page's "Recently Viewed" strip
   -- a quick glance, not the full browsing experience the My Favorites/
   Profile pages give the same card-grid-item.php cards. */
.agh-card-grid--compact { grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.agh-card { background: var(--agh-surface); transition: box-shadow .2s ease; }
.agh-card:hover { box-shadow: var(--agh-shadow); }
.agh-card__media { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--agh-radius); background: var(--agh-surface-alt); }
.agh-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.agh-card:hover .agh-card__img { transform: scale(1.05); }
.agh-card__media .agh-pill { position: absolute; top: 10px; left: 10px; }
/* Explicit page-bg (not the inherited --agh-surface card background) so the
   title area under a grid-view thumbnail blends into the page instead of
   showing as its own slightly-lighter panel -- matching the list view
   below, which was already unstyled/transparent here. */
.agh-card__body { padding-top: 12px; text-align: center; background: var(--agh-page-bg); }
.agh-card__title { font-size: 17px; margin: 6px 0 0; }
.agh-card__title a:hover { color: var(--agh-red); }
.agh-entry-meta--compact { font-size: 12px; color: var(--agh-text-muted); }

.agh-placeholder-img {
	width: 100%; height: 100%;
	background: repeating-linear-gradient(135deg, var(--agh-surface-alt), var(--agh-surface-alt) 12px, var(--agh-page-bg) 12px, var(--agh-page-bg) 24px);
	min-height: 140px;
}

/* Cards: horizontal list */
.agh-card-list-group { display: flex; flex-direction: column; gap: 26px; }
.agh-card-list { display: grid; grid-template-columns: 260px 1fr; gap: 22px; padding-bottom: 26px; border-bottom: 1px solid var(--agh-border); }
.agh-card-list__media { display: block; border-radius: var(--agh-radius); overflow: hidden; aspect-ratio: 5/3; background: var(--agh-surface-alt); }
.agh-card-list__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.agh-card-list:hover .agh-card-list__img { transform: scale(1.05); }
.agh-card-list__title { font-size: 20px; margin: 8px 0 8px; }
.agh-card-list__title a:hover { color: var(--agh-red); }
.agh-card-list__excerpt { color: var(--agh-text-secondary); }

/* ==========================================================================
   Thumbnail / list view toggle
   ========================================================================== */
.agh-view-toggle {
	display: inline-flex;
	gap: 2px;
	background: var(--agh-surface-alt);
	border-radius: var(--agh-radius);
	padding: 3px;
	margin-bottom: 22px;
}
.agh-view-toggle__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	background: transparent;
	color: var(--agh-text-secondary);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 3px;
	cursor: pointer;
}
.agh-view-toggle__btn .agh-icon { margin: 0; width: 14px; height: 14px; background-color: currentColor; }
.agh-view-toggle__btn:hover { color: var(--agh-text-strong); }
.agh-view-toggle__btn.is-active { background: var(--agh-surface); color: var(--agh-red); box-shadow: var(--agh-shadow); }

.agh-listing[data-agh-view-mode="list"] .agh-card-grid { display: none; }
.agh-listing[data-agh-view-mode="list"] .agh-title-list { display: block; }
.agh-listing:not([data-agh-view-mode="list"]) .agh-title-list { display: none; }

.agh-title-list,
.agh-single__content .agh-title-list {
	/* The doubled selector (matching the same fix in 2.3.19) is needed because
	   My Account and the public Profile page nest these lists inside
	   .agh-single__content, whose own `.agh-single__content ul { list-style:
	   revert; padding-left: 1.4em; margin-bottom: 1.4em; }` rule (for
	   prose lists typed into a page's content) has higher specificity
	   (one class + one type selector) than a bare `.agh-title-list` class
	   selector and was winning -- showing default browser bullets and
	   indentation in front of every game title in these lists instead of
	   the flat, borderless rows they're designed to be. */
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--agh-surface);
	border: 1px solid var(--agh-border);
	border-radius: var(--agh-radius);
}
.agh-title-list__item {
	border-bottom: 1px solid var(--agh-border);
}
.agh-title-list__item:last-child { border-bottom: none; }
.agh-title-list__item:nth-child(even) { background: var(--agh-surface-alt); }
.agh-title-list__item a {
	display: block;
	padding: 14px 18px;
	font-family: var(--agh-font-heading);
	font-size: 18px;
	letter-spacing: .2px;
	color: var(--agh-text);
	border-left: 3px solid transparent;
}
.agh-listing__sentinel { padding: 24px 0 4px; text-align: center; }
.agh-listing__loading { display: none; color: var(--agh-text-muted); font-size: 13px; }
.agh-listing__sentinel.is-loading .agh-listing__loading { display: inline-block; }

.agh-title-list__item a:hover {
	color: var(--agh-red);
	background: var(--agh-surface-alt);
	border-left-color: var(--agh-red);
}

/* Featured grid (big + small list) */
.agh-featured-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.agh-featured-grid__main { position: relative; display: block; border-radius: var(--agh-radius); overflow: hidden; aspect-ratio: 4/3; background: var(--agh-surface-alt); }
.agh-featured-grid__main img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.agh-featured-grid__main:hover img { transform: scale(1.05); }
.agh-featured-grid__main .agh-pill { position: absolute; top: 10px; left: 10px; z-index: 2; }
/* Title + excerpt overlay for the first/main featured item only -- the
   smaller list items alongside it stay image + title, no excerpt. */
.agh-featured-grid__main-scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(10,10,12,.9) 0%, rgba(10,10,12,.45) 55%, rgba(10,10,12,0) 100%); }
.agh-featured-grid__main-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px; color: #fff; }
.agh-featured-grid__main-caption h3 { font-size: 20px; margin: 0 0 6px; color: #fff; }
.agh-featured-grid__main-caption p { font-size: 13px; color: rgba(255,255,255,.85); margin: 0; max-width: 90%; }
.agh-featured-grid__list { display: flex; flex-direction: column; gap: 14px; }
.agh-featured-grid__item { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center; }
.agh-featured-grid__item-media { display: block; border-radius: var(--agh-radius); overflow: hidden; aspect-ratio: 4/3; background: var(--agh-surface-alt); }
.agh-featured-grid__item-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.agh-featured-grid__item-media:hover img { transform: scale(1.08); }
.agh-featured-grid__item-body h4 { font-size: 14px; margin: 4px 0 0; }
.agh-featured-grid__item-body .agh-meta-item { font-size: 11px; color: var(--agh-text-muted); }

/* Mini list items (Recent/Popular, Upcoming, Most Viewed) */
.agh-mini-item { display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--agh-border); }
.agh-mini-item:last-child { border-bottom: none; }
.agh-mini-item__media { display: block; border-radius: var(--agh-radius); overflow: hidden; aspect-ratio: 1/1; background: var(--agh-surface-alt); }
.agh-mini-item__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.agh-mini-item__media:hover .agh-mini-item__img { transform: scale(1.08); }
.agh-mini-item__label { display: block; font-size: 10px; text-transform: uppercase; color: var(--agh-red); font-weight: 700; letter-spacing: .5px; }
.agh-mini-item__date { display: flex; align-items: center; font-size: 11px; color: var(--agh-text-muted); margin: 2px 0; }
.agh-mini-item__title { font-size: 14px; margin: 0; line-height: 1.35; }
.agh-mini-item__title a:hover { color: var(--agh-red); }

/* ==========================================================================
   Tabs
   ========================================================================== */
.agh-tabs__nav { display: flex; }
.agh-tabs__tab { flex: 1; background: var(--agh-black); color: #fff; border: none; padding: 12px 0; font-weight: 700; text-transform: uppercase; font-size: 13px; }
.agh-tabs__tab.is-active { background: var(--agh-red); }
.agh-tabs__panel { display: none; padding-top: 6px; }
.agh-tabs__panel.is-active { display: block; }
.agh-tabs__empty { color: var(--agh-text-muted); font-size: 13px; padding: 12px 0; }

/* ==========================================================================
   Sidebar
   ========================================================================== */
.agh-sidebar { min-width: 0; }
.agh-widget { margin-bottom: 30px; }
.agh-term-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--agh-border); font-size: 14px; }
.agh-term-list li:last-child { border-bottom: none; }
.agh-term-list a { display: flex; align-items: center; flex: 1; padding: 2px 8px 2px 4px; margin: 0 -8px 0 -4px; border-radius: 3px; transition: background-color .15s ease, color .15s ease; }
.agh-term-list a:hover { background: var(--agh-surface-alt); color: var(--agh-red); }
.agh-term-list a .agh-icon { background-color: var(--agh-red); width: 10px; height: 10px; }
.agh-term-count { color: var(--agh-text-muted); font-size: 13px; }
.agh-term-list__empty { color: var(--agh-text-muted); font-size: 13px; }

.agh-stats-list { display: flex; flex-direction: column; }
.agh-stats-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--agh-border); font-size: 14px; }
.agh-stats-list li:last-child { border-bottom: none; }
.agh-stats-list__label { color: var(--agh-text-muted); }
.agh-stats-list__value { font-weight: 700; }

.agh-follow-list { display: flex; flex-direction: column; gap: 8px; }
.agh-follow-row {
	display: flex; align-items: center; gap: 10px;
	color: #fff; font-weight: 700; text-transform: uppercase; font-size: 13px;
	padding: 12px 16px; border-radius: var(--agh-radius);
}
.agh-follow-row .agh-icon-chevron-right { margin-left: auto; background-color: #fff; opacity: .8; }
.agh-follow-row--facebook { background: #1877f2; }
.agh-follow-row--twitter { background: #14171a; }
.agh-follow-row--linkedin { background: #0a66c2; }
.agh-follow-row--pinterest { background: #e60023; }
.agh-follow-row--instagram { background: linear-gradient(135deg, #fd5949, #d6249f, #285AEB); }
.agh-follow-row--youtube { background: #ff0000; }

.agh-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.agh-tag { display: inline-block; background: var(--agh-surface-alt); color: var(--agh-text-secondary); font-size: 12px; padding: 7px 12px; border-radius: 3px; border: 1px solid var(--agh-border); }
.agh-tag:hover { background: var(--agh-red); border-color: var(--agh-red); color: #fff; }

/* ==========================================================================
   Video strip
   ========================================================================== */
.agh-video-section { background: var(--agh-gray-900); padding: 40px 0; margin: 10px 0 40px; }
.agh-video-section__title { color: #fff; margin-bottom: 20px; }
.agh-video-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.agh-video-card__thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/10; border: none; padding: 0; border-radius: var(--agh-radius); overflow: hidden; background: var(--agh-black); }
.agh-video-card__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.agh-video-card__thumb .agh-pill { position: absolute; top: 10px; left: 10px; }
.agh-video-card__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 46px; height: 46px; border-radius: 50%;
	background: rgba(255,255,255,.9);
}
.agh-video-card__play::before {
	content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
	border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--agh-red);
}
.agh-video-card__title { color: #fff; font-size: 15px; margin-top: 10px; }
.agh-video-card__title a:hover { color: var(--agh-red); }

/* Twice the size of the old fixed 2-per-row layout, and automatic rather
   than a fixed column count: auto-fit + a wide minmax() floor means a
   video only shares a row with another one when there's genuinely enough
   width for both at a sensible size (a wide desktop main column), and
   collapses to one large, full-width video per row on anything narrower
   -- rather than always squeezing exactly 2 into whatever width is
   available, however small that makes each one. */
.agh-video-strip--embed { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
.agh-video-embed { position: relative; padding-top: 56.25%; border-radius: var(--agh-radius); overflow: hidden; background: var(--agh-black); }
.agh-video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Video modal (JS-triggered) */
.agh-video-modal { position: fixed; inset: 0; background: rgba(10,10,12,.9); z-index: 100; display: none; align-items: center; justify-content: center; padding: 30px; }
.agh-video-modal.is-open { display: flex; }
.agh-video-modal__inner { position: relative; width: 100%; max-width: 900px; aspect-ratio: 16/9; }
.agh-video-modal__inner video { width: 100%; height: 100%; border: 0; background: #000; }
.agh-video-modal__close { position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 28px; }

/* ==========================================================================
   Single post / game
   ========================================================================== */
.agh-single__media { position: relative; border-radius: var(--agh-radius); overflow: hidden; margin-bottom: 20px; }
.agh-single__media img { width: 100%; max-height: 520px; object-fit: cover; }
.agh-single__media-placeholder { height: 340px; }
.agh-single__media .agh-pill { position: absolute; top: 14px; left: 14px; }
/* Both sit above the backdrop/cover image added for .agh-single__media--game
   below, which needs its own stacking order (backdrop, then image). */
.agh-single__media .agh-pill { z-index: 2; }

/* Game hero: cover art is usually portrait box art (or otherwise
   not the same shape as a blog post's landscape photo), so cropping it to
   the same wide banner ("cover", above) left it looking zoomed in, with
   most of the artwork cut off. A blurred, darkened copy of the same image
   fills the banner as a backdrop, while the real cover art sits on top of
   it uncropped ("contain"), so the whole cover is always visible no matter
   its aspect ratio. */
.agh-single__media--game { aspect-ratio: 16 / 7; background: var(--agh-black); }
.agh-single__media--game .agh-single__media-backdrop {
	position: absolute;
	inset: -20px;
	background-size: cover;
	background-position: center;
	filter: blur(24px) brightness(.5);
	transform: scale(1.1);
}
.agh-single__media--game img { position: relative; z-index: 1; width: 100%; height: 100%; max-height: none; object-fit: contain; }
.agh-single__media--game .agh-single__media-placeholder { height: 100%; }
.agh-single__date { display: flex; align-items: center; font-size: 13px; color: var(--agh-text-muted); margin-bottom: 10px; }
.agh-single__title { font-size: 32px; color: var(--agh-text-strong); }
/* Title, Favorite toggle and Game Status picker share one row, with those
   two pushed to the right-hand end of the line (see .agh-favorite-btn's
   margin-left:auto below). Wraps to its own line under the title on
   narrow screens rather than squeezing everything together. */
.agh-single__title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.agh-single__title-row .agh-single__title { margin: 0; }
/* Wrapper around the [pixelwire_post_rating] shortcode output from the
   companion GameSync WP Post Ratings plugin (used as-is, unrebranded) --
   the plugin's own CSS styles the stars themselves, this just places the
   block in the header rhythm. */
.agh-single__rating { margin: 8px 0 12px; }
/* Favorite toggle, shown next to the title on the single game page -- see
   agh_render_favorite_button() in inc/favorites.php. The guest (logged-out)
   variant is a plain link to the login screen with the same look, so the
   feature stays visible either way rather than disappearing for visitors
   who aren't logged in. margin-left:auto (rather than relying on the title
   row's justify-content alone) is what pushes this -- and the Game Status
   picker right after it, when that's shown too -- flush to the right of
   the title row as one tight group, regardless of which of the two is
   present; this used to sit on the rating badge before that field was
   removed. */
.agh-favorite-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	margin-left: auto;
	padding: 8px 14px;
	border: 1px solid var(--agh-border);
	border-radius: var(--agh-radius);
	background: transparent;
	color: var(--agh-text-secondary);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.agh-favorite-btn .agh-icon { margin-right: 0; width: 15px; height: 15px; }
.agh-favorite-btn:hover, .agh-favorite-btn:focus-visible { border-color: var(--agh-red); color: var(--agh-red); }
.agh-favorite-btn--active { background: var(--agh-red); border-color: var(--agh-red); color: var(--agh-white); }
.agh-favorite-btn--active:hover, .agh-favorite-btn--active:focus-visible { color: var(--agh-white); opacity: .9; }
/* Want to Play / Playing / Completed status picker, shown right next to
   the Favorite button -- see agh_render_game_status_control() in
   inc/game-status.php. Logged-in visitors only. */
.agh-game-status-select {
	flex-shrink: 0;
	padding: 8px 10px;
	border: 1px solid var(--agh-border);
	border-radius: var(--agh-radius);
	background: var(--agh-surface);
	color: var(--agh-text-secondary);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
}
.agh-game-status-select:focus { outline: none; border-color: var(--agh-red); }
.agh-single__meta-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--agh-border); margin-bottom: 24px; }
.agh-entry-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--agh-text-muted); }
.agh-meta-item { display: inline-flex; align-items: center; }
.agh-share { display: flex; align-items: center; gap: 8px; }
.agh-share__label { font-weight: 700; font-size: 13px; margin-right: 4px; }
.agh-share .agh-social-icon { width: 34px; height: 34px; }

.agh-game-facts { background: var(--agh-surface-alt); border-radius: var(--agh-radius); padding: 14px 18px; margin-bottom: 16px; font-size: 14px; }
.agh-game-facts__row { padding: 4px 0; }
.agh-game-facts__row a { text-decoration: underline; text-decoration-color: var(--agh-text-muted); text-underline-offset: 2px; }
.agh-game-facts__row a:hover { color: var(--agh-red); text-decoration-color: var(--agh-red); }
.agh-single__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.agh-single__content { font-size: 16px; color: var(--agh-text); }
.agh-single__content p { margin-bottom: 1.4em; }
.agh-single__content h2, .agh-single__content h3 { margin-top: 1.4em; }
.agh-single__content blockquote {
	background: var(--agh-surface-alt);
	border-left: 4px solid var(--agh-red);
	padding: 22px 26px;
	font-style: italic;
	font-weight: 600;
	font-size: 18px;
	border-radius: var(--agh-radius);
	position: relative;
	margin: 1.6em 0;
}
.agh-single__content img { border-radius: var(--agh-radius); }
.agh-single__content ul, .agh-single__content ol { list-style: revert; padding-left: 1.4em; margin-bottom: 1.4em; }
.agh-single__tags .agh-tag, .agh-single__tags .agh-pill {}

.agh-game-gallery, .agh-game-videos, .agh-game-links, .agh-game-store { margin-top: 30px; }

/* "Buy The Game" store buttons (Steam / GOG). The logo files themselves
   live in assets/img/ (steam-logo.png / gog-logo.png) -- see the README in
   that folder for provenance/usage-guideline notes. Both official logos are
   solid black artwork on a transparent background, so the buttons use a
   plain white card rather than a dark brand color behind them -- a dark
   background would make the logo unreadable. If a logo file is ever
   missing, the whole button hides itself instead of showing a broken image
   or an empty white box. */
.agh-store-links { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.agh-store-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: var(--agh-radius);
	background: #fff;
	border: 1px solid var(--agh-gray-300);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.agh-store-btn:hover { border-color: var(--agh-red); box-shadow: 0 2px 10px rgba(20,20,25,.08); }
.agh-store-btn__logo { display: block; width: auto; height: 34px; object-fit: contain; }
/* The GOG mark is close to square (icon + wordmark stacked) rather than a
   wide horizontal lockup like Steam's, so matching Steam's logo height
   alone leaves it looking small and swimming in the button's padding --
   sized taller here so the two buttons read as visually balanced. */
.agh-store-btn__logo--gog { height: 52px; }

/* "Download" button, shown in its own "Download" section above "Buy The
   Game" (see agh_game_page_section_registry()): for a game that has
   a direct download / itch.io / developer-site link (the "Download Link"
   field on the plugin's game edit screen), independent of whether it also
   has a Steam or GOG listing. Built the same way as those two -- an icon
   tile plus a wordmark -- but entirely original artwork rather than any
   real brand's logo, since there isn't a real storefront to represent
   here. */
/* "Buy The Game" custom-link button (the "Custom Buy Link" field, for a
   storefront that isn't Steam or GOG) shares this same badge-plus-wordmark
   treatment as Download -- same box, same typography -- rather than a
   real storefront logo, since there's no specific brand to represent
   here either. */
.agh-store-btn--download, .agh-store-btn--buy { gap: 12px; font-family: var(--agh-font-heading); font-weight: 700; font-size: 16px; letter-spacing: .5px; text-transform: uppercase; color: var(--agh-black); }
.agh-store-btn__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--agh-black);
	border-radius: 6px;
	flex: 0 0 auto;
}
.agh-store-btn__badge-icon {
	width: 18px;
	height: 18px;
	background-color: var(--agh-black);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v11M7.5 10.5L12 15l4.5-4.5M5 19h14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v11M7.5 10.5L12 15l4.5-4.5M5 19h14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Same badge tile as Download, just a shopping-cart glyph (the same icon
   the header's cart button uses) instead of the download arrow. */
.agh-store-btn__badge-icon--buy {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h2l2.4 12.4a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.6L21 8H6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='21' r='1.4'/%3E%3Ccircle cx='18' cy='21' r='1.4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h2l2.4 12.4a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.6L21 8H6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='21' r='1.4'/%3E%3Ccircle cx='18' cy='21' r='1.4'/%3E%3C/svg%3E");
}

.agh-game-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.agh-game-gallery__item { position: relative; display: block; border-radius: var(--agh-radius); overflow: hidden; aspect-ratio: 16/10; background: var(--agh-surface-alt); cursor: zoom-in; }
.agh-game-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.agh-game-gallery__item:hover img { transform: scale(1.06); }
.agh-game-gallery__zoom {
	position: absolute;
	top: 50%; left: 50%;
	width: 36px; height: 36px;
	margin: -18px 0 0 -18px;
	border-radius: 50%;
	background: rgba(10, 10, 12, .6);
	display: flex; align-items: center; justify-content: center;
	opacity: 0;
	transition: opacity .2s ease;
}
.agh-game-gallery__item:hover .agh-game-gallery__zoom { opacity: 1; }
.agh-game-gallery__zoom .agh-icon { margin: 0; width: 16px; height: 16px; background-color: #fff; }

/* ==========================================================================
   Screenshot lightbox
   ========================================================================== */
.agh-lightbox { position: fixed; inset: 0; background: rgba(10, 10, 12, .92); z-index: 100; display: none; align-items: center; justify-content: center; padding: 30px; }
.agh-lightbox.is-open { display: flex; }
.agh-lightbox__inner { position: relative; max-width: 1100px; max-height: 100%; }
.agh-lightbox__img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; border-radius: var(--agh-radius); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.agh-lightbox__close { position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.agh-lightbox__counter { position: absolute; bottom: -30px; left: 0; right: 0; text-align: center; color: #fff; font-size: 13px; opacity: .75; }
.agh-lightbox__nav {
	position: fixed; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255, 255, 255, .15); color: #fff; border: none;
	font-size: 24px; z-index: 101; cursor: pointer;
}
.agh-lightbox__nav:hover { background: rgba(255, 255, 255, .3); }
.agh-lightbox__nav--prev { left: 20px; }
.agh-lightbox__nav--next { right: 20px; }
.agh-game-links ul { list-style: disc; padding-left: 1.4em; }
.agh-game-links a:hover { color: var(--agh-red); }

.agh-author-box { display: flex; gap: 18px; background: var(--agh-surface-alt); border-radius: var(--agh-radius); padding: 22px; margin-top: 34px; }
.agh-author-box__avatar img { border-radius: 50%; }
.agh-author-box__name { margin-bottom: 4px; }
.agh-author-box__bio { color: var(--agh-text-secondary); margin: 0; }

/* ==========================================================================
   Comments
   ========================================================================== */
.agh-comments { margin-top: 40px; }
.agh-comment-list .comment { margin-bottom: 20px; }
.agh-comment-list .comment-body { background: var(--agh-surface-alt); border-radius: var(--agh-radius); padding: 18px; }
.agh-comment-list .comment-author .avatar { border-radius: 50%; float: left; margin-right: 14px; }
.agh-comment-list .comment-meta { font-size: 13px; color: var(--agh-text-muted); }
.agh-input {
	width: 100%; border: 1px solid var(--agh-border); border-radius: var(--agh-radius);
	padding: 12px 14px; font-family: inherit; font-size: 14px; margin-bottom: 14px;
	background: var(--agh-surface-alt);
	color: var(--agh-text);
}
.comment-form-author, .comment-form-email { display: inline-block; width: 49%; }
.comment-form-author { margin-right: 2%; }
.agh-btn, input[type="submit"].agh-btn {
	background: var(--agh-red); color: #fff; border: none; font-weight: 700;
	padding: 12px 26px; border-radius: var(--agh-radius);
}
.agh-btn-outline {
	display: inline-block; border: 2px solid var(--agh-red); color: var(--agh-red);
	font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .5px;
	padding: 10px 20px; border-radius: 2px;
}
.agh-btn-outline:hover { background: var(--agh-red); color: #fff; }

/* ==========================================================================
   404 & pagination
   ========================================================================== */
.agh-404 { text-align: center; padding: 60px 0; }
.agh-404__code { font-size: 90px; color: var(--agh-red); margin-bottom: 0; }
.agh-404 .agh-search-form { max-width: 400px; margin: 24px auto; }

.agh-pagination { display: flex; gap: 8px; margin-top: 30px; }
.agh-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; border-radius: var(--agh-radius);
	background: var(--agh-surface-alt); color: var(--agh-text); font-weight: 700; font-size: 14px; padding: 0 10px;
}
.agh-pagination .page-numbers.current { background: var(--agh-red); color: #fff; }

.agh-search-form { display: flex; }
.agh-search-form__input { flex: 1; border: 1px solid var(--agh-border); border-radius: 3px 0 0 3px; padding: 12px; background: var(--agh-surface); color: var(--agh-text); }
.agh-search-form__button { background: var(--agh-red); color: #fff; border: none; padding: 0 18px; border-radius: 0 3px 3px 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.agh-footer { background: var(--agh-black); color: #b7b8be; margin-top: 20px; }
.agh-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); }
.agh-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; flex-wrap: wrap; gap: 10px; }
.agh-footer__credit { margin: 0; font-size: 13px; }
.agh-footer__privacy { margin: 0; font-size: 13px; }
.agh-footer__privacy a { color: #b7b8be; }
.agh-footer__privacy a:hover { color: #fff; }
.agh-footer__powered-by { margin: 0; font-size: 12px; opacity: .7; }
.agh-footer__powered-by a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }
.agh-footer__powered-by a:hover { text-decoration-color: currentColor; }
.agh-footer__socials { display: flex; gap: 8px; }

.agh-back-to-top {
	position: fixed; right: 24px; bottom: 24px;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--agh-red); color: #fff; border: none;
	display: none; align-items: center; justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 50;
}
.agh-back-to-top.is-visible { display: flex; }
.agh-back-to-top .agh-icon { margin: 0; background-color: #fff; }

/* ==========================================================================
   Mobile
   ========================================================================== */
.agh-mobile-toggle { display: none; }

@media (max-width: 1024px) {
	.agh-home-columns, .agh-page-columns { grid-template-columns: 1fr; }
	.agh-card-grid { grid-template-columns: repeat(2, 1fr); }
	.agh-card-grid--compact { grid-template-columns: repeat(3, 1fr); }
	.agh-featured-grid { grid-template-columns: 1fr; }
	.agh-video-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	/* Socials and Login/Register text links would crowd the single header
	   row next to the search/cart/menu icons on a narrow screen -- both are
	   still reachable from the sidebar's "Follow Us" box and the Login/
	   Register page links elsewhere, so hiding them here isn't a dead end. */
	.agh-header__socials, .agh-header__auth { display: none; }
	.agh-main-nav {
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--agh-surface); border-top: 1px solid var(--agh-border);
		max-height: 0; overflow: hidden; transition: max-height .25s ease;
	}
	.agh-main-nav.is-open { max-height: 80vh; overflow-y: auto; }
	.agh-nav-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px; }
	.agh-nav-menu > li > a { padding: 12px 0; border-bottom: 1px solid var(--agh-border); }
	.agh-nav-menu ul { position: static; box-shadow: none; border-top: none; display: block; padding-left: 14px; }
	.agh-mobile-toggle { display: inline-flex; }
	.agh-hero__title { font-size: 30px; }
	.agh-hero { height: auto; min-height: 220px; }
	.agh-card-grid { grid-template-columns: 1fr; }
	.agh-card-grid--compact { grid-template-columns: repeat(2, 1fr); }
	.agh-card-list { grid-template-columns: 1fr; }
	.agh-video-strip { grid-template-columns: 1fr; }
	.agh-game-gallery__grid { grid-template-columns: repeat(2, 1fr); }
	.comment-form-author, .comment-form-email { width: 100%; margin-right: 0; }
	/* Longer section-bar titles ("Notification Preferences" is the longest
	   one in use) need a smaller font on the single-column mobile layout to
	   comfortably fit .agh-main's narrower width on one line -- especially
	   if a visitor's browser ever falls back from Space Grotesk to a
	   wider system font (a blocked/slow Google Fonts request, for example)
	   before the real heading font finishes loading. The base rule's
	   white-space/ellipsis handles any title that's still too wide after
	   this, but that's a last-resort safety net, not the primary fix. */
	.agh-section-bar__title { font-size: 13px; }
}

/* ==========================================================================
   Reduced motion: honor the OS-level "reduce motion" preference by cutting
   every animation/transition down to effectively instant. The hero
   slider's autoplay timer is also skipped in JS (see main.js) -- this
   covers the CSS-driven effects (card/gallery hover zoom, slide fades,
   the mobile nav's height transition, etc.).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Contact form (template-contact.php)
   ========================================================================== */
.agh-contact-form { max-width: 520px; margin-top: 10px; }
.agh-contact-form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.agh-contact-form__field label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.agh-contact-form__field input,
.agh-contact-form__field textarea {
	border: 1px solid var(--agh-border);
	border-radius: var(--agh-radius);
	padding: 12px 14px;
	font-size: 14px;
	font-family: inherit;
	background: var(--agh-surface);
	color: var(--agh-text-strong);
}
.agh-contact-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.agh-contact-form__submit { background: var(--agh-red); color: #fff; border: none; padding: 12px 26px; font-weight: 700; text-transform: uppercase; border-radius: var(--agh-radius); }
.agh-contact-form__submit:hover { background: var(--agh-red-dark); }
.agh-contact-notice { padding: 14px 18px; border-radius: var(--agh-radius); margin-bottom: 20px; font-size: 14px; }
.agh-contact-notice--success { background: rgba(22,163,74,.12); color: #16a34a; border: 1px solid rgba(22,163,74,.3); }
/* Hardcoded red (not var(--agh-red)) on purpose: this is a semantic
   "something went wrong" color and should stay red regardless of whatever
   accent color a site owner picks in Display Options -- the success notice
   just above is hardcoded green for the same reason. */
.agh-contact-notice--error { background: rgba(238,26,60,.1); color: #ee1a3c; border: 1px solid rgba(238,26,60,.3); }

/* ==========================================================================
   Log In / Register / Lost Password (template-login.php,
   template-register.php, template-lostpassword.php) -- same visual
   language as the Contact form above, under its own class names since
   these are conceptually a different set of forms (auth, not messaging).
   ========================================================================== */
.agh-auth-form { max-width: 420px; margin-top: 10px; }
.agh-auth-form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.agh-auth-form__field label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.agh-auth-form__field input {
	border: 1px solid var(--agh-border);
	border-radius: var(--agh-radius);
	padding: 12px 14px;
	font-size: 14px;
	font-family: inherit;
	background: var(--agh-surface);
	color: var(--agh-text-strong);
}
.agh-auth-form__checkbox { display: flex; align-items: center; margin-bottom: 18px; font-size: 14px; }
.agh-auth-form__checkbox label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.agh-auth-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.agh-auth-form__hint { font-size: 14px; color: var(--agh-text-muted); margin-bottom: 16px; }
.agh-auth-form__submit { background: var(--agh-red); color: #fff; border: none; padding: 12px 26px; font-weight: 700; text-transform: uppercase; border-radius: var(--agh-radius); }
.agh-auth-form__submit:hover { background: var(--agh-red-dark); }
.agh-auth-notice { padding: 14px 18px; border-radius: var(--agh-radius); margin-bottom: 20px; font-size: 14px; }
.agh-auth-notice--success { background: rgba(22,163,74,.12); color: #16a34a; border: 1px solid rgba(22,163,74,.3); }
/* Hardcoded red (not var(--agh-red)) on purpose -- same reasoning as
   .agh-contact-notice--error above. */
.agh-auth-notice--error { background: rgba(238,26,60,.1); color: #ee1a3c; border: 1px solid rgba(238,26,60,.3); }
.agh-auth-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 14px; }
.agh-auth-links a { color: var(--agh-red); font-weight: 600; }
.agh-auth-links a:hover { text-decoration: underline; }