/* Homepage sections (patterns/home-*.php), the part finder (inc/finder.php) and the live sections (inc/sections.php).
   Loaded after style.css; colours, fonts and --jkd-* variables come from there. Owner: homepage.

   Sections, top to bottom: hero, finder, trust, types, arrivals, origins, confidence (home-listing), steps,
   delivery, garages, faq, call. Sections redesigned in round 3 (2026-10-25) are styled in their own
   assets/css/home-<section>.css, loaded after this file. Icons and photos live in assets/home/.

   Sizes are fluid (clamp) so the page reads the same at 1024, 1440, 1920 and 2560: the content column is
   1440px (1600px from 1800px wide, 1920px from 2200px, see style.css) and type, spacing and art grow with the viewport.
   Phones come last (max-width: 781px, the block editor's own breakpoint). */

:root {
	--jkd-gap: clamp(40px, 4vw, 88px);                 /* between sections */
	--jkd-band-pad: clamp(40px, 4.4vw, 96px);          /* inside full-width bands */
	--jkd-h1: clamp(32px, 2.4vw + 22px, 72px);
	--jkd-h2: clamp(24px, 1.1vw + 14px, 40px);
	--jkd-h3: clamp(18px, .5vw + 13px, 24px);
	--jkd-fs: clamp(14px, .25vw + 11.5px, 17px);       /* section text */
	--jkd-fs-sm: clamp(12px, .2vw + 10px, 14.5px);     /* notes, meta */
	--jkd-btn-fs: clamp(13px, .25vw + 10px, 15px);
	--jkd-pad: clamp(16px, 1.4vw, 30px);               /* inside cards */
	--jkd-col-gap: clamp(10px, 1vw, 20px);             /* between cards */
	--jkd-icon: clamp(22px, 1.3vw, 30px);
	--jkd-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------------ Rhythm */
.home .single-content > .jkd-sec { margin-top: var(--jkd-gap); margin-bottom: 0; }
.home .single-content > .jkd-hero { margin-top: 0; }
.home .single-content > .jkd-finder { margin-top: calc(-1 * clamp(64px, 5vw, 96px)); }
.home .single-content > .jkd-band + .jkd-band { margin-top: 0; }

/* Full-width bands keep their content on the same axis as the logo and the rest of the page. */
.jkd-band,
.jkd-hero { padding: var(--jkd-band-pad) 0; }
.jkd-band > .wp-block-group__inner-container,
.jkd-hero > .wp-block-group__inner-container {
	max-width: var(--global-content-width, 1440px);
	margin-inline: auto;
	padding-inline: var(--global-content-edge-padding, 1.5rem);
}

/* Section head: title on the left, link or note on the right, same baseline.
   (Kadence gives every p and group a 2rem bottom margin; the .jkd-sec prefix outranks that.) */
.jkd-sec .jkd-head { margin-bottom: clamp(18px, 1.6vw, 30px); row-gap: 6px; column-gap: 24px; }
.jkd-sec .jkd-head h2 { margin: 0; font-size: var(--jkd-h2); line-height: 1; text-transform: uppercase; }
.jkd-sec .jkd-head__note { margin: 0; font-size: var(--jkd-fs); color: var(--jkd-muted); }
.jkd-sec .jkd-more { margin: 0; font-size: var(--jkd-fs); font-weight: 600; line-height: 1; }
.jkd-more a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 15px 0; /* a 44px tap target without moving the text */
	margin: -15px 0;
	color: var(--jkd-red);
	text-decoration: none;
}
.jkd-more a::after {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background: url(../home/icon-arrow.svg) center / contain no-repeat;
	transition: transform .25s var(--jkd-ease);
}
.jkd-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jkd-more a:hover::after { transform: translateX(3px); }

.jkd-sec .jkd-kicker {
	margin: 0;
	font: 700 clamp(12px, .2vw + 10px, 15px)/1 var(--jkd-display);
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--jkd-red);
}

/* Focus rings for keyboards: red, outside the element, on every control the homepage draws */
.home .entry-content :is(a, button, input, select, summary):focus-visible {
	outline: 2px solid var(--jkd-red);
	outline-offset: 3px;
	box-shadow: none;
}

/* ------------------------------------------------------------------ Buttons (.jkd-cta wraps a core button) */
.jkd-cta .wp-block-button__link {
	border-radius: 4px;
	font-weight: 700;
	font-size: var(--jkd-btn-fs);
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: clamp(15px, 1vw, 21px) clamp(20px, 1.6vw, 32px);
	transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--jkd-ease);
}
.jkd-cta .wp-block-button__link:hover { transform: translateY(-1px); }
.jkd-cta--line .wp-block-button__link {
	background: transparent;
	border: 1.5px solid #fff;
	color: #fff;
}
.jkd-cta--line .wp-block-button__link:hover { background: #fff; color: var(--jkd-black); }
.jkd-cta--black .wp-block-button__link { background: var(--jkd-black); color: #fff; }
.jkd-cta--black .wp-block-button__link:hover { background: #000; color: #fff; }

/* ------------------------------------------------------------------ Finder */
.jkd-finder {
	position: relative;
	z-index: 2;
	background: #fff;
	border: 1px solid var(--jkd-line);
	border-radius: var(--jkd-radius);
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .35);
	padding: clamp(20px, 1.6vw, 30px) clamp(20px, 1.6vw, 30px) clamp(18px, 1.4vw, 26px);
}
.jkd-finder h2 {
	margin: 0 0 clamp(12px, .9vw, 16px);
	font-size: clamp(16px, .4vw + 11px, 22px);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.jkd-finder__form {
	display: grid;
	grid-template-columns: 2fr 1fr auto;
	gap: var(--jkd-col-gap);
}
/* Each field is one box: the small label sits over the top of the input, the input itself is the whole box */
.jkd-finder__field {
	--field-h: clamp(56px, 3.4vw, 72px);
	position: relative;
	display: block;
	min-height: var(--field-h);
	border: 1px solid var(--jkd-line);
	border-radius: 6px;
	padding: 0;
	background: #fff;
	cursor: text;
	transition: border-color .2s, box-shadow .2s;
}
.jkd-finder__field--select { cursor: pointer; }
.jkd-finder__field:hover { border-color: var(--jkd-muted); }
.jkd-finder__field:focus-within {
	border-color: var(--jkd-red);
	box-shadow: 0 0 0 3px rgba(214, 31, 43, .18);
}
.jkd-finder__field::after {
	content: "";
	position: absolute;
	right: clamp(14px, 1vw, 20px);
	top: 50%;
	width: clamp(20px, 1.2vw, 24px);
	height: clamp(20px, 1.2vw, 24px);
	transform: translateY(-50%);
	background: url(../home/icon-search.svg) center / contain no-repeat;
	pointer-events: none;
}
.jkd-finder__field--select::after { background-image: url(../home/icon-chevron.svg); }
.jkd-finder__field span {
	position: absolute;
	top: clamp(10px, .7vw, 14px);
	left: clamp(14px, 1vw, 20px);
	font-size: clamp(11px, .2vw + 8.5px, 13px);
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jkd-muted);
	pointer-events: none;
}
.jkd-finder__field input,
.jkd-finder__field select {
	display: block;
	width: 100%;
	height: calc(var(--field-h) - 2px);
	border: 0;
	border-radius: 6px;
	padding: clamp(20px, 1.3vw, 28px) clamp(44px, 3vw, 56px) 0 clamp(14px, 1vw, 20px);
	margin: 0;
	background: transparent;
	font-weight: 700;
	font-size: clamp(16px, .35vw + 11.5px, 20px);
	line-height: 1.3;
	color: var(--jkd-text);
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}
.jkd-finder__field select { cursor: pointer; }
.jkd-finder__field input:focus,
.jkd-finder__field select:focus { outline: none; box-shadow: none; }
.jkd-finder__field input::placeholder { color: var(--jkd-muted); font-weight: 500; }
.jkd-finder__field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.jkd-finder__form > button {
	min-width: clamp(150px, 11vw, 200px);
	border: 0;
	border-radius: 4px;
	background: var(--jkd-red);
	color: #fff;
	font-weight: 700;
	font-size: var(--jkd-btn-fs);
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 0 28px;
	cursor: pointer;
	transition: background-color .2s;
}
.jkd-finder__form > button:hover { background: var(--global-palette2, #b0141f); }

/* Popular codes: a label, then a row of small links */
.jkd-finder .jkd-codes { gap: 8px 12px; }
.jkd-finder .jkd-codes { margin-top: clamp(14px, 1vw, 20px); }
.jkd-sec .jkd-codes__label { margin: 0; font-size: var(--jkd-fs-sm); color: var(--jkd-muted); }
.jkd-finder .jkd-chips { gap: 8px; }
.jkd-chip .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: clamp(36px, 2.2vw, 44px);
	padding: 0 clamp(14px, 1vw, 20px);
	border-radius: 999px;
	line-height: 1;
	transition: background-color .2s, color .2s, border-color .2s;
}
.jkd-chip .wp-block-button__link {
	background: var(--jkd-grey);
	color: var(--jkd-text);
	font: 700 clamp(13.5px, .25vw + 10px, 16px)/1 var(--jkd-display);
	letter-spacing: .04em;
}
.jkd-chip .wp-block-button__link:hover { background: var(--jkd-black); color: #fff; }

/* ------------------------------------------------------------------ Phones and small tablets */
@media (max-width: 781px) {
	/* Everything tappable is at least 44px tall */
	.jkd-cta .wp-block-button__link { padding: 15px 20px; min-height: 48px; }
	.jkd-chip .wp-block-button__link { min-height: 44px; padding: 0 16px; }
	.jkd-codes__label { flex-basis: 100%; }

	/* Finder: one field per row, full-width button */
	.jkd-finder { padding: 18px 16px 16px; }
	.jkd-finder__form { grid-template-columns: 1fr; gap: 8px; }
	.jkd-finder__form > button { min-height: 50px; padding: 0 16px; }


}