/*
 * Rules theme.json can't express. Values come from theme.json tokens.
 */

/* Page gutter: 56 / 24 / 16, stepped at the theme.json viewports. */
:root {
	--tekseries--gutter: 56px;
}

@media (width <= 1100px) {

	:root {
		--tekseries--gutter: 24px;
	}
}

@media (width <= 640px) {

	:root {
		--tekseries--gutter: 16px;
	}
}

body {
	font-variant-ligatures: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-underline-offset: 3px;
}

h1,
h2,
h3 {
	text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

/* Anchor targets and whatever the keyboard focuses clear the sticky header. */
:target,
:focus-visible {
	scroll-margin-top: 96px;
}

/*
 * Header: a sticky white bar. The bar padding steps 14 / 12 / 10; the compact
 * menu panel in blocks/navigation.css reads it to line up its close button.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 50;
}

.ts-header {
	--ts-header-pad: 14px;
	position: relative;
	padding-top: var(--ts-header-pad);
	padding-bottom: var(--ts-header-pad);
}

.ts-header .wp-block-site-logo img {
	width: auto;
	height: 44px;
}

@media (width <= 1100px) {

	.ts-header {
		--ts-header-pad: 12px;
	}

	.ts-header .wp-block-site-logo img {
		height: 40px;
	}
}

@media (width <= 640px) {

	.ts-header {
		--ts-header-pad: 10px;
	}

	.ts-header .wp-block-site-logo img {
		height: 34px;
	}
}

/* Small screens: the admin bar scrolls away, so stick to the very top. */
@media (width <= 600px) {

	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/*
 * Footer: plum panel on a 1.3 / 1 / 1 / auto grid, then two columns with the
 * brand on top, then one column. Padding steps 48 / 32 / 28. The stacked logo
 * is drawn for a light ground, so it sits on a white plate, 56px tall in all.
 */
.ts-footer .ts-footer__panel {
	grid-template-columns: 1.3fr 1fr 1fr auto;
	gap: 40px;
	align-items: start;
	padding: 48px;
}

.ts-footer .ts-footer__about {
	max-width: 320px;
}

.ts-footer .ts-footer__logo {
	align-self: flex-start;
	margin: 0;
	padding: 6px 10px;
	border-radius: var(--wp--preset--border-radius--sm);
	background-color: var(--wp--preset--color--white);
	line-height: 0;
}

/* The ratio gives the picture its width before the file has loaded. */
.ts-footer .ts-footer__logo img {
	width: auto;
	height: 44px;
	aspect-ratio: 218 / 150;
}

.ts-footer .ts-footer__menu,
.ts-footer .ts-footer__menu a {
	color: inherit;
}

.ts-footer .ts-footer__menu a:hover {
	color: var(--wp--preset--color--saffron);
}

.ts-footer .ts-footer__legal .ts-footer__menu a:hover {
	color: var(--wp--preset--color--plum);
}

@media (width <= 1100px) {

	.ts-footer .ts-footer__panel {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		padding: 32px;
	}

	.ts-footer .ts-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (width <= 640px) {

	.ts-footer .ts-footer__panel {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 28px 22px;
	}

	.ts-footer .ts-footer__legal {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.ts-footer .ts-footer__legal > .wp-block-group {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
}

/*
 * Reveal on scroll: a block with the class "ts-reveal" rises in the first time
 * a visitor scrolls to it (Home board). The plugin's script marks a block
 * still below the screen as pending, then as revealed once it is in view, and
 * gives blocks that arrive together their place in turn. Without the script
 * neither class is set and the block is simply there.
 */
@media screen and (prefers-reduced-motion: no-preference) {

	.ts-reveal.is-reveal-pending {
		opacity: 0;
	}

	.ts-reveal.is-revealed {
		--ts-reveal-distance: var(--wp--custom--motion--reveal--distance);
		animation: ts-reveal-rise var(--wp--custom--motion--reveal--duration) var(--wp--custom--motion--ease--out) calc(var(--ts-reveal-place, 0) * var(--wp--custom--motion--reveal--stagger)) backwards;
	}

	/* A group (a card) comes from further down and its contents follow, one
	   after another. A decorative icon stays where it is, and a block inside
	   that is marked itself waits for its own turn. */
	.wp-block-group.ts-reveal.is-revealed {
		--ts-reveal-distance: 64px;
		animation-duration: 0.9s;
		animation-timing-function: var(--wp--custom--motion--ease--out-strong);
	}

	.wp-block-group.ts-reveal.is-revealed > :not([class*="is-style-deco"], .ts-reveal) {
		--ts-reveal-distance: 20px;
		--ts-reveal-step: 0;
		animation: ts-reveal-rise 0.7s var(--wp--custom--motion--ease--out) calc(0.2s + var(--ts-reveal-step, 0) * 0.1s) backwards;
	}

	.wp-block-group.ts-reveal.is-revealed > :nth-child(2) {
		--ts-reveal-step: 1;
	}

	.wp-block-group.ts-reveal.is-revealed > :nth-child(3) {
		--ts-reveal-step: 2;
	}

	.wp-block-group.ts-reveal.is-revealed > :nth-child(4) {
		--ts-reveal-step: 3;
	}

	.wp-block-group.ts-reveal.is-revealed > :nth-child(n + 5) {
		--ts-reveal-step: 4;
	}

	/* A block that holds the focus is in full view at once: focus is never on
	   something still fading in. Its animation is left alone: taken away, it
	   would play again once the focus moved on. */
	.ts-reveal.is-reveal-pending:focus-within {
		opacity: 1;
	}

	.ts-reveal.is-revealed:focus-within,
	.wp-block-group.ts-reveal.is-revealed:focus-within > :not([class*="is-style-deco"], .ts-reveal) {
		opacity: 1 !important;
	}

	/* Only the keyboard's focus also brings it to its place at once. Under a
	   press of the pointer the block would jump away, the pointer would be
	   let go beside the link, and there would be no click. */
	.ts-reveal.is-revealed:is(:focus-visible, :has(:focus-visible)),
	.wp-block-group.ts-reveal.is-revealed:is(:focus-visible, :has(:focus-visible)) > :not([class*="is-style-deco"], .ts-reveal) {
		translate: none !important;
	}
}

@keyframes ts-reveal-rise {

	from {
		opacity: 0;
		translate: 0 var(--ts-reveal-distance);
	}
}

/*
 * Entrance on load: a block with the class "ts-intro" rises in when the page
 * opens, the way the Home hero's text does. On a Group the blocks directly
 * inside rise in one after another and the Group itself stays still, so its
 * background does not move; any other block rises in itself, and marked blocks
 * side by side take turns. CSS only, so it needs no script. A mark inside a
 * marked block is left to the outer one, a decorative icon stays where it is,
 * and the editor stays still.
 */
@media screen and (prefers-reduced-motion: no-preference) {

	.ts-intro:not(.wp-block-group, .ts-intro *, .block-editor-block-list__block),
	.wp-block-group.ts-intro:not(.ts-intro *, .block-editor-block-list__block) > :not([class*="is-style-deco"]) {
		animation: ts-intro-rise var(--wp--custom--motion--reveal--duration) var(--wp--custom--motion--ease--out-strong) calc(0.15s + var(--ts-intro-place, 0) * var(--wp--custom--motion--reveal--stagger)) backwards;
	}

	/* A marked block's place among the marked blocks beside it. */
	.ts-intro:nth-child(2 of .ts-intro) {
		--ts-intro-place: 1;
	}

	.ts-intro:nth-child(3 of .ts-intro) {
		--ts-intro-place: 2;
	}

	.ts-intro:nth-child(4 of .ts-intro) {
		--ts-intro-place: 3;
	}

	.ts-intro:nth-child(5 of .ts-intro) {
		--ts-intro-place: 4;
	}

	.ts-intro:nth-child(n + 6 of .ts-intro) {
		--ts-intro-place: 5;
	}

	/* A block's place inside a marked Group. These come last: a block in a
	   marked Group goes by them even when it is marked itself. */
	.wp-block-group.ts-intro > :first-child {
		--ts-intro-place: 0;
	}

	.wp-block-group.ts-intro > :nth-child(2) {
		--ts-intro-place: 1;
	}

	.wp-block-group.ts-intro > :nth-child(3) {
		--ts-intro-place: 2;
	}

	.wp-block-group.ts-intro > :nth-child(4) {
		--ts-intro-place: 3;
	}

	.wp-block-group.ts-intro > :nth-child(5) {
		--ts-intro-place: 4;
	}

	.wp-block-group.ts-intro > :nth-child(n + 6) {
		--ts-intro-place: 5;
	}

	/* A block that holds the focus is in full view at once. Its animation is
	   left alone: taken away, it would play again once the focus moved on. */
	.ts-intro:not(.wp-block-group, .ts-intro *):focus-within,
	.wp-block-group.ts-intro:not(.ts-intro *) > :not([class*="is-style-deco"]):focus-within {
		opacity: 1 !important;
	}

	/* Only the keyboard's focus also brings it to its place at once: under a
	   press of the pointer it would jump away, and the press would be no
	   click. */
	.ts-intro:not(.wp-block-group, .ts-intro *):is(:focus-visible, :has(:focus-visible)),
	.wp-block-group.ts-intro:not(.ts-intro *) > :not([class*="is-style-deco"]):is(:focus-visible, :has(:focus-visible)) {
		translate: none !important;
	}
}

@keyframes ts-intro-rise {

	from {
		opacity: 0;
		translate: 0 28px;
	}
}

/*
 * Blocks that switch at a page's deadline (plugin, includes/deadline.php):
 * "ts-when-open" shows until it, "ts-when-closed" from then on. The server
 * leaves out the other kind, or prints it hidden when the script will swap
 * them at zero; `hidden` has to win over a block's own display (a Button's
 * flex). In the editor both kinds show, and a dashed outline marks the ones
 * visitors see only after the deadline.
 */
.ts-when-open[hidden],
.ts-when-closed[hidden] {
	display: none !important;
}

.editor-styles-wrapper .ts-when-closed {
	outline: 2px dashed var(--wp--preset--color--coral);
	outline-offset: 4px;
}

/*
 * Maker Prize page (pattern page-maker-prize; boards MakerPrize*): a saffron
 * hero with the text beside the ink countdown card on desktop and above it
 * on smaller screens, the eligibility cards (icon above the text on desktop,
 * beside it on smaller screens) and the plum closing band. On phones the
 * Apply buttons take the whole width. The hero's text and card start at its
 * top (the owner's choice, 2026-10-15; the boards centre them), so the text
 * stays put when the closed card grows taller.
 */
.wp-block-group.ts-prize-hero {
	align-items: start;
}

@media (width > 1100px) {

	.wp-block-group.ts-prize-hero {
		grid-template-columns: minmax(0, 1fr) 460px;
	}
}

.ts-prize-chip {
	width: fit-content;
	padding: 7px 13px;
	border-radius: var(--wp--preset--border-radius--pill);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ts-prize-criteria .wp-block-icon.is-style-tile {
	width: 56px;
}

@media (width <= 1100px) {

	.ts-prize-criteria > .wp-block-group {
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.ts-prize-criteria > .wp-block-group > p {
		flex: 1;
		padding-top: 4px;
	}
}

@media (width <= 640px) {

	.ts-prize-criteria .wp-block-icon.is-style-tile {
		width: 48px;
	}

	.ts-prize-band {
		flex-direction: column;
		align-items: stretch;
	}

	:is(.ts-prize-clock, .ts-prize-band) .wp-block-button {
		flex-basis: 100%;
	}

	:is(.ts-prize-clock, .ts-prize-band) .wp-block-button__link {
		width: 100%;
	}
}

/*
 * Ongoing events (the plugin's includes/event-ongoing.php): a coral dot that
 * pulses, on its own (.ts-live) or before a label (.ts-live-label), and the
 * white "Ongoing" chip after a type badge. Under reduced motion the dot is
 * still.
 */
.ts-live,
.ts-live-label::before {
	flex: none;
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--coral);
	box-shadow: 0 0 0 0 rgb(231 111 81 / 60%);
}

.ts-live-label {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ts-live-label::before {
	content: "";
}

@media (prefers-reduced-motion: no-preference) {

	.ts-live,
	.ts-live-label::before {
		animation: ts-pulse 1.8s var(--wp--custom--motion--ease--out-strong) infinite;
	}
}

@keyframes ts-pulse {

	to {
		box-shadow: 0 0 0 9px rgb(231 111 81 / 0%);
	}
}

.ts-ongoing-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 11px;
	border-radius: var(--wp--preset--border-radius--pill);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--plum);
	font-weight: 700;
}