/*
Theme Name: Hardware & Games
Theme URI: https://hardwareandgames.com/
Author: Hardware & Games
Description: Dark block theme for Hardware & Games — PC hardware reviews, buying guides and gaming news.
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hardwareandgames
*/

/* ---------- Base ---------- */

:root {
	color-scheme: dark;
	--hag-radius: 12px;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

:where(a) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Small uppercase label above titles */
.hag-eyebrow {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

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

.hag-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.admin-bar .hag-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Text logo with an "HG" badge (the uploaded logo is black-on-white) */
.hag-brand {
	margin: 0;
	line-height: 1;
}

.hag-brand a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	white-space: nowrap;
}

.hag-brand a::before {
	content: "HG";
	display: inline-grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 8px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0;
}

.hag-header .wp-block-navigation-item__content {
	padding-block: 0.25rem;
}

.hag-header .wp-block-navigation-item__content:hover {
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent);
}

.hag-header-search .wp-block-search__button {
	margin: 0;
	padding: 0.45rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.hag-header-search .wp-block-search__button:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.hag-header-search .wp-block-search__input,
.hag-search-form .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	padding: 0.5rem 0.75rem;
}

.hag-header-search .wp-block-search__inside-wrapper,
.hag-search-form .wp-block-search__inside-wrapper {
	gap: 0.5rem;
	border: 0;
	padding: 0;
}

/* Mobile menu toggle */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}

/* ---------- Home ---------- */

.hag-intro > :first-child,
.hag-article-head > :first-child {
	margin-top: 0;
}

.hag-intro > :last-child {
	margin-bottom: 0;
}

.hag-intro .wp-block-query-title {
	font-size: var(--wp--preset--font-size--xx-large);
}

.hag-hero-card {
	margin: 0;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: calc(var(--hag-radius) + 4px);
	background:
		radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent), transparent 55%),
		var(--wp--preset--color--surface);
}

.hag-hero-card .wp-block-post-title {
	margin: 0;
}

.hag-hero-image img {
	border-radius: var(--hag-radius);
}

.hag-section-head {
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.hag-section-head > * {
	margin: 0;
}

.hag-section-head a {
	text-decoration: none;
	font-weight: 600;
}

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

.hag-card {
	position: relative;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--hag-radius);
	background: var(--wp--preset--color--surface);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.hag-card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 60%, var(--wp--preset--color--border));
	transform: translateY(-2px);
}

.hag-card-image {
	margin: 0;
	width: 100%;
	background: var(--wp--preset--color--surface-raised);
}

.hag-card-image img {
	transition: transform 0.4s ease;
}

.hag-card:hover .hag-card-image img {
	transform: scale(1.03);
}

.hag-card-body {
	flex: 1;
	padding: 0 1.25rem 1.25rem;
}

.hag-card-body > * {
	margin: 0;
}

.hag-card-title {
	line-height: 1.3;
}

/* Whole card is clickable via the title link */
.hag-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hag-card .wp-block-post-terms a {
	position: relative;
	z-index: 2;
}

.hag-card-excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.hag-card-date {
	margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
	.hag-card,
	.hag-card-image img {
		transition: none;
	}

	.hag-card:hover,
	.hag-card:hover .hag-card-image img {
		transform: none;
	}
}

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

.hag-pagination {
	margin-top: var(--wp--preset--spacing--50);
}

.hag-pagination a,
.hag-pagination .current {
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.hag-pagination .current,
.hag-pagination a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* ---------- Article ---------- */

.hag-dek .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
}

.hag-byline {
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.hag-byline .wp-block-post-author {
	align-items: center;
}

.hag-byline .wp-block-post-author__avatar img {
	border-radius: 50%;
}

.hag-byline .wp-block-post-author__content,
.hag-byline .wp-block-post-author__byline,
.hag-byline .wp-block-post-author__name {
	display: inline;
	margin: 0;
	font-size: inherit;
}

.hag-byline .wp-block-post-author__byline {
	margin-right: 0.3em;
}

.hag-byline .wp-block-post-author__name a,
.hag-author-box .wp-block-post-author__name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.hag-published::before {
	content: "·";
	margin-right: 0.6rem;
}

.hag-updated::before {
	content: "· Updated ";
}

.hag-article-image img {
	border-radius: var(--hag-radius);
}

/* Readable long-form content */
.hag-content > * + h2 {
	margin-top: var(--wp--preset--spacing--60);
}

.hag-content > * + h3 {
	margin-top: var(--wp--preset--spacing--50);
}

.hag-content h2 {
	scroll-margin-top: 6rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.hag-content h3 {
	font-size: var(--wp--preset--font-size--large);
}

.hag-content li + li {
	margin-top: 0.35rem;
}

.hag-content img {
	border-radius: 8px;
}

/* Affiliate disclosure */
.hag-affiliate-note {
	margin: 0;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 8px 8px 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Table of contents */
.hag-toc details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--hag-radius);
	background: var(--wp--preset--color--surface);
}

.hag-toc summary {
	cursor: pointer;
	padding: 0.9rem 1.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

.hag-toc ol {
	margin: 0;
	padding: 0 1.25rem 1.1rem 2.75rem;
	font-size: var(--wp--preset--font-size--small);
}

.hag-toc li + li {
	margin-top: 0.3rem;
}

.hag-toc a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.hag-toc a:hover {
	color: var(--wp--preset--color--accent);
}

/*
 * "Check price" buttons inside posts. Older posts carry an inline pink
 * gradient; override it so every CTA uses the site accent.
 */
.hag-content .wp-block-button__link {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-accent) !important;
	border-radius: 8px;
	box-shadow: 0 0 0 0 transparent;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.hag-content .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-strong) !important;
	box-shadow: 0 6px 24px -8px color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent);
}

/* Tables (specs, requirements) */
.hag-content .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
}

.hag-content .wp-block-table th,
.hag-content .wp-block-table td {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--wp--preset--color--border);
	text-align: left;
}

.hag-content .wp-block-table thead {
	border-bottom: 0;
	background: var(--wp--preset--color--surface-raised);
}

.hag-content .wp-block-table.is-style-stripes {
	border-bottom: 0;
}

.hag-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--wp--preset--color--surface);
}

/* Article footer */
.hag-article-foot .wp-block-post-terms a {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--muted);
	text-transform: none;
	letter-spacing: 0;
}

.hag-author-box {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--hag-radius);
}

.hag-author-box .wp-block-post-author__avatar img {
	border-radius: 50%;
}

.hag-author-box .wp-block-post-author__byline {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.hag-author-box .wp-block-post-author__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

.hag-author-box .wp-block-post-author__bio {
	margin-top: 0.4rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

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

.hag-footer {
	border-top: 1px solid var(--wp--preset--color--border);
}

.hag-footer-heading {
	margin-bottom: 0.75rem;
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hag-footer .wp-block-navigation a {
	color: var(--wp--preset--color--contrast);
}

.hag-disclosure {
	max-width: 32rem;
}

.hag-copyright {
	margin: 0;
}