/* base — derived tokens, reset, links.
 *
 * The eight brand colours already arrive from theme.json as
 * --wp--preset--color--*. This file only declares the derived values that are
 * kept out of the editor palette because the owner must not be able to pick
 * them.
 *
 * No rule in this file introduces a new colour.
 */

:root {
	/* Greys on graphite. Desaturated bone, not new colours. */
	--tci-on-graphite-2: #C9C6C0;   /* secondary text */
	--tci-on-graphite-3: #8D9298;   /* tertiary text and labels */
	--tci-hairline-dark: rgba(239, 236, 229, 0.12);
	--tci-hairline-dark-strong: rgba(239, 236, 229, 0.4);
	--tci-hero-scrim: linear-gradient(100deg, rgba(23, 25, 28, 0.97) 0%, rgba(23, 25, 28, 0.9) 44%, rgba(23, 25, 28, 0.28) 100%);

	/* Grid. The gutter is a variable, not a constant: every container reads it,
	   so narrowing it once at the bottom of this file reflows the whole site. */
	--tci-content-width: 1240px;
	--tci-gutter: 48px;
	--tci-header-height: 112px;

	/* Vertical rhythm between sections, also stepped down on small screens.
	   Two values, and the difference is not arbitrary: the front page breathes
	   at 104px, the inner pages at 88px. Counted off the design — 88 appears
	   ten times across the seven screens, 104 only three, and all three are on
	   the front page. */
	--tci-section-space: 104px;
	--tci-band-space: 88px;

	/* Rules */
	--tci-rule: 2px;
	--tci-hairline: 1px;

	/* Monogram for empty photo slots. Relative to this file: assets/css/ ->
	   assets/logos/. The negative version is bone on dark, which is what an
	   empty slot always is. */
	--tci-monogram: url("../logos/tci-negativo.svg");

	/* Picture glyph for empty photo slots. Inline so it costs no request, and
	   used as a mask so it takes its colour from the palette. */
	--tci-photo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v16H3V4zm1.5 1.5v10.19l4.28-4.28 3.5 3.5 3.72-3.72 3.5 3.5V5.5H4.5zm15 13v-1.19l-3.5-3.5-3.72 3.72-3.5-3.5L4.5 18.5H19.5zM8.25 8.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z'/%3E%3C/svg%3E");
}

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

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

body {
	margin: 0;
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--md, 15px);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* No rounded corners anywhere. */
* {
	border-radius: 0 !important;
}

/* Links: brand red, graphite on hover. Never the browser blue. */
a {
	color: var(--wp--preset--color--red);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--wp--preset--color--graphite);
}

/* Visible focus: red rule, consistent with everything else. */
:focus-visible {
	outline: var(--tci-rule) solid var(--wp--preset--color--red);
	outline-offset: 2px;
}

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

hr {
	border: 0;
	border-top: var(--tci-hairline) solid var(--wp--preset--color--border);
	margin: 0;
}

::selection {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--bone);
}

/* The only margin barrier in the theme.
 *
 * WordPress puts `margin-block-start` on every direct child of .wp-site-blocks,
 * which would open a strip of bone between the header, the body and the footer
 * where the design has them touching. There is no block attribute for this one,
 * so it is cleared here.
 *
 * Everywhere else the fix is upstream, not in CSS: each container declares its
 * real `layout` (flex or grid) in the block markup, and core zeroes its
 * children's margins itself. An earlier version of this file cleared margins by
 * listing every container — it then swallowed the closing band's own 104px and
 * needed a rescue rule to get it back. Declaring the layout removes the whole
 * class of bug. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* wpautop wraps shortcode output in a <p>. That paragraph must not behave like
   body text inside a row of buttons. */
.tci-hero__actions > p,
.tci-closing__actions > p,
.tci-contact-details__action {
	margin: 0;
	display: inline-flex;
}

/* Design container: 1240 with 48 of inner margin. */
.tci-container {
	max-width: var(--tci-content-width);
	margin-inline: auto;
	padding-inline: var(--tci-gutter);
}

/* Full-bleed bands. The rhythm across all seven screens:
   graphite header -> bone body -> graphite closing -> deep graphite footer. */
.is-style-tci-block-graphite {
	background: var(--wp--preset--color--graphite);
	color: var(--tci-on-graphite-2);
}

.is-style-tci-block-graphite-deep {
	background: var(--wp--preset--color--graphite-deep);
	color: var(--tci-on-graphite-2);
}

.is-style-tci-block-graphite :is(h1, h2, h3, h4, h5, h6),
.is-style-tci-block-graphite-deep :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--bone);
}

.is-style-tci-block-graphite a:not(.tci-button),
.is-style-tci-block-graphite-deep a:not(.tci-button) {
	color: var(--wp--preset--color--bone);
}

.is-style-tci-block-graphite a:not(.tci-button):hover,
.is-style-tci-block-graphite-deep a:not(.tci-button):hover {
	color: var(--wp--preset--color--brass);
}

/* The 2px red rule that opens the hero eyebrow. */
.is-style-tci-red-rule {
	width: 34px;
	height: var(--tci-rule);
	background: var(--wp--preset--color--red);
	border: 0;
	margin: 0;
}

/* Screen-reader-only helper. */
.tci-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---- Small screens -------------------------------------------------------
 *
 * Only the tokens change here. Every container reads --tci-gutter and
 * --tci-section-space, so narrowing them once reflows the whole site instead
 * of needing a media query per component.
 *
 * The root padding comes from theme.json (48px) and has to be stepped down
 * too, or full-bleed bands keep a 48px inset on a 360px phone.
 */

@media (max-width: 1024px) {
	:root {
		--tci-gutter: 32px;
		--tci-section-space: 72px;
		--tci-band-space: 64px;
		--tci-header-height: 88px;
	}

	body {
		--wp--style--root--padding-left: 32px;
		--wp--style--root--padding-right: 32px;
	}
}

@media (max-width: 640px) {
	:root {
		--tci-gutter: 20px;
		--tci-section-space: 56px;
		--tci-band-space: 48px;
		--tci-header-height: 72px;
	}

	body {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}

	/* Never let a long part number or URL force a sideways scroll. */
	body {
		overflow-x: hidden;
	}

	.tci-part-number,
	code {
		overflow-wrap: anywhere;
	}
}

/* Touch targets. A 14px link in a footer list is a 19px tap area on a phone;
   44px is the accessible minimum and costs nothing on desktop. */
@media (hover: none) and (pointer: coarse) {
	.tci-footer a,
	.tci-nav a,
	.tci-info-bar a {
		display: inline-block;
		min-height: 44px;
		line-height: 44px;
	}
}