/*
Theme Name: Thermal IR
Theme URI: https://thermalpr.com
Author: Thermal PR, LLC
Description: Single-page marketing theme for Thermal's investor relations practice. Black-first, lime-accented, mono-labeled. Built on the Thermal Design System (IR sub-brand palette).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: thermal-ir
*/

/* ============================================================
   Theme stylesheet — the shared layer only.

   Every rule below is used by more than one block, or by the theme
   chrome (header.php / footer.php). Section-specific rules live with
   their block in src/<block>/style.css, compile to
   build/<block>/style-index.css, and are declared as `style` in that
   block's block.json — WordPress loads them alongside this file.

   Load order between the two is not guaranteed (and in the editor
   canvas this file wins), so a block rule that has to beat one here is
   compounded rather than relying on source order.

   Conventions follow 10up's CSS best practices:
   https://10up.github.io/Engineering-Best-Practices/css/
   - Sections 1-4 are the ITCSS layers: global (tokens) -> elements ->
     layout -> components. Nav and footer are components scoped to the
     theme chrome; sections 8-9 are cross-cutting overrides.
   - Directional properties are logical (margin-block-start, inset-inline-end),
     never physical. RTL therefore needs no separate stylesheet.
   - Bare element rules are wrapped in :where() so a class always wins.
   - No IDs, no !important (one documented exception in section 7), and
     specificity stays inside 0,1,0 - 0,2,1.
   ============================================================ */

/* ============================================================
   1. TOKENS
   Thermal Design System core + IR sub-brand lime.
   The parent brand accent is teal (#69E0CC / #33FFCC). The IR
   practice uses lime (#CCFF00) from the IR lockup instead.
   Everything else is unchanged from the design system.
   ============================================================ */
:root {

	/* Surfaces */
	--thermal-black: #0d0d0d;
	--thermal-white: #ffffff;
	--bg-1: #0d0d0d;
	--bg-2: #141414;

	/* IR accent */
	--ir-lime: #ccff00;
	--ir-lime-bright: #e2ff66;
	--ir-lime-40: rgba(204, 255, 0, 0.4);
	--ir-lime-72: rgba(204, 255, 0, 0.72);
	--ir-lime-05: rgba(204, 255, 0, 0.05);

	/* Foreground ramp */
	--fg-1: #ffffff;
	--fg-2: #ededed;
	--fg-3: #c9c9c9;
	--fg-4: #b8b8b8;
	--fg-5: #8e8e8e;

	/* Hairlines (on dark) */
	--border-1: rgba(255, 255, 255, 0.08);
	--border-2: rgba(255, 255, 255, 0.14);
	--border-3: rgba(255, 255, 255, 0.24);

	/* Type */
	--font-display: "Poppins", system-ui, -apple-system, sans-serif;
	--font-body: "Poppins", system-ui, -apple-system, sans-serif;
	--font-mono: "Roboto Mono", ui-monospace, sfmono-regular, monospace;
	--font-serif: "Gelasio", georgia, "Times New Roman", serif;
	--ls-eyebrow: 0.22em;

	/* Spacing (4-based) */
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;
	--s-10: 128px;

	/* Radii */
	--radius-md: 8px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	/* Motion — no bounces, no overshoot */
	--ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--motion-fast: 120ms;
	--motion-base: 200ms;
	--motion-slow: 320ms;

	/* Shadows */
	--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-glow: 0 0 0 1px rgba(204, 255, 0, 0.35), 0 0 24px rgba(204, 255, 0, 0.35);
	--shadow-glow-soft: 0 0 28px rgba(204, 255, 0, 0.12);

	/* Print — the sheet deliberately drops to plain black on white. */
	--print-bg: #ffffff;
	--print-fg: #000000;
	--print-border: #cccccc;

	/* Layout */
	--container: 1300px;
	--gutter: 40px;
	--nav-h: 76px;
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */

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

html {
	scroll-behavior: smooth;
	scroll-padding-block-start: calc(var(--nav-h) + 16px);
}

body {
	background-color: var(--bg-1);
	color: var(--fg-1);
	font-family: var(--font-body);
	font-size: 18px;
	-webkit-font-smoothing: antialiased;
	line-height: 1.55;
	margin: 0;
	overflow-x: hidden;
}

:where(h1, h2, h3) {
	font-family: var(--font-display);
	margin-block: 0;
	text-wrap: balance;
}

:where(p) {
	margin-block: 0;
	text-wrap: pretty;
}

:where(img) {
	display: block;
	max-width: 100%;
}

:where(a) {
	color: var(--ir-lime);
	text-decoration: none;
	transition: color var(--motion-base) var(--ease-standard);
}

:where(a):hover {
	color: var(--ir-lime-bright);
}

::selection {
	background-color: var(--ir-lime);
	color: var(--thermal-black);
}

:focus-visible {
	border-radius: 2px;
	box-shadow: 0 0 0 2px var(--thermal-black), 0 0 0 4px var(--ir-lime);
	outline: none;
}

.tir-skip {
	background-color: var(--ir-lime);
	color: var(--thermal-black);
	font-family: var(--font-mono);
	font-size: 12px;
	inset-block-start: 0;
	inset-inline-start: -9999px;
	letter-spacing: 0.14em;
	padding-block: 14px;
	padding-inline: 20px;
	position: absolute;
	text-transform: uppercase;
	z-index: 100;
}

.tir-skip:focus {
	inset-block-start: 12px;
	inset-inline-start: 12px;
}

.tir-visually-hidden {
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */

.tir-wrap {
	margin-inline: auto;
	max-width: var(--container);
	padding-inline: var(--gutter);
}

/* Page container — wraps the_content() in page.php, on the same measurements
   as .tir-wrap. A client dropping a paragraph on a Page gets a readable
   measure instead of edge-to-edge text. */
.tir-page {
	margin-inline: auto;
	max-width: var(--container);
	padding-inline: var(--gutter);
}

/* Sections are full-bleed by design, so they break back out of the container:
   pull the left edge to the viewport edge and take the viewport's width.
   Each one still centres its own copy with the .tir-wrap it contains, so the
   IR page renders exactly as it did before the container existed.

   100vw counts the scrollbar, so a section is a scrollbar-width wider than
   the visible page — split evenly either side and clipped by the
   `overflow-x: hidden` on body. Keep that clip if this rule stays.

   The two top-level block wrappers are hero and every tir-section variant.
   Keep this list in step with the 'class' passed to
   get_block_wrapper_attributes() in each block's render.php. */
.tir-page > .tir-hero,
.tir-page > .tir-section {
	margin-inline-start: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.tir-section {
	border-block-start: 1px solid var(--border-1);
	padding-block: 120px;
	position: relative;
}

.tir-section--flush {
	border-block-start: 0;
}

.tir-section--tight-bottom {
	padding-block-end: 0;
}

.tir-eyebrow {
	color: var(--ir-lime);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

.tir-eyebrow--muted {
	color: var(--ir-lime-72);
}

.tir-eyebrow--dim {
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.14em;
}

.tir-h2 {
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.06;
	margin-block-start: 20px;
}

.tir-lede {
	color: var(--fg-3);
	font-size: clamp(19px, 1.7vw, 23px);
	line-height: 1.5;
	margin-block-start: 16px;
	max-width: 760px;
}

.tir-body {
	color: var(--fg-3);
	font-size: 19px;
	line-height: 1.6;
}

.tir-body--sm {
	color: var(--fg-4);
	font-size: 18px;
	line-height: 1.55;
}

.tir-grid {
	display: grid;
	gap: 24px;
}

.tir-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.tir-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.tir-grid--cards {
	gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Split header: h2 left, copy right. Shared by opportunity, how-we-work
   and investment. */
.tir-split {
	align-items: start;
	display: grid;
	gap: 56px;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	margin-block-start: 26px;
}

.tir-split--center {
	align-items: center;
	gap: 64px;
}

/* ============================================================
   4. COMPONENTS
   ============================================================ */

/* --- Card --- */
.tir-card {
	background-color: var(--bg-2);
	border: 1px solid var(--border-1);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-1);
	padding: 32px;
	transition: border-color var(--motion-base) var(--ease-standard);
}

.tir-card:hover {
	border-color: var(--border-3);
}

.tir-card--accent {
	border-color: var(--ir-lime-40);
	box-shadow: var(--shadow-glow-soft);
}

.tir-card--accent:hover {
	border-color: var(--ir-lime-40);
}

.tir-card__title {
	font-size: 23px;
	font-weight: 600;
	margin-block-start: 18px;
}

.tir-card__title--lg {
	font-size: 25px;
	margin-block-start: 26px;
}

.tir-card__body {
	color: var(--fg-4);
	font-size: 18px;
	line-height: 1.55;
	margin-block-start: 10px;
}

/* --- Icon --- */
.tir-icon {
	color: var(--ir-lime);
	flex: none;
	height: 26px;
	width: 26px;
}

.tir-icon-tile {
	align-items: center;
	background-color: rgba(204, 255, 0, 0.1);
	border: 1px solid rgba(204, 255, 0, 0.25);
	border-radius: 12px;
	display: flex;
	height: 54px;
	justify-content: center;
	width: 54px;
}

/* --- Button --- */
.tir-btn {
	align-items: center;
	border-radius: var(--radius-pill);
	display: inline-flex;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	justify-content: center;
	letter-spacing: 0.14em;
	padding-block: 17px;
	padding-inline: 30px;
	text-transform: uppercase;
	transition:
		box-shadow var(--motion-base) var(--ease-standard),
		border-color var(--motion-base) var(--ease-standard),
		transform 80ms ease-in;
}

.tir-btn--primary {
	background-color: var(--ir-lime);
	color: var(--thermal-black);
}

.tir-btn--primary:hover {
	box-shadow: var(--shadow-glow);
	color: var(--thermal-black);
}

.tir-btn--primary:active {
	transform: scale(0.98);
}

.tir-btn--ghost {
	border: 1px solid var(--border-3);
	color: var(--fg-1);
}

.tir-btn--ghost:hover {
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--fg-1);
}

.tir-btn--ghost:active {
	transform: scale(0.98);
}

.tir-btn--sm {
	font-size: 11px;
	padding-block: 11px;
	padding-inline: 20px;
}

.tir-btn--lg {
	padding-block: 19px;
	padding-inline: 34px;
}

.tir-link-arrow {
	border-block-end: 1px solid var(--ir-lime-40);
	color: var(--ir-lime);
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	margin-block-start: 28px;
	padding-block-end: 4px;
	text-transform: uppercase;
}

/* --- Chip --- */
.tir-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 32px;
}

.tir-chip {
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-pill);
	color: var(--fg-3);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	padding-block: 9px;
	padding-inline: 16px;
}

/* --- Pill badge --- */
.tir-pill {
	background-color: var(--ir-lime);
	border-radius: var(--radius-pill);
	color: var(--thermal-black);
	font-family: var(--font-mono);
	font-size: 11px;
	inset-block-start: -12px;
	inset-inline-start: 44px;
	letter-spacing: 0.18em;
	padding-block: 6px;
	padding-inline: 14px;
	position: absolute;
	text-transform: uppercase;
}

/* --- Checklist --- */
.tir-checks {
	display: grid;
	gap: 12px 24px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tir-checks--stack {
	grid-template-columns: 1fr;
}

.tir-check {
	align-items: flex-start;
	color: var(--fg-2);
	display: flex;
	font-size: 18px;
	gap: 11px;
	line-height: 1.4;
}

.tir-check svg {
	color: var(--ir-lime);
	flex: none;
	height: 18px;
	margin-block-start: 3px;
	width: 18px;
}

/* --- Icon head --- */

/* Icon + heading on one line. Named for what it is because two blocks use
   it: clients (as .tir-client-card__head) and services-public. */
.tir-icon-head {
	align-items: center;
	display: flex;
	gap: 16px;
}

.tir-icon-head svg {
	color: var(--ir-lime);
	flex: none;
	height: 28px;
	width: 28px;
}

/* ============================================================
   5. NAV
   ============================================================ */

.tir-nav {
	border-block-end: 1px solid transparent;
	border-block-start: 2px solid var(--ir-lime);
	inset-block-start: 0;
	inset-inline-end: 0;
	inset-inline-start: 0;
	position: fixed;
	transition:
		background var(--motion-base) var(--ease-standard),
		border-color var(--motion-base) var(--ease-standard);
	z-index: 50;
}

.tir-nav.is-stuck {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	background-color: rgba(13, 13, 13, 0.82);
	border-block-end-color: var(--border-1);
}

.tir-nav__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	justify-content: space-between;
	margin-inline: auto;
	max-width: var(--container);
	min-height: var(--nav-h);
	padding-block: 12px;
	padding-inline: var(--gutter);
}

.tir-nav__logo {
	align-items: center;
	display: flex;
	flex: none;
}

.tir-nav__logo img {
	height: 60px;
	width: auto;
}

.tir-nav__links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}

/* wp_nav_menu() output — a plain <ul>, no custom walker. */
.tir-nav__menu {
	align-items: center;
	display: flex;
	gap: 10px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tir-nav__link {
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tir-nav__link:hover {
	color: var(--fg-1);
}

.tir-nav__link.is-active {
	color: var(--ir-lime);
}

.tir-nav__toggle {
	background-color: transparent;
	border: 1px solid var(--border-3);
	border-radius: var(--radius-pill);
	color: var(--fg-1);
	cursor: pointer;
	display: none;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	padding-block: 11px;
	padding-inline: 18px;
	text-transform: uppercase;
}

@media (max-width: 900px) {

	.tir-nav__toggle {
		display: block;
	}

	.tir-nav__links {
		align-items: flex-start;
		display: none;
		flex-direction: column;
		gap: 4px;
		padding-block: 8px 16px;
		width: 100%;
	}

	.tir-nav.is-open .tir-nav__links {
		display: flex;
	}

	.tir-nav.is-open {
		backdrop-filter: blur(16px);
		background-color: rgba(13, 13, 13, 0.95);
	}

	/* Same 30px rhythm as the stacked footer menu. */
	.tir-nav__menu {
		align-items: flex-start;
		flex-direction: column;
		gap: 30px;
		width: 100%;
	}

	.tir-nav__link {
		font-size: 13px;
		padding-block: 12px;
	}

	.tir-nav__links .tir-btn {
		margin-block-start: 10px;
	}
}

/* ============================================================
   6. FOOTER
   ============================================================ */

.tir-footer {
	border-block-start: 1px solid var(--border-1);
	padding-block: 56px;
}

.tir-footer__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
}

.tir-footer img {
	height: 60px;
	opacity: 0.85;
	width: auto;
}

/* Footer menu — the 'footer' nav location, plain links in a row. */
.tir-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tir-footer__menu a {
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	text-decoration: none;
}

.tir-footer__menu a:hover {
	color: var(--ir-lime);
}

.tir-footer__meta {
	align-items: center;
	color: rgba(255, 255, 255, 0.4);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--font-mono);
	font-size: 12px;
	gap: 24px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tir-footer__meta a {
	color: rgba(255, 255, 255, 0.6);
}

.tir-footer__meta a:hover {
	color: var(--ir-lime);
}

/* ============================================================
   7. MOTION
   Entry animations only. Fades and 8–14px translate-ins.
   JS adds .is-in; CSS owns the transition. No-JS = visible.
   ============================================================ */

.tir-reveal {
	opacity: 1;
}

.js .tir-reveal {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}

.js .tir-reveal.is-in {
	opacity: 1;
	transform: none;
}

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

	html {
		scroll-behavior: auto;
	}

	.js .tir-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* The only !important in the theme, and the case the escape hatch exists
	   for: an accessibility opt-out has to beat any animation a block or a
	   future stylesheet declares, including ones this file cannot see. */
	/* stylelint-disable declaration-no-important -- see comment above */
	* {
		animation-delay: 0ms !important;
		animation-duration: 0.01ms !important;
	}
	/* stylelint-enable declaration-no-important */
}

/* ============================================================
   8. RESPONSIVE
   Block-owned breakpoints live in src/<block>/style.css.
   ============================================================ */

@media (max-width: 900px) {

	:root {
		--gutter: 24px;
	}

	.tir-section {
		padding-block: 88px;
	}

	.tir-pill {
		inset-inline-start: 28px;
	}

	.tir-split,
	.tir-split--center {
		gap: 40px;
	}
}

@media (max-width: 560px) {

	body {
		font-size: 17px;
	}

	.tir-grid--2,
	.tir-grid--3,
	.tir-grid--cards,
	.tir-split {
		grid-template-columns: 1fr;
	}

	.tir-btn {
		width: 100%;
	}

	.tir-nav__links .tir-btn {
		width: auto;
	}

	/* Footer links stack on phones; the 30px gap becomes vertical. */
	.tir-footer__menu {
		flex-direction: column;
	}
}

/* ============================================================
   9. PRINT
   ============================================================ */

@media print {

	.tir-nav {
		display: none;
	}

	body {
		background-color: var(--print-bg);
		color: var(--print-fg);
	}

	.tir-card {
		border-color: var(--print-border);
		box-shadow: none;
	}
}