/*
Theme Name: IT Edits
Theme URI: https://itedits.com/
Author: Vlad
Author URI: https://itedits.com/about/
Description: A custom, lightweight theme for IT Edits: a PC building, component compatibility and hardware research publication. Built without a page builder or framework, with editorial reading comfort and Core Web Vitals as the primary constraints.
Version: 2.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: it-edits
Tags: custom-menu, featured-images, block-styles, wide-blocks, accessibility-ready
*/

/**
 * Design tokens and base styles.
 *
 * Dark by default. A hardware site is read in the evening more often than
 * not, and the dark palette is the one the brand is designed around; the
 * light palette exists for people who set that preference explicitly.
 *
 * Component styles live in assets/css/ and load per template, so a page
 * only downloads the rules it uses. No framework, no build step: what is
 * written here is what ships.
 */

/* =====================================================================
   Tokens
   ===================================================================== */

:root {
	color-scheme: dark;

	/* Surfaces. A near-black base with progressively lighter panels
	   reads as depth without needing shadows, which are expensive to
	   paint and unreliable on dark backgrounds. */
	--ite-bg: #0b0e14;
	--ite-surface: #131822;
	--ite-surface-2: #1a2130;
	--ite-surface-3: #232c3d;

	/* Text. Pure white on near-black causes halation at body size, so
	   the brightest text stops short of it. */
	--ite-text: #e8edf5;
	--ite-text-muted: #9aa6bb;
	--ite-text-dim: #6b7688;

	--ite-border: #232b3a;
	--ite-border-bright: #313c4f;

	/* One accent, used only for interactive elements and never for
	   decoration. 7.2:1 against the base surface. */
	--ite-accent: #4d9fff;
	--ite-accent-hover: #7ab8ff;
	--ite-accent-dim: rgba(77, 159, 255, 0.12);
	--ite-accent-border: rgba(77, 159, 255, 0.3);

	--ite-success: #3ecf8e;
	--ite-success-dim: rgba(62, 207, 142, 0.12);
	--ite-warning: #f5a623;
	--ite-warning-dim: rgba(245, 166, 35, 0.12);
	--ite-error: #ff6b6b;
	--ite-error-dim: rgba(255, 107, 107, 0.12);

	/* Type. A system stack avoids a render-blocking font request and the
	   layout shift when a web font swaps in. On a text-heavy site that is
	   worth more than a distinctive typeface. */
	--ite-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--ite-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	/* Fluid type. Each step interpolates between a phone and a desktop
	   width, so nothing needs a breakpoint to stay readable. */
	--ite-text-xs: 0.78125rem;
	--ite-text-sm: 0.875rem;
	--ite-text-base: 1rem;
	--ite-text-md: 1.0625rem;
	--ite-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--ite-text-xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
	--ite-text-2xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.15rem);
	--ite-text-3xl: clamp(2rem, 1.55rem + 2.1vw, 3rem);
	--ite-text-4xl: clamp(2.4rem, 1.7rem + 3.2vw, 4rem);

	--ite-leading-tight: 1.15;
	--ite-leading-snug: 1.35;
	--ite-leading: 1.65;

	/* Spacing. Each step is its number times 4px, so --ite-6 is 24px and
	   --ite-12 is 48px. The name states the value, which is the whole
	   point of a scale: a rule asking for --ite-8 gets 32px, not a figure
	   that has to be looked up. */
	--ite-1: 0.25rem;   /*  4px */
	--ite-2: 0.5rem;    /*  8px */
	--ite-3: 0.75rem;   /* 12px */
	--ite-4: 1rem;      /* 16px */
	--ite-5: 1.25rem;   /* 20px */
	--ite-6: 1.5rem;    /* 24px */
	--ite-7: 1.75rem;   /* 28px */
	--ite-8: 2rem;      /* 32px */
	--ite-9: 2.25rem;   /* 36px */
	--ite-10: 2.5rem;   /* 40px */
	--ite-12: 3rem;     /* 48px */
	--ite-14: 3.5rem;   /* 56px */
	--ite-16: 4rem;     /* 64px */
	--ite-20: 5rem;     /* 80px */
	--ite-24: 6rem;     /* 96px */

	--ite-radius-sm: 6px;
	--ite-radius: 10px;
	--ite-radius-lg: 16px;

	--ite-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
	--ite-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.4);

	/* Layout. One width for everything: the header, an article, a tool
	   page and the footer all stop at the same place, so the page reads
	   as one column rather than three that disagree. The three names are
	   kept because rules across the stylesheets refer to them. */
	--ite-wide: 75rem;
	--ite-content: var(--ite-wide);
	--ite-prose: var(--ite-wide);

	/* The side gutter grows with the viewport between a phone and a wide
	   desktop, so the page never sits hard against the edge on a small
	   screen nor runs edge to edge on a large one. A percentage alone
	   would collapse to nothing on a phone, which is where the breathing
	   room matters most; clamp keeps a floor and a ceiling, and removes
	   the breakpoint this used to need. */
	--ite-gutter: clamp(1rem, 4vw, 3.5rem);

	--ite-header-h: 4rem;

	--ite-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Light palette for visitors who have asked for it. Only tokens are
   redefined; no component rule knows the theme changed. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		color-scheme: light;

		--ite-bg: #ffffff;
		--ite-surface: #f7f9fc;
		--ite-surface-2: #eef2f8;
		--ite-surface-3: #e2e8f2;

		--ite-text: #131822;
		--ite-text-muted: #55617a;
		--ite-text-dim: #7c879b;

		--ite-border: #dde3ed;
		--ite-border-bright: #c5cede;

		--ite-accent: #1665d8;
		--ite-accent-hover: #0f4da8;
		--ite-accent-dim: rgba(22, 101, 216, 0.08);
		--ite-accent-border: rgba(22, 101, 216, 0.25);

		--ite-success: #15804d;
		--ite-success-dim: rgba(21, 128, 77, 0.08);
		--ite-warning: #9a6209;
		--ite-warning-dim: rgba(154, 98, 9, 0.08);
		--ite-error: #c0332b;
		--ite-error-dim: rgba(192, 51, 43, 0.08);

		--ite-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08);
		--ite-shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.08), 0 20px 48px rgba(16, 24, 40, 0.12);
	}
}

/* =====================================================================
   Reset
   ===================================================================== */

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

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

@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;
	}
}

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

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--ite-4);
	line-height: var(--ite-leading-tight);
	font-weight: 680;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

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

p, ul, ol, dl, blockquote, table, figure, pre {
	margin: 0 0 var(--ite-4);
}

a {
	color: var(--ite-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.15s var(--ite-ease);
}

a:hover {
	color: var(--ite-accent-hover);
}

/* A visible focus ring on every interactive element. Never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ite-accent);
	outline-offset: 2px;
	border-radius: var(--ite-radius-sm);
}

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

img[width][height] {
	height: auto;
}

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

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

code, kbd, samp, pre {
	font-family: var(--ite-mono);
	font-size: 0.9em;
}

hr {
	border: 0;
	border-top: 1px solid var(--ite-border);
	margin: var(--ite-8) 0;
}

::selection {
	background: var(--ite-accent);
	color: #fff;
}

/* =====================================================================
   Accessibility helpers
   ===================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: var(--ite-4);
	top: -100%;
	z-index: 1000;
	padding: var(--ite-3) var(--ite-4);
	background: var(--ite-accent);
	color: #fff;
	border-radius: 0 0 var(--ite-radius) var(--ite-radius);
	text-decoration: none;
	font-weight: 600;
}

.skip-link:focus {
	top: 0;
	color: #fff;
}

/* =====================================================================
   Layout primitives
   ===================================================================== */

.ite-container {
	width: 100%;
	max-width: var(--ite-wide);
	margin-inline: auto;
	padding-inline: var(--ite-gutter);
}

.ite-container--content { max-width: var(--ite-content); }
.ite-container--prose   { max-width: var(--ite-prose); }

/* Section rhythm scales with the viewport for the same reason the gutter
   does: a fixed 80px band that looks generous on a desktop is most of a
   phone screen. The floor and ceiling keep it from collapsing or running
   away, so no breakpoint is needed. */
.ite-section {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.ite-section--tight { padding-block: clamp(1.5rem, 3.5vw, 2.5rem); }

.ite-section--alt {
	background: var(--ite-surface);
	border-block: 1px solid var(--ite-border);
}

.ite-grid {
	display: grid;
	gap: var(--ite-6);
}

@media (min-width: 40em) {
	.ite-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62em) {
	.ite-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ite-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A subtle grid texture used behind the hero only. Pure CSS, no image
   request, and it disappears entirely under reduced-motion or on print. */
.ite-grid-bg {
	position: relative;
	isolation: isolate;
}

.ite-grid-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(var(--ite-border) 1px, transparent 1px),
		linear-gradient(90deg, var(--ite-border) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 75%);
	opacity: 0.45;
	pointer-events: none;
}