/*
Theme Name: NerdBlocks
Theme URI: https://nerdblocks.org
Author: NerdBlocks
Author URI: https://nerdblocks.org
Description: A premium, fully custom WordPress theme for gaming news, reviews, anime, movies & TV, comics, tabletop, and tech culture — built without a page builder. Dark UI with a signature neon-green brand accent, pixel-matched to the NerdBlocks homepage design.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 8.1
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: nerdblocks
Tags: dark, custom-menu, custom-logo, editor-style, featured-images, full-width-template, rtl-language-support, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* =============================================================
   TABLE OF CONTENTS
   -------------------------------------------------------------
   1.  CSS Reset / Normalize
   2.  Design Tokens (CSS Custom Properties)
   3.  Base Typography
   4.  Base Elements (links, lists, forms, tables, media)
   5.  Layout Primitives (container, grid, section)
   6.  WordPress Core Classes (alignment, captions, galleries)
   7.  Accessibility Helpers
   ============================================================= */

/* -------------------------------------------------------------
   1. CSS Reset / Normalize
   ------------------------------------------------------------- */

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

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
	margin: 0;
}

ul[class],
ol[class] {
	padding: 0;
	list-style: none;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* -------------------------------------------------------------
   2. Design Tokens
   ------------------------------------------------------------- */

:root {

	/* Brand — the NerdBlocks green is the single accent color used
	   across buttons, links, active nav states, review score
	   badges, category highlights, progress bars, and hover glows. */
	--nb-color-primary: #39ff6a;
	--nb-color-primary-rgb: 57, 255, 106;
	--nb-color-primary-dark: #22c55a;
	--nb-color-primary-contrast: #06140a;

	/* A muted secondary accent for quiet variety (e.g. links inside
	   body copy, secondary icons) — always subordinate to green. */
	--nb-color-secondary: #35b8ff;
	--nb-color-secondary-rgb: 53, 184, 255;

	/* Score-tier accents (review badges only). */
	--nb-color-tier-outstanding: var( --nb-color-primary );
	--nb-color-tier-great: #8ce04f;
	--nb-color-tier-average: #f5c542;
	--nb-color-tier-poor: #ef5350;

	/* Surfaces — dark, modern, layered. */
	--nb-color-bg: #0a0d11;
	--nb-color-bg-alt: #0d1116;
	--nb-color-card: #12171d;
	--nb-color-card-hover: #171e26;
	--nb-color-border: #232b33;
	--nb-color-border-strong: #2f3944;

	/* Text */
	--nb-color-text: #f5f7fa;
	--nb-color-text-muted: #97a1ad;
	--nb-color-text-faint: #666f7a;

	/* Typography */
	--nb-font-heading: 'Poppins', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
	--nb-font-body: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

	--nb-text-xs: 0.75rem;
	--nb-text-sm: 0.875rem;
	--nb-text-base: 1rem;
	--nb-text-lg: 1.125rem;
	--nb-text-xl: 1.25rem;
	--nb-text-2xl: 1.5rem;
	--nb-text-3xl: 1.875rem;
	--nb-text-4xl: 2.25rem;
	--nb-text-5xl: 2.75rem;
	--nb-text-6xl: 3.5rem;

	--nb-line-tight: 1.15;
	--nb-line-snug: 1.35;
	--nb-line-normal: 1.6;

	/* Spacing (4px base scale) */
	--nb-space-3xs: 0.25rem;
	--nb-space-2xs: 0.5rem;
	--nb-space-xs: 0.75rem;
	--nb-space-sm: 1rem;
	--nb-space-md: 1.5rem;
	--nb-space-lg: 2rem;
	--nb-space-xl: 3rem;
	--nb-space-2xl: 4rem;
	--nb-space-3xl: 6rem;

	/* Radius — squared off to match the mockup's hard edges. */
	--nb-radius-sm: 0;
	--nb-radius-md: 0;
	--nb-radius-lg: 0;
	--nb-radius-xl: 0;
	--nb-radius-full: 0;

	/* Shadows + glow */
	--nb-shadow-sm: 0 1px 2px rgba( 0, 0, 0, 0.4 );
	--nb-shadow-md: 0 4px 16px rgba( 0, 0, 0, 0.45 );
	--nb-shadow-lg: 0 12px 32px rgba( 0, 0, 0, 0.5 );
	--nb-shadow-glow: 0 0 0 1px rgba( var( --nb-color-primary-rgb ), 0.4 ), 0 0 24px rgba( var( --nb-color-primary-rgb ), 0.35 );
	--nb-shadow-glow-sm: 0 0 16px rgba( var( --nb-color-primary-rgb ), 0.25 );

	/* Motion */
	--nb-transition-fast: 150ms ease;
	--nb-transition-base: 250ms cubic-bezier( 0.4, 0, 0.2, 1 );
	--nb-transition-slow: 400ms cubic-bezier( 0.4, 0, 0.2, 1 );

	/* Layout */
	--nb-container-max: 1280px;
	--nb-container-narrow: 900px;
	--nb-header-height: 76px;
}

/*
 * Light-mode override, toggled via the header's dark/light switch
 * (assets/js/main.js adds/removes this class on <html>). The theme is
 * dark-mode-first per the brand mockup; light mode swaps only the
 * surface/text tokens so every component (built entirely from these
 * variables) repaints correctly with zero component-level overrides.
 */
html.nb-theme-light {
	--nb-color-bg: #f7f8fa;
	--nb-color-bg-alt: #ffffff;
	--nb-color-card: #ffffff;
	--nb-color-card-hover: #f0f2f5;
	--nb-color-border: #e2e6ea;
	--nb-color-border-strong: #cfd5db;
	--nb-color-text: #12171d;
	--nb-color-text-muted: #4b5563;
	--nb-color-text-faint: #8a94a0;
	--nb-color-primary-contrast: #06140a;
}

/* -------------------------------------------------------------
   3. Base Typography
   ------------------------------------------------------------- */

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

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var( --nb-font-heading );
	font-weight: 700;
	line-height: var( --nb-line-tight );
	color: var( --nb-color-text );
}

h1 {
	font-size: var( --nb-text-5xl );
}

h2 {
	font-size: var( --nb-text-3xl );
}

h3 {
	font-size: var( --nb-text-xl );
}

h4 {
	font-size: var( --nb-text-lg );
}

p {
	color: var( --nb-color-text-muted );
}

/* -------------------------------------------------------------
   4. Base Elements
   ------------------------------------------------------------- */

a {
	color: var( --nb-color-primary );
	text-decoration: none;
	transition: color var( --nb-transition-fast );
}

a:hover,
a:focus-visible {
	color: var( --nb-color-primary-dark );
}

:focus-visible {
	outline: 2px solid var( --nb-color-primary );
	outline-offset: 2px;
}

table {
	width: 100%;
	border-collapse: collapse;
}

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

fieldset {
	border: 1px solid var( --nb-color-border );
	border-radius: var( --nb-radius-md );
}

input,
textarea,
select {
	background-color: var( --nb-color-card );
	border: 1px solid var( --nb-color-border );
	border-radius: var( --nb-radius-sm );
	color: var( --nb-color-text );
	padding: var( --nb-space-2xs ) var( --nb-space-xs );
}

input::placeholder,
textarea::placeholder {
	color: var( --nb-color-text-faint );
}

/* -------------------------------------------------------------
   5. Layout Primitives
   ------------------------------------------------------------- */

.nb-container {
	margin-inline: auto;
	max-width: var( --nb-container-max );
	padding-inline: var( --nb-space-md );
	width: 100%;
}

.nb-container--narrow {
	max-width: var( --nb-container-narrow );
}

.nb-section {
	padding-block: var( --nb-space-xl );
}

/* -------------------------------------------------------------
   6. WordPress Core Classes
   ------------------------------------------------------------- */

.alignleft {
	float: left;
	margin: 0 var( --nb-space-md ) var( --nb-space-sm ) 0;
}

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

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

.wp-caption,
.wp-block-image figcaption,
.gallery-caption {
	color: var( --nb-color-text-muted );
	font-size: var( --nb-text-sm );
	text-align: center;
}

.sticky {
	position: relative;
}

.gallery {
	display: grid;
	gap: var( --nb-space-sm );
	grid-template-columns: repeat( var( --columns, 3 ), 1fr );
}

.bypostauthor {
	display: block;
}

/* -------------------------------------------------------------
   7. Accessibility Helpers
   ------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	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-card );
	border-radius: var( --nb-radius-sm );
	clip: auto !important;
	clip-path: none;
	color: var( --nb-color-text );
	display: block;
	height: auto;
	left: var( --nb-space-sm );
	line-height: normal;
	padding: var( --nb-space-xs ) var( --nb-space-sm );
	text-decoration: none;
	top: var( --nb-space-sm );
	width: auto;
	z-index: 100000;
}

.skip-link {
	left: 50%;
	position: absolute;
	transform: translateY( -200% );
	transition: transform var( --nb-transition-fast );
	z-index: 100000;
}

.skip-link:focus {
	transform: translateY( 0 );
}