/**
 * Kiddoz Cafe: shared styles.
 *
 * Design tokens (--kc-*), base, buttons, header, footer, wave edges, carousel, page
 * templates (single post, archive, 404, Simple page) and forms — everything that appears
 * on every page. Section layout lives in assets/css/section-{name}.css (and any
 * page-{slug}.css), scoped under the section class, and uses these tokens.
 *
 * Values are from the Figma file (eO3Bz6YvehMWDDPyzeiYYr) at 1440; the header and
 * footer are pixel-matched there.
 */

/* ------------------------------------------------------------ tokens ---- */

:root {
	--kc-dark-purple: #313375;
	--kc-pink: #f667c8;
	--kc-light-pink: #ff9ffa;
	--kc-blush: #ffccfc;
	--kc-cyan: #7aecf6;
	--kc-lavender: #a4a5f8;
	--kc-purple: #7f81c8;
	--kc-yellow: #f6e97e;
	--kc-black: #1b1b1b;
	--kc-white: #ffffff;

	--kc-font-display: var( --wp--preset--font-family--display );
	--kc-font-body: var( --wp--preset--font-family--body );

	--kc-radius-card: 1.5rem;
	--kc-radius-inner: 1.125rem;
	--kc-radius-image: 1rem;
	--kc-radius-pill: 62.4375rem;
	--kc-shadow-card: 12px 12px 10px rgba( 0, 0, 0, 0.08 );

	--kc-content-w: 77.5rem;
	--kc-gutter: clamp( 1rem, 8.3vw - 1.2rem, 6.25rem );
	--kc-gutter-wide: clamp( 1rem, 6.34vw - 0.7rem, 5rem ); /* 16px on phones (as --kc-gutter), 80px at 1440 */
	--kc-section-space: clamp( 3rem, 8.334vw, 7.5rem );
	--kc-wave-h: clamp( 2.5rem, 6.95vw, 6.25rem );

	/* Keyboard focus ring. Dark purple reads on every light band (white, lavender, blush,
	   aqua, pink); the dark bands switch it to white. */
	--kc-focus: var( --kc-dark-purple );

	/* Form fields (Figma 173:1116). */
	--kc-placeholder: #787882;
	--kc-field-border: #d7d7de;
	--kc-field-bg: #f6f6f8;
	--kc-card-border: #d6d6dc;
	--kc-error: #c0247f;

	/* One-offs: the yellow pill's hover shade, and the footer card's gradient (behind
	   its photo, seen while the image loads). */
	--kc-yellow-hover: #ecd548;
	--kc-footer-gradient: linear-gradient( 90deg, #ff8df6, #6aebf5 55%, #7b5cff );
}

/* -------------------------------------------------------------- base ---- */

/* Figma sizes include padding and border (a 1180 pill, a 142 × 48 button, a 350 field). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.kc-main {
	overflow-x: clip;
}

/* Sections butt up against each other; each one owns its own vertical padding. */
.wp-site-blocks > *,
.kc-main .entry-content > * {
	margin-block: 0;
}

img {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 2px solid var( --kc-focus );
	outline-offset: 2px;
}

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

.kc-skip-link:focus,
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 200;
	clip-path: none;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	border-radius: var( --kc-radius-pill );
	background: var( --kc-white );
	color: var( --kc-dark-purple );
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

/* Text on the dark purple band. */
.has-kc-dark-purple-background-color,
.has-kc-dark-purple-background-color :is( h1, h2, h3, h4, h5, h6 ) {
	color: var( --kc-white );
}

.has-kc-dark-purple-background-color,
.has-kc-black-background-color {
	--kc-focus: var( --kc-white );
}

/* ----------------------------------------------------------- buttons ---- */

.kc-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var( --kc-radius-pill );
	font-family: var( --kc-font-body );
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.43;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.kc-btn:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var( --kc-focus );
	outline-offset: 3px;
}

.kc-btn--dark,
.is-style-dark .wp-block-button__link {
	background: var( --kc-dark-purple );
	color: var( --kc-white );
}

.kc-btn--pink,
.is-style-pink .wp-block-button__link {
	background: var( --kc-pink );
	color: var( --kc-white );
}

.kc-btn--yellow,
.is-style-yellow .wp-block-button__link {
	background: var( --kc-yellow );
	color: var( --kc-dark-purple );
}

.kc-btn--white,
.is-style-white .wp-block-button__link {
	background: var( --kc-white );
	color: var( --kc-purple );
}

/* Hover and keyboard focus: every style swaps to a clearly different colour. A button
   with no style is the default purple pill (theme.json), so it hovers like dark. */
.kc-btn--dark:is( :hover, :focus-visible ),
.wp-block-button:not( [class*="is-style-"] ) .wp-block-button__link:is( :hover, :focus-visible ),
.is-style-dark .wp-block-button__link:is( :hover, :focus-visible ) {
	background: var( --kc-pink );
	color: var( --kc-white );
}

.kc-btn--pink:is( :hover, :focus-visible ),
.is-style-pink .wp-block-button__link:is( :hover, :focus-visible ) {
	background: var( --kc-dark-purple );
	color: var( --kc-white );
}

.kc-btn--yellow:is( :hover, :focus-visible ),
.is-style-yellow .wp-block-button__link:is( :hover, :focus-visible ) {
	background: var( --kc-yellow-hover );
	color: var( --kc-dark-purple );
}

.kc-btn--white:is( :hover, :focus-visible ),
.is-style-white .wp-block-button__link:is( :hover, :focus-visible ) {
	background: var( --kc-lavender );
	color: var( --kc-dark-purple );
}

/* Reduced motion: every transition and animation on the site (section styles included)
   finishes at once, and carousels jump instead of gliding. */
@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

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

/* White pill over the hero (Figma 178:295): 1180 × 64, 32px from the top. Logo left,
   the menu centred on the pill, Book Now right. At 1024px and below the menu moves
   behind the hamburger (logo + Book Now + hamburger stay in the pill). */
.kc-site-header {
	--kc-header-top: 2rem;
	position: absolute;
	/* Core sets the admin-bar height (32 / 46px) when a logged-in user sees the bar; the
	   absolute header would otherwise sit tight under it. */
	inset: calc( var( --kc-header-top ) + var( --wp-admin--admin-bar--height, 0px ) ) 0 auto;
	z-index: 100;
	padding-inline: var( --kc-gutter );
}

.kc-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	max-width: 73.75rem;
	min-height: 4rem;
	margin-inline: auto;
	padding: 0.5rem 1.875rem 0.5rem 0.9375rem;
	border-radius: 2rem;
	background: var( --kc-white );
}

.kc-header__logo {
	justify-self: start;
	border-radius: 50%;
}

.kc-header__logo img {
	display: block;
	width: 2.75rem;
	height: 2.75rem;
}

/* The Figma menu is centred at x 728 (8px right of the pill's centre); the pill's
   padding is 15 left / 30 right, so the grid centre needs a 31px nudge at 1440,
   easing to none by ~1150 where the menu needs the room. */
.kc-header__menu {
	--kc-nav-gap: clamp( 1.75rem, 5.88vw - 2.02rem, 3.275rem );
	display: flex;
	gap: var( --kc-nav-gap );
	margin: 0 0 0 clamp( 0rem, 10.69vw - 7.68rem, 1.9375rem );
	padding: 0;
	list-style: none;
}

/* Figma spaces the six links unevenly (57, 55, 58, 51 and 41px at 1440; 52.4 on
   average, the gap above), so each link gets its share of the same total. */
@media ( min-width: 1025px ) {
	.kc-header__menu {
		gap: 0;
	}

	.kc-header__item + .kc-header__item {
		margin-left: var( --kc-nav-gap );
	}

	.kc-header__item:nth-child( 2 ) {
		margin-left: calc( var( --kc-nav-gap ) * 1.0878 );
	}

	.kc-header__item:nth-child( 3 ) {
		margin-left: calc( var( --kc-nav-gap ) * 1.0496 );
	}

	.kc-header__item:nth-child( 4 ) {
		margin-left: calc( var( --kc-nav-gap ) * 1.1069 );
	}

	.kc-header__item:nth-child( 5 ) {
		margin-left: calc( var( --kc-nav-gap ) * 0.9733 );
	}

	.kc-header__item:nth-child( 6 ) {
		margin-left: calc( var( --kc-nav-gap ) * 0.7824 );
	}
}

.kc-header__menu a {
	display: block;
	padding-block: 0.5rem;
	color: var( --kc-dark-purple );
	font-size: 0.75rem;
	line-height: 1.3334;
	white-space: nowrap;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.kc-header__item.is-current a,
.kc-header__menu a:is( :hover, :focus-visible ) {
	color: var( --kc-pink );
}

/* The current page is already pink, so its hover underlines too (as every nav link does). */
.kc-header__menu a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25rem;
}

.kc-header__menu a:is( :hover, :focus-visible ) {
	text-decoration-color: currentColor;
}

.kc-header__cta {
	grid-column: 3;
	justify-self: end;
	min-width: 8.875rem;
	padding: 0.875rem 1.5rem;
}

.kc-header__toggle {
	display: none;
}

@media ( max-width: 1024px ) {
	.kc-header__inner {
		grid-template-columns: 1fr auto auto;
		gap: 0.5rem;
		padding: 0.5rem 0.5rem 0.5rem 0.625rem;
	}

	.kc-header__cta {
		grid-column: 2;
	}

	.kc-header__toggle {
		display: inline-flex;
		grid-column: 3;
		align-items: center;
		justify-content: center;
		width: 3rem;
		height: 3rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var( --kc-blush );
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.kc-header__toggle:is( :hover, :focus-visible ) {
		background: var( --kc-light-pink );
	}

	.kc-header__toggle-bars,
	.kc-header__toggle-bars::before,
	.kc-header__toggle-bars::after {
		display: block;
		width: 1.125rem;
		height: 0.125rem;
		border-radius: 1px;
		background: var( --kc-dark-purple );
		content: "";
		transition: transform 0.2s ease, background-color 0.2s ease;
	}

	.kc-header__toggle-bars {
		position: relative;
	}

	.kc-header__toggle-bars::before,
	.kc-header__toggle-bars::after {
		position: absolute;
		left: 0;
	}

	.kc-header__toggle-bars::before {
		transform: translateY( -0.375rem );
	}

	.kc-header__toggle-bars::after {
		transform: translateY( 0.375rem );
	}

	.kc-header__toggle[aria-expanded="true"] .kc-header__toggle-bars {
		background: transparent;
	}

	.kc-header__toggle[aria-expanded="true"] .kc-header__toggle-bars::before {
		transform: rotate( 45deg );
	}

	.kc-header__toggle[aria-expanded="true"] .kc-header__toggle-bars::after {
		transform: rotate( -45deg );
	}

	/* Full-screen menu behind the pill (z-index -1 inside the header's stacking context,
	   so the pill and its close button stay on top). */
	.kc-header__panel {
		position: fixed;
		inset: 0;
		z-index: -1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 8rem var( --kc-gutter ) 3rem;
		overflow-y: auto;
		background: var( --kc-white );
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	/* Visible at once on open (so nav.js can focus the first link); fades out on close. */
	.kc-header__panel.is-open {
		visibility: visible;
		opacity: 1;
		transition: opacity 0.2s ease;
	}

	.kc-header__menu {
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
		margin: 0;
	}

	.kc-header__menu a {
		display: flex;
		align-items: center;
		min-height: 3rem;
		padding: 0.5rem 1rem;
		font-family: var( --kc-font-display );
		font-size: 1.75rem;
		font-weight: 700;
		line-height: 1.2;
	}
}

@media ( max-width: 781px ) {
	.kc-site-header {
		--kc-header-top: 1rem;
	}

	.kc-header__cta {
		min-width: 0;
		padding-inline: 1.25rem;
	}
}

/* ------------------------------------------------------------ footer ---- */

/* Lavender band (Figma 171:692) with the "Wave / Footer Top" edge: the Book-your-ticket
   card (1280 × 554), then logo + link columns, then the copyright line. */
.kc-footer {
	padding: clamp( 6rem, 14.53vw, 13.0625rem ) var( --kc-gutter-wide ) 4.6875rem;
	background: var( --kc-lavender );
	color: var( --kc-dark-purple );
}

.kc-footer__inner {
	max-width: 80rem;
	margin-inline: auto;
}

.kc-footer__cta {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp( 20rem, 38.47vw, 34.625rem );
	padding: 3rem clamp( 1.5rem, 4.1vw, 3.6875rem );
	overflow: hidden;
	border-radius: var( --kc-radius-card );
	background: var( --kc-footer-gradient );
}

.kc-footer__cta-bg,
.kc-footer__watermark {
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.kc-footer__cta-bg {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Faded logo, 651px at 10% (Figma 171:722), cropped by the card. */
.kc-footer__watermark {
	top: 4.5%;
	left: 49.4%;
	width: 50.86%;
	max-width: none;
	height: auto;
	opacity: 0.1;
}

.kc-footer__cta-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	max-width: 60.6875rem;
}

.kc-footer__cta-heading {
	margin: 0;
	color: var( --kc-dark-purple );
	font-family: var( --kc-font-display );
	font-size: clamp( 2.25rem, 4.445vw, 4rem );
	font-weight: 700;
	line-height: 1.125;
}

.kc-footer__cta-button {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border-radius: 2rem;
	background: var( --kc-white );
	color: var( --kc-purple );
	font-family: var( --kc-font-display );
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.43;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kc-footer__cta-button:is( :hover, :focus-visible ) {
	background: var( --kc-dark-purple );
	color: var( --kc-white );
}

.kc-footer__cta-button:focus-visible {
	outline: 2px solid var( --kc-dark-purple );
	outline-offset: 3px;
}

.kc-footer__cta-button svg {
	flex: none;
	transition: transform 0.2s ease;
}

.kc-footer__cta-button:is( :hover, :focus-visible ) svg {
	transform: translate( 0.1875rem, -0.1875rem );
}

.kc-footer__main {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2.5rem clamp( 2.5rem, 10.17vw, 9.15625rem );
	margin-top: clamp( 3.5rem, 6.42vw, 5.78125rem );
}

.kc-footer__logo {
	flex: none;
}

.kc-footer__logo img {
	display: block;
	width: 13.625rem;
	height: auto;
}

.kc-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 3.75rem;
}

.kc-footer__col:nth-child( 2 ) {
	min-width: 10rem;
}

.kc-footer__label {
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.3334;
}

/* Figma spaces the three-link columns 24px apart and the four-link one 12px. */
.kc-footer__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	line-height: 1.43;
}

.kc-footer__list:has( > li:nth-child( 4 ) ) {
	gap: 0.75rem;
}

.kc-footer__list a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25rem;
	transition: text-decoration-color 0.2s ease;
}

.kc-footer__list a:is( :hover, :focus-visible ) {
	text-decoration-color: currentColor;
}

/* The copyright line sits level with the bottom of the 218px logo (Figma y 1059). */
.kc-footer__copyright {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	margin: -0.9375rem 0 0;
	font-weight: 500;
	line-height: 1.5;
}

.kc-footer__copyright svg {
	flex: none;
}

@media ( max-width: 1024px ) {
	.kc-footer__copyright {
		margin-top: 3rem;
	}

	/* 44px tap targets on touch screens. */
	.kc-footer__list,
	.kc-footer__list:has( > li:nth-child( 4 ) ) {
		gap: 0;
	}

	.kc-footer__list a {
		display: inline-flex;
		align-items: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
	}
}

@media ( max-width: 781px ) {
	.kc-footer {
		padding-bottom: 2.5rem;
	}

	.kc-footer__cta {
		align-items: flex-end;
		min-height: 22.5rem;
		padding: 2rem 1.5rem;
	}

	.kc-footer__watermark {
		top: -6%;
		left: 28%;
		width: 90%;
	}

	.kc-footer__main {
		flex-direction: column;
		gap: 2rem;
	}

	.kc-footer__logo img {
		width: 10rem;
	}

	.kc-footer__cols {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 2rem 1.5rem;
		width: 100%;
	}

	.kc-footer__col:nth-child( 2 ) {
		min-width: 0;
	}

	.kc-footer__label {
		margin-bottom: 0.5rem;
		font-size: 1.25rem;
	}

	.kc-footer__copyright {
		justify-content: flex-start;
		margin-top: 2rem;
		font-size: 0.875rem;
	}
}

/* ------------------------------------------------------- wave edges ---- */

/* Section settings → Wavy top / bottom edge (Figma "Wave / Hero Bottom", "Wave / Footer
   Top", Vectors 12–17 — all one shape, assets/shapes/wave.svg). The edge is a
   pseudo-element masked by the wave that inherits the section's own background, so one
   shape works for every band colour. A top wave rises above the section into the one
   before it; a bottom wave (the same shape flipped) hangs below into the next one. */
.kc-wave-top,
.kc-wave-bottom {
	position: relative;
}

.kc-wave-top::before,
.kc-wave-bottom::after {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	height: var( --kc-wave-h );
	background: inherit;
	content: "";
	pointer-events: none;
	-webkit-mask: url( ../shapes/wave.svg ) center / 100% 100% no-repeat;
	mask: url( ../shapes/wave.svg ) center / 100% 100% no-repeat;
}

/* 1px overlap so no hairline shows between the wave and its band. */
.kc-wave-top::before {
	bottom: calc( 100% - 1px );
}

.kc-wave-bottom::after {
	top: calc( 100% - 1px );
	transform: scaleY( -1 );
}

/* Two neighbouring sections only ever show one wave. A bottom wave wins over the next
   section's top wave; the hero draws its own wave, so the section after it never adds
   one; and a last section with a bottom wave replaces the footer's top wave. */
.kc-wave-bottom + .kc-wave-top::before,
.kc-hero + .kc-wave-top::before,
.kc-main:has( > .kc-wave-bottom:last-child, > .entry-content > .kc-wave-bottom:last-child ) + .kc-site-footer .kc-footer::before {
	display: none;
}

/* A band with no colour of its own is the page's white, so its wave is white too.
   Zero specificity: any section class that sets a background wins. */
:where( .kc-wave-top, .kc-wave-bottom ):where( :not( .has-background ) ) {
	background-color: var( --kc-white );
}

/* ---------------------------------------------------------- carousel ---- */

.kc-carousel {
	position: relative;
}

.kc-carousel__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.kc-carousel__track::-webkit-scrollbar {
	display: none;
}

.kc-carousel__track > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.kc-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1.5px solid var( --kc-dark-purple );
	border-radius: 50%;
	background: transparent;
	color: var( --kc-dark-purple );
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kc-carousel__button:not( [disabled] ):is( :hover, :focus-visible ) {
	border-color: var( --kc-dark-purple );
	background: var( --kc-dark-purple );
	color: var( --kc-white );
}

.kc-carousel__button[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* ------------------------------------------------ page templates ---- */

/* The band at the top of templates that have no hero section: single post, archive,
   blog index, 404 and Simple pages (Terms, Privacy). Lavender, clears the header pill,
   title centred; the wave hangs below it (.kc-wave-bottom). */
/* Same type and top spacing as the page hero section (section-hero.css: title 96/86
   starting 160 down at 1440, tagline 21/32), so every page's title sits in one place. */
.kc-page-hero {
	padding-top: clamp( 8rem, 7.257rem + 3.048vw, 10rem ) !important;
	padding-bottom: clamp( 3.5rem, 6.95vw, 6.25rem ) !important;
	text-align: center;
}

.kc-page-hero > * {
	margin-inline: auto;
}

.kc-page-hero :is( h1, .wp-block-post-title, .wp-block-query-title ) {
	max-width: 65.5rem;
	margin-block: 0;
	font-size: clamp( 2.25rem, 6.667vw, 6rem );
	line-height: 0.896;
	text-wrap: balance;
}

.kc-page-hero__lead {
	max-width: 53.75rem;
	margin-top: clamp( 0.75rem, 2.014vw, 1.8125rem );
	font-size: clamp( 1rem, 1.46vw, 1.3125rem );
	line-height: 1.524;
}

.kc-page-hero__lead p {
	margin: 0;
}

/* Category · date line above / below a post title. */
.kc-page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-block: 0 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.43;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kc-page-hero__meta .wp-block-post-terms a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0.25rem 1rem;
	border-radius: var( --kc-radius-pill );
	background: var( --kc-white );
	color: var( --kc-pink );
	text-decoration: none;
}

/* A 44px tall hit area around the 32px pill. */
.kc-page-hero__meta .wp-block-post-terms a::after {
	position: absolute;
	inset: -0.375rem 0;
	content: "";
}

.kc-page-hero__meta .wp-block-post-terms a:is( :hover, :focus-visible ) {
	background: var( --kc-dark-purple );
	color: var( --kc-white );
}

.kc-page-hero__meta .wp-block-post-terms__separator {
	display: none;
}

.kc-page-hero__meta .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Body of a single post / Simple page: a ~760px reading column. The band's wave hangs
   into the top, and a wave (the footer's or "More articles") rises into the bottom. */
.kc-article {
	padding-top: calc( var( --kc-wave-h ) + clamp( 2rem, 3.34vw, 3rem ) ) !important;
	padding-bottom: calc( var( --kc-section-space ) + var( --kc-wave-h ) ) !important;
}

.kc-article__image {
	max-width: 62.5rem !important;
	margin-block: 0 clamp( 2.5rem, 4.45vw, 4rem ) !important;
}

.kc-article__image img {
	/* A landscape crop whatever the upload's shape (a portrait photo would otherwise
	   push the article a screen and a half down). */
	aspect-ratio: 16 / 9;
	width: 100%;
	object-fit: cover;
	border-radius: var( --kc-radius-card );
}

.kc-prose {
	font-size: 1.0625rem;
	line-height: 1.75;
}

/* .kc-main scoping outranks the base "sections butt up" rule (post-content is an
   .entry-content too). */
.kc-main .kc-prose > * {
	margin-block: 0 1.25em;
}

.kc-main .kc-prose > :last-child {
	margin-bottom: 0;
}

.kc-main .kc-prose > :is( h2, h3, h4 ) {
	margin-block: 1.75em 0.6em;
	line-height: 1.2;
}

.kc-prose h2 {
	font-size: clamp( 1.75rem, 2.5vw, 2.25rem );
}

.kc-prose h3 {
	font-size: clamp( 1.375rem, 1.8vw, 1.625rem );
}

.kc-prose :is( ul, ol ) {
	padding-left: 1.4em;
}

.kc-prose li + li {
	margin-top: 0.4em;
}

.kc-prose li::marker {
	color: var( --kc-pink );
}

.kc-prose a {
	color: var( --kc-dark-purple );
	text-decoration-color: var( --kc-pink );
	text-decoration-thickness: 0.125rem;
	text-underline-offset: 0.1875rem;
}

.kc-prose a:is( :hover, :focus-visible ) {
	color: var( --kc-pink );
}

.kc-prose blockquote {
	margin-inline: 0;
	padding: 1.5rem 1.75rem;
	border-left: 4px solid var( --kc-pink );
	border-radius: 0 var( --kc-radius-image ) var( --kc-radius-image ) 0;
	background: var( --kc-blush );
}

.kc-prose blockquote > p {
	margin: 0;
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.6;
}

.kc-prose blockquote > p + p {
	margin-top: 0.75em;
}

.kc-prose blockquote cite {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 600;
	line-height: 1.43;
}

.kc-prose img {
	border-radius: var( --kc-radius-image );
}

.kc-prose figcaption {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.43;
}

.kc-prose .wp-block-button__link {
	text-decoration: none;
}

/* 404: the lavender title band (so the header pill reads, as on every page), then the
   buttons on white between its wave and the footer's. */
.kc-404__actions {
	padding-top: calc( var( --kc-wave-h ) + clamp( 2rem, 3.34vw, 3rem ) ) !important;
	padding-bottom: calc( var( --kc-section-space ) + var( --kc-wave-h ) ) !important;
}

.kc-404__code {
	margin-block: 0 0.5rem;
	color: var( --kc-pink );
	font-family: var( --kc-font-display );
	font-size: clamp( 5rem, 11.12vw, 10rem );
	font-weight: 700;
	line-height: 1;
}

.kc-main .kc-404__buttons {
	margin-block: 0;
}

/* ------------------------------------------------------------ editor ---- */

.kc-block-empty {
	padding: 2rem;
	border: 2px dashed #d1d5db;
	text-align: center;
	font: 0.875rem/1.4 system-ui, sans-serif;
	color: #555;
	background: #fff;
}

/* -------------------------------------------------------------- forms ---- */

/* Contact Form 7 "Enquiry" form (bin/seed/enquiry-form.php, Figma 173:1116): two
   columns of labelled fields (350 wide, 44 apart), message full width. */
.kc-form__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 2rem 2.75rem;
}

.kc-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
	color: var( --kc-dark-purple );
	/* Figma draws the labels at 13px; 14 is the site's smallest text size. */
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.43;
}

.kc-form__field--wide {
	grid-column: 1 / -1;
	margin-top: 0.3125rem;
}

/* CF7's hidden-fields fieldset (its own CSS, which hides the border, only loads on
   Contact form pages). */
.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7 :is( input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], input[type="url"], select, textarea ) {
	display: block;
	width: 100%;
	height: 3.625rem;
	padding: 0 1.0625rem;
	border: 1px solid var( --kc-field-border );
	border-radius: 0.875rem;
	background-color: var( --kc-white );
	color: var( --kc-dark-purple );
	font-family: var( --kc-font-body );
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5715;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7 :is( input, select, textarea )::placeholder {
	color: var( --kc-placeholder );
	opacity: 1;
}

/* Figma shows the select's default choice and the empty date in the placeholder grey
   (nav.js marks an empty date field .is-empty). */
.wpcf7 select.wpcf7-form-control:has( option:first-child:checked ),
.wpcf7 input[type="date"].is-empty::-webkit-datetime-edit {
	color: var( --kc-placeholder );
}

.wpcf7 select.wpcf7-form-control option {
	color: var( --kc-dark-purple );
}

/* A dark border plus a lavender halo: clear on the grey form card and the aqua card. */
.wpcf7 :is( input, select, textarea ):focus {
	border-color: var( --kc-dark-purple );
	outline: none;
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --kc-lavender ) 60%, transparent );
}

.wpcf7 select.wpcf7-form-control {
	padding-right: 3rem;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23313375' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 1.25rem center;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.wpcf7 textarea.wpcf7-form-control {
	height: 13.75rem;
	padding-block: 1.0625rem;
	resize: vertical;
}

.kc-form__submit {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 3.4375rem 0 0;
}

.wpcf7 input[type="submit"] {
	min-width: 11.25rem;
	min-height: 3.125rem;
	padding: 0.9375rem 2rem;
	border: 0;
	border-radius: 1.5625rem;
	background: var( --kc-dark-purple );
	color: var( --kc-white );
	font-family: var( --kc-font-body );
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.43;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wpcf7 input[type="submit"]:is( :hover, :focus-visible ) {
	background: var( --kc-pink );
}

.wpcf7 input[type="submit"]:focus-visible {
	outline: 2px solid var( --kc-dark-purple );
	outline-offset: 3px;
}

.wpcf7 .wpcf7-spinner {
	margin: 0;
}

/* A field that failed validation. */
.wpcf7 .wpcf7-form-control.wpcf7-not-valid {
	border-color: var( --kc-error );
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 0.375rem;
	color: var( --kc-error );
	font-size: 0.875rem;
	font-weight: 500;
}

/* The state classes out-rank CF7's own coloured-border rules (form.invalid …). */
.wpcf7 form .wpcf7-response-output,
.wpcf7 form.wpcf7-form:is( .invalid, .unaccepted, .payment-required, .failed, .aborted, .spam, .sent ) .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.875rem 1.125rem;
	border: 0;
	border-radius: 0.875rem;
	background: var( --kc-blush );
	color: var( --kc-dark-purple );
	font-size: 0.875rem;
}

/* Hidden until there is a message (CF7's own CSS only loads on Contact form pages). */
.wpcf7 form .wpcf7-response-output:empty {
	display: none;
}

.wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
	background: var( --kc-cyan );
}

@media ( max-width: 781px ) {
	.kc-form__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	/* 16px stops iOS zooming into a focused field. */
	.wpcf7 :is( input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], input[type="url"], select, textarea ) {
		height: 3.25rem;
		font-size: 1rem;
	}

	.wpcf7 textarea.wpcf7-form-control {
		height: 11.25rem;
	}

	.kc-form__submit {
		margin-top: 2rem;
	}

	/* The full-width button leaves no room beside it, so the (hidden) spinner would
	   wrap onto a line of its own and push the response message down. */
	.kc-form__submit .wpcf7-spinner {
		position: absolute;
		top: 0.8125rem;
		right: 1rem;
	}

	.wpcf7 input[type="submit"] {
		width: 100%;
	}
}