/*
Theme Name: Pedigree
Theme URI: https://github.com/aliquet/Pedigree
Author: yomedia s.r.o.
Author URI: https://yomedia.cz
Description: Theme for breeding-kennel websites. Dogs, litters, pedigrees and show results come from the Kennel Core plugin; nothing here is breed- or kennel-specific.
Version: 1.4.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: Proprietary
Text Domain: pedigree
Tags: custom-logo, custom-menu, featured-images, translation-ready, two-columns
*/

/* -------------------------------------------------------------- Tokens */

:root {
	--kc-accent: #7b1e2b;
	--kc-accent-dark: #5d1620;
	--kc-accent-soft: #f3e7e6;
	--kc-bg: #f7f3ec;
	--kc-surface: #fff;
	--kc-placeholder: #e3d9cd;
	--kc-text: #2b2522;
	--kc-muted: #6b5f58;
	--kc-border: #e2d8cc;
	--kc-border-strong: #cdbfae;
	--kc-radius: 10px;
	--kc-radius-lg: 14px;
	--kc-shadow: 0 1px 2px rgb(43 37 34 / 5%), 0 10px 30px rgb(43 37 34 / 5%);
	--kc-serif: Fraunces, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--kc-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/*
	 * Reading width and side gutters. The gutter grows with the viewport so the content
	 * keeps its margins on a wide monitor instead of running to the edges, and the text
	 * column stops at a width that still reads comfortably.
	 */
	--kc-wrap: 68rem;
	--kc-gutter: clamp(1rem, 4vw, 3.5rem);
}

/* --------------------------------------------------------------- Reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--kc-bg);
	color: var(--kc-text);
	font-family: var(--kc-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
}

/* The shell holds header, content and footer so the whole page can become one card. */
.kc-shell {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	min-width: 0;
}

.site-content {
	flex: 1 0 auto;
	min-width: 0;
}

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

h1,
h2,
h3,
h4 {
	font-family: var(--kc-serif);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
}

h2 {
	font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.8rem);
}

h3 {
	font-size: 1.2rem;
}

p,
ul,
ol,
dl,
table {
	margin: 0 0 1rem;
}

a {
	color: var(--kc-accent);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover,
a:focus {
	color: var(--kc-accent-dark);
}

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

hr {
	border: 0;
	border-top: 1px solid var(--kc-border);
	margin: 2rem 0;
}

blockquote {
	margin: 1.5rem 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--kc-border);
	color: var(--kc-muted);
	font-family: var(--kc-serif);
	font-style: italic;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.6rem 1rem;
	background: var(--kc-surface);
	box-shadow: var(--kc-shadow);
}

.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* -------------------------------------------------------------- Layout */

.kc-wrap {
	width: min(100% - (var(--kc-gutter) * 2), var(--kc-wrap));
	margin-inline: auto;
}

.site-main {
	padding: 2.25rem 0 3.5rem;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.entry-content img {
	border-radius: var(--kc-radius);
}

.entry-content :is(h2, h3) {
	margin-top: 1.8em;
}

.page-header {
	margin-bottom: 2rem;
}

/* ------------------------------------------------------- Shared pieces */

.kc-eyebrow {
	margin: 0 0 0.6rem;
	color: var(--kc-accent);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kc-muted {
	color: var(--kc-muted);
	font-weight: 400;
}

.kc-subtitle {
	margin: 0;
	color: var(--kc-muted);
	font-size: 1.05rem;
}

.kc-subhead {
	margin: 2rem 0 0.75rem;
	font-size: 1.05rem;
}

.kc-section {
	margin: 2.75rem 0;
	scroll-margin-top: 1.5rem;
}

.kc-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--kc-border);
}

.kc-section__head h2 {
	margin: 0;
}

.kc-more {
	font-size: 0.9rem;
	white-space: nowrap;
}

.kc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

.kc-button {
	display: inline-block;
	padding: 0.6rem 1.25rem;
	border: 1px solid var(--kc-accent);
	border-radius: var(--kc-radius);
	background: var(--kc-accent);
	color: #fff;
	font: inherit;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
}

.kc-button:hover,
.kc-button:focus {
	background: var(--kc-accent-dark);
	border-color: var(--kc-accent-dark);
	color: #fff;
}

.kc-button--ghost {
	background: transparent;
	color: var(--kc-accent);
}

.kc-button--ghost:hover,
.kc-button--ghost:focus {
	background: var(--kc-accent);
	color: #fff;
}

.kc-button--fb {
	background: #1877f2;
	border-color: #1877f2;
}

.kc-button--fb:hover,
.kc-button--fb:focus {
	background: #145fc4;
	border-color: #145fc4;
}

/* Pills: titles and breeding approval. */
.kc-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}

.kc-pills:empty {
	display: none;
}

.kc-pill {
	display: inline-block;
	padding: 0.25rem 0.85rem;
	border: 1px solid var(--kc-border-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--kc-text);
	font-size: 0.85rem;
	line-height: 1.5;
}

.kc-pill--solid {
	background: var(--kc-accent);
	border-color: var(--kc-accent);
	color: #fff;
	font-weight: 600;
}

.kc-pill--memorial {
	background: #ece7f1;
	border-color: #d8cfe3;
	color: #4b3f63;
}

.kc-breadcrumb {
	margin-bottom: 1.5rem;
	font-size: 0.875rem;
	color: var(--kc-muted);
}

.kc-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kc-breadcrumb li + li::before {
	content: "/";
	margin-right: 0.4rem;
	color: var(--kc-border-strong);
}

.kc-breadcrumb [aria-current="page"] {
	color: var(--kc-text);
}

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

.site-header {
	background: var(--kc-bg);
	border-bottom: 1px solid var(--kc-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: 1.15rem 0;
	flex-wrap: wrap;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-width: 0;
}

.site-branding .custom-logo {
	width: auto;
	max-height: 56px;
	border-radius: 50%;
}

.site-title {
	margin: 0;
	font-family: var(--kc-serif);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.1;
}

.site-title a {
	color: var(--kc-text);
	text-decoration: none;
}

.site-description {
	margin: 0.2rem 0 0;
	font-size: 0.8125rem;
	color: var(--kc-muted);
}

.menu-toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--kc-border-strong);
	border-radius: var(--kc-radius);
	background: transparent;
	font: inherit;
	font-size: 0.95rem;
	color: inherit;
	cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	display: block;
	width: 16px;
	height: 1.5px;
	background: currentcolor;
	content: "";
}

.menu-toggle__bars {
	position: relative;
}

.menu-toggle__bars::before {
	position: absolute;
	top: -5px;
}

.menu-toggle__bars::after {
	position: absolute;
	top: 5px;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a {
	display: block;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	color: var(--kc-text);
	font-size: 0.95rem;
	text-decoration: none;
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current_page_ancestor > a {
	color: var(--kc-accent);
	border-bottom-color: var(--kc-accent);
}

/* A caret marks the items that open a sub-menu. */
.site-nav .menu-item-has-children > a::after,
.site-nav .page_item_has_children > a::after {
	content: "";
	display: inline-block;
	margin-left: 0.35rem;
	vertical-align: 0.15em;
	border: 3px solid transparent;
	border-top-color: currentcolor;
}

.site-nav li {
	position: relative;
}

.site-nav .sub-menu,
.site-nav .children {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 13rem;
	flex-direction: column;
	gap: 0;
	padding: 0.4rem 0;
	background: var(--kc-surface);
	border: 1px solid var(--kc-border);
	border-radius: var(--kc-radius);
	box-shadow: var(--kc-shadow);
}

.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu,
.site-nav li:hover > .children,
.site-nav li:focus-within > .children {
	display: flex;
}

.site-nav .sub-menu a,
.site-nav .children a {
	padding: 0.4rem 0.95rem;
	border-bottom: 0;
}

@media (max-width: 900px) {
	.menu-toggle {
		display: inline-flex;
	}

	.site-nav {
		flex-basis: 100%;
		display: none;
	}

	.site-nav.is-open {
		display: block;
	}

	.site-nav ul {
		flex-direction: column;
		gap: 0;
		padding-bottom: 0.5rem;
	}

	.site-nav li + li {
		border-top: 1px solid var(--kc-border);
	}

	.site-nav a {
		padding: 0.7rem 0;
	}

	.site-nav .sub-menu,
	.site-nav .children {
		display: flex;
		position: static;
		padding: 0 0 0 1rem;
		border: 0;
		background: none;
		box-shadow: none;
	}
}

/* ---------------------------------------------------------------- Hero */

.kc-hero {
	padding: 3rem 0 2.5rem;
	border-bottom: 1px solid var(--kc-border);
}

/*
 * With a background photo the band becomes its own dark surface: the photo is cropped to
 * cover, a shade the breeder controls sits over it, and the text switches to light so it
 * stays readable whatever the photo is.
 */
.kc-hero--bg {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(20rem, 46vw, 34rem);
	padding: clamp(3rem, 7vw, 6rem) 0;
	border-bottom: 0;
	background: #241b18;
	color: #fff;
	overflow: hidden;
}

/*
 * Strip layout: the photo keeps its own proportions and sits above the text, which is how
 * the kennel's 800×250 header images are meant to be seen. No shade, because nothing is
 * printed over the photo.
 */
.kc-hero--banner {
	padding: 1.75rem 0 2.5rem;
}

.kc-hero--banner .kc-hero__slides {
	position: relative;
	/* Never drawn wider than the photo really is, so it is never upscaled and soft. */
	max-width: min(100%, var(--kc-banner-w, 100%));
	margin-inline: auto;
	aspect-ratio: var(--kc-banner-ratio, 32 / 10);
	border-radius: var(--kc-radius-lg);
	background: var(--kc-placeholder);
	overflow: hidden;
}

.kc-hero--banner .kc-hero__slides::after {
	display: none;
}

.kc-hero--banner .kc-hero__inner {
	margin-top: 2.25rem;
}

/* The photos sit behind everything, cropped to fill whatever shape the band takes. */
.kc-hero__slides {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.kc-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 900ms ease-in-out;
}

.kc-hero__slide.is-active {
	opacity: 1;
}

/* Without JavaScript only the first slide is ever marked active, so it stays visible. */
.kc-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The shade that keeps the headline readable over any photo. */
.kc-hero__slides::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgb(20 15 13 / calc(var(--kc-hero-shade, 0.65) + 0.12)),
		rgb(20 15 13 / var(--kc-hero-shade, 0.65))
	);
	content: "";
}

.kc-hero__dots {
	position: absolute;
	right: var(--kc-gutter);
	bottom: 1.1rem;
	z-index: 2;
	display: flex;
	gap: 0.5rem;
}

.kc-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 75%);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.kc-hero__dot.is-active {
	background: #fff;
}

.kc-hero__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.kc-hero__slide {
		transition: none;
	}
}

.kc-hero--bg .kc-eyebrow {
	color: #f3c9ce;
}

.kc-hero--bg .kc-hero__title,
.kc-hero--bg .kc-hero__lede {
	color: #fff;
	text-shadow: 0 1px 12px rgb(0 0 0 / 35%);
}

/* Over a photo the kennel's own colour goes muddy, so the primary button turns white. */
.kc-hero--bg .kc-button {
	background: #fff;
	border-color: #fff;
	color: var(--kc-text);
}

.kc-hero--bg .kc-button:hover,
.kc-hero--bg .kc-button:focus {
	background: var(--kc-accent);
	border-color: var(--kc-accent);
	color: #fff;
}

.kc-hero--bg .kc-button--ghost {
	background: transparent;
	border-color: rgb(255 255 255 / 70%);
	color: #fff;
}

.kc-hero--bg .kc-button--ghost:hover,
.kc-hero--bg .kc-button--ghost:focus {
	background: #fff;
	border-color: #fff;
	color: var(--kc-text);
}

/* The side photo would fight the background one, so it steps aside and the text keeps
   the left-aligned column the rest of the page uses. */
.kc-hero--bg .kc-hero__inner {
	grid-template-columns: minmax(0, 1fr);
}

.kc-hero--bg .kc-hero__body {
	max-width: 42rem;
}

.kc-hero--bg .kc-hero__media {
	display: none;
}

.kc-hero__inner {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 900px) {
	.kc-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3.5rem;
	}
}

.kc-hero__title {
	margin: 0 0 1rem;
	font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.4rem);
	line-height: 1.08;
}

.kc-hero__lede {
	max-width: 34rem;
	margin: 0;
	color: var(--kc-muted);
	font-size: 1.05rem;
}

.kc-hero__media {
	margin: 0;
}

.kc-hero__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--kc-radius-lg);
}

/* ----------------------------------------------------------- Birthdays */

.kc-birthday {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.9rem 1.25rem;
	margin: 0 0 2rem;
	background: var(--kc-surface);
	border: 1px solid var(--kc-border);
	border-radius: var(--kc-radius);
}

.kc-birthday + .kc-stats {
	margin-top: 0.5rem;
}

.kc-birthday__icon {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	background: var(--kc-accent);
	/* A small cake glyph, drawn so the strip needs no icon font or image. */
	mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.6.8 1 1.4 1 2a1 1 0 1 1-2 0c0-.6.4-1.2 1-2ZM7 6.5c.5.7.8 1.2.8 1.7a.8.8 0 1 1-1.6 0c0-.5.3-1 .8-1.7Zm10 0c.5.7.8 1.2.8 1.7a.8.8 0 1 1-1.6 0c0-.5.3-1 .8-1.7ZM5 11h14a2 2 0 0 1 2 2v1.2c-.7 0-1 .8-2 .8s-1.3-.8-2-.8-1 .8-2 .8-1.3-.8-2-.8-1 .8-2 .8-1.3-.8-2-.8-1 .8-2 .8-1.3-.8-2-.8V13a2 2 0 0 1 2-2Zm-2 6c.7 0 1 .8 2 .8s1.3-.8 2-.8 1 .8 2 .8 1.3-.8 2-.8 1 .8 2 .8 1.3-.8 2-.8 1 .8 2 .8 1.3-.8 2-.8v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-3Z'/%3E%3C/svg%3E");
}

.kc-birthday__text {
	flex: 1 1 18rem;
	margin: 0;
}

.kc-birthday__link {
	font-size: 0.9rem;
	white-space: nowrap;
}

/* --------------------------------------------------------------- Stats */

.kc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1.5rem 2rem;
	list-style: none;
	margin: 0 0 3rem;
	padding: 0;
}

.kc-stats__number {
	display: block;
	font-family: var(--kc-serif);
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
	font-weight: 600;
	line-height: 1;
	color: var(--kc-accent);
}

.kc-stats__label {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.85rem;
	color: var(--kc-muted);
}

/* ------------------------------------------------------ Cards and lists */

.kc-home-section {
	margin: 0 0 3rem;
}

.kc-columns {
	display: grid;
	gap: 0 3rem;
}

@media (min-width: 900px) {
	.kc-columns {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.kc-postlist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1.75rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kc-teaser {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.kc-teaser__thumb {
	display: block;
	aspect-ratio: 1;
	border-radius: var(--kc-radius);
	background: var(--kc-placeholder);
	overflow: hidden;
}

.kc-teaser__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kc-teaser__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.kc-teaser__body h2,
.kc-teaser__body h3 {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.25;
}

.kc-teaser__body h2 a,
.kc-teaser__body h3 a {
	color: var(--kc-text);
	text-decoration: none;
}

.kc-teaser__body h2 a:hover,
.kc-teaser__body h3 a:hover {
	color: var(--kc-accent);
}

.kc-teaser__meta,
.entry-meta {
	font-size: 0.85rem;
	color: var(--kc-muted);
}

.kc-teaser__excerpt {
	margin: 0;
	font-size: 0.95rem;
	color: var(--kc-muted);
}

.kc-teaser .kc-pill {
	align-self: flex-start;
	font-size: 0.75rem;
}

/* Line lists: litters and news on the front page. */
.kc-linelist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kc-linelist__item {
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--kc-border);
}

.kc-linelist__item:first-child {
	padding-top: 0;
}

.kc-linelist__thumb {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: var(--kc-radius);
	background: var(--kc-placeholder);
	overflow: hidden;
}

.kc-linelist__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kc-linelist__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

/* Litters put the date beside the name; news puts it above. */
.kc-linelist__head {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.kc-linelist__head .kc-muted {
	font-size: 0.9rem;
}

.kc-linelist__title {
	font-family: var(--kc-serif);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--kc-text);
	text-decoration: none;
}

.kc-linelist__title:hover {
	color: var(--kc-accent);
}

.kc-linelist__meta {
	font-size: 0.9rem;
	color: var(--kc-muted);
}

.kc-linelist--news .kc-linelist__body > .kc-muted:first-child {
	order: -1;
	font-size: 0.8rem;
}

/* Memorial card. */
.kc-memorial-card {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 1.5rem;
	background: var(--kc-surface);
	border: 1px solid var(--kc-border);
	border-radius: var(--kc-radius-lg);
}

.kc-memorial-card__face {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--kc-placeholder);
	overflow: hidden;
}

.kc-memorial-card__face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kc-memorial-card__body {
	flex: 1 1 18rem;
}

.kc-memorial-card__body h2 {
	margin: 0 0 0.25rem;
	font-size: 1.3rem;
}

.kc-memorial-card__body p {
	margin: 0;
	color: var(--kc-muted);
}

/* ---------------------------------------------------------- Dog: lead */

.kc-lead {
	display: grid;
	gap: 2rem;
	align-items: start;
	margin-bottom: 2rem;
}

@media (min-width: 860px) {
	.kc-lead {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
		gap: 3rem;
	}
}

.kc-lead__photo {
	margin: 0;
}

.kc-lead__photo img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--kc-radius-lg);
	background: var(--kc-placeholder);
}

.kc-lead__strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
}

.kc-lead__strip a {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: var(--kc-radius);
	background: var(--kc-placeholder);
	overflow: hidden;
}

.kc-lead__strip img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kc-lead__more {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgb(43 37 34 / 55%);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
}

.kc-lead__body .entry-title {
	margin: 0 0 0.15rem;
}

.kc-callname {
	margin: 0 0 1rem;
	color: var(--kc-muted);
}

/* ---------------------------------------------------------- Dog: facts */

.kc-facts {
	display: block;
	margin: 0 0 1.5rem;
	padding: 0;
	border-top: 1px solid var(--kc-border);
}

.kc-facts__row {
	display: grid;
	grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
	gap: 0.25rem 1.5rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--kc-border);
}

.kc-facts dt {
	margin: 0;
	font-weight: 600;
}

.kc-facts dd {
	margin: 0;
}

@media (max-width: 520px) {
	.kc-facts__row {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------------- Tabs */

.kc-tabs {
	margin: 2rem 0 0;
	border-bottom: 1px solid var(--kc-border);
	overflow-x: auto;
}

.kc-tabs ul {
	display: flex;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.kc-tabs a {
	display: block;
	padding: 0.6rem 0;
	border-bottom: 2px solid transparent;
	color: var(--kc-muted);
	font-size: 0.95rem;
	text-decoration: none;
}

.kc-tabs a:hover,
.kc-tabs a:focus {
	color: var(--kc-accent);
	border-bottom-color: var(--kc-accent);
}

/* ------------------------------------------------------------- Pedigree */

/*
 * One column per generation. Each box spans exactly the rows its descendants occupy, so
 * an ancestor always sits beside the dog it belongs to.
 */
.kc-ped {
	display: grid;
	grid-template-rows: repeat(var(--kc-ped-rows, 8), minmax(3.25rem, auto));
	gap: 0.5rem;
	grid-auto-flow: column;
}

.kc-ped__cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.1rem;
	min-width: 0;
	padding: 0.6rem 0.85rem;
	background: var(--kc-surface);
	border: 1px solid var(--kc-border-strong);
	border-radius: var(--kc-radius);
}

.kc-ped__cell--nameonly {
	background: transparent;
	border-style: dashed;
}

.kc-ped__cell--unknown {
	background: transparent;
	border-style: dashed;
	border-color: var(--kc-border);
}

.kc-ped__role {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kc-muted);
}

.kc-ped__name {
	font-family: var(--kc-serif);
	font-weight: 600;
	color: var(--kc-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.kc-ped__name:hover,
a.kc-ped__name:focus {
	color: var(--kc-accent);
	text-decoration: underline;
}

.kc-ped__cell--gen1 .kc-ped__name {
	font-size: 1.1rem;
}

.kc-ped__cell--gen3 .kc-ped__name,
.kc-ped__cell--gen4 .kc-ped__name,
.kc-ped__cell--gen5 .kc-ped__name {
	font-size: 0.9rem;
}

.kc-ped__meta {
	font-size: 0.8rem;
	color: var(--kc-muted);
}

.kc-ped__legend {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: var(--kc-muted);
}

/* A deep pedigree needs to scroll sideways rather than squeeze the boxes. */
@media (max-width: 860px) {
	.kc-ped {
		grid-auto-flow: row;
		grid-template-rows: none;
		gap: 0.4rem;
	}

	/* Stack the generations: the grid placement from the markup no longer applies. */
	.kc-ped__cell {
		grid-column: 1 !important;
		grid-row: auto !important;
	}

	.kc-ped__cell--gen2 {
		margin-left: 1rem;
	}

	.kc-ped__cell--gen3 {
		margin-left: 2rem;
	}

	.kc-ped__cell--gen4 {
		margin-left: 3rem;
	}

	.kc-ped__cell--gen5 {
		margin-left: 4rem;
	}
}

/* ------------------------------------------------------------ Offspring */

.kc-offspring {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kc-offspring__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
	background: var(--kc-surface);
	border: 1px solid var(--kc-border);
	border-radius: var(--kc-radius);
}

.kc-offspring__thumb {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: var(--kc-radius);
	background: var(--kc-placeholder);
	overflow: hidden;
}

.kc-offspring__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kc-offspring__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	flex: 1 1 16rem;
	min-width: 0;
}

.kc-offspring__title {
	font-family: var(--kc-serif);
	font-size: 1.15rem;
	font-weight: 600;
}

.kc-offspring__partner,
.kc-offspring__pups {
	font-size: 0.95rem;
}

.kc-offspring__more {
	flex: none;
	align-self: center;
	font-size: 0.9rem;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Shows */

.kc-shows-summary {
	margin: -0.25rem 0 0.9rem;
	font-size: 0.9rem;
}

.kc-table-wrap {
	overflow-x: auto;
}

.kc-shows {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	background: var(--kc-surface);
	border: 1px solid var(--kc-border);
	border-radius: var(--kc-radius);
	overflow: hidden;
}

.kc-shows th,
.kc-shows td {
	padding: 0.6rem 0.85rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--kc-border);
}

.kc-shows th {
	font-family: var(--kc-sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kc-muted);
	background: #faf7f2;
}

.kc-shows tbody tr:last-child td {
	border-bottom: 0;
}

.kc-events {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kc-events li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--kc-border);
}

/* -------------------------------------------------------------- Gallery */

/* ------------------------------------ WordPress's own [gallery] shortcode */

/*
 * A theme that declares html5 gallery support gets no gallery CSS from
 * WordPress: gallery_shortcode() only prints its float rules when the
 * `use_default_gallery_style` filter is true, and that filter defaults to
 * `! $html5` (wp-includes/media.php). This theme declared the support and then
 * styled nothing, so every migrated gallery stacked one image per row whatever
 * the column count in the editor said. The count is on the wrapper as
 * gallery-columns-N, which is what these rules read.
 */
.gallery {
	display: grid;
	grid-template-columns: repeat(var(--kc-gallery-cols, 3), minmax(0, 1fr));
	gap: 1rem;
	margin: 1.75rem 0;
}

.gallery-columns-1 { --kc-gallery-cols: 1; }
.gallery-columns-2 { --kc-gallery-cols: 2; }
.gallery-columns-3 { --kc-gallery-cols: 3; }
.gallery-columns-4 { --kc-gallery-cols: 4; }
.gallery-columns-5 { --kc-gallery-cols: 5; }
.gallery-columns-6 { --kc-gallery-cols: 6; }
.gallery-columns-7 { --kc-gallery-cols: 7; }
.gallery-columns-8 { --kc-gallery-cols: 8; }
.gallery-columns-9 { --kc-gallery-cols: 9; }

.gallery-item {
	margin: 0;
	min-width: 0;
}

.gallery-icon {
	margin: 0;
}

.gallery-icon img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: var(--kc-radius);
}

.gallery-caption {
	display: block;
	margin-top: 0.4rem;
	color: var(--kc-muted);
	font-size: 0.85rem;
	line-height: 1.4;
}

/*
 * Eight columns of thumbnail is a column of pixels on a phone. A gallery the
 * author set to one column is left alone — that is a deliberate choice, not a
 * default. These come after the rules above, so they win without !important.
 */
@media (max-width: 900px) {
	.gallery:not(.gallery-columns-1):not(.gallery-columns-2) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Same selector as the rule above, not a shorter one: `:not()` carries its
   argument's specificity, so a looser selector here would lose to it and the
   phone would keep the tablet's three columns. Later in the file wins instead. */
@media (max-width: 600px) {
	.gallery:not(.gallery-columns-1):not(.gallery-columns-2) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kc-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
	gap: 0.6rem;
}

.kc-gallery-item {
	display: block;
	aspect-ratio: 1;
	border-radius: var(--kc-radius);
	background: var(--kc-placeholder);
	overflow: hidden;
}

.kc-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------ Kennel Core shortcode output */

/*
 * The migrated pages are built from the plugin's shortcodes, so its markup gets the same
 * treatment as the theme's own. These rules override the plugin's neutral defaults.
 */

.kc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1.75rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kc-card a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.kc-card img,
.kc-card .kc-noimg {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--kc-radius);
	background: var(--kc-placeholder);
}

.kc-card-name {
	display: block;
	margin-top: 0.55rem;
	font-family: var(--kc-serif);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.25;
}

.kc-card a:hover .kc-card-name {
	color: var(--kc-accent);
}

.kc-card-meta {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.85rem;
	color: var(--kc-muted);
}

.kc-litters,
.kc-posts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kc-litter,
.kc-post {
	display: block;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--kc-border);
	overflow: hidden;
}

.kc-litter img,
.kc-post img {
	float: left;
	width: 72px;
	height: 72px;
	margin: 0 1rem 0 0;
	object-fit: cover;
	border-radius: var(--kc-radius);
	background: var(--kc-placeholder);
}

.kc-litter a,
.kc-post a {
	color: var(--kc-text);
	text-decoration: none;
}

.kc-litter a:hover,
.kc-post a:hover {
	color: var(--kc-accent);
}

.kc-litter strong,
.kc-post strong {
	font-family: var(--kc-serif);
	font-size: 1.1rem;
}

.kc-parents,
.kc-pups,
.kc-excerpt {
	font-size: 0.92rem;
	color: var(--kc-muted);
}

.kc-birthdays {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kc-offspring li {
	margin-bottom: 0.75rem;
}

.kc-titles {
	font-weight: 600;
}

/* The plugin's classic pedigree table, used by [kennel_pedigree]. */
.kc-pedigree-wrap {
	overflow-x: auto;
}

.kc-pedigree {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.9rem;
	background: var(--kc-surface);
}

.kc-pedigree td {
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--kc-border);
	vertical-align: middle;
}

.kc-pedigree .kc-gen-1 {
	font-family: var(--kc-serif);
	font-weight: 600;
}

.kc-unknown {
	color: var(--kc-muted);
	opacity: 0.6;
}

.kc-share-fb {
	display: inline-block;
	padding: 0.6rem 1.25rem;
	border-radius: var(--kc-radius);
	background: #1877f2;
	color: #fff !important;
	font-size: 0.95rem;
	text-decoration: none;
}

.kc-share-fb:hover {
	background: #145fc4;
}

.kc-memorial {
	font-style: italic;
}

/* ---------------------------------------------------- Pagination, search */

.pagination {
	margin-top: 2rem;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 0.35rem 0.75rem;
	margin: 0 0.15rem 0.3rem 0;
	border: 1px solid var(--kc-border);
	border-radius: var(--kc-radius);
	background: var(--kc-surface);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--kc-accent);
	border-color: var(--kc-accent);
	color: #fff;
}

.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 28rem;
}

.search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.55rem 0.85rem;
	border: 1px solid var(--kc-border-strong);
	border-radius: var(--kc-radius);
	background: var(--kc-surface);
	font: inherit;
	font-size: 0.95rem;
}

.search-form button {
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--kc-accent);
	border-radius: var(--kc-radius);
	background: var(--kc-accent);
	color: #fff;
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
}

.search-form button:hover {
	background: var(--kc-accent-dark);
}

.error-404 {
	padding: 3rem 0;
	text-align: center;
}

.error-404 .search-form {
	margin-inline: auto;
}

.kc-prev-next {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 3rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--kc-border);
	font-size: 0.95rem;
}

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

.site-footer {
	margin-top: 3rem;
	padding: 2.75rem 0 2rem;
	background: var(--kc-text);
	color: #e8e0d6;
	font-size: 0.9375rem;
}

/* The copyright strip stands on its own so a left column can run past the footer. */
.site-info-bar {
	background: var(--kc-text);
	color: #e8e0d6;
	font-size: 0.9375rem;
}

.site-footer + .site-info-bar {
	margin-top: 0;
}

.site-info-bar:first-child,
.site-content + .site-info-bar {
	margin-top: 3rem;
}

.site-footer a {
	color: #f0c8ce;
}

.site-footer h2,
.site-footer .widget-title {
	margin-bottom: 0.6rem;
	font-size: 1rem;
	color: #fff;
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.75rem 2.5rem;
	margin-bottom: 2rem;
}

.footer-widgets ul,
.footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-nav {
	margin-bottom: 1.5rem;
}

.footer-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
}

.site-info {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	padding: 1.25rem 0;
	color: #bdb2a6;
	font-size: 0.875rem;
}

.site-footer + .site-info-bar .site-info {
	border-top: 1px solid rgb(255 255 255 / 15%);
}

@media print {
	.site-header,
	.site-footer,
	.kc-actions,
	.kc-tabs,
	.kc-prev-next,
	.kc-breadcrumb,
	.menu-toggle {
		display: none !important;
	}

	body {
		background: #fff;
	}
}

/* ------------------------------------------------------------ Lightbox */

.kc-lightbox {
	width: min(94vw, 68rem);
	max-width: none;
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--kc-radius-lg);
	background: #1b1512;
	color: #fff;
	overflow: visible;
}

.kc-lightbox::backdrop {
	background: rgb(15 11 9 / 82%);
}

.kc-lightbox__figure {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0;
	padding: 0.75rem;
}

.kc-lightbox img {
	width: 100%;
	max-height: 78vh;
	object-fit: contain;
	border-radius: var(--kc-radius);
	display: block;
}

.kc-lightbox figcaption {
	padding: 0 0.25rem 0.25rem;
	color: #d9cec4;
	font-size: 0.9rem;
	text-align: center;
}

.kc-lightbox__close,
.kc-lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 14%);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.kc-lightbox__close:hover,
.kc-lightbox__nav:hover {
	background: rgb(255 255 255 / 28%);
}

.kc-lightbox__close {
	top: -1rem;
	right: -1rem;
	background: var(--kc-accent);
}

.kc-lightbox__nav--prev {
	left: -1.25rem;
	top: 50%;
	transform: translateY(-50%);
}

.kc-lightbox__nav--next {
	right: -1.25rem;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 640px) {
	.kc-lightbox {
		width: 100vw;
		border-radius: 0;
	}

	.kc-lightbox__close {
		top: 0.5rem;
		right: 0.5rem;
	}

	.kc-lightbox__nav--prev {
		left: 0.4rem;
	}

	.kc-lightbox__nav--next {
		right: 0.4rem;
	}
}

/* ------------------------------------------- Page as a card on a texture */

/*
 * The old site laid its content on a tiled, fixed texture. With a texture or colour set,
 * the page becomes a card on top of it; without one nothing changes.
 */
.has-page-bg {
	background-color: var(--kc-page-bg, #e9e2d6);
	background-image: var(--kc-page-bg-image, none);
	background-repeat: repeat;
	background-position: center top;
	background-attachment: fixed;
}

.has-page-bg .site-header,
.has-page-bg .site-content {
	background: transparent;
}

/*
 * The card is opaque at every width, because it is what the text is read against.
 * This used to live in the wide-screen block below along with the margins and the
 * corners, which meant that under 1024px the header and the content stayed
 * transparent with nothing behind them but the texture, and the text was read
 * against brickwork. Only the things that need room — the margins, the rounded
 * corners, the shadow — wait for the screen; on a phone the card runs edge to edge.
 */
.has-page-bg .kc-shell {
	background: var(--kc-bg);
}

@media (min-width: 1024px) {
	.has-page-bg .kc-shell {
		width: min(100% - 3rem, calc(var(--kc-wrap) + 6rem));
		margin: 1.75rem auto;
		border-radius: var(--kc-radius-lg);
		box-shadow: 0 2px 4px rgb(43 37 34 / 8%), 0 18px 50px rgb(43 37 34 / 14%);
		overflow: hidden;
	}

	.has-page-bg .site-footer {
		margin-top: 0;
	}
}

/* --------------------------------------------------------- Left-hand nav */

@media (min-width: 1024px) {
	.nav-left .kc-shell {
		display: grid;
		grid-template-columns: 15.5rem minmax(0, 1fr);
		grid-template-rows: 1fr auto auto;
		align-items: start;
	}

	/* The header becomes the left column and stays put while the page scrolls. Content,
	   footer and copyright strip stack beside it in the second column, and the column
	   runs past all three to the bottom edge — the way the kennel's old site had it. */
	.nav-left .site-header {
		/* One inset for the whole column, so the menu rows can run edge to edge
		   while the title and the items still line up down the same left margin. */
		--kc-nav-pad: 1.5rem;
		grid-column: 1;
		grid-row: 1 / -1;
		position: sticky;
		top: 0;
		align-self: stretch;
		border-bottom: 0;
	}

	.nav-left .site-header__inner {
		display: block;
		width: auto;
		padding: 2rem 0;
	}

	.nav-left .site-branding {
		display: block;
		margin-bottom: 1.75rem;
		padding-inline: var(--kc-nav-pad);
	}

	.nav-left .site-branding .custom-logo {
		margin-bottom: 0.75rem;
	}

	.nav-left .site-title {
		font-size: 1.2rem;
		line-height: 1.25;
	}

	.nav-left .site-nav ul {
		flex-direction: column;
		gap: 0;
	}

	.nav-left .site-nav li {
		border-bottom: 1px solid var(--kc-border);
	}

	/* The row — its background, its marker and the rule under it — spans the column;
	   the border eats 3px of the inset so the labels stay on the title's margin. */
	.nav-left .site-nav a {
		padding: 0.55rem var(--kc-nav-pad) 0.55rem calc(var(--kc-nav-pad) - 3px);
		border-bottom: 0;
		border-left: 3px solid transparent;
	}

	.nav-left .site-nav a:hover,
	.nav-left .site-nav .current-menu-item > a,
	.nav-left .site-nav .current_page_item > a,
	.nav-left .site-nav .current-menu-ancestor > a {
		border-bottom-color: transparent;
		border-left-color: var(--kc-accent);
		background: rgb(123 30 43 / 5%);
	}

	/* Sub-menus stay open in the column instead of hovering over the page. */
	.nav-left .site-nav .sub-menu,
	.nav-left .site-nav .children {
		display: flex;
		position: static;
		min-width: 0;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.nav-left .site-nav .menu-item-has-children > a::after,
	.nav-left .site-nav .page_item_has_children > a::after {
		display: none;
	}

	/* Children keep their indent as padding, so their rows bleed to the edge too. */
	.nav-left .site-nav .sub-menu a,
	.nav-left .site-nav .children a {
		padding: 0.4rem var(--kc-nav-pad) 0.4rem calc(var(--kc-nav-pad) + 0.9rem - 3px);
		font-size: 0.9rem;
		color: var(--kc-muted);
	}

	.nav-left .site-content {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}

	.nav-left .site-footer {
		grid-column: 2;
		grid-row: 2;
	}

	.nav-left .site-info-bar {
		grid-column: 2;
		grid-row: 3;
	}

	/* Inside a column the content needs its own breathing room, not the page gutter. */
	.nav-left .site-content .kc-wrap {
		width: auto;
		margin-inline: 0;
		padding-inline: clamp(1.25rem, 3vw, 2.5rem);
	}

	.nav-left .kc-hero {
		padding-top: 2rem;
	}
}

/* Below the breakpoint the left column folds back into the top bar and its button. */
@media (max-width: 1023px) {
	.nav-left .site-header__inner {
		display: flex;
	}
}

/* ------------------------------------- The kennel's original green column */

/*
 * Sampled from a screenshot of the previous site: the column #97c307, the lighter
 * item #99cd89, the amber marker #f5bc06 on the page being read, the dark green
 * #134001 of the bottom bar and #0e3500 for headings.
 */
.nav-green {
	--kc-nav-bg: #97c307;
	--kc-nav-item: #99cd89;
	--kc-nav-item-hover: #b9d157;
	--kc-nav-current: #f5bc06;
	--kc-nav-ink: #143c01;
	--kc-nav-deep: #134001;
}

.nav-green .site-header {
	background: var(--kc-nav-bg);
	border-color: var(--kc-nav-deep);
}

.nav-green .site-title a,
.nav-green .site-description {
	color: var(--kc-nav-ink);
}

.nav-green .site-nav a {
	color: var(--kc-nav-ink);
}

@media (min-width: 1024px) {
	.nav-green.nav-left .site-nav > ul > li > a {
		margin-bottom: 2px;
		background: var(--kc-nav-item);
	}

	.nav-green.nav-left .site-nav > ul > li > a:hover,
	.nav-green.nav-left .site-nav > ul > li > a:focus {
		background: var(--kc-nav-item-hover);
		border-left-color: var(--kc-nav-deep);
	}

	/* The page you are on, marked the way the old site marked it: amber, with a dark
	   arrow at the left edge rather than the plain bar the other schemes use. */
	.nav-green.nav-left .site-nav .current-menu-item > a,
	.nav-green.nav-left .site-nav .current_page_item > a {
		position: relative;
		background: var(--kc-nav-current);
		border-left-color: transparent;
		color: var(--kc-nav-ink);
		font-weight: 600;
	}

	.nav-green.nav-left .site-nav .current-menu-item > a::before,
	.nav-green.nav-left .site-nav .current_page_item > a::before {
		position: absolute;
		top: 50%;
		left: -3px;
		width: 0;
		height: 0;
		border: 6px solid transparent;
		border-left-color: var(--kc-nav-deep);
		transform: translateY(-50%);
		content: "";
	}

	.nav-green.nav-left .site-nav li {
		border-bottom: 0;
	}

	.nav-green.nav-left .site-nav .sub-menu a,
	.nav-green.nav-left .site-nav .children a {
		color: var(--kc-nav-ink);
		opacity: 0.85;
	}
}

.nav-green .site-footer {
	background: var(--kc-nav-deep);
}

/* ------------------------------------------------ Sub-menus that open */

.kc-subnav-toggle {
	display: none;
}

.nav-collapsible .site-nav .has-toggle {
	position: relative;
}

.nav-collapsible .site-nav .has-toggle > .kc-subnav-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.nav-collapsible .site-nav .has-toggle > .kc-subnav-toggle::before {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 150ms ease;
	content: "";
}

.nav-collapsible .site-nav .has-toggle.is-open > .kc-subnav-toggle::before {
	transform: rotate(225deg) translate(-2px, -2px);
}

/* Closed by default once the script has taken over; open without it. */
.nav-collapsible .site-nav .has-toggle > ul {
	display: none;
}

.nav-collapsible .site-nav .has-toggle.is-open > ul {
	display: block;
}

@media (min-width: 1024px) {
	/* On a top bar the sub-menu still drops on hover; the button is for the column. */
	.nav-collapsible.nav-top .site-nav .has-toggle > .kc-subnav-toggle {
		display: none;
	}

	/* Keep the caret inside the column's inset now the row reaches the edge. */
	.nav-collapsible.nav-left .site-nav .has-toggle > .kc-subnav-toggle {
		right: calc(var(--kc-nav-pad) - 0.7rem);
	}

	.nav-collapsible.nav-top .site-nav li:hover > .sub-menu,
	.nav-collapsible.nav-top .site-nav li:focus-within > .sub-menu {
		display: flex;
	}
}

/* ------------------------------------------------ Frame around the page */

.has-page-frame .kc-shell {
	border: 1px solid var(--kc-frame, #134001);
}

@media (min-width: 1024px) {
	.has-page-frame .kc-shell {
		border-radius: var(--kc-radius-lg);
		overflow: hidden;
	}

	/* Without a texture the page still needs a little air for the frame to read. */
	.has-page-frame:not(.has-page-bg) .kc-shell {
		width: min(100% - 3rem, calc(var(--kc-wrap) + 6rem));
		margin: 1.75rem auto;
	}
}


/* ------------------------------------------------- Shadow under the page */

/*
 * The soft pair is the theme's own; the deep one is the kennel's previous site,
 * taken from its stylesheet unchanged. Only where the page is actually a card —
 * on a phone it runs edge to edge and there is nothing for a shadow to fall on.
 */
@media (min-width: 1024px) {
	.has-page-bg.shadow-none .kc-shell,
	.has-page-frame.shadow-none .kc-shell {
		box-shadow: none;
	}

	.has-page-bg.shadow-soft .kc-shell,
	.has-page-frame.shadow-soft .kc-shell {
		box-shadow: 0 2px 4px rgb(43 37 34 / 8%), 0 18px 50px rgb(43 37 34 / 14%);
	}

	.has-page-bg.shadow-deep .kc-shell,
	.has-page-frame.shadow-deep .kc-shell {
		box-shadow: 0 13px 20px rgb(0 0 0 / 70%);
	}
}

/* ------------------------------------------- Widgets in the menu column */

.nav-widgets {
	margin-top: 1.5rem;
}

.nav-widgets .widget {
	margin-bottom: 1.5rem;
	padding-inline: var(--kc-nav-pad, 0);
}

.nav-widgets .widget:last-child {
	margin-bottom: 0;
}

.nav-widgets .widget-title {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
}

.nav-widgets ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-widgets li {
	margin-bottom: 0.3rem;
}

.nav-widgets .search-form {
	display: flex;
	gap: 0.35rem;
}

.nav-widgets .search-form label {
	flex: 1 1 auto;
	min-width: 0;
}

.nav-widgets .search-field {
	width: 100%;
	min-width: 0;
}

/* The greens carry into the widgets, or the column ends in a pale patch. */
.nav-green .nav-widgets,
.nav-green .nav-widgets a {
	color: var(--kc-nav-ink);
}

.nav-green .nav-widgets .widget-title {
	color: var(--kc-nav-deep);
}

/* ---------------------------------------------------------- Contact form */

.kc-footer-contact {
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid rgb(255 255 255 / 15%);
}

.kc-form {
	max-width: 34rem;
}

.kc-form__title {
	margin-top: 0;
	color: inherit;
}

.kc-field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0 0 0.9rem;
}

.kc-field label {
	font-size: 0.9rem;
}

.kc-field input,
.kc-field textarea {
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--kc-border);
	border-radius: var(--kc-radius);
	background: var(--kc-surface);
	color: var(--kc-text);
	font: inherit;
	font-size: 0.95rem;
}

.kc-field textarea {
	resize: vertical;
}

/* The honeypot is for robots, so it must not be reachable or visible to anyone else. */
.kc-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kc-form__notice {
	padding: 0.6rem 0.9rem;
	border-radius: var(--kc-radius);
	font-size: 0.95rem;
}

.kc-form__notice--ok {
	background: #e3f2d9;
	color: #1f4a12;
}

.kc-form__notice--error {
	background: #f7e0e0;
	color: #6b1d1d;
}

.kc-form__actions {
	margin: 0;
}

/* On the dark green footer the accent button goes muddy; the column's own green reads. */
.nav-green .site-footer .kc-button {
	background: var(--kc-nav-item);
	border-color: var(--kc-nav-item);
	color: var(--kc-nav-ink);
}

.nav-green .site-footer .kc-button:hover,
.nav-green .site-footer .kc-button:focus {
	background: var(--kc-nav-item-hover);
	border-color: var(--kc-nav-item-hover);
	color: var(--kc-nav-ink);
}

.nav-green .site-footer a {
	color: #d7ef9e;
}

/* ------------------------------- Forms from other plugins in the footer */

/*
 * Contact Form 7 and its like bring their own markup and almost no styling, which on a
 * dark footer means dark labels on a dark ground. These rules give that markup the same
 * treatment as the built-in form, without touching how it works.
 */
.kc-footer-contact .wpcf7,
.kc-footer-contact form {
	max-width: 34rem;
}

.kc-footer-contact label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.9rem;
}

.kc-footer-contact p {
	margin: 0 0 0.9rem;
}

.kc-footer-contact input[type="text"],
.kc-footer-contact input[type="email"],
.kc-footer-contact input[type="tel"],
.kc-footer-contact input[type="url"],
.kc-footer-contact input[type="date"],
.kc-footer-contact input[type="number"],
.kc-footer-contact select,
.kc-footer-contact textarea {
	width: 100%;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--kc-border);
	border-radius: var(--kc-radius);
	background: var(--kc-surface);
	color: var(--kc-text);
	font: inherit;
	font-size: 0.95rem;
}

.kc-footer-contact textarea {
	resize: vertical;
}

.kc-footer-contact input[type="submit"],
.kc-footer-contact button[type="submit"] {
	width: auto;
	padding: 0.6rem 1.25rem;
	border: 1px solid var(--kc-accent);
	border-radius: var(--kc-radius);
	background: var(--kc-accent);
	color: #fff;
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
}

.nav-green .kc-footer-contact input[type="submit"],
.nav-green .kc-footer-contact button[type="submit"] {
	background: var(--kc-nav-item);
	border-color: var(--kc-nav-item);
	color: var(--kc-nav-ink);
}

/* Contact Form 7's own notices, which are otherwise unreadable here. */
.kc-footer-contact .wpcf7-not-valid-tip {
	color: #ffc9c9;
	font-size: 0.85rem;
}

.kc-footer-contact .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.6rem 0.9rem;
	border-radius: var(--kc-radius);
	border-width: 1px;
	font-size: 0.95rem;
}

.kc-footer-contact .wpcf7-spinner {
	background-color: rgb(255 255 255 / 40%);
}

/* --------------------------------------- Menu in a band of its own (top) */

.site-nav-bar {
	border-top: 1px solid var(--kc-border);
	background: var(--kc-surface);
}

.nav-fullwidth .site-header__inner {
	padding-bottom: 0.9rem;
}

.nav-fullwidth .site-nav ul {
	gap: 0;
}

@media (min-width: 901px) {
	.nav-fullwidth .site-nav > ul > li > a {
		padding: 0.7rem 1.1rem;
		border-bottom: 0;
	}

	/* Hairlines between the items, the way the old column separated them. */
	.nav-fullwidth .site-nav > ul > li + li > a {
		border-left: 1px solid var(--kc-border);
	}

	.nav-fullwidth .site-nav .sub-menu,
	.nav-fullwidth .site-nav .children {
		border-top: 0;
	}
}

/* ------------------------- The old green, wherever the menu happens to be */

/*
 * These were scoped to the left column at first, which left a top menu with a green bar
 * and nothing else — the items, the hover and the amber marker never appeared. They now
 * apply to both placements, each in the shape that suits it.
 */
.nav-green .site-nav-bar {
	background: var(--kc-nav-bg);
	border-top-color: var(--kc-nav-deep);
}

.nav-green .site-nav .current-menu-item > a,
.nav-green .site-nav .current_page_item > a,
.nav-green .site-nav .current-menu-ancestor > a,
.nav-green .site-nav .current_page_ancestor > a {
	background: var(--kc-nav-current);
	color: var(--kc-nav-ink);
	font-weight: 600;
}

.nav-green .site-nav a:hover,
.nav-green .site-nav a:focus {
	background: var(--kc-nav-item-hover);
	color: var(--kc-nav-ink);
}

.nav-green .site-nav .sub-menu,
.nav-green .site-nav .children {
	background: var(--kc-nav-item);
	border-color: var(--kc-nav-deep);
}

@media (min-width: 901px) {
	/* Across the top the items are cells in the band, divided by a darker hairline. */
	.nav-green.nav-top .site-nav > ul > li > a {
		border-bottom-color: transparent;
	}

	.nav-green.nav-fullwidth .site-nav > ul > li + li > a {
		border-left-color: rgb(19 64 1 / 25%);
	}

	.nav-green.nav-top .site-nav .current-menu-item > a,
	.nav-green.nav-top .site-nav .current_page_item > a {
		border-bottom-color: var(--kc-nav-deep);
	}
}

@media (min-width: 1024px) {
	/* In a column they are stacked chips, as on the old site. */
	.nav-green.nav-left .site-nav > ul > li > a {
		margin-bottom: 2px;
		background: var(--kc-nav-item);
	}

	.nav-green.nav-left .site-nav > ul > li > a:hover,
	.nav-green.nav-left .site-nav > ul > li > a:focus {
		border-left-color: var(--kc-nav-deep);
	}

	.nav-green.nav-left .site-nav .current-menu-item > a,
	.nav-green.nav-left .site-nav .current_page_item > a {
		border-left-color: var(--kc-nav-deep);
	}

	.nav-green.nav-left .site-nav li {
		border-bottom: 0;
	}

	.nav-green.nav-left .site-nav .sub-menu a,
	.nav-green.nav-left .site-nav .children a {
		color: var(--kc-nav-ink);
	}
}

/* The strip belongs to the footer's colour, including in the green scheme. */
.nav-green .site-info-bar {
	background: var(--kc-nav-deep);
}

.nav-green .site-info-bar a {
	color: #d7ef9e;
}