/* Katartizo theme: extra styles that theme.json cannot express. Calm design. */

/* Links: a little space under the underline. */
a { text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }

/* Keyboard focus: always visible, at least 3:1 against the background. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--green);
	outline-offset: 3px;
	border-radius: 4px;
}
.has-deep-green-background-color :where(a, button, summary):focus-visible,
.has-green-background-color :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* Skip link (added by WordPress for block themes). */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--deep-green);
	font-weight: 600;
	padding: 12px 20px;
	border-radius: 999px;
}

/* Header */
.kz-header {
	border-bottom: 1px solid #D6E0CB;
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}
.kz-header .wp-block-image { margin: 0; }
.kz-header .wp-block-image img { display: block; height: auto; }
.kz-header .wp-block-navigation-item__content { padding: 10px 0; }
.kz-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.kz-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--green);
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 10px;
}

/* Phone menu button: the menu symbol only, with a 44px tap area (screen readers hear "Open menu"). */
.kz-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	color: var(--wp--preset--color--deep-green);
}
.kz-header .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }

/* Phone menu when open: large, easy-to-tap links. */
.kz-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 20px;
}
.kz-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px; }
.kz-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.kz-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; }
.kz-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; justify-content: flex-start; }
.kz-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid #D6E0CB; align-items: flex-start; }
.kz-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 26px; padding: 12px 0; }
.kz-header .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Footer */
.kz-footer a { color: var(--wp--preset--color--white); }
.kz-footer a:hover { color: var(--wp--preset--color--white); text-decoration-thickness: 2px; }
.kz-footer .wp-block-navigation-item__content { padding: 6px 0; }
.kz-footer .wp-block-social-links { gap: 4px; flex-direction: column; align-items: flex-start; }
.kz-footer .wp-block-social-link { min-height: 44px; display: flex; align-items: center; }
.kz-footer .wp-block-social-link a { padding: 0; gap: 12px; }
.kz-footer .kz-legal { border-top: 1px solid rgba(255, 255, 255, 0.28); }
.kz-footer .kz-legal p { margin: 0; font-size: 14px; }

/* Outline buttons in Mist sections keep Deep Green text (never Green on Mist). */
.is-style-section-mist .wp-block-button.is-style-outline .wp-block-button__link { color: var(--wp--preset--color--deep-green); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--deep-green); color: var(--wp--preset--color--white); }

/* Shorter button wording is only shown on phones (see the phone section below). */
.kz-label-short { display: none; }

/* Photo with a Sage block offset behind it (Calm accent). */
.kz-photo-accent { position: relative; isolation: isolate; }
.kz-photo-accent::before {
	content: "";
	position: absolute;
	right: -24px;
	bottom: -24px;
	width: 70%;
	height: 70%;
	background: var(--wp--preset--color--sage);
	border-radius: 24px;
	z-index: -1;
}
.kz-photo-accent img { position: relative; }
/* Phones: the Sage block stays inside the side margins, and the photo is a little shorter. */
@media (max-width: 600px) {
	.kz-photo-accent { margin-right: 10px; }
	.kz-photo-accent::before { display: none; }
	.kz-photo-accent img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; box-shadow: 10px 10px 0 0 var(--wp--preset--color--sage); }
	.kz-photo-accent figcaption { margin-top: 18px; }
}

/* Phones only (desktop is unchanged): narrower side margins, smaller text and less space between sections. */
@media (max-width: 600px) {
	html body {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}
	:root:root {
		--wp--preset--font-size--huge: 32px;
		--wp--preset--font-size--xx-large: 26px;
		--wp--preset--font-size--large: 18px;
		--wp--preset--spacing--50: 36px;
		--wp--preset--spacing--60: 48px;
	}
	body { line-height: 1.65; }
	.has-large-font-size { line-height: 1.55; }

	/* Smaller header and logo (!important overrides the sizes saved in the header). */
	.kz-header { padding-top: 10px !important; padding-bottom: 10px !important; }
	.kz-header .wp-block-image img { width: 144px !important; }
	.kz-header .wp-block-image a { display: block; }

	/* Shorter footer: less padding, a smaller logo and smaller gaps. */
	.kz-footer { padding-top: 48px !important; padding-bottom: 32px !important; }
	.kz-footer > * + * { margin-block-start: 32px !important; }
	.kz-footer .wp-block-columns { gap: 28px !important; }
	.kz-footer .wp-block-image img { width: 110px !important; }

	/* Two or more buttons stack, each the full width, with shorter wording where approved. */
	.wp-block-buttons:has(> .wp-block-button + .wp-block-button) { flex-direction: column; align-items: stretch; gap: 12px; }
	.wp-block-buttons:has(> .wp-block-button + .wp-block-button) > .wp-block-button { width: 100%; }
	.wp-block-buttons:has(> .wp-block-button + .wp-block-button) .wp-block-button__link { display: block; width: 100%; box-sizing: border-box; text-align: center; }
	.kz-label-long { display: none; }
	.kz-label-short { display: inline; }
}

/* Title band at the top of ordinary pages. */
.kz-title-band { margin-top: 0; }

/* Respect "reduce motion" settings. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Footer menu links stay white on Deep Green. */
.kz-footer .wp-block-navigation a,
.kz-footer .wp-block-navigation a:hover { color: var(--wp--preset--color--white); }
.kz-footer .wp-block-social-links .wp-block-social-link-anchor,
.kz-footer .wp-block-social-links .wp-block-social-link .wp-block-social-link-label { color: var(--wp--preset--color--white); font-size: 16px; }
.kz-footer .wp-block-social-links .wp-block-social-link svg { width: 22px; height: 22px; }
.kz-footer .wp-block-social-links .wp-block-social-link-anchor { line-height: 1.4; }
.kz-footer .wp-block-social-links .wp-block-social-link .wp-block-social-link-label { white-space: nowrap; line-height: 1.4; }

/* Word tiles (About page): Deep Green text on white with a soft border. */
.kz-tile {
	margin: 0;
	padding: 18px 20px;
	background: var(--wp--preset--color--white);
	border: 1.5px solid #D6E0CB;
	border-radius: 16px;
	color: var(--wp--preset--color--deep-green);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.35;
}

/* Image captions used as photo placeholders. */
.wp-block-image figcaption { color: var(--wp--preset--color--black); font-size: var(--wp--preset--font-size--small); }

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

/* Instagram and YouTube links inside the menu: shown only in the phone menu when it is open. */
.wp-block-navigation .kz-menu-social,
.wp-block-navigation__container > li:has(> .kz-menu-social) { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:has(> .kz-menu-social) { display: block; border-bottom: 0; }
.wp-block-navigation__responsive-container.is-menu-open .kz-menu-social {
	display: flex;
	margin-top: 24px;
	gap: 4px;
}
.wp-block-navigation__responsive-container.is-menu-open .kz-menu-social .wp-block-social-link { min-height: 44px; display: flex; align-items: center; }
.wp-block-navigation__responsive-container.is-menu-open .kz-menu-social .wp-block-social-link-anchor { gap: 12px; line-height: 1.4; }
.wp-block-navigation__responsive-container.is-menu-open .kz-menu-social .wp-block-social-link .wp-block-social-link-label { font-size: 16px; white-space: nowrap; line-height: 1.4; }
.wp-block-navigation__responsive-container.is-menu-open .kz-menu-social svg { width: 22px; height: 22px; }

/* Social links listed in page content (Contact page). */
.kz-social-list { gap: 4px; }
.kz-social-list .wp-block-social-link { min-height: 44px; display: flex; align-items: center; }
.kz-social-list .wp-block-social-link-anchor { gap: 12px; line-height: 1.4; font-weight: 600; }
/* Specific enough to beat the core rule that shrinks social labels to 0.65em. */
.wp-block-social-links.kz-social-list .wp-block-social-link.wp-social-link span.wp-block-social-link-label { font-size: 16px; white-space: nowrap; line-height: 1.4; }
.wp-block-social-links.kz-social-list .wp-block-social-link.wp-social-link svg { width: 22px; height: 22px; }