/*
 * KuCoNa component styles.
 * Colours, fonts and base typography come from theme.json; this file adds the
 * section rhythm, block styles (cards, eyebrows, etc.) and hub page colouring.
 */

:root {
	--kc-heading: var(--wp--preset--color--deep-teal);
	--kc-eyebrow: var(--wp--preset--color--teal);
	--kc-hub: var(--wp--preset--color--teal);
	--kc-hub-dark: var(--wp--preset--color--deep-teal);
	--kc-hub-soft: var(--wp--preset--color--mint);
	--kc-border: #d7ebe6;
	--kc-shadow: 0 18px 48px rgba(7, 94, 84, 0.12);
	--kc-radius: 8px;
	--kc-section-pad: 88px;
}

/* Hub page colour themes (chosen per page via the page template). */
.kucona-theme-community {
	--kc-hub: var(--wp--preset--color--community);
	--kc-hub-dark: #286a7f;
	--kc-hub-soft: rgba(47, 127, 152, 0.1);
	--kc-hub-soft-strong: rgba(47, 127, 152, 0.18);
	--kc-hub-gradient: var(--wp--preset--gradient--community);
}

.kucona-theme-learning {
	--kc-hub: var(--wp--preset--color--learning);
	--kc-hub-dark: #854a38;
	--kc-hub-soft: rgba(168, 95, 71, 0.12);
	--kc-hub-soft-strong: rgba(168, 95, 71, 0.2);
	--kc-hub-gradient: var(--wp--preset--gradient--learning);
}

.kucona-theme-nature {
	--kc-hub: var(--wp--preset--color--nature);
	--kc-hub-dark: #345a51;
	--kc-hub-soft: rgba(65, 111, 99, 0.12);
	--kc-hub-soft-strong: rgba(65, 111, 99, 0.2);
	--kc-hub-gradient: var(--wp--preset--gradient--nature);
}

[class*="kucona-theme-"] {
	--kc-heading: var(--kc-hub-dark);
	--kc-eyebrow: var(--kc-hub-dark);
}

/* ---------- Base ---------- */

h1,
h2 {
	color: var(--kc-heading);
}

[class*="kucona-theme-"] h3 {
	color: var(--kc-heading);
}

/* Full-width groups placed directly on a page are "sections".
   (.is-root-container is the same thing inside the editor.) */
:is(.wp-block-post-content, .is-root-container) > .wp-block-group.alignfull {
	padding-top: var(--kc-section-pad);
	padding-bottom: var(--kc-section-pad);
}

:is(.wp-block-post-content, .is-root-container) > .alignfull:first-child,
:is(.wp-block-post-content, .is-root-container) > .alignfull + .alignfull {
	margin-top: 0;
}

/* No gaps between header, page content and footer. */
.wp-site-blocks > *,
.wp-site-blocks > .wp-block-group > * {
	margin-block-start: 0;
}

/* Rounded images inside sections (full-width banners stay square). */
.wp-block-post-content .wp-block-image:not(.alignfull) img {
	border-radius: var(--kc-radius);
}

/* Dark backgrounds flip headings and eyebrows to white. */
.has-deep-teal-background-color,
.has-forest-background-color,
.is-style-kucona-hub-card {
	--kc-heading: #fff;
	--kc-eyebrow: #fff;
}

/* ---------- Text styles ---------- */

.is-style-kucona-eyebrow {
	color: var(--kc-eyebrow);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.is-style-kucona-eyebrow + * {
	margin-block-start: 14px !important;
}

.is-style-kucona-lead {
	max-width: 640px;
	color: var(--wp--preset--color--muted);
	font-size: 1.25rem;
}

/* Keep a narrow lead aligned with the content column's left edge, not centred in it. */
.is-layout-constrained > .is-style-kucona-lead:not(.has-text-align-center) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
}

.has-text-align-center.is-style-kucona-lead {
	max-width: 780px;
	margin-inline: auto !important;
}

.is-style-kucona-number {
	color: var(--kc-hub);
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1;
}

.is-style-kucona-badge {
	display: inline-flex;
	width: fit-content;
	padding: 7px 10px;
	color: var(--kc-hub-dark);
	background: var(--kc-hub-soft);
	border-radius: 6px;
	font-size: 0.8rem;
	font-weight: 800;
}

/* ---------- Buttons ---------- */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	border: 2px solid transparent;
	text-decoration: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0.5rem 1.375rem;
	color: var(--kc-hub-dark);
	background: #fff;
	border: 2px solid var(--kc-hub);
}

[class*="kucona-theme-"] .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	color: #fff;
	background: var(--kc-hub);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	filter: brightness(0.94);
}

/* ---------- Cards and boxes ---------- */

.is-style-kucona-card,
.is-style-kucona-programme,
.is-style-kucona-step {
	min-width: 0;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--kc-border);
	border-radius: var(--kc-radius);
	box-shadow: var(--kc-shadow);
	color: var(--wp--preset--color--ink);
}

.is-style-kucona-card > :first-child,
.is-style-kucona-programme > :first-child,
.is-style-kucona-step > :first-child,
.is-style-kucona-hub-card > :first-child {
	margin-top: 0;
}

.is-style-kucona-card h2 {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-large);
}

[class*="kucona-theme-"] .is-style-kucona-card {
	border-top: 6px solid var(--kc-hub);
}

[class*="kucona-theme-"] .is-style-kucona-card h2 {
	color: var(--kc-heading);
}

.is-style-kucona-programme {
	padding: 22px;
	border-left: 7px solid var(--kc-hub);
}

.is-style-kucona-programme h3 {
	margin-bottom: 8px;
	font-size: 1.1rem;
}

.is-style-kucona-programme p:not(.is-style-kucona-badge) {
	margin-top: 0;
	color: var(--wp--preset--color--muted);
}

.is-style-kucona-step {
	padding: 24px;
	border: 0;
	border-top: 6px solid var(--kc-hub);
}

.is-style-kucona-step .is-style-kucona-number {
	font-size: 0.82rem;
}

.is-style-kucona-step strong {
	color: var(--kc-heading);
	font-size: 1.08rem;
	font-weight: 800;
}

/* Hub card: coloured card with photo, used on the home page. */
.is-style-kucona-hub-card {
	display: flex;
	min-height: 460px;
	flex-direction: column;
	padding: 20px;
	border-radius: var(--kc-radius);
	box-shadow: var(--kc-shadow);
	color: #fff;
}

.is-style-kucona-hub-card .wp-block-image {
	margin-bottom: 0.6rem;
}

.is-style-kucona-hub-card .wp-block-image img {
	border: 1px solid rgba(255, 255, 255, 0.36);
	border-radius: 7px;
}

.is-style-kucona-hub-card > .wp-block-buttons {
	margin-top: auto;
	padding-top: 1.2rem;
}

.is-style-kucona-hub-card .wp-block-button__link {
	padding: 0.5rem 1.375rem;
	color: var(--wp--preset--color--ink) !important;
	background: #fff !important;
	border-color: #fff;
}

/* Goal banner on hub pages. */
.is-style-kucona-goal {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	margin-top: 30px;
	padding: 22px 24px;
	color: #fff;
	background: var(--kc-hub);
	border-radius: var(--kc-radius);
}

.is-style-kucona-goal > * {
	margin: 0 !important;
}

.is-style-kucona-goal > p:first-child {
	padding: 7px 10px;
	color: var(--kc-hub-dark);
	background: #fff;
	border-radius: 6px;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.is-style-kucona-goal > p:last-child {
	font-size: 1.12rem;
	font-weight: 700;
}

/* Placeholder box for content still to come (map, calendar, photos). */
.is-style-kucona-placeholder {
	display: grid;
	min-height: 240px;
	place-content: center;
	padding: 24px;
	color: var(--kc-hub-dark);
	background:
		linear-gradient(135deg, rgba(24, 183, 164, 0.16), rgba(244, 183, 64, 0.18)),
		repeating-linear-gradient(45deg, #f7fffd, #f7fffd 12px, #e8f7f3 12px, #e8f7f3 24px);
	border: 2px dashed var(--kc-hub);
	border-radius: var(--kc-radius);
	text-align: center;
}

[class*="kucona-theme-"] .is-style-kucona-placeholder {
	background:
		linear-gradient(135deg, var(--kc-hub-soft-strong), rgba(255, 255, 255, 0.86)),
		repeating-linear-gradient(45deg, #fff, #fff 14px, var(--kc-hub-soft) 14px, var(--kc-hub-soft) 28px);
}

.is-style-kucona-placeholder > * {
	margin: 0.3rem 0 !important;
}

/* Divided rows: heading on the left, text on the right. */
.is-style-kucona-rows {
	margin-top: 30px;
	border-top: 1px solid var(--kc-border);
}

.is-style-kucona-rows > .wp-block-columns {
	margin: 0 !important;
	padding: 24px 0;
	border-bottom: 1px solid var(--kc-border);
	gap: 8px 28px;
}

.is-style-kucona-rows h3,
.is-style-kucona-rows p {
	margin: 0;
}

/* Checklist. */
.is-style-kucona-checklist {
	display: grid;
	gap: 12px;
	padding: 0;
	list-style: none;
}

.is-style-kucona-checklist li {
	position: relative;
	padding-left: 30px;
	font-weight: 700;
}

.is-style-kucona-checklist li::before {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--kc-hub);
	content: "\2713";
	font-weight: 800;
}

/* Grids of cards sit a little further from the text above them. */
.wp-block-group.is-layout-grid {
	margin-top: 32px;
}

/* ---------- Images ---------- */

.wp-block-image.is-style-kucona-banner img {
	display: block;
	width: 100%;
	height: clamp(320px, 52vw, 620px);
	object-fit: cover;
}

.wp-block-image.is-style-kucona-banner.alignfull img {
	height: clamp(300px, 40vw, 640px);
}

:is(.wp-block-post-content, .is-root-container) > .wp-block-image.alignfull:first-child {
	margin-bottom: 0;
}

/* ---------- Page banner (Cover block) ---------- */

/* The heading band at the top of a page. With a photo, the image is softened
   and sits under the mint overlay (strength set in the block's Overlay
   opacity); without one it is a plain mint band. */
:is(.wp-block-post-content, .is-root-container) > .wp-block-cover.alignfull {
	min-height: 0;
	padding: var(--kc-section-pad) var(--wp--style--root--padding-right) var(--kc-section-pad) var(--wp--style--root--padding-left);
}

:is(.wp-block-post-content, .is-root-container) > .wp-block-cover.alignfull:has(> .wp-block-cover__image-background) {
	min-height: clamp(360px, 36vw, 560px);
}

.wp-block-cover.alignfull > .wp-block-cover__inner-container {
	color: var(--wp--preset--color--ink);
}

.wp-block-cover.alignfull :is(h1, h2):not(.has-text-color) {
	color: var(--kc-heading);
}

/* Grey lead text is too faint over a photo. */
.wp-block-cover:has(> .wp-block-cover__image-background) .is-style-kucona-lead {
	color: var(--wp--preset--color--ink);
	font-weight: 400;
}

.wp-block-cover.alignfull > .wp-block-cover__image-background {
	filter: saturate(0.7);
}

.wp-block-cover:not(:has(> .wp-block-cover__image-background)) > .wp-block-cover__background {
	opacity: 1 !important;
}

/* Hub pages: overlay takes a light tint of the hub colour instead of mint. */
[class*="kucona-theme-"] .wp-block-cover__background.has-mint-background-color {
	background-color: color-mix(in srgb, var(--kc-hub) 14%, #fff) !important;
}

[class*="kucona-theme-"] .wp-block-cover:not(:has(> .wp-block-cover__image-background)) > .wp-block-cover__background {
	background: transparent !important;
}

/* Feature image (Cover block style): full-colour image with its content in
   centred cards, the first pinned to the top and the last to the bottom so the
   middle of the image stays clear. Used for the home page map. */
:is(.wp-block-post-content, .is-root-container) > .wp-block-cover.alignfull.is-style-kucona-feature {
	align-items: stretch;
	padding-top: 40px;
	padding-bottom: 40px;
}

:is(.wp-block-post-content, .is-root-container) > .wp-block-cover.is-style-kucona-feature:has(> .wp-block-cover__image-background) {
	min-height: clamp(480px, 46vw, 900px);
}

.wp-block-cover.is-style-kucona-feature > .wp-block-cover__image-background {
	filter: none;
}

.wp-block-cover.is-style-kucona-feature > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.wp-block-cover.is-style-kucona-feature > .wp-block-cover__inner-container > * {
	max-width: 760px;
	margin: 0 !important;
}

.wp-block-cover.is-style-kucona-feature .is-style-kucona-card {
	padding: 20px 32px;
	background: rgba(255, 255, 255, 0.94);
}

.wp-block-cover.is-style-kucona-feature .is-style-kucona-card > :last-child {
	margin-bottom: 0;
}

@media (max-width: 781px) {
	:is(.wp-block-post-content, .is-root-container) > .wp-block-cover.alignfull.is-style-kucona-feature {
		display: block;
		min-height: 0 !important;
		padding: 0 0 var(--kc-section-pad);
		background: var(--wp--preset--color--mint);
	}

	.wp-block-cover.is-style-kucona-feature > .wp-block-cover__image-background {
		position: static;
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.wp-block-cover.is-style-kucona-feature > .wp-block-cover__inner-container {
		box-sizing: border-box;
		margin-top: -32px !important;
		padding-inline: var(--wp--style--root--padding-left);
	}

	.wp-block-cover.is-style-kucona-feature > .wp-block-cover__inner-container {
		align-items: stretch;
	}
}

/* ---------- Upcoming events ([kucona_events]) ---------- */

.kucona-events__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kucona-event {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 12px 16px 12px 12px;
	background: #fff;
	border: 1px solid var(--kc-border);
	border-radius: var(--kc-radius);
}

.kucona-event__date {
	display: flex;
	flex: 0 0 56px;
	flex-direction: column;
	align-items: center;
	padding: 6px 0;
	color: #fff;
	background: var(--kc-hub);
	border-radius: 6px;
	line-height: 1.1;
}

.kucona-event__day {
	font-size: 1.4rem;
	font-weight: 800;
}

.kucona-event__month {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kucona-event p {
	margin: 0;
}

.kucona-event__title {
	color: var(--kc-heading);
	font-weight: 700;
}

.kucona-event__meta {
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
}

.kucona-events__empty {
	margin: 0;
	padding: 20px;
	color: var(--kc-hub-dark);
	background: var(--kc-hub-soft);
	border-radius: var(--kc-radius);
}

.kucona-events__note {
	font-size: 0.85rem;
}

.kucona-events__more a {
	color: var(--kc-hub-dark);
	font-weight: 700;
}

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

.kucona-jotform {
	display: block;
	width: 100%;
	height: 900px;
	border: 0;
	scroll-margin-top: 24px;
}

.is-style-kucona-card.kucona-form-card {
	padding: 12px;
}

/* Contact form. */
.kucona-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 20px;
}

.kucona-form > * {
	grid-column: 1 / -1;
	margin: 0 0 14px;
}

.kucona-form > .kucona-field--email,
.kucona-form > .kucona-field--phone {
	grid-column: auto;
}

.kucona-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
}

.kucona-field :is(input, textarea) {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	color: var(--wp--preset--color--ink);
	background: #fff;
	border: 1px solid #b9d6cf;
	border-radius: var(--kc-radius);
	font: inherit;
	font-weight: 400;
}

.kucona-field :is(input, textarea):hover {
	border-color: var(--wp--preset--color--teal);
}

.kucona-field :is(input, textarea):focus {
	border-color: var(--wp--preset--color--deep-teal);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(79, 143, 134, 0.25);
}

.kucona-field [aria-invalid="true"] {
	border-color: var(--wp--preset--color--learning);
}

.kucona-field-error,
.kucona-form-error {
	color: var(--wp--preset--color--learning);
	font-weight: 700;
}

.kucona-field-error {
	display: block;
	margin-top: 6px;
	font-size: 0.9rem;
}

.kucona-form-note {
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
}

.kucona-form button {
	cursor: pointer;
}

.kucona-hp {
	position: absolute;
	left: -9999px;
}

.kucona-form-notice {
	padding: 20px 24px;
	background: var(--wp--preset--color--mint);
	border-left: 6px solid var(--wp--preset--color--teal);
	border-radius: var(--kc-radius);
}

.kucona-form-notice p {
	margin: 0.25rem 0;
}

@media (max-width: 560px) {
	.kucona-form > .kucona-field--email,
	.kucona-form > .kucona-field--phone {
		grid-column: 1 / -1;
	}
}

/* ---------- Partners ---------- */

/* Partner write-up (Group style "Partner"): name, text and link in a reading
   column. An Image block placed inside is pinned beside it as the logo; with
   no image the text simply stands on its own. */
.is-style-kucona-partner {
	display: grid;
	grid-template-columns: minmax(0, 46rem) 200px;
	column-gap: 64px;
	align-items: start;
	padding: 40px 0;
	border-top: 1px solid var(--kc-border);
}

.is-style-kucona-partner > * {
	grid-column: 1;
	margin: 0 0 12px;
}

.is-style-kucona-partner > :last-child {
	margin-bottom: 0;
}

.is-style-kucona-partner > h3 {
	color: var(--kc-heading);
	font-size: 1.6rem;
}

.is-style-kucona-partner > .wp-block-image {
	display: grid;
	grid-column: 2;
	grid-row: 1 / span 6;
	box-sizing: border-box;
	height: 140px;
	margin: 0;
	padding: 18px;
	place-items: center;
	background: #fff;
	border: 1px solid var(--kc-border);
	border-radius: var(--kc-radius);
}

.is-style-kucona-partner > .wp-block-image img {
	width: auto;
	max-width: 100%;
	max-height: 104px;
	object-fit: contain;
}

.is-style-kucona-partner .wp-block-buttons {
	margin-top: 8px;
}

.is-style-kucona-partner .wp-block-button__link {
	min-height: 40px;
	padding: 0.4rem 1.1rem;
	color: #fff;
	background: var(--wp--preset--color--deep-teal);
	font-size: 0.9rem;
}

/* Logo carousel (Gallery style "Logo carousel"): assets/js/carousel.js loops
   the logos slowly across the screen. Without it, or for visitors who prefer
   reduced motion, the logos sit in a centred grid. */
.wp-block-gallery.is-style-kucona-logo-carousel {
	gap: 16px;
	justify-content: center;
	margin-top: 32px;
	margin-bottom: 32px;
}

.wp-block-gallery.is-style-kucona-logo-carousel figure.wp-block-image {
	display: grid;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 200px !important;
	height: 120px;
	margin: 0;
	padding: 18px;
	place-items: center;
	background: #fff;
	border-radius: var(--kc-radius);
	box-shadow: var(--kc-shadow);
}

.wp-block-gallery.is-style-kucona-logo-carousel figure.wp-block-image img {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 84px;
	object-fit: contain !important;
	border-radius: 0;
}

.kucona-carousel {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.kucona-carousel > .wp-block-gallery.is-style-kucona-logo-carousel {
	flex-wrap: nowrap;
	gap: 0;
	justify-content: flex-start;
	width: max-content;
	max-width: none;
	margin: 0;
	padding: 24px 0 40px;
	animation: kucona-carousel var(--kc-carousel-time, 40s) linear infinite;
}

.kucona-carousel > .wp-block-gallery.is-style-kucona-logo-carousel > figure.wp-block-image {
	margin-right: 20px !important;
}

.kucona-carousel:hover > .wp-block-gallery,
.kucona-carousel:focus-within > .wp-block-gallery {
	animation-play-state: paused;
}

@keyframes kucona-carousel {
	to {
		transform: translateX(-50%);
	}
}

/* ---------- Header ---------- */

.kucona-header {
	padding-top: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid #d9f0ec;
}

.kucona-header .wp-block-site-title {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.1;
}

.kucona-header .wp-block-site-title a,
.kucona-footer .wp-block-site-title a {
	color: var(--wp--preset--color--forest);
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content {
	border-radius: var(--kc-radius);
}

.kucona-header .wp-block-navigation-item__content:hover,
.kucona-header .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--deep-teal);
}

.kucona-header .wp-block-navigation__submenu-container {
	padding: 12px;
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid var(--kc-border) !important;
	border-radius: var(--kc-radius);
	box-shadow: var(--kc-shadow);
}

.kucona-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	min-width: 220px;
	padding: 10px 12px;
	border-radius: 6px;
	font-weight: 700;
}

.kucona-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--mint);
}

/* ---------- Footer ---------- */

.kucona-footer {
	padding-top: 56px;
	padding-bottom: 36px;
	color: #fff;
	background: var(--kc-hub-gradient, var(--wp--preset--color--forest));
}

[class*="kucona-theme-"] .kucona-footer {
	border-top: 8px solid var(--kc-hub);
}

/* The logo is transparent inside its circle; a white disc keeps it legible on the dark footer. */
.kucona-footer .wp-block-site-logo img {
	background: #fff;
	border-radius: 50%;
}

.kucona-footer a,
.kucona-footer .wp-block-site-title a {
	color: #fff;
}

.kucona-footer .wp-block-site-title {
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
}

/* "KuCoNa" as the name, "Create & Connect" as a smaller line below it. */
.wp-block-site-title :is(.kucona-title__name, .kucona-title__tagline) {
	display: block;
}

.wp-block-site-title .kucona-title__name {
	letter-spacing: -0.01em;
}

.wp-block-site-title .kucona-title__tagline {
	margin-top: 0.2em;
	font-size: max(0.5em, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--deep-teal);
}

.kucona-footer .wp-block-site-title .kucona-title__tagline {
	color: rgba(255, 255, 255, 0.8);
}

.kucona-footer-brand {
	max-width: 600px;
}

.kucona-footer-brand > p {
	color: #eaf7f2;
}

.kucona-footer .wp-block-navigation {
	font-weight: 700;
}

.kucona-footer-legal {
	margin-top: 32px !important;
	color: #eaf7f2;
}

/* ---------- Home page ---------- */

/* The one-line CREATE.CONNECT.GROW wordmark heading. */
h1.kucona-wordmark {
	font-size: clamp(1.9rem, 6.4vw, 5.1rem);
	line-height: 1;
	white-space: nowrap;
}

/* ---------- Hub pages ---------- */

[class*="kucona-theme-"] :is(.wp-block-post-content, .is-root-container) > .alignfull:first-child {
	background:
		linear-gradient(135deg, var(--kc-hub-soft-strong), rgba(255, 255, 255, 0.82)),
		var(--kc-hub-soft) !important;
	border-bottom: 8px solid var(--kc-hub);
}

[class*="kucona-theme-"] .has-mint-background-color {
	background-color: var(--kc-hub-soft) !important;
}

/* ---------- Small screens ---------- */

@media (max-width: 781px) {
	:root {
		--kc-section-pad: 64px;
	}

	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}

	.is-style-kucona-hub-card .wp-block-button,
	.is-style-kucona-partner .wp-block-button {
		width: auto;
	}

	.is-style-kucona-partner .wp-block-button > .wp-block-button__link {
		width: auto;
	}

	.is-style-kucona-partner {
		grid-template-columns: minmax(0, 1fr);
	}

	.is-style-kucona-partner > .wp-block-image {
		grid-column: 1;
		grid-row: auto;
		order: -1;
		width: 180px;
		height: 110px;
		margin-bottom: 20px;
	}

	.is-style-kucona-partner > .wp-block-image img {
		max-height: 74px;
	}

	.is-style-kucona-hub-card {
		min-height: 0;
	}
}


/* ---------- Photo grid (hub pages) ---------- */

/* Two even columns with generous spacing; one column on phones. */
.kucona-photo-grid.is-layout-grid {
	gap: clamp(16px, 3vw, 36px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
	.kucona-photo-grid.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

.kucona-photo-grid .wp-block-image {
	margin: 0;
}

.kucona-photo-grid .wp-block-image img {
	width: 100%;
	border-radius: var(--kc-radius);
	box-shadow: 0 18px 40px rgba(29, 72, 70, 0.14);
}

/* Crop helpers for images with a fixed aspect ratio (Advanced > Additional CSS class). */
.wp-block-image.kucona-focus-top img {
	object-position: 50% 25%;
}

.wp-block-image.kucona-focus-bottom img {
	object-position: 50% 75%;
}

/* Cards in a grid that end with a button: line the buttons up along the bottom. */
.is-layout-grid > .is-style-kucona-card:has(> .wp-block-buttons:last-child) {
	display: flex;
	flex-direction: column;
}

.is-layout-grid > .is-style-kucona-card > .wp-block-buttons:last-child {
	margin-top: auto;
	padding-top: 0.5rem;
}

.is-layout-grid > .is-style-kucona-card > .wp-block-buttons:last-child .wp-block-button {
	flex: 1;
}

.is-layout-grid > .is-style-kucona-card > .wp-block-buttons:last-child .wp-block-button__link {
	width: 100%;
	white-space: nowrap;
}

/* Card rows with bold green titles (Home: welcoming centre, ways to take part). */
.kucona-titled-cards .is-style-kucona-card h3 {
	color: var(--kc-hub);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.15;
}

/* A new eyebrow + heading after columns or a grid starts a sub-section: give it room. */
.wp-block-group > :is(.wp-block-columns, .is-layout-grid) + .is-style-kucona-eyebrow {
	margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
}

/* A section heading set at page-title size (h1 size, without a second h1 on the page). */
h2.kucona-display {
	font-size: clamp(3rem, 7vw, 6.4rem);
	line-height: 0.95;
}

/* ---------- Maps ([kucona_map]) ---------- */

.kucona-map {
	overflow: hidden;
	border-radius: var(--kc-radius);
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--mint);
}

.kucona-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.kucona-map__link {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* Service lists inside category cards (hub pages): bold name, description below. */
.kucona-services {
	display: grid;
	gap: 14px;
	margin-top: 1rem;
	padding-left: 1.2em;
}

.kucona-services li::marker {
	color: var(--kc-hub);
}

.kucona-services strong {
	display: block;
	color: var(--kc-heading);
	font-weight: 800;
}

/* ---------- Process flow (Home: our approach) ----------
   Each step gets a round icon badge; arrows join the badges left to right
   (top to bottom on phones). Icons are from Lucide (ISC licence), in step order. */

.kucona-process.is-layout-grid {
	--kc-node: 76px;
	--kc-flow-gap: clamp(16px, 3vw, 40px);
	gap: var(--kc-flow-gap);
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	margin-top: 40px;
}

.kucona-process > .wp-block-group {
	position: relative;
	padding-top: calc(var(--kc-node) + 20px);
	text-align: center;
}

.kucona-process > .wp-block-group::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--kc-node);
	height: var(--kc-node);
	border: 3px solid var(--wp--preset--color--teal);
	border-radius: 50%;
	background: #fff center / 46% no-repeat;
	box-shadow: 0 12px 28px rgba(29, 72, 70, 0.14);
	content: "";
	transform: translateX(-50%);
}

.kucona-process > .wp-block-group:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e5f5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8.5a6.5 6.5 0 1 1 13 0c0 6-6 6-6 10a3.5 3.5 0 1 1-7 0'/%3E%3Cpath d='M15 8.5a2.5 2.5 0 0 0-5 0v1a2 2 0 1 1 0 4'/%3E%3C/svg%3E"); }
.kucona-process > .wp-block-group:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e5f5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M10 20c5.5-2.5.8-6.4 3-10'/%3E%3Cpath d='M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z'/%3E%3Cpath d='M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z'/%3E%3C/svg%3E"); }
.kucona-process > .wp-block-group:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e5f5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }
.kucona-process > .wp-block-group:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e5f5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }

/* Connector: a line from this badge to the next, ending in an arrowhead. */
.kucona-process > .wp-block-group:not(:last-child)::after {
	position: absolute;
	top: calc(var(--kc-node) / 2 - 7px);
	left: calc(50% + var(--kc-node) / 2 + 10px);
	width: calc(100% + var(--kc-flow-gap) - var(--kc-node) - 20px);
	height: 14px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e5f5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l8 8-8 8' stroke='%234f8f86' stroke-width='3'/%3E%3C/svg%3E") right center / 14px 14px no-repeat,
		linear-gradient(var(--wp--preset--color--teal), var(--wp--preset--color--teal)) left center / calc(100% - 6px) 3px no-repeat;
	content: "";
}

.kucona-process h3 {
	max-width: 14rem;
	margin: 0 auto;
	color: var(--kc-heading);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.25;
}

@media (max-width: 781px) {
	.kucona-process.is-layout-grid {
		--kc-node: 64px;
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.kucona-process > .wp-block-group {
		display: flex;
		align-items: center;
		min-height: var(--kc-node);
		padding: 0 0 0 calc(var(--kc-node) + 20px);
		text-align: left;
	}

	.kucona-process > .wp-block-group::before {
		left: 0;
		transform: none;
	}

	.kucona-process > .wp-block-group:not(:last-child)::after {
		top: calc(var(--kc-node) + 6px);
		left: calc(var(--kc-node) / 2 - 7px);
		width: 14px;
		height: calc(40px - 12px);
		background:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e5f5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l8 8 8-8' stroke='%234f8f86' stroke-width='3'/%3E%3C/svg%3E") center bottom / 14px 14px no-repeat,
			linear-gradient(var(--wp--preset--color--teal), var(--wp--preset--color--teal)) center top / 3px calc(100% - 6px) no-repeat;
	}

	.kucona-process h3 {
		margin: 0;
	}
}

/* Five cards as three on top and two wider below, so both rows fill the width. */
@media (min-width: 782px) {
	.kucona-grid-3-2.is-layout-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.kucona-grid-3-2 > * {
		grid-column: span 2;
	}

	.kucona-grid-3-2 > :nth-child(n + 4) {
		grid-column: span 3;
	}
}

@media (max-width: 781px) {
	.kucona-grid-3-2.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Movement ----------
   Info tiles take a soft tint of the page's colour and lift slightly under the
   pointer (or while a link inside has keyboard focus). Full-width photos drift
   gently on scroll, and section content fades up into view (assets/js/motion.js
   adds .kucona-parallax and the .kc-reveal / .kc-hidden classes when it runs). */

.is-style-kucona-card,
.is-style-kucona-programme,
.is-style-kucona-step,
.is-style-kucona-hub-card,
.kucona-event,
.kucona-process > .wp-block-group::before {
	transition: background-color 0.3s ease, box-shadow 0.3s ease, translate 0.3s ease, filter 0.3s ease;
}

@media (hover: hover) {
	:is(.is-style-kucona-card, .is-style-kucona-programme, .is-style-kucona-step):not(.kucona-form-card):hover {
		background-color: color-mix(in srgb, var(--kc-hub) 7%, #fff);
		box-shadow: 0 22px 52px rgba(7, 94, 84, 0.18);
		translate: 0 -3px;
	}

	.is-style-kucona-hub-card:hover {
		box-shadow: 0 24px 56px rgba(7, 94, 84, 0.24);
		filter: brightness(1.06);
		translate: 0 -3px;
	}

	.kucona-event:hover {
		background-color: var(--kc-hub-soft);
	}

	.kucona-process > .wp-block-group:hover::before {
		background-color: var(--wp--preset--color--mint);
		translate: 0 -3px;
	}
}

:is(.is-style-kucona-card, .is-style-kucona-programme, .is-style-kucona-step):not(.kucona-form-card):focus-within {
	background-color: color-mix(in srgb, var(--kc-hub) 7%, #fff);
}

/* The cards laid over the home map stay put. */
.wp-block-cover.is-style-kucona-feature .is-style-kucona-card:is(:hover, :focus-within) {
	background-color: rgba(255, 255, 255, 0.94);
	box-shadow: var(--kc-shadow);
	translate: none;
}

/* Parallax: each photo is 12% taller than its frame and shifted by the script. */
.kucona-parallax .wp-block-cover.alignfull,
.kucona-parallax .wp-block-image.alignfull.is-style-kucona-banner {
	overflow: hidden;
}

.kucona-parallax .wp-block-cover.alignfull > .wp-block-cover__image-background {
	top: -6%;
	bottom: auto;
	height: 112%;
	transform: translate3d(0, var(--kc-parallax, 0px), 0);
	will-change: transform;
}

.kucona-parallax .wp-block-image.alignfull.is-style-kucona-banner img {
	--kc-frame: clamp(300px, 40vw, 640px);
	height: calc(var(--kc-frame) * 1.12);
	margin-block: calc(var(--kc-frame) * -0.06);
	transform: translate3d(0, var(--kc-parallax, 0px), 0);
	will-change: transform;
}

@media (max-width: 781px) {
	/* On phones the map shows in full above its cards, so it doesn't drift. */
	.kucona-parallax .wp-block-cover.alignfull.is-style-kucona-feature > .wp-block-cover__image-background {
		top: auto;
		height: auto;
		transform: none;
	}
}

/* Fade in: the script marks content below the fold, then unhides it on arrival. */
.kc-reveal {
	transition: opacity 0.8s ease-out, translate 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
}

.kc-hidden {
	opacity: 0;
	translate: 0 28px;
}

@media print {
	.kc-hidden {
		opacity: 1;
		translate: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-style-kucona-card,
	.is-style-kucona-programme,
	.is-style-kucona-step,
	.is-style-kucona-hub-card,
	.kucona-process > .wp-block-group::before {
		translate: none !important;
	}
}