/*
Theme Name: Takt
Theme URI: https://www.pro-business.ch/takt
Author: Arber Gashi
Author URI: https://pro-business.ch
Description: Takt is a flexible block theme for artists and bands, cultural organizations, sports clubs, associations, small businesses and editorial websites. It includes four header layouts, two footers, page patterns, adaptable light and dark palettes, and styling for WooCommerce and Contact Form 7. Built with WordPress core blocks and the Site Editor, with no page builder or framework.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.6.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: takt
Tags: blog, entertainment, news, full-site-editing, block-patterns, block-styles, style-variations, template-editing, one-column, two-columns, wide-blocks, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready
*/

/*
 * Base rules. Everything global lives in theme.json; this file carries what
 * theme.json cannot express, plus the small helper classes the patterns use.
 * Header, color scheme, forms and WooCommerce have their own stylesheets in
 * assets/css and are documented in readme.txt.
 */

/* Padding never widens a block beyond its column. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Skip link for keyboard users. */
.skip-link.screen-reader-text:focus {
	position: absolute;
	left: var(--wp--preset--spacing--40);
	top: var(--wp--preset--spacing--40);
	z-index: 100000;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
}

/* Balanced headings and readable body copy. */
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

/* Media never breaks the layout. */
img, video, iframe {
	max-width: 100%;
	height: auto;
}

/* No gap between header, main and footer: sections carry their own spacing. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Reduced motion: no smooth scrolling, no transitions. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
	}
}

/*
 * Screen reader text. The rule that hides it comes from core's block library
 * stylesheet, and the theme unhooks core's skip-link sheet, so a site that
 * drops wp-block-library (performance plugins do that routinely) would show
 * every hidden heading and the skip link. The theme carries its own copy.
 */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	clip-path: none;
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: 0.875rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/*
 * The height of the sticky header, used by anchor offsets, the sticky shop
 * summary and the hero that sits under a transparent header.
 *
 * ui.js measures the real header and overwrites this on the root element. The
 * value here is what the page uses until then, and what a visitor without
 * JavaScript keeps: the logo box plus the header's own vertical padding. It
 * used to be 0px, which cost a 89px layout shift on first paint and dropped
 * every anchor target under the header when the script did not run.
 */
:root {
	--takt-header-h: calc(4.5rem + 2 * var(--wp--preset--spacing--20));
}

/* Anchors clear the sticky header instead of hiding under it. */
html {
	scroll-padding-top: calc(var(--takt-header-h) + 1rem);
}

/* ---------- Theme shell ---------- */

/* A default page must introduce itself. Landing pages with their own H1 are
   detected at render time, and the explicit no-title template remains quiet. */
.takt-page-header {
	position: relative;
	display: flex;
	width: 100vw;
	max-width: none !important;
	min-height: clamp(20rem, 40vh, 28rem);
	margin-inline: calc(50% - 50vw) !important;
	padding: clamp(4rem, 10vh, 7rem) max(var(--wp--preset--spacing--40), calc((100vw - 80rem) / 2)) clamp(3rem, 8vh, 5rem);
	overflow: hidden;
	align-items: flex-end;
}
.takt-page-header::before {
	position: absolute;
	bottom: 0;
	left: max(var(--wp--preset--spacing--40), calc((100vw - 80rem) / 2));
	width: clamp(5rem, 14vw, 12rem);
	height: 0.5rem;
	background: var(--wp--preset--color--primary);
	content: "";
}
.takt-page-header h1 {
	max-width: 14ch;
	margin: 0;
	color: inherit;
	font-size: clamp(3.5rem, 8vw, 7rem);
	font-weight: 650;
	letter-spacing: -0.055em;
	line-height: 0.9;
}
.wp-block-group:has(> .takt-page-header) {
	padding-top: 0 !important;
}
.wp-block-group:has(> .takt-page-header) > .wp-block-post-content {
	margin-block-start: clamp(3rem, 7vw, 6rem);
}
/* Default pages share the wide column's left edge with their title while
   ordinary prose keeps the theme's readable measure. Wide and full blocks
   still opt out explicitly, so editors retain the complete block canvas. */
.wp-block-group:has(> .takt-page-header) > .wp-block-post-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	max-width: var(--wp--custom--measure--text, 44rem);
	margin-inline-start: max(0px, calc((100% - 80rem) / 2)) !important;
	margin-inline-end: auto !important;
}
.wp-block-group:has(> .takt-page-header) > .wp-block-post-content > .has-large-font-size:first-child {
	max-width: 42rem;
	padding-inline-start: clamp(1.25rem, 2.5vw, 2rem);
	border-inline-start: 0.3rem solid var(--wp--preset--color--primary);
	font-size: clamp(1.25rem, 2.2vw, 1.6rem) !important;
	line-height: 1.4;
	text-wrap: pretty;
}
@media (max-width: 600px) {
	.takt-page-header {
		min-height: 17rem;
		padding-block: 4rem 3rem;
	}
	.wp-block-group:has(> .takt-page-header) > .wp-block-post-content {
		margin-block-start: var(--wp--preset--spacing--60);
	}
}
.takt-page-starts-full main#main {
	padding-top: 0 !important;
}

/* Archive and search pages open as a programme index: a calm field for the
   changing title, followed by results on the same wide axis. */
.takt-listing-header {
	position: relative;
	display: flex;
	min-height: clamp(17rem, 32vh, 23rem);
	align-items: flex-end;
}
.takt-listing-header::before {
	position: absolute;
	top: 0;
	left: max(var(--wp--preset--spacing--40), calc((100vw - 80rem) / 2));
	width: clamp(5rem, 14vw, 12rem);
	height: 0.45rem;
	background: var(--wp--preset--color--primary);
	content: "";
}
.takt-listing-header__inner {
	width: 100%;
}
.takt-listing-header h1 {
	max-width: 18ch;
	margin: 0;
	font-size: clamp(3rem, 6vw, 5.75rem);
	font-weight: 650;
	letter-spacing: -0.05em;
	line-height: 0.95;
}
.takt-listing-header .wp-block-term-description {
	max-width: var(--wp--custom--measure--text, 44rem);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--large);
}
.takt-listing-header .wp-block-search {
	max-width: 34rem;
	margin-bottom: 0 !important;
}
.takt-listing > .wp-block-query {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* The error code carries the 404 view; the useful explanation and actions
   remain one compact reading column beside it. */
.takt-not-found-shell {
	display: flex;
	align-items: center;
}
.takt-not-found {
	display: grid;
	width: 100%;
	grid-template-columns: minmax(15rem, 0.8fr) minmax(22rem, 1.2fr);
	align-items: center;
	gap: clamp(3rem, 8vw, 8rem);
}
.takt-not-found__code {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: clamp(8rem, 20vw, 17rem);
	font-weight: 700;
	letter-spacing: -0.09em;
	line-height: 0.72;
}
.takt-not-found__message h1 {
	max-width: 12ch;
	margin: 0;
	font-size: clamp(2.75rem, 5vw, 5rem);
	letter-spacing: -0.045em;
	line-height: 0.96;
}
.takt-not-found__message > p {
	max-width: 36rem;
}
.takt-not-found__message .wp-block-search {
	max-width: 36rem;
}
@media (max-width: 760px) {
	.takt-listing-header {
		min-height: 15rem;
	}
	.takt-not-found {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}
	.takt-not-found__code {
		font-size: clamp(7rem, 38vw, 11rem);
	}
}

/* The footer closes the page like the bottom edge of a programme rather than
   opening another long content column. */
body:not(.takt-design-0-5) .takt-footer {
	position: relative;
	overflow: hidden;
}
body:not(.takt-design-0-5) .takt-footer::before {
	position: absolute;
	top: 0;
	left: max(var(--wp--preset--spacing--40), calc((100% - 80rem) / 2));
	width: clamp(4rem, 12vw, 10rem);
	height: 0.4rem;
	background: var(--wp--preset--color--primary);
	content: "";
}
.takt-footer__main {
	display: grid;
	grid-template-columns: minmax(13rem, 0.7fr) minmax(0, 1.3fr);
	align-items: end;
	gap: var(--wp--preset--spacing--60);
}
.takt-footer__brand .wp-block-site-title {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 3rem) !important;
	letter-spacing: -0.035em;
}
.takt-footer__brand .wp-block-site-tagline {
	max-width: 32rem;
	margin: 0;
	color: color-mix(in srgb, currentColor 68%, transparent);
}
.takt-footer__nav {
	justify-self: end;
}
.takt-footer__nav .wp-block-navigation__container {
	justify-content: flex-end;
	gap: 0.7rem 1.6rem;
}
.takt-footer__nav .wp-block-navigation-item__content {
	padding-block: 0.35rem;
	font-weight: 600;
	text-underline-offset: 0.25em;
}
.takt-footer__base {
	color: color-mix(in srgb, currentColor 70%, transparent);
}
.takt-footer__base p {
	margin-block: 0;
}
.takt-footer__base .takt-credit {
	flex: 0 0 auto;
	margin-inline-start: auto;
}
@media (max-width: 700px) {
	.takt-footer__main {
		grid-template-columns: 1fr;
		align-items: start;
		gap: var(--wp--preset--spacing--50);
	}
	.takt-footer__nav {
		justify-self: stretch;
		width: 100%;
	}
	.takt-footer__nav .wp-block-navigation__container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: 0;
		width: 100%;
		align-items: stretch;
		justify-content: stretch;
	}
	/* Core wraps the automatic Pages fallback in one extra list. Let those
	   pages participate in the same two-column programme as a saved menu. */
	.takt-footer__nav .wp-block-page-list {
		display: contents;
	}
	.takt-footer__nav .wp-block-navigation-item {
		width: 100%;
		min-width: 0;
		align-self: stretch;
		justify-content: flex-start;
		border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	}
	.takt-footer__nav .wp-block-navigation-item:nth-child(odd) {
		padding-right: var(--wp--preset--spacing--30);
	}
	.takt-footer__nav .wp-block-navigation-item:nth-child(even) {
		padding-left: var(--wp--preset--spacing--30);
		border-left: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	}
	.takt-footer__nav .wp-block-navigation-item__content {
		width: 100%;
		min-height: 3rem;
		padding-block: 0.7rem;
	}
	.takt-footer__base {
		align-items: flex-start;
	}
}

/* ---------- Block styles ---------- */

/* Takt's image-independent opening stage. It is intentionally one strong
   typographic gesture so a fresh site has presence before it has photography. */
.takt-stage-hero {
	position: relative;
	display: flex;
	min-height: clamp(34rem, 76vh, 52rem);
	overflow: hidden;
	align-items: flex-end;
}
.takt-stage-hero::before {
	position: absolute;
	top: 0;
	left: max(var(--wp--preset--spacing--40), calc((100% - 80rem) / 2));
	width: clamp(5rem, 14vw, 12rem);
	height: 0.45rem;
	background: var(--wp--preset--color--primary);
	content: "";
}
.takt-stage-hero__stage {
	display: grid;
	width: 100%;
	min-height: clamp(24rem, 58vh, 40rem);
	grid-template-rows: 1fr auto;
	align-content: end;
}
.takt-stage-hero .takt-stage-hero__title {
	max-width: 10.5ch;
	margin: 0;
	align-self: end;
	font-size: clamp(4rem, 10vw, 9rem);
	font-weight: 650;
	letter-spacing: -0.06em;
	line-height: 0.86;
}
.takt-stage-hero__footer {
	display: grid;
	grid-template-columns: minmax(15rem, 0.8fr) minmax(20rem, 1.2fr);
	align-items: end;
	gap: var(--wp--preset--spacing--50);
	margin-top: clamp(3rem, 7vw, 6rem);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.takt-stage-hero__footer > p {
	max-width: 34rem;
	margin: 0;
	color: color-mix(in srgb, currentColor 75%, transparent);
}
.takt-stage-hero__footer .wp-block-buttons {
	justify-content: flex-end;
}
.takt-stage-hero--page {
	min-height: clamp(24rem, 50vh, 34rem) !important;
	padding-top: clamp(3rem, 7vh, 4.5rem) !important;
	padding-bottom: clamp(3rem, 7vh, 4.5rem) !important;
}
.takt-stage-hero--page .takt-stage-hero__stage {
	min-height: clamp(15rem, 32vh, 22rem) !important;
}
.takt-stage-hero--page .takt-stage-hero__footer {
	grid-template-columns: minmax(0, 42rem);
}
.takt-stage-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.takt-stage-hero .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: color-mix(in srgb, currentColor 50%, transparent);
	color: inherit;
}
@media (max-width: 720px) {
	.takt-stage-hero {
		min-height: 36rem;
	}
	.takt-stage-hero__stage {
		min-height: 28rem;
	}
	.takt-stage-hero .takt-stage-hero__title {
		font-size: clamp(3.45rem, 17vw, 6rem);
		line-height: 0.9;
	}
	.takt-stage-hero__footer {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}
	.takt-stage-hero__footer .wp-block-buttons {
		justify-content: flex-start;
	}
}

/* In a phone-width content column the search action is clearer below the
   field, and the full placeholder remains visible. Header search is excluded. */
@media (max-width: 480px) {
	main .wp-block-search:not(.takt-header__search) .wp-block-search__inside-wrapper {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--20);
	}
	main .wp-block-search:not(.takt-header__search) .wp-block-search__button {
		width: 100%;
		margin-inline: 0;
	}
}

/* Card: a quiet surface for grouped content. */
.is-style-takt-card {
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--50);
}

/* Cards in grids, or in a columns row that holds nothing but cards, fill their
   cell so the row shares one height. A card next to a text column keeps its own height. */
.is-layout-grid > .is-style-takt-card,
.wp-block-columns:not(:has(> .wp-block-column > :not(.is-style-takt-card:only-child))) > .wp-block-column > .is-style-takt-card {
	height: 100%;
}

/* Core's auto-fill grid can reserve a fifth empty track for four saved cards
   at Takt's 80rem wide size. The current design fixes exact four-card sets
   automatically. Existing sites can opt into the same correction without
   changing design generation by adding takt-card-grid--balanced to the grid. */
.takt-card-grid--balanced,
body:not(.takt-design-0-5) .is-layout-grid:has(> .is-style-takt-card:first-child):has(> .is-style-takt-card:nth-child(4):last-child):not(:has(> :not(.is-style-takt-card))) {
	grid-template-columns: 1fr !important;
}
@media (min-width: 35rem) {
	.takt-card-grid--balanced,
	body:not(.takt-design-0-5) .is-layout-grid:has(> .is-style-takt-card:first-child):has(> .is-style-takt-card:nth-child(4):last-child):not(:has(> :not(.is-style-takt-card))) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (min-width: 70rem) {
	.takt-card-grid--balanced,
	body:not(.takt-design-0-5) .is-layout-grid:has(> .is-style-takt-card:first-child):has(> .is-style-takt-card:nth-child(4):last-child):not(:has(> :not(.is-style-takt-card))) {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

.takt-contact-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 760px) {
	.takt-contact-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Plain list. */
.is-style-takt-plain {
	list-style: none;
	padding-left: 0;
}

/* ---------- Helper classes used by the patterns ---------- */

/* Section intro: kicker, heading, lead. */
.takt-intro > .wp-block-heading { margin-block-start: 0.15em; }
/* The lead may use the whole width of its section, so a one-sentence lead stays
   on one line; when it wraps, "pretty" keeps the last line from being one word. */
.takt-intro > p:not(:first-child) {
	max-width: none;
	margin-block-start: var(--wp--preset--spacing--30);
	line-height: 1.55;
	text-wrap: pretty;
}

/* Four figures are one band, not an auto-fill card grid. The explicit columns
   prevent a wide viewport from creating an empty fifth track that makes the
   section look unfinished. Dividers express that the figures belong together. */
.takt-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 0 !important;
}
.takt-stat {
	min-width: 0;
	padding-inline: clamp(1.25rem, 2.5vw, 2.5rem);
	border-inline-start: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.takt-stat:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}
.takt-stat:last-child {
	padding-inline-end: 0;
}
.takt-stat__value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.takt-stat > .wp-block-heading { margin-block-start: 0.35rem; }

@media (max-width: 900px) {
	.takt-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		row-gap: var(--wp--preset--spacing--50) !important;
	}
	.takt-stat:nth-child(odd) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
	.takt-stat:nth-child(even) {
		padding-inline-end: 0;
	}
	.takt-stat:nth-child(n + 3) {
		padding-block-start: var(--wp--preset--spacing--50);
		border-block-start: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	}
}

@media (max-width: 600px) {
	.takt-stats__grid {
		grid-template-columns: 1fr !important;
		row-gap: 0 !important;
	}
	.takt-stat,
	.takt-stat:nth-child(n + 3) {
		padding: var(--wp--preset--spacing--40) 0;
		border-block-start: 1px solid color-mix(in srgb, currentColor 22%, transparent);
		border-inline-start: 0;
	}
	.takt-stat:first-child {
		padding-block-start: 0;
		border-block-start: 0;
	}
	.takt-stat:last-child {
		padding-block-end: 0;
	}
}

/* Numbered steps. */
.takt-step__number {
	width: 2.6rem;
	height: 2.6rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--tint);
}

/* Profile and team cards: image flush with the card edge. */
.takt-member { overflow: hidden; }
.takt-member > .wp-block-image { margin: 0; }
.takt-member > .wp-block-image img { width: 100%; border-radius: 0; display: block; }

/* A one-line quote: never balance-wrap it while it fits. */
.takt-quote-line p { text-wrap: nowrap; }
@media (max-width: 1100px) { .takt-quote-line p { text-wrap: pretty; } }

/* A photo that fills its column. */
.takt-photo img { width: 100%; display: block; }

/* Video embeds get the same rounded corners as images and cards. The wrapper
   is what the responsive aspect-ratio padding sits on, so it does the clipping. */
.wp-block-embed.is-type-video .wp-block-embed__wrapper {
	border-radius: var(--wp--custom--radius--medium);
	overflow: hidden;
}
.wp-block-embed.is-type-video iframe { display: block; border: 0; }

/* ---------- Article body ---------- */

/*
 * The body of an article shares its left edge with the header above it and the
 * featured image beside it. Before this the header sat at the wide column's
 * edge, the image spanned the whole wide column, and the text was centred in a
 * narrower one — three different left edges on one page, which reads as a
 * column squeezed in rather than a text set deliberately.
 *
 * The block is wide, so its children have the wide column to start from; the
 * cap here is what keeps a line of prose readable. Wide and full-width blocks
 * inside the content, and the classic floats, keep their own behaviour.
 */
.takt-entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	/*
	 * One measure for every running text on the site, named once in theme.json.
	 * 52rem was chosen against an assumed 16px body; measured against the 17px
	 * Barlow this theme actually sets, it came to 101 characters a line, well
	 * past the 45 to 75 a reader follows comfortably. The shared left edge that
	 * the rule below is really about is untouched by the narrower value.
	 */
	max-width: var(--wp--custom--measure--text, 44rem);
	/*
	 * The centring these override comes from core's constrained layout, which
	 * declares its margins !important — so the override has to say it too. The
	 * width above needs no such help; specificity settles that one.
	 */
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* The search form keeps a sane width but starts at the same edge as the results. */
.wp-block-group.alignwide > .wp-block-search {
	max-width: 34rem;
}

/*
 * Migrated content sometimes arrives with the whole article wrapped in one
 * full-width group — a leftover of an import, not a decision anyone made in
 * the editor. The rule above rightly leaves .alignfull alone, and that let the
 * wrapper hand its 1280px straight to the paragraphs inside: 150 characters a
 * line, and a left edge 24px off the title's because the wrapper brings its
 * own global padding. Four of Radys' sixty posts look like that.
 *
 * So a lone full-width group that is only a wrapper passes the measure on to
 * its children instead of swallowing it.
 */
.takt-entry-content > .wp-block-group.alignfull:only-child {
	padding-inline: 0;
}
.takt-entry-content > .wp-block-group.alignfull:only-child > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	max-width: var(--wp--custom--measure--text, 44rem);
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* 6.7: the card rules below only mean anything where there is an excerpt. */
.takt-post-card:not(:has(.wp-block-post-excerpt)) {
	display: block;
}

/* ---------- Comments ---------- */

/*
 * The comment section shares the article's left edge instead of sitting 288px
 * inside it, and everything meant to be read or typed keeps the same measure
 * as the article itself — a comment field 1280px wide invites nothing.
 */
.takt-comments > *,
.takt-comments .comment-form > * {
	max-width: var(--wp--custom--measure--text, 44rem);
}
.takt-comments .wp-block-comments-title {
	max-width: none;
}
.takt-comments textarea,
.takt-comments input:not([type="checkbox"]):not([type="submit"]) {
	max-width: 100%;
}

/*
 * WordPress writes the reply heading itself, as an h3 that the element scale
 * would otherwise render at the size of a section heading.
 */
.takt-comments #reply-title {
	font-size: var(--wp--preset--font-size--large);
}

/* ---------- Post navigation ---------- */

/*
 * Previous and next sit at the two edges of the wide column, with the same
 * left edge as the article above them. Each keeps to half the row so a long
 * headline wraps instead of pushing its neighbour off the line, and on a phone
 * they stack in reading order.
 */
.takt-post-nav > * {
	max-width: calc(50% - var(--wp--preset--spacing--40));
	margin: 0;
}
.takt-post-nav .wp-block-post-navigation-link a {
	text-decoration: none;
	font-weight: 600;
}
.takt-post-nav .wp-block-post-navigation-link a:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.takt-post-nav > * {
		max-width: 100%;
	}
	/* Right-aligned text on a full-width row would read as a mistake. */
	.takt-post-nav > .has-text-align-right {
		text-align: left;
	}
}

/* ---------- Page frame ---------- */

/*
 * The footer sits at the foot of the window even when the page is shorter than
 * it — an empty cart, a 404 on a large screen, a short legal page. Without this
 * a strip of page background stayed under the footer, which reads as a mistake
 * rather than as space. svh, not vh, so the mobile address bar does not add a
 * scrollbar to a page that fits.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}
.wp-site-blocks > footer {
	margin-block-start: auto;
}

/* ---------- Back to top ---------- */

/*
 * A small, quiet target in the corner. It is hidden until the script decides
 * the page is long enough to be worth one, so it never appears on a page that
 * does not scroll — and a visitor without JavaScript never sees it at all,
 * which is right: without the script it would not work.
 */
/*
 * The attribute has to win over the display below. An element with [hidden]
 * only disappears because the browser's own sheet says display:none, and any
 * display declared here would quietly override it — leaving the button on
 * screen at all times, including for a visitor whose script never loaded.
 */
.takt-to-top[hidden] {
	display: none;
}

.takt-to-top {
	position: fixed;
	inset-block-end: calc(var(--wp--preset--spacing--40) + 3.75rem);
	inset-inline-end: var(--wp--preset--spacing--40);
	z-index: 90;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/*
	 * Filled with the contrast colour, not the page colour. Taking the
	 * background made the button the same tone as whatever it floated over —
	 * light on a light page, dark on a dark one — so it read as nothing but a
	 * thin ring. Inverted it is unmistakable in either scheme, and it still
	 * stays out of the way because it is small and quiet in colour.
	 */
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	box-shadow: 0 2px 14px rgb(0 0 0 / 0.22);
	transition: background-color 140ms ease, transform 140ms ease;
}
.takt-to-top:hover {
	background: var(--wp--preset--color--primary);
	transform: translateY(-2px);
}
.takt-to-top:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* On a phone it stays clear of the footer signature and docked controls. */
@media (max-width: 600px) {
	.takt-to-top {
		inset-block-end: calc(var(--wp--preset--spacing--30) + 3.75rem);
		inset-inline-end: var(--wp--preset--spacing--30);
	}
}

/* ---------- Author box ---------- */

.takt-author-box {
	align-items: flex-start;
}
.takt-author-box .wp-block-avatar img {
	display: block;
	border-radius: 50%;
}
.takt-author-box__kicker {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.takt-author-box .wp-block-post-author-name {
	margin: 0;
}

/* ---------- Takt credit ---------- */

/*
 * The mark at the foot of a site. It is drawn in currentColor, so it inherits
 * the footer's own text colour and works in both color schemes from one file.
 * The club or organisation remains the primary brand above; this manufacturer
 * signature stays compact but deliberately visible at the page edge.
 */
.takt-credit {
	margin: 0;
	line-height: 1;
}
.takt-credit a {
	display: inline-flex;
	align-items: center;
	color: inherit;
	opacity: 1;
	transition: transform 140ms ease;
}
.takt-credit a:hover,
.takt-credit a:focus-visible {
	transform: translateY(-1px);
}
/*
 * Sized against the line of small text beside it, not against the footer: the
 * signature should sit at the same weight as the copyright line, not above it.
 */
.takt-credit__logo {
	display: block;
	height: 1.7rem;
	width: auto;
}

.takt-footer.has-tint-background-color .takt-credit {
	color: var(--wp--preset--color--contrast);
}

.takt-footer.has-contrast-background-color .takt-credit {
	color: var(--wp--preset--color--base);
}

/* ---------- Article header ---------- */

/* A story opens on a quieter stage than a landing page. The pulse at the top
   and the compressed title scale give the post an identity even without art. */
body:not(.takt-design-0-5) .takt-entry-stage {
	position: relative;
	display: flex;
	min-height: clamp(19rem, 38vh, 28rem);
	align-items: flex-end;
}
body:not(.takt-design-0-5) .takt-entry-stage::before {
	position: absolute;
	top: 0;
	left: max(var(--wp--preset--spacing--40), calc((100vw - 80rem) / 2));
	width: clamp(5rem, 14vw, 12rem);
	height: 0.45rem;
	background: var(--wp--preset--color--primary);
	content: "";
}
body:not(.takt-design-0-5) .takt-entry-header {
	width: 100%;
}
body:not(.takt-design-0-5) .takt-entry-header .wp-block-post-title {
	max-width: 15ch;
	margin: 0;
	font-size: clamp(3.25rem, 7vw, 6.75rem);
	font-weight: 650;
	letter-spacing: -0.055em;
	line-height: 0.92;
}
body:not(.takt-design-0-5) .takt-entry-meta {
	color: var(--wp--preset--color--secondary);
}

/* Long real-world news titles need a wider measure and progressively quieter
   type, not truncation. Short titles keep the full stage gesture; each longer
   class trades size for reading rhythm while retaining the same visual voice. */
body:not(.takt-design-0-5).takt-title-medium .takt-entry-header .wp-block-post-title {
	max-width: 20ch;
	font-size: clamp(2.75rem, 5.6vw, 5.5rem);
	letter-spacing: -0.047em;
	line-height: 0.95;
}
body:not(.takt-design-0-5).takt-title-long .takt-entry-header .wp-block-post-title {
	max-width: 64rem;
	font-size: clamp(2.35rem, 4.6vw, 4.75rem);
	letter-spacing: -0.038em;
	line-height: 0.98;
	text-wrap: pretty;
}
body:not(.takt-design-0-5).takt-title-very-long .takt-entry-header .wp-block-post-title {
	max-width: 72rem;
	font-size: clamp(2.15rem, 3.6vw, 4.25rem);
	letter-spacing: -0.028em;
	line-height: 1.01;
	text-wrap: pretty;
}

/* Compatibility mode leaves ordinary article titles untouched. Only titles
   whose length breaks the established layout receive this protective scale. */
body.takt-design-0-5.takt-title-long .takt-entry-header .wp-block-post-title {
	max-width: 60rem;
	font-size: clamp(2.25rem, 4.2vw, 4rem);
	letter-spacing: -0.025em;
	line-height: 1.02;
	text-wrap: pretty;
}
body.takt-design-0-5.takt-title-very-long .takt-entry-header .wp-block-post-title {
	max-width: 60rem;
	font-size: clamp(2rem, 3.35vw, 3.5rem);
	letter-spacing: -0.018em;
	line-height: 1.05;
	text-wrap: pretty;
}

/*
 * The header of a post shares its left edge with the featured image below it,
 * and a headline may run wider than body copy without becoming hard to read.
 * A title squeezed into the 44rem reading measure while a 80rem image sits
 * under it reads as two different pages stacked on each other.
 *
 * The group itself is wide and uses flow layout, so its children start at the
 * wide column's left edge; the cap here is what keeps a long headline from
 * running the full 80rem.
 */
.takt-entry-header > * {
	max-width: 60rem;
	margin-inline-end: auto;
}

/* Meta lines are labels, not prose: they stay small and quiet. */
.takt-entry-header > .wp-block-post-date,
.takt-entry-header > .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------- Post cards ---------- */

/*
 * A post grid is only as tidy as its worst headline. Real titles run from two
 * words to two lines of emoji, and an unclamped grid turns that into rows of
 * wildly different heights with the read-more links scattered down the page.
 *
 * The card is a column: image, date, title, excerpt, link. Title and excerpt
 * are clamped so a long headline cannot push the card past its neighbours, and
 * the read-more link is pinned to the bottom so every link in a row lines up.
 */
.takt-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* A constrained Group centres its children by default. In a programme grid
   each card needs one firm left edge, including when it has no image. */
.takt-post-card > * {
	width: 100%;
	margin-inline: 0 !important;
}
.takt-post-card:not(:has(.wp-block-post-featured-image)) {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 0.3rem solid var(--wp--preset--color--primary);
}

/* Clamping needs the old flexbox box model; every browser in use supports it. */
.takt-post-card .wp-block-post-title,
.takt-post-card .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.takt-post-card .wp-block-post-title {
	-webkit-line-clamp: 3;
	text-wrap: balance;
}

/*
 * Core makes the title link an inline-block, and an inline-block child turns
 * the whole line box into one item, which stops the clamp from counting lines
 * at all. The link only needs to be inline to be clamped with its heading.
 */
.takt-post-card .wp-block-post-title a {
	display: inline;
}

.takt-post-card .wp-block-post-excerpt__excerpt {
	-webkit-line-clamp: 3;
	color: var(--wp--preset--color--secondary);
}

/* The excerpt owns the leftover height so the link can sit at the card foot. */
.takt-post-card .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.takt-post-card .wp-block-post-excerpt__more-text {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
}

/* The date is the card's quietest line, and it reads as a label, not prose. */
.takt-post-card .wp-block-post-date {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* The whole card lifts on hover, not just the link that was pointed at. */
.takt-post-card .wp-block-post-featured-image img {
	transition: transform 240ms ease;
}
.takt-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.02);
}
.takt-post-card .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--medium);
}

/* ---------- Pagination ---------- */
/* Numbers and the previous/next links are one family of targets: at least
   44 by 44 pixels, the current page filled, everything else outlined. */
.wp-block-query-pagination {
	gap: 0.5rem;
	align-items: center;
	font-family: var(--wp--preset--font-family--heading);
}
.wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 1.75rem;
	padding: 0;
	color: var(--wp--preset--color--secondary);
}
.wp-block-query-pagination-previous:focus-visible,
.wp-block-query-pagination-next:focus-visible,
.wp-block-query-pagination .page-numbers:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
/* WooCommerce archives use the same look. */
.woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; border: 0; }
.woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--small);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	background: transparent;
}
.woocommerce-pagination ul.page-numbers li span.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.woocommerce-pagination ul.page-numbers li a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* Photo captions: quiet, small, left-aligned under the image. */
.wp-block-image .wp-element-caption,
.wp-block-gallery .wp-element-caption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
	text-align: left;
	margin-top: 0.5rem;
}