/*
 * TechMart — base
 * Design tokens, reset, typography, layout primitives, accessibility helpers.
 *
 * Colour tokens whose values a merchant can change are injected inline by
 * inc/enqueue.php (tm_inline_tokens). Everything derived from them lives here,
 * so this file stays static and cacheable.
 */

/* -------------------------------------------------------------------------
 * 1. Tokens
 * ---------------------------------------------------------------------- */

:root {
	/* Colour — the Customizer overrides --tm-primary, --tm-accent,
	   --tm-danger, --tm-text, --tm-surface and --tm-container inline. */
	--tm-primary: #1d4ed8;
	--tm-primary-dark: #1a43b0;
	--tm-primary-light: #e8eefc;
	--tm-primary-rgb: 29, 78, 216;
	--tm-accent: #f59e0b;
	--tm-accent-light: #fef3e2;
	--tm-danger: #dc2626;
	--tm-danger-light: #fdeaea;
	--tm-success: #15803d;
	--tm-success-light: #e7f5ec;

	--tm-text: #0f172a;
	--tm-muted: #64748b;
	--tm-faint: #94a3b8;
	--tm-background: #ffffff;
	--tm-surface: #f1f5f9;
	--tm-surface-2: #f8fafc;
	--tm-dark: #0f172a;
	--tm-border: #e2e8f0;
	--tm-border-strong: #cbd5e1;

	/* Radius */
	--tm-radius-sm: 4px;
	--tm-radius: 8px;
	--tm-radius-lg: 14px;
	/*
	 * The two larger steps exist for the display surfaces — a hero, a card
	 * that is meant to read as an object, a call-to-action panel. They are
	 * deliberately not used for controls: a 22px radius on a 44px button
	 * turns it into a lozenge, and the pill token is there when that is what
	 * you actually want.
	 */
	--tm-radius-xl: 20px;
	--tm-radius-2xl: 28px;
	--tm-radius-pill: 999px;

	/* Elevation — shallow, and mostly reserved for hover. */
	--tm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--tm-shadow: 0 4px 16px rgba(15, 23, 42, .08);
	--tm-shadow-lg: 0 12px 40px rgba(15, 23, 42, .14);
	/*
	 * One step further than --tm-shadow-lg, and shaped differently: a large
	 * negative spread so the shadow reads as a soft pool under a lifted
	 * object rather than a grey halo around a flat one. For anything that is
	 * supposed to float above the page — the trust strip that overlaps the
	 * hero, a card at rest in a borderless grid.
	 */
	--tm-shadow-float: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 56px -20px rgba(15, 23, 42, .28);

	/*
	 * The ink grounds.
	 *
	 * --tm-dark is a text colour that happens to work as a background. These
	 * two are backgrounds: darker, and cooled towards navy so that a
	 * brand-coloured glow laid over them stays a glow instead of turning
	 * muddy. Used by the hero, the builder panel and the newsletter band.
	 */
	--tm-ink: #070c1a;
	--tm-ink-2: #111c38;

	/* Layout */
	--tm-container: 1320px;
	--tm-gutter: 20px;
	--tm-header-announcement: 40px;
	--tm-header-main: 88px;
	--tm-header-nav: 50px;

	/* Type */
	--tm-font-scale: 1;
	--tm-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tm-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* A fluid scale: each step interpolates between a mobile and a desktop
	   size, then the merchant's scale multiplier is applied on top. */
	--tm-fs-display: calc(clamp(2.1rem, 1.4rem + 3.2vw, 3.4rem) * var(--tm-font-scale));
	--tm-fs-h1: calc(clamp(1.75rem, 1.3rem + 2.1vw, 2.6rem) * var(--tm-font-scale));
	--tm-fs-h2: calc(clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem) * var(--tm-font-scale));
	--tm-fs-h3: calc(clamp(1.15rem, 1.05rem + .5vw, 1.4rem) * var(--tm-font-scale));
	--tm-fs-h4: calc(clamp(1rem, .97rem + .2vw, 1.15rem) * var(--tm-font-scale));
	--tm-fs-body: calc(1rem * var(--tm-font-scale));
	--tm-fs-sm: calc(.875rem * var(--tm-font-scale));
	--tm-fs-xs: calc(.78rem * var(--tm-font-scale));

	/*
	 * Two aliases the rest of the theme was already using.
	 *
	 * `--tm-fs-lg` and `--tm-fs-base` are named by six rules across
	 * components.css and woocommerce.css — the services card title, the
	 * brand wordmark, three headings on the product and checkout pages —
	 * and neither had ever been defined. A `font-size` naming an undefined
	 * custom property is invalid at computed-value time, so all six
	 * silently inherited instead: the elements that were meant to be a step
	 * up from body copy were rendering at body size, which is why the
	 * services grid and the brand strip read flat.
	 *
	 * Defined here rather than edited out of those six rules, because the
	 * rules express the intent correctly and it was the vocabulary that was
	 * missing. `base` is body under another name — the two spellings exist
	 * in the wild and it is cheaper to answer to both than to hunt them.
	 * `lg` is the step between body and h4 that the scale never had.
	 */
	--tm-fs-base: var(--tm-fs-body);
	--tm-fs-lg: calc(clamp(1.05rem, 1.01rem + .2vw, 1.18rem) * var(--tm-font-scale));

	--tm-lh-tight: 1.18;
	--tm-lh-snug: 1.35;
	--tm-lh-body: 1.6;

	/* Motion */
	--tm-ease: cubic-bezier(.2, .7, .3, 1);
	--tm-speed: .22s;
	--tm-speed-slow: .38s;

	/* Section rhythm */
	--tm-section-y: clamp(38px, 5vw, 68px);

	/* Layering. Kept in one place so a drawer can never end up under a
	   sticky header by accident. */
	--tm-z-header: 100;
	--tm-z-dropdown: 200;
	--tm-z-overlay: 900;
	--tm-z-drawer: 950;
	--tm-z-modal: 1000;
	--tm-z-toast: 1100;
}

/* -------------------------------------------------------------------------
 * 2. Reset
 * ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchors and skip links must not land under the sticky header. */
	scroll-padding-top: calc(var(--tm-header-main) + var(--tm-header-nav) + 16px);
}

body {
	margin: 0;
	background: var(--tm-background);
	color: var(--tm-text);
	font-family: var(--tm-font);
	font-size: var(--tm-fs-body);
	line-height: var(--tm-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

body.tm-scroll-locked {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-weight: 700;
	line-height: var(--tm-lh-tight);
	letter-spacing: -.015em;
	color: var(--tm-text);
}

h1 { font-size: var(--tm-fs-h1); }
h2 { font-size: var(--tm-fs-h2); }
h3 { font-size: var(--tm-fs-h3); }
h4 { font-size: var(--tm-fs-h4); }
h5, h6 { font-size: var(--tm-fs-body); }

p, ul, ol, dl, figure, pre, table, blockquote {
	margin: 0 0 1em;
}

ul, ol {
	padding-inline-start: 1.25em;
}

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

svg {
	flex: none;
}

a {
	color: var(--tm-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--tm-speed) var(--tm-ease);
}

a:hover {
	color: var(--tm-primary-dark);
}

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

button {
	cursor: pointer;
}

hr {
	border: 0;
	border-top: 1px solid var(--tm-border);
	margin: 2em 0;
}

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

th, td {
	padding: .7em .8em;
	border-bottom: 1px solid var(--tm-border);
	text-align: start;
}

code, kbd, pre, samp {
	font-family: var(--tm-font-mono);
	font-size: .92em;
}

pre {
	overflow-x: auto;
	padding: 1em;
	background: var(--tm-surface);
	border-radius: var(--tm-radius);
}

blockquote {
	margin-inline: 0;
	padding-inline-start: 1.1em;
	border-inline-start: 3px solid var(--tm-primary);
	color: var(--tm-muted);
}

/* -------------------------------------------------------------------------
 * 3. Focus
 * ---------------------------------------------------------------------- */

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--tm-primary);
	outline-offset: 2px;
	border-radius: var(--tm-radius-sm);
}

/* Anything on a coloured ground gets a light ring instead. */
.tm-announcement :focus-visible,
.tm-footer__bottom :focus-visible,
.tm-btn--primary:focus-visible,
.tm-btn--dark:focus-visible {
	outline-color: #fff;
}

/* -------------------------------------------------------------------------
 * 4. Layout primitives
 * ---------------------------------------------------------------------- */

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

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

.container-wide {
	max-width: calc(var(--tm-container) + 200px);
}

.container-fluid {
	width: 100%;
	padding-inline: var(--tm-gutter);
}

@media (min-width: 768px) {
	:root {
		--tm-gutter: 24px;
	}
}

.tm-section {
	padding-block: var(--tm-section-y);
}

.tm-section--surface {
	background: var(--tm-surface-2);
}

.tm-main {
	display: block;
	min-height: 40vh;
}

.tm-main--page,
.tm-main--single,
.tm-main--archive,
.tm-main--search,
.tm-main--blog,
.tm-main--shop,
.tm-main--404 {
	padding-block: clamp(20px, 3vw, 34px) var(--tm-section-y);
}

/* Two-column content layouts share one implementation. */
.tm-blog-layout {
	display: grid;
	gap: clamp(24px, 3vw, 48px);
}

@media (min-width: 1024px) {
	.tm-blog-layout.has-sidebar {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

/* -------------------------------------------------------------------------
 * 5. Accessibility helpers
 * ---------------------------------------------------------------------- */

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

.tm-skip-links {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	z-index: var(--tm-z-toast);
}

.tm-skip-link:focus,
.screen-reader-text:focus {
	position: fixed !important;
	inset-inline-start: 12px;
	top: 12px;
	z-index: var(--tm-z-toast);
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 20px;
	background: var(--tm-background);
	color: var(--tm-text);
	border-radius: var(--tm-radius);
	box-shadow: var(--tm-shadow-lg);
	font-weight: 600;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * 6. Reduced motion
 *
 * Transitions that only move colour are kept — they carry state, not
 * decoration. Everything that moves or transforms is switched off.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

	.tm-card:hover .tm-card__img--main,
	.tm-card:hover {
		transform: none !important;
	}
}

/* -------------------------------------------------------------------------
 * 7. Print
 * ---------------------------------------------------------------------- */

@media print {
	.tm-header,
	.tm-announcement,
	.tm-navbar,
	.tm-footer,
	.tm-drawer,
	.tm-modal,
	.tm-to-top,
	.tm-overlay,
	.tm-card__actions {
		display: none !important;
	}

	body {
		font-size: 12pt;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: .85em;
		color: #555;
	}
}

/* -------------------------------------------------------------------------
 * 8. Prose — long-form editorial content
 * ---------------------------------------------------------------------- */

/*
 * The measure belongs to the text, not to the column.
 *
 * Capping `.tm-prose` itself also capped anything embedded in the page: the
 * package builder shortcode rendered into 621px of a 1272px column, which
 * wrapped its summary panel down to about 190px and broke product names two
 * characters to a line. Constrain the typographic children instead, so
 * paragraphs keep a readable measure while a full-width component can opt out.
 */
.tm-prose {
	max-width: none;
}

.tm-prose > * {
	max-width: 72ch;
}

.tm-prose > .tmc-builder,
.tm-prose > .tmc-finder,
.tm-prose > .tm-prose__wide,
.tm-prose > .alignwide,
.tm-prose > .alignfull,
.tm-prose > .wp-block-table,
.tm-prose > .woocommerce,

/*
 * A product grid is not prose.
 *
 * 72ch is the right measure for a paragraph and the wrong one for a
 * three-column grid of cards: on the Installation Services page it squeezed
 * three cards into the left half of the layout and left the other half empty.
 * Any list of products dropped into page content — the services shortcode,
 * WooCommerce's own `[products]`, the solution and brand grids — opts out for
 * the same reason the builder and the finder already do.
 */
.tm-prose > .products,
.tm-prose > .tm-products,
.tm-prose > .tmc-solutions,
.tm-prose > .tmc-brand-grid {
	max-width: none;
}

.tm-prose > * + * {
	margin-block-start: 1.1em;
}

.tm-prose h2 {
	margin-block-start: 1.8em;
}

.tm-prose h3 {
	margin-block-start: 1.5em;
}

.tm-prose img,
.tm-prose figure {
	border-radius: var(--tm-radius);
}

.tm-prose figcaption {
	margin-block-start: .5em;
	font-size: var(--tm-fs-sm);
	color: var(--tm-muted);
}

.tm-prose li + li {
	margin-block-start: .35em;
}

/* Gutenberg alignment support. */
.tm-prose .alignwide {
	max-width: min(100vw - (var(--tm-gutter) * 2), 1080px);
	margin-inline: auto;
}

.tm-prose .alignfull {
	max-width: none;
	width: calc(100vw - (var(--tm-gutter) * 2));
	margin-inline: calc(50% - 50vw + var(--tm-gutter));
}

.tm-prose .alignleft {
	float: left;
	margin: .3em 1.4em 1em 0;
}

.tm-prose .alignright {
	float: right;
	margin: .3em 0 1em 1.4em;
}

.tm-prose .aligncenter {
	margin-inline: auto;
}

.tm-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--tm-radius);
}

.tm-embed > iframe,
.tm-embed > video,
.tm-embed > object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Editor colour palette classes. */
.has-tm-primary-color { color: var(--tm-primary); }
.has-tm-primary-background-color { background-color: var(--tm-primary); }
.has-tm-accent-color { color: var(--tm-accent); }
.has-tm-accent-background-color { background-color: var(--tm-accent); }
.has-tm-danger-color { color: var(--tm-danger); }
.has-tm-danger-background-color { background-color: var(--tm-danger); }
.has-tm-text-color { color: var(--tm-text); }
.has-tm-text-background-color { background-color: var(--tm-text); }
.has-tm-muted-color { color: var(--tm-muted); }
.has-tm-surface-background-color { background-color: var(--tm-surface); }
.has-tm-white-color { color: #fff; }
.has-tm-white-background-color { background-color: #fff; }