/*
Theme Name:        NerdBlocks
Theme URI:         https://nerdblocks.com
Author:            NerdBlocks
Author URI:        https://nerdblocks.com
Description:       A premium, fully custom dark-UI WordPress theme for gaming news, reviews, anime, movies & TV, comics, tabletop, technology, community and podcast content. Built without page builders using native PHP, HTML5, CSS and vanilla JavaScript. Inspired by modern gaming interfaces such as Steam, Xbox Dashboard, Discord, Battle.net and NVIDIA GeForce Experience.
Version:           1.2.0
Requires at least: 6.4
Tested up to:      6.6
Requires PHP:      8.1
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       nerdblocks
Domain Path:       /languages
Tags:              dark, gaming, one-column, two-columns, right-sidebar, custom-background, custom-header, custom-logo, custom-menu, editor-style, featured-images, full-width-template, threaded-comments, translation-ready, block-styles, wide-blocks, e-commerce

NerdBlocks is a proprietary/commercial theme built on the WordPress standard
theme stylesheet convention. This file provides the required theme header,
brand design tokens and baseline (fallback) styles. Component-level styling
is layered on top via the block editor (theme.json) and compiled assets in
assets/dist/ once the build pipeline is added in a later phase.

WordPress Coding Standards: CSS rules follow the WordPress CSS standards
(tabs for indentation, one selector per line, lower-case hex, space after
colon, etc.).
*/

/* =============================================================
   TABLE OF CONTENTS
   1.0  Design Tokens (Custom Properties)
   2.0  Font Face Declarations
   3.0  Reset & Box Model
   4.0  Typography
   5.0  Links & Focus States
   6.0  Layout Helpers
   7.0  Forms
   8.0  Buttons
   9.0  Tables
   10.0 Media & Embeds
   11.0 WordPress Core Alignment Classes
   12.0 WordPress Core Gallery & Caption
   13.0 Accessibility Utilities
   14.0 Navigation Menus (baseline)
   15.0 Widgets & Sidebars (baseline)
   16.0 Comments (baseline)
   17.0 Custom Header & Background
   18.0 WooCommerce (baseline compatibility)
   19.0 Utility Classes
   ============================================================= */

/* =============================================================
   1.0 Design Tokens (Custom Properties)
   ============================================================= */
:root {
	/* Brand palette. */
	--nb-color-background: #0b0f13;
	--nb-color-surface: #151b22;
	--nb-color-surface-hover: #1d2633;
	--nb-color-primary: #39ff6a; /* Placeholder brand green — replace with exact value sampled from the NerdBlocks logo before launch. */
	--nb-color-primary-rgb: 57, 255, 106;
	--nb-color-secondary: #35b8ff;
	--nb-color-text: #f5f7fa;
	--nb-color-muted: #a7b0be;
	--nb-color-border: #27303d;

	/* Semantic aliases. */
	--nb-color-link: var( --nb-color-primary );
	--nb-color-link-hover: var( --nb-color-secondary );
	--nb-color-focus-ring: var( --nb-color-primary );
	--nb-color-danger: #ff4d4f;
	--nb-color-warning: #ffb84d;
	--nb-color-success: var( --nb-color-primary );

	/* Typography. */
	--nb-font-heading: 'Bebas Neue', 'Arial Narrow', sans-serif;
	--nb-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--nb-font-size-base: 1rem;
	--nb-line-height-base: 1.65;

	/* Spacing scale. */
	--nb-space-2xs: 0.25rem;
	--nb-space-xs: 0.5rem;
	--nb-space-sm: 0.75rem;
	--nb-space-md: 1rem;
	--nb-space-lg: 1.5rem;
	--nb-space-xl: 2.5rem;
	--nb-space-2xl: 4rem;

	/* Layout. */
	--nb-content-width: 1200px;
	--nb-wide-width: 1400px;
	--nb-radius-sm: 4px;
	--nb-radius-md: 8px;
	--nb-radius-lg: 16px;

	/* Elevation / motion. */
	--nb-shadow-card: 0 2px 8px rgba( 0, 0, 0, 0.45 );
	--nb-shadow-glow: 0 0 0 1px var( --nb-color-primary ), 0 0 16px rgba( var( --nb-color-primary-rgb ), 0.45 );
	--nb-transition-fast: 150ms ease;
	--nb-transition-base: 250ms ease;
}

/* =============================================================
   2.0 Font Face Declarations
   Self-hosted for performance (no third-party font requests).
   Add the corresponding .woff2 files to assets/fonts/ — see README.
   ============================================================= */
@font-face {
	font-family: 'Bebas Neue';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( 'assets/fonts/bebas-neue-regular.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( 'assets/fonts/inter-regular.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url( 'assets/fonts/inter-medium.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url( 'assets/fonts/inter-semibold.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url( 'assets/fonts/inter-bold.woff2' ) format( 'woff2' );
}

/* =============================================================
   3.0 Reset & Box Model
   ============================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var( --nb-color-background );
	color: var( --nb-color-text );
	font-family: var( --nb-font-body );
	font-size: var( --nb-font-size-base );
	line-height: var( --nb-line-height-base );
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

ul,
ol {
	padding-left: var( --nb-space-lg );
}

@media ( prefers-reduced-motion: reduce ) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =============================================================
   4.0 Typography
   ============================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var( --nb-font-heading );
	color: var( --nb-color-text );
	letter-spacing: 0.02em;
	line-height: 1.15;
	margin: 0 0 var( --nb-space-md );
	text-transform: uppercase;
}

h1 {
	font-size: clamp( 2rem, 1.4rem + 2.5vw, 3.5rem );
}

h2 {
	font-size: clamp( 1.6rem, 1.2rem + 1.8vw, 2.5rem );
}

h3 {
	font-size: clamp( 1.3rem, 1.05rem + 1.1vw, 1.85rem );
}

h4 {
	font-size: 1.35rem;
}

h5 {
	font-size: 1.15rem;
}

h6 {
	font-size: 1rem;
}

p {
	margin: 0 0 var( --nb-space-md );
}

small {
	color: var( --nb-color-muted );
	font-size: 0.875rem;
}

blockquote {
	border-left: 3px solid var( --nb-color-primary );
	color: var( --nb-color-muted );
	font-style: italic;
	margin: var( --nb-space-lg ) 0;
	padding: var( --nb-space-sm ) var( --nb-space-lg );
}

code,
kbd,
pre,
samp {
	background-color: var( --nb-color-surface );
	border: 1px solid var( --nb-color-border );
	border-radius: var( --nb-radius-sm );
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
	padding: var( --nb-space-md );
}

hr {
	border: 0;
	border-top: 1px solid var( --nb-color-border );
	margin: var( --nb-space-xl ) 0;
}

/* =============================================================
   5.0 Links & Focus States
   ============================================================= */
a {
	color: var( --nb-color-link );
	text-decoration: none;
	transition: color var( --nb-transition-fast );
}

a:hover,
a:focus {
	color: var( --nb-color-link-hover );
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var( --nb-color-focus-ring );
	outline-offset: 2px;
}

/* =============================================================
   6.0 Layout Helpers
   ============================================================= */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content,
.nb-container {
	margin-left: auto;
	margin-right: auto;
	max-width: var( --nb-content-width );
	padding-left: var( --nb-space-md );
	padding-right: var( --nb-space-md );
	width: 100%;
}

.nb-grid {
	display: grid;
	gap: var( --nb-space-lg );
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
}

.nb-card {
	background-color: var( --nb-color-surface );
	border: 1px solid var( --nb-color-border );
	border-radius: var( --nb-radius-md );
	overflow: hidden;
	transition: background-color var( --nb-transition-base ), transform var( --nb-transition-base ), box-shadow var( --nb-transition-base );
}

.nb-card:hover,
.nb-card:focus-within {
	background-color: var( --nb-color-surface-hover );
	box-shadow: var( --nb-shadow-glow );
	transform: translateY( -2px );
}

/* =============================================================
   7.0 Forms
   ============================================================= */
input,
textarea,
select,
button {
	font-family: inherit;
	font-size: 1rem;
}

input[type='text'],
input[type='email'],
input[type='url'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='tel'],
textarea,
select {
	background-color: var( --nb-color-surface );
	border: 1px solid var( --nb-color-border );
	border-radius: var( --nb-radius-sm );
	color: var( --nb-color-text );
	padding: var( --nb-space-sm ) var( --nb-space-md );
	width: 100%;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var( --nb-color-primary );
	outline: none;
}

label {
	color: var( --nb-color-muted );
	display: block;
	font-size: 0.9rem;
	margin-bottom: var( --nb-space-2xs );
}

/* =============================================================
   8.0 Buttons
   ============================================================= */
.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'],
.wp-block-button__link {
	background-color: var( --nb-color-primary );
	border: 2px solid var( --nb-color-primary );
	border-radius: var( --nb-radius-sm );
	color: var( --nb-color-background );
	cursor: pointer;
	display: inline-block;
	font-weight: 600;
	padding: var( --nb-space-sm ) var( --nb-space-lg );
	text-align: center;
	text-transform: uppercase;
	transition: background-color var( --nb-transition-fast ), box-shadow var( --nb-transition-fast ), color var( --nb-transition-fast );
}

.button:hover,
.button:focus,
button:hover,
button:focus,
input[type='button']:hover,
input[type='submit']:hover,
.wp-block-button__link:hover {
	background-color: transparent;
	box-shadow: var( --nb-shadow-glow );
	color: var( --nb-color-primary );
}

.button.is-secondary {
	background-color: transparent;
	border-color: var( --nb-color-secondary );
	color: var( --nb-color-secondary );
}

/* =============================================================
   9.0 Tables
   ============================================================= */
table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	border: 1px solid var( --nb-color-border );
	padding: var( --nb-space-sm ) var( --nb-space-md );
	text-align: left;
}

th {
	background-color: var( --nb-color-surface );
	font-family: var( --nb-font-heading );
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* =============================================================
   10.0 Media & Embeds
   ============================================================= */
.wp-block-embed__wrapper {
	position: relative;
}

.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
}

embed,
iframe,
object {
	max-width: 100%;
}

/* =============================================================
   11.0 WordPress Core Alignment Classes
   ============================================================= */
.alignleft {
	float: left;
	margin: 0 var( --nb-space-lg ) var( --nb-space-md ) 0;
}

.alignright {
	float: right;
	margin: 0 0 var( --nb-space-md ) var( --nb-space-lg );
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide {
	max-width: var( --nb-wide-width );
}

.alignfull {
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	max-width: 100vw;
	width: 100vw;
}

/* =============================================================
   12.0 WordPress Core Gallery & Caption
   ============================================================= */
.wp-caption,
.wp-block-image figcaption,
.gallery-caption {
	color: var( --nb-color-muted );
	font-size: 0.85rem;
	margin-top: var( --nb-space-2xs );
	text-align: center;
}

.gallery {
	display: grid;
	gap: var( --nb-space-sm );
}

.gallery-columns-2 {
	grid-template-columns: repeat( 2, 1fr );
}

.gallery-columns-3 {
	grid-template-columns: repeat( 3, 1fr );
}

.gallery-columns-4 {
	grid-template-columns: repeat( 4, 1fr );
}

.gallery-item {
	margin: 0;
}

/* =============================================================
   13.0 Accessibility Utilities
   ============================================================= */
.screen-reader-text {
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var( --nb-color-surface );
	border-radius: var( --nb-radius-sm );
	box-shadow: var( --nb-shadow-glow );
	clip: auto !important;
	clip-path: none;
	color: var( --nb-color-text );
	display: block;
	font-size: 1rem;
	height: auto;
	left: var( --nb-space-md );
	line-height: normal;
	padding: var( --nb-space-sm ) var( --nb-space-md );
	position: fixed !important;
	text-decoration: none;
	top: var( --nb-space-md );
	width: auto;
	z-index: 100000;
}

.skip-link {
	left: -9999px;
	position: absolute;
	top: 0;
	z-index: 100000;
}

.skip-link:focus {
	left: var( --nb-space-md );
	top: var( --nb-space-md );
}

/* =============================================================
   14.0 Navigation Menus (baseline)
   ============================================================= */
.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var( --nb-space-md );
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	color: var( --nb-color-text );
	display: inline-block;
	font-weight: 500;
	padding: var( --nb-space-xs ) var( --nb-space-sm );
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a {
	color: var( --nb-color-primary );
}

.menu-toggle {
	background: transparent;
	border: 1px solid var( --nb-color-border );
	color: var( --nb-color-text );
	display: none;
}

@media ( max-width: 782px ) {

	.menu-toggle {
		display: inline-block;
	}

	.main-navigation ul {
		display: none;
		flex-direction: column;
	}

	.main-navigation.is-active ul {
		display: flex;
	}
}

/* =============================================================
   15.0 Widgets & Sidebars (baseline)
   ============================================================= */
.widget {
	background-color: var( --nb-color-surface );
	border: 1px solid var( --nb-color-border );
	border-radius: var( --nb-radius-md );
	margin-bottom: var( --nb-space-lg );
	padding: var( --nb-space-lg );
}

.widget-title {
	border-bottom: 2px solid var( --nb-color-primary );
	font-size: 1.1rem;
	padding-bottom: var( --nb-space-xs );
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* =============================================================
   16.0 Comments (baseline)
   ============================================================= */
.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-body {
	background-color: var( --nb-color-surface );
	border: 1px solid var( --nb-color-border );
	border-radius: var( --nb-radius-md );
	margin-bottom: var( --nb-space-md );
	padding: var( --nb-space-md );
}

.comment-metadata {
	color: var( --nb-color-muted );
	font-size: 0.85rem;
}

.bypostauthor {
	border-color: var( --nb-color-primary );
}

/* =============================================================
   17.0 Custom Header & Background
   ============================================================= */
.custom-header {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.custom-header::after {
	background: linear-gradient( 180deg, rgba( 11, 15, 19, 0.2 ) 0%, rgba( 11, 15, 19, 0.95 ) 100% );
	content: '';
	inset: 0;
	position: absolute;
}

.custom-header-media,
.custom-header .site-branding {
	position: relative;
	z-index: 1;
}

/* =============================================================
   18.0 WooCommerce (baseline compatibility)
   ============================================================= */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var( --nb-color-primary );
	font-weight: 700;
}

.woocommerce span.onsale {
	background-color: var( --nb-color-primary );
	color: var( --nb-color-background );
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background-color: var( --nb-color-primary );
	border-color: var( --nb-color-primary );
	color: var( --nb-color-background );
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: transparent;
	color: var( --nb-color-primary );
}

.woocommerce nav.woocommerce-pagination ul {
	border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
	background-color: var( --nb-color-surface );
	border: 1px solid var( --nb-color-border );
}

/* =============================================================
   19.0 Utility Classes
   ============================================================= */
.nb-text-muted {
	color: var( --nb-color-muted );
}

.nb-text-primary {
	color: var( --nb-color-primary );
}

.nb-visually-hidden {
	clip: rect( 0, 0, 0, 0 );
	border: 0;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}