/*
Theme Name:   KB Sales (GeneratePress Child)
Template:     generatepress
Description:  Child theme for kbsales.co.uk.
Version:      1.2.0
Text Domain:  generatepress-child
*/

@font-face {
	font-family: "Familjen Grotesk";
	src: url("fonts/familjen-grotesk.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}

@font-face {
	font-family: "Atkinson Next";
	src: url("fonts/atkinson-next.woff2") format("woff2");
	font-weight: 200 800;
	font-display: swap;
}

:root {
	--navy: #14204a;
	--navy-soft: #26346b;
	--white: #fff;
	--lilac: #c8b5f4;
	--lilac-pale: #f0ebfc;
	--lilac-deep: #5a3ea8;
	--slate: #47517a;
	--display: "Familjen Grotesk", "Trebuchet MS", sans-serif;
	--body: "Atkinson Next", Verdana, sans-serif;
	--gutter: clamp(20px, 5vw, 72px);
	/* The signature shape: a speech bubble, with one corner tucked in. */
	--say-left: 36px 36px 36px 6px;
	--say-right: 36px 36px 6px 36px;
}

/* GeneratePress overrides */
body {
	background: var(--white);
	color: var(--navy);
	font-family: var(--body);
	font-size: 18px;
	line-height: 1.6;
}

body .site.grid-container,
body .site-content {
	display: block;
	max-width: none;
	padding: 0;
}

.site-header {
	background: var(--white);
}

body .inside-header {
	max-width: 1320px;
	padding: 18px var(--gutter);
}

.kb-wordmark,
.main-title a.kb-wordmark {
	color: var(--navy);
	font-family: var(--display);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -0.02em;
}

.kb-wordmark b {
	font-weight: 700;
}

.main-navigation,
.main-navigation ul ul {
	background: transparent;
}

body .main-navigation .main-nav ul li a,
body .main-navigation .menu-toggle {
	color: var(--navy);
	font-family: var(--body);
	font-size: 17px;
	line-height: 48px;
	padding: 0 14px;
}

body .main-navigation .main-nav ul li:hover > a,
body .main-navigation .main-nav ul li:focus > a,
body .main-navigation .main-nav ul li[class*="current-menu-"] > a {
	background: transparent;
	color: var(--lilac-deep);
}

body .main-navigation .menu-toggle:hover,
body .main-navigation .menu-toggle:focus {
	background: transparent;
	color: var(--navy);
}

.kb-nav-cta {
	margin-left: 14px;
}

/* Layout */
.kb-wrap {
	margin-inline: auto;
	max-width: 1320px;
	padding-inline: var(--gutter);
}

.kb-section {
	padding-block: clamp(64px, 9vw, 128px);
}

.kb h1,
.kb h2,
.kb h3 {
	color: inherit;
	font-family: var(--display);
	letter-spacing: -0.025em;
	margin: 0;
	text-transform: none;
}

.kb h1 {
	font-size: clamp(2.9rem, 7.4vw, 6.75rem);
	font-weight: 600;
	line-height: 1;
}

.kb h2 {
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	font-weight: 600;
	line-height: 1.08;
}

.kb h3 {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.kb p {
	margin: 0;
}

.kb-lead {
	color: var(--slate);
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	line-height: 1.5;
	margin-top: 28px;
	max-width: 36em;
}

.kb .kb-lead {
	margin-top: 28px;
}

.kb-h2 {
	margin-bottom: clamp(36px, 5vw, 64px);
	max-width: 16em;
}

.kb .kb-h2 {
	margin-bottom: clamp(36px, 5vw, 64px);
}

.kb-small {
	font-size: 0.875rem;
	line-height: 1.45;
}

/* Buttons and links */
.kb-btn,
a.kb-btn {
	background: var(--lilac);
	border: 0;
	border-radius: 999px;
	color: var(--navy);
	cursor: pointer;
	display: inline-block;
	font-family: var(--body);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 17px 28px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.kb-btn:hover,
.kb-btn:focus {
	background: var(--white);
	color: var(--navy);
	box-shadow: inset 0 0 0 2px var(--navy);
}

.kb-btn--navy,
a.kb-btn--navy {
	background: var(--navy);
	color: var(--white);
}

.kb-btn--navy:hover,
.kb-btn--navy:focus {
	background: var(--navy-soft);
	box-shadow: none;
	color: var(--white);
}

.kb-btn--small,
a.kb-btn--small,
body .main-navigation .menu-bar-item > a.kb-btn {
	font-size: 0.95rem;
	line-height: 1.2;
	padding: 12px 20px;
}

body .main-navigation .menu-bar-items {
	align-items: center;
}

.kb-link {
	color: var(--navy);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--lilac-deep);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.kb-link:hover,
.kb-link:focus {
	color: var(--lilac-deep);
}

.kb-link--light,
.kb-link--light:hover,
.kb-link--light:focus {
	color: var(--white);
	text-decoration-color: var(--lilac);
}

.kb-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
}

:focus-visible {
	outline: 3px solid var(--lilac-deep);
	outline-offset: 3px;
}

/* Spaces for photos, screenshots and video */
.kb-slot {
	display: block;
	object-fit: cover;
	width: 100%;
}

.kb-slot--empty {
	align-items: center;
	background: var(--lilac-pale);
	color: var(--slate);
	display: flex;
	font-size: 0.95rem;
	justify-content: center;
	min-height: 180px;
	padding: 16px;
	text-align: center;
}

.kb-slot--video iframe,
.kb-slot--video video {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	width: 100%;
}

/* Homepage hero: the photo matches the height of the text beside it */
.kb-hero {
	align-items: stretch;
	column-gap: clamp(24px, 4vw, 64px);
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	padding-block: clamp(28px, 5vw, 72px) clamp(36px, 5vw, 64px);
}

.kb-hero__photo {
	border-radius: var(--say-right);
	height: 0;
	min-height: 100%;
}

/* The two routes: same width, same photo height, same button line */
.kb-routes {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding-bottom: clamp(56px, 8vw, 104px);
}

.kb-route {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.kb-route__img {
	aspect-ratio: 16 / 8;
	display: block;
	object-fit: cover;
	width: 100%;
}

.kb-route__body {
	align-items: flex-start;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 16px;
	padding: clamp(24px, 3vw, 44px);
}

.kb-route p {
	font-size: 1.15rem;
	max-width: 30em;
}

.kb-route--owner {
	background: var(--lilac);
	border-radius: var(--say-left);
	color: var(--navy);
}

.kb-route--vendor {
	background: var(--navy);
	border-radius: var(--say-right);
	color: var(--white);
}

.kb-route .kb-actions,
.kb-route--vendor .kb-btn {
	margin-top: auto;
}

/* The navy band that holds the assistant and forms */
.kb-try {
	background: linear-gradient(rgba(20, 32, 74, 0.9), rgba(20, 32, 74, 0.86)), url("images/bg-cafe.webp") center / cover no-repeat var(--navy);
	color: var(--white);
	padding-block: clamp(64px, 9vw, 120px);
}

.kb-try--room {
	background-image: linear-gradient(rgba(20, 32, 74, 0.9), rgba(20, 32, 74, 0.86)), url("images/bg-meeting-room.webp");
}

.kb-try__in {
	align-items: start;
	display: grid;
	gap: clamp(36px, 6vw, 96px);
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.kb-try p {
	color: #dcd9ee;
	margin-top: 22px;
	max-width: 30em;
}

.kb-try .kb-stage p,
.kb-try .kb-stage .kb-small {
	color: var(--slate);
	margin-top: 0;
}

.kb-stage {
	background: var(--white);
	border-radius: var(--say-left);
	color: var(--navy);
	padding: clamp(24px, 3vw, 44px);
	scroll-margin-top: 24px;
}

.kb-stage--lilac {
	background: var(--lilac-pale);
	border-radius: var(--say-right);
}

.kb-stage--live {
	overflow: hidden;
	padding: 0;
}

.kb-stage--live iframe {
	border: 0;
	display: block;
	height: 620px;
	width: 100%;
}

/* Form fields */
.kb-form {
	display: grid;
	gap: 18px;
}

.kb-form .kb-btn {
	justify-self: start;
}

.kb-group {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.kb-group legend {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 8px;
	padding: 0;
}

.kb-chips {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kb-chip {
	position: relative;
}

.kb-chip input {
	inset: 0;
	opacity: 0;
	position: absolute;
}

.kb-chip span {
	border-radius: 12px;
	box-shadow: inset 0 0 0 2px var(--navy);
	cursor: pointer;
	display: block;
	font-size: 1rem;
	padding: 13px 12px;
	text-align: center;
}

.kb-chip input:checked + span {
	background: var(--navy);
	color: var(--white);
}

.kb-chip input:focus-visible + span {
	outline: 3px solid var(--lilac-deep);
	outline-offset: 2px;
}

.kb-pair {
	align-items: end;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kb-field {
	display: grid;
	font-size: 1rem;
	font-weight: 700;
	gap: 6px;
}

body .kb input[type="text"],
body .kb input[type="email"],
body .kb input[type="tel"],
body .kb input[type="url"],
body .kb textarea {
	background: var(--white);
	border: 2px solid var(--navy);
	border-radius: 12px;
	color: var(--navy);
	font-family: var(--body);
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
	min-height: 52px;
	padding: 12px 14px;
	width: 100%;
}

body .kb input::placeholder {
	color: var(--slate);
}

.kb-trap {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.kb-notice,
.kb p.kb-notice {
	border-radius: 12px;
	font-weight: 700;
	padding: 12px 16px;
}

.kb-notice--ok {
	background: var(--lilac);
	color: var(--navy);
}

.kb-try .kb-stage p.kb-notice--ok {
	color: var(--navy);
}

.kb-notice--error,
.kb-try .kb-stage p.kb-notice--error {
	background: #fde8ec;
	color: #8a1230;
}

/* Numbered steps: only used for real sequences */
.kb-steps {
	counter-reset: step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kb-steps li {
	align-items: baseline;
	background: linear-gradient(var(--navy), var(--navy)) 0 0 / 100% 2px no-repeat;
	counter-increment: step;
	display: grid;
	gap: 8px clamp(20px, 3vw, 48px);
	grid-template-columns: 2.2em minmax(0, 5fr) minmax(0, 6fr);
	margin: 0;
	padding-block: clamp(22px, 2.6vw, 34px);
}

.kb-steps li::before {
	color: var(--lilac-deep);
	content: counter(step);
	font-family: var(--display);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1;
}

.kb-steps h3 {
	font-size: clamp(1.4rem, 2.2vw, 2rem);
}

.kb-steps p {
	color: var(--slate);
}

.kb-section--pale {
	background: var(--lilac-pale);
}

/* Inner pages */
.kb-pagehead {
	padding-block: clamp(36px, 6vw, 88px) clamp(48px, 6vw, 88px);
}

.kb-pagehead h1 {
	font-size: clamp(2.6rem, 6vw, 5.25rem);
	line-height: 1.02;
	max-width: 14em;
}

.kb-pagehead--split {
	align-items: stretch;
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.kb-pagehead__img,
.kb-contact__img {
	border-radius: var(--say-right);
	display: block;
	object-fit: cover;
	width: 100%;
}

.kb-pagehead__img {
	height: 0;
	min-height: 100%;
}

.kb-contact__img {
	aspect-ratio: 16 / 9;
	margin-top: 32px;
}

.kb-days__img {
	aspect-ratio: 3 / 2;
	border-radius: 18px;
	display: block;
	margin-bottom: 18px;
	object-fit: cover;
	width: 100%;
}

.kb-contact {
	align-items: start;
	display: grid;
	gap: clamp(32px, 6vw, 88px);
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
}

.kb-contact p {
	margin-top: 20px;
}

.kb-contact .kb-stage p {
	margin-top: 0;
}

.kb-contact__other {
	color: var(--slate);
}

.kb-days {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kb-days p {
	color: var(--slate);
	margin-top: 12px;
}

.kb .kb-days p {
	margin-top: 12px;
}

.kb-see {
	background: var(--lilac-pale);
}

.kb-see__in {
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-rows: 1fr 1fr;
}

.kb-see .kb-slot--video {
	aspect-ratio: 16 / 9;
	grid-row: 1 / 3;
}

.kb-see .kb-slot--empty {
	background: var(--white);
}

.kb-see__shot {
	height: 100%;
}

.kb-see .kb-slot,
.kb-see .kb-slot iframe {
	border-radius: 18px;
	overflow: hidden;
}

/* Testimonials appear only when real ones are published */
.kb-quotes .kb-wrap {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.kb-quote {
	margin: 0;
}

.kb-quote blockquote {
	background: var(--lilac-pale);
	border: 0;
	border-radius: var(--say-left);
	font-size: 1.2rem;
	font-style: normal;
	margin: 0 0 14px;
	padding: 28px;
}

.kb-quote figcaption {
	font-weight: 700;
}

/* Closing band: text on solid lilac, photo fading in from the right */
.kb-closing {
	background: linear-gradient(90deg, var(--lilac) 48%, rgba(200, 181, 244, 0.55) 72%, rgba(200, 181, 244, 0.25)), url("images/bg-street.webp") center / cover no-repeat var(--lilac);
	color: var(--navy);
	padding-block: clamp(56px, 8vw, 104px);
}

.kb-closing__in {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 560px;
}

/* Footer */
.site-info {
	background: var(--navy);
	color: #dcd9ee;
	font-size: 0.95rem;
	text-align: left;
}

body .inside-site-info {
	max-width: 1320px;
	padding: 32px var(--gutter);
}

.site-info a {
	color: var(--white);
}

.copyright-bar {
	text-align: left;
	width: 100%;
}

.error404 .inside-article {
	margin-inline: auto;
	max-width: 1320px;
	padding-inline: var(--gutter);
}

body .main-navigation .menu-toggle,
body .main-navigation.toggled .main-nav ul {
	background: transparent;
}

.kb-foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	justify-content: space-between;
}

.kb-wordmark--foot {
	color: var(--white);
	font-size: 24px;
}

.kb-foot__links:empty {
	display: none;
}

.kb-foot__links a {
	margin-right: 16px;
}

/* Tablet and phone */
@media (max-width: 960px) {
	.kb-hero,
	.kb-routes,
	.kb-try__in,
	.kb-contact,
	.kb-pagehead--split,
	.kb-days {
		grid-template-columns: minmax(0, 1fr);
	}

	.kb-hero {
		row-gap: 28px;
	}

	.kb-hero__photo,
	.kb-pagehead__img {
		aspect-ratio: 16 / 10;
		height: auto;
		min-height: 0;
	}

	.kb-closing {
		background: linear-gradient(rgba(200, 181, 244, 0.93), rgba(200, 181, 244, 0.93)), url("images/bg-street.webp") center / cover no-repeat var(--lilac);
	}
}

@media (max-width: 768px) {
	.kb-nav-cta {
		display: none;
	}

	body .main-navigation .main-nav ul li a {
		padding-inline: 0;
	}

	.kb-steps li {
		grid-template-columns: 2em minmax(0, 1fr);
	}

	.kb-steps p {
		grid-column: 2;
	}

	.kb-see__in {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	.kb-see .kb-slot--video {
		grid-row: auto;
	}

	.kb-foot {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 560px) {
	.kb-pair,
	.kb-chips {
		grid-template-columns: minmax(0, 1fr);
	}

	.kb-btn,
	a.kb-btn {
		width: 100%;
	}

	:root {
		--say-left: 26px 26px 26px 6px;
		--say-right: 26px 26px 6px 26px;
	}
}

/* Motion */
.kb-word {
	display: inline-block;
	margin-bottom: -0.16em;
	overflow: hidden;
	padding-bottom: 0.16em;
	vertical-align: top;
}

.kb-word > span {
	display: inline-block;
}

@keyframes kb-rise {
	from {
		transform: translateY(115%);
	}
}

@keyframes kb-fade {
	from {
		opacity: 0;
	}
}

@keyframes kb-pop {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
}

@keyframes kb-drift {
	from {
		background-position: center, center 15%;
	}

	to {
		background-position: center, center 85%;
	}
}

.kb-word > span {
	animation: kb-rise 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	animation-delay: calc(var(--i) * 70ms);
}

.kb-hero .kb-lead,
.kb-pagehead .kb-lead {
	animation: kb-fade 0.7s ease 0.5s both;
}

.kb-notice {
	animation: kb-pop 0.35s ease both;
}

/* Panels open out from their tucked-in speech-bubble corner */
.kb-hero__photo,
.kb-route,
.kb-stage,
.kb-pagehead__img,
.kb-contact__img {
	transform-origin: 100% 100%;
	transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.05);
}

.kb-route--owner,
.kb-stage {
	transform-origin: 0 100%;
}

.kb-stage--lilac {
	transform-origin: 100% 100%;
}

.kb-hero__photo {
	transition-delay: 0.25s;
}

.kb-route--vendor {
	transition-delay: 0.12s;
}

.kb-js .kb-hero__photo:not(.is-in),
.kb-js .kb-route:not(.is-in),
.kb-js .kb-stage:not(.is-in),
.kb-js .kb-pagehead__img:not(.is-in),
.kb-js .kb-contact__img:not(.is-in) {
	opacity: 0;
	transform: scale(0.93);
}

/* Steps: the line draws across, then the words follow */
.kb-steps li {
	transition: background-size 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kb-steps li::before,
.kb-steps h3,
.kb-steps p {
	transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

.kb-js .kb-steps li:not(.is-in) {
	background-size: 0 2px;
}

.kb-js .kb-steps li:not(.is-in)::before,
.kb-js .kb-steps li:not(.is-in) h3,
.kb-js .kb-steps li:not(.is-in) p {
	opacity: 0;
	transform: translateX(-14px);
}

/* Day-to-day photos wipe open */
.kb-days__img {
	transition: clip-path 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kb-days h3,
.kb-days p {
	transition: opacity 0.5s ease 0.25s;
}

.kb-days > div:nth-child(2) .kb-days__img {
	transition-delay: 0.1s;
}

.kb-days > div:nth-child(3) .kb-days__img {
	transition-delay: 0.2s;
}

.kb-js .kb-days > div:not(.is-in) .kb-days__img {
	clip-path: inset(0 0 100% 0);
}

.kb-js .kb-days > div:not(.is-in) h3,
.kb-js .kb-days > div:not(.is-in) p {
	opacity: 0;
}

.kb-closing__in > *,
.kb-quote {
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.kb-closing__in > :nth-child(2) {
	transition-delay: 0.1s;
}

.kb-closing__in > :nth-child(3) {
	transition-delay: 0.2s;
}

.kb-js .kb-closing__in:not(.is-in) > *,
.kb-js .kb-quote:not(.is-in) {
	opacity: 0;
	transform: translateY(14px);
}

/* Responses to the visitor */
.kb-chip span {
	transition: background-color 0.15s, color 0.15s, transform 0.15s;
}

.kb-chip:active span {
	transform: scale(0.97);
}

body .kb input,
body .kb textarea {
	transition: border-color 0.15s;
}

body .kb input:focus,
body .kb textarea:focus {
	border-color: var(--lilac-deep);
}

.kb-route__img {
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
	.kb-btn:hover {
		transform: translateY(-2px);
	}

	.kb-btn:active {
		transform: translateY(0);
	}

	.kb-route:hover .kb-route__img {
		transform: scale(1.05);
	}
}

@media (min-width: 769px) {
	.main-navigation .main-nav > ul > li > a {
		position: relative;
	}

	.main-navigation .main-nav > ul > li > a::after {
		background: var(--lilac-deep);
		bottom: 8px;
		content: "";
		height: 2px;
		left: 14px;
		position: absolute;
		right: 14px;
		transform: scaleX(0);
		transform-origin: 0 50%;
		transition: transform 0.25s ease;
	}

	.main-navigation .main-nav > ul > li:hover > a::after,
	.main-navigation .main-nav > ul > li:focus-within > a::after,
	.main-navigation .main-nav > ul > li[class*="current-menu-"] > a::after {
		transform: scaleX(1);
	}
}

/* Background photos drift slowly behind the content where browsers support it */
@supports (animation-timeline: view()) {
	.kb-try {
		animation: kb-drift linear both;
		animation-timeline: view();
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}