/* KargoPush — custom CSS for things core blocks/theme.json can't express. */

/* ⚠ theme.json palette slugs must never collide with a WordPress core block
   class. The body text colour is slug `ink`, NOT `text`, and renaming it back
   will silently break every coloured text element on the site.

   Why: WP generates `.has-<slug>-color { color: … !important }` for each
   palette entry. `has-text-color` is ALSO core's structural marker class,
   added to every block that sets any custom text colour. With a slug named
   `text` the two collide, so `.has-text-color{color:#0B1220!important}` and
   e.g. `.has-bg-color{color:#fff!important}` land on the same element with
   equal specificity and both `!important` — source order decides, and
   `has-text-color` is emitted later, so it wins every time. The hero H1,
   its subline and the outline buttons all rendered near-black on the blue
   gradient because of this. Same trap applies to `background`. */

/* ---------- Form controls size in border-box ----------
   This theme has no global box-sizing reset, so form fields fell back to the
   browser default of content-box: a `width: 100%` input added its padding and
   border ON TOP of the full width of its container, making every field wider
   than the box holding it. On the contact page that pushed the inputs 33px
   (28.8 padding + 4 border) past their 636px column and underneath the
   coverage map, so the right-hand edge of the phone, subject and message
   fields could not be clicked at all.

   The same bug hit the two map containers, which are `width: 100%` with a 1px
   border and so rendered 2px wider than the viewport on a 390px phone — enough
   to make the whole contact page scroll sideways.

   Scoped deliberately rather than a blanket `*, *::before, *::after` reset:
   this is a live site and other layouts here may have been built around
   content-box without anyone realising. The scope is provably complete rather
   than guessed — every rule in this file combining `width: 100%` with a
   border is listed below (the four found: both maps, and the quote and
   contact fields). If you add another such rule, add it here too. */
input,
select,
textarea,
button,
.kp-map,
.kp-coverage-map {
	box-sizing: border-box;
}

/* ---------- Typography: reference numbers ----------
   Tracking numbers, dates, and money are *reference data* — they get read
   character-by-character, compared against a printed label or an email, and
   scanned down a column. Inter's default proportional figures make digits
   different widths, so a column of amounts won't align and two tracking
   numbers can't be compared at a glance. Tabular figures fix both.

   The extra letter-spacing on tracking numbers serves the same goal as the
   Crockford Base32 alphabet the generator already uses (which excludes
   I, L, O and U precisely because they're confusable): give every character
   room so nobody misreads a number back to support. */
.kp-track-number,
.kp-track-eta,
.kp-timeline__date,
.kp-invoice-table td,
.kp-invoice-table th {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.kp-track-number {
	letter-spacing: 0.06em;
	font-weight: 700;
	white-space: nowrap;
}
/* Money columns read right-aligned so decimal points stack. */
.kp-invoice-table td:last-child,
.kp-invoice-table th:last-child { text-align: right; }

/* ---------- Header ---------- */
.kp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	box-shadow: 0 1px 0 rgba(10, 23, 48, 0.06);
	padding-top: 1rem;
	padding-bottom: 1rem;
	transition: padding 0.2s ease, box-shadow 0.2s ease;
}
.kp-header.is-condensed {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	box-shadow: 0 2px 10px rgba(10, 23, 48, 0.08);
}
.kp-header__logo img {
	display: block;
	height: 40px;
	width: auto;
}
.kp-header__nav .wp-block-navigation-item a {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.kp-header__ctas .wp-block-button__link {
	white-space: nowrap;
}

/* ---------- Hero background photo ----------
   Layered as its own element behind the existing gradient/content rather
   than swapped in as the block's background, so the gradient keeps working
   as a colour fallback and the Gutenberg gradient attribute on the group
   doesn't need touching. The gradient is repeated here (as a translucent
   wash over the photo) purely for text contrast — WCAG AA needs it, the
   source photos are real dock photography and not guaranteed dark enough
   on their own everywhere behind the headline. */
.kp-hero,
.kp-cta-band {
	position: relative;
	overflow: hidden;
	/* Light text stacked in its own compositing layer above the new photo
	   background (a sibling absolutely-positioned element) loses the solid
	   backdrop that subpixel/LCD antialiasing needs to blend against, and
	   shows faint RGB fringing on bold glyph edges. Grayscale AA sidesteps
	   that — standard fix for light text over photographic backgrounds. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* The theme's "constrained" layout support caps EVERY direct child of the
   section at the content width and centres it with auto margins (that's
   what keeps paragraphs/headings from running edge-to-edge) — including
   this div, which needs to be full-bleed instead. max-width: none defeats
   that cap so inset: 0 can size it off the section again. */
.kp-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
	margin: 0;
	background-size: cover;
	background-position: center;
	background-image:
		linear-gradient(120deg, rgba(11, 18, 32, 0.90) 0%, rgba(14, 99, 230, 0.78) 55%, rgba(11, 18, 32, 0.55) 100%),
		var(--kp-hero-photo, none);
}
.kp-hero > .wp-block-columns {
	position: relative;
	z-index: 1;
}

/* ---------- CTA band background photo ---------- */
.kp-cta-band__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
	margin: 0;
	background-size: cover;
	background-position: center;
	background-image: linear-gradient(120deg, rgba(11, 18, 32, 0.88) 0%, rgba(14, 99, 230, 0.72) 100%), var(--kp-cta-photo, none);
}
/* :not() the bg div itself — a bare `> *` here has equal specificity to
   the .kp-cta-band__bg rule above and would win on source order, flipping
   its position back to relative and collapsing it to 0 height (no content,
   auto height). Same class of bug the hero avoided by scoping to
   .wp-block-columns specifically instead of a wildcard. */
.kp-cta-band > *:not(.kp-cta-band__bg) {
	position: relative;
	z-index: 1;
}

/* ---------- About page mission photo ---------- */
.kp-about-media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(10, 23, 48, 0.15);
}

/* ---------- Hero route animation ---------- */
.kp-route-animation {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-width: 480px;
	margin: 0 auto;
}
.kp-route-animation svg { width: 100%; height: 100%; }
.kp-route-animation .kp-route-path {
	fill: none;
	stroke: rgba(255, 255, 255, 0.55);
	stroke-width: 2;
	stroke-dasharray: 6 6;
}
.kp-route-animation .kp-route-dot {
	fill: #fff;
}
.kp-route-animation .kp-route-marker {
	offset-path: path("M20,180 C120,20 300,220 420,60");
	animation: kp-route-move 6s linear infinite;
}
@keyframes kp-route-move {
	0% { offset-distance: 0%; }
	100% { offset-distance: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.kp-route-animation .kp-route-marker { animation: none; offset-distance: 50%; }
}

/* ---------- Services grid ---------- */
.kp-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
}
.kp-service-card {
	background: #fff;
	border: 1px solid rgba(10, 23, 48, 0.08);
	border-radius: 16px;
	padding: 1.75rem;
	box-shadow: 0 2px 12px rgba(10, 23, 48, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	overflow: hidden;
}
.kp-service-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(10, 23, 48, 0.1);
}
/* Bleeds the photo to the card's edges by cancelling the card's own padding
   on this one child, rather than removing padding from the card overall
   (the text below still needs it). */
.kp-service-card__media {
	margin: -1.75rem -1.75rem 1.25rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.kp-service-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.kp-service-card:hover .kp-service-card__media img {
	transform: scale(1.06);
}
.kp-service-card__icon { font-size: 1.75rem; margin-bottom: 0.75rem; }
.kp-service-card__title { font-weight: 800; margin: 0 0 0.4rem; color: var(--wp--preset--color--navy); }
.kp-service-card__desc { font-size: 0.92rem; color: var(--wp--preset--color--ink); margin: 0 0 0.75rem; }
.kp-service-card__included { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.kp-service-card__included li { padding-left: 1.2rem; position: relative; margin-bottom: 0.3rem; }
.kp-service-card__included li::before { content: "✓"; position: absolute; left: 0; color: var(--wp--preset--color--primary); font-weight: 800; }

@media (max-width: 782px) {
	.kp-services-grid { grid-template-columns: 1fr; }
}

/* ---------- Service detail list (Services page) ---------- */
.kp-service-detail-item {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 1.75rem;
	align-items: center;
	padding: 2rem 0;
	border-bottom: 1px solid rgba(10, 23, 48, 0.08);
}
.kp-service-detail-item:first-child { padding-top: 0; }
.kp-service-detail-item__icon { font-size: 2rem; }
.kp-service-detail-item__media {
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: 0 6px 18px rgba(10, 23, 48, 0.1);
}
.kp-service-detail-item__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.kp-service-detail-item__title { margin: 0 0 0.4rem; color: var(--wp--preset--color--navy); }
@media (max-width: 782px) {
	.kp-service-detail-item { grid-template-columns: 1fr; }
	.kp-service-detail-item__media { aspect-ratio: 16 / 9; }
}

/* ---------- How it works ---------- */
.kp-how__step { text-align: center; }

/* ---------- Coverage strip ---------- */
.kp-coverage-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.kp-coverage-badge {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	font-size: 0.9rem;
	font-weight: 600;
}

/* ---------- Coverage map ---------- */
.kp-coverage-map {
	width: 100%;
	height: 320px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(10, 23, 48, 0.1);
}

/* ---------- Trust bar ---------- */
.kp-trustbar-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	text-align: center;
}
.kp-trustbar-stat__num { font-size: 2rem; font-weight: 800; color: var(--wp--preset--color--primary); display: block; }
.kp-trustbar-stat__label { font-size: 0.85rem; color: var(--wp--preset--color--navy); }
@media (max-width: 782px) {
	.kp-trustbar-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Testimonials ---------- */
.kp-testimonial-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.kp-testimonial-card {
	background: var(--wp--preset--color--muted);
	border-radius: 14px;
	padding: 1.5rem;
}
.kp-testimonial-card__quote { font-style: italic; margin: 0 0 0.75rem; }
.kp-testimonial-card__author { font-weight: 700; font-size: 0.9rem; }
@media (max-width: 782px) {
	.kp-testimonial-row { grid-template-columns: 1fr; }
}

/* ---------- Track widget (compact, homepage) ---------- */
.kp-track-widget-form {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.kp-track-widget-form input {
	flex: 1;
	padding: 0.9rem 1.1rem;
	border-radius: 10px;
	border: 2px solid rgba(10, 23, 48, 0.12);
	font-size: 1rem;
}
.kp-track-widget-form button {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 0.9rem 1.6rem;
	font-weight: 700;
	cursor: pointer;
}
@media (max-width: 600px) {
	.kp-track-widget-form { flex-direction: column; }
}

/* ---------- Track console (full Track page) ---------- */
.kp-track-console-form {
	display: flex;
	gap: 0.75rem;
	max-width: 560px;
	margin: 1.5rem auto 2.5rem;
}
.kp-track-console-form input {
	flex: 1;
	padding: 0.9rem 1.1rem;
	border-radius: 10px;
	border: 2px solid rgba(10, 23, 48, 0.12);
	font-size: 1rem;
}
.kp-track-console-form button {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 0.9rem 1.6rem;
	font-weight: 700;
	cursor: pointer;
}
.kp-track-console-result { display: none; }
.kp-track-console-result.is-visible { display: block; }
.kp-track-console-state {
	text-align: center;
	padding: 2rem;
	border-radius: 14px;
	background: var(--wp--preset--color--muted);
	max-width: 560px;
	margin: 0 auto;
}

.kp-status-pill {
	display: inline-block;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9rem;
	background: var(--wp--preset--color--primary);
	color: #fff;
}
/* Per-status background color is set inline by track.js from the
   server-driven vocabulary (includes/statuses.php) — this fallback only
   applies before JS runs or if a status has no color mapped. */

.kp-track-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	background: #fff;
	border: 1px solid rgba(10, 23, 48, 0.08);
	border-radius: 14px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}
.kp-track-eta { font-size: 0.9rem; color: var(--wp--preset--color--navy); }
.kp-track-eta strong { display: block; font-size: 1.1rem; }

.kp-map {
	width: 100%;
	height: 380px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(10, 23, 48, 0.1);
	margin-bottom: 2rem;
	position: relative;
	background: var(--wp--preset--color--muted);
}
/* Map markers. MapLibre positions its marker element by its centre, so these
   need no translate() of their own (Leaflet's divIcon did). */
.kp-plane-marker__glyph {
	font-size: 22px;
	line-height: 1;
	display: inline-block;
	transform-origin: 50% 50%;
	filter: drop-shadow(0 2px 4px rgba(10, 23, 48, 0.3));
}
.kp-checkpoint-dot {
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 rgba(14, 99, 230, 0.6);
	animation: kp-pulse 2s infinite;
}
.kp-checkpoint-dot--end {
	background: var(--wp--preset--color--navy);
	animation: none;
}
.kp-coverage-dot {
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--wp--preset--color--primary-bright);
	border: 2px solid var(--wp--preset--color--primary);
	cursor: pointer;
}
@keyframes kp-pulse {
	0% { box-shadow: 0 0 0 0 rgba(14, 99, 230, 0.5); }
	70% { box-shadow: 0 0 0 10px rgba(14, 99, 230, 0); }
	100% { box-shadow: 0 0 0 0 rgba(14, 99, 230, 0); }
}

/* ---------- Shipment summary card ----------
   Sits above the timeline and answers "which parcel, going where, arriving
   when" before the customer reads a single checkpoint. */
.kp-summary {
	background: #fff;
	border: 1px solid rgba(10, 23, 48, 0.08);
	border-radius: 16px;
	padding: 1.5rem;
	box-shadow: 0 2px 12px rgba(10, 23, 48, 0.05);
	margin-bottom: 1.5rem;
}
.kp-summary__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(10, 23, 48, 0.08);
}
.kp-summary__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7a869a;
	margin-bottom: 0.3rem;
}
.kp-summary__head .kp-track-number {
	font-size: 1.15rem;
	color: var(--wp--preset--color--navy);
}
.kp-summary__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin: 1.25rem 0 0;
}
.kp-summary__cell dt {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7a869a;
	margin-bottom: 0.35rem;
}
.kp-summary__cell dd {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	line-height: 1.4;
}
/* Progress rail mirrors the map's completion estimate. Colour comes from the
   status via --kp-tone, so a held/exception shipment doesn't read as healthy
   blue progress. */
.kp-progress { margin-top: 1.5rem; }
.kp-progress__track {
	height: 6px;
	border-radius: 999px;
	background: rgba(10, 23, 48, 0.08);
	overflow: hidden;
}
.kp-progress__fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--kp-tone, var(--wp--preset--color--primary));
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 782px) {
	.kp-summary__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.kp-summary__grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---------- Shipment history ---------- */
.kp-track-history__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}
.kp-track-history__head h3 { margin: 0; }
.kp-timeline-toggle-all {
	background: none;
	border: none;
	padding: 0.25rem 0;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}
.kp-timeline-toggle-all:hover { text-decoration: underline; }

/* ---------- Timeline ----------
   The connecting line is drawn on each row via ::before rather than as a
   border on the <ol>, so it can stop cleanly at the last item and so each
   segment can be tinted by its own row's tone. */
.kp-timeline { list-style: none; margin: 0; padding: 0; }
.kp-tl__item {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 1rem;
	padding-bottom: 1.75rem;
}
.kp-tl__item::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 40px;
	bottom: 0;
	width: 2px;
	background: rgba(10, 23, 48, 0.1);
}
.kp-tl__item:last-child { padding-bottom: 0; }
.kp-tl__item:last-child::before { display: none; }

/* Node */
.kp-tl__node {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid rgba(10, 23, 48, 0.12);
	color: #7a869a;
}
.kp-tl__node svg { width: 18px; height: 18px; }
.kp-tl__node--active  { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.kp-tl__node--success { border-color: #1a9c5f; color: #1a9c5f; }
.kp-tl__node--warning { border-color: #996800; color: #996800; }
.kp-tl__node--danger  { border-color: #d64545; color: #d64545; }

/* Completed history reads as settled: the node fills in, so the eye can tell
   done-and-dusted from where-we-are-now without reading a word. */
.kp-tl__item.is-complete:not(.is-current) .kp-tl__node--active  { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff; }
.kp-tl__item.is-complete:not(.is-current) .kp-tl__node--success { background: #1a9c5f; border-color: #1a9c5f; color: #fff; }
.kp-tl__item.is-complete:not(.is-current) .kp-tl__node--neutral { background: #7a869a; border-color: #7a869a; color: #fff; }

/* Current event */
.kp-tl__node.is-current {
	width: 48px;
	height: 48px;
	border-width: 3px;
	box-shadow: 0 0 0 6px rgba(14, 99, 230, 0.1);
}
.kp-tl__node.is-current svg { width: 22px; height: 22px; }
.kp-tl__item.is-current { grid-template-columns: 48px 1fr; }
.kp-tl__item.is-current::before { left: 23px; top: 48px; }
.kp-tl__item.is-current .kp-tl__body {
	background: var(--wp--preset--color--muted);
	border: 1px solid rgba(14, 99, 230, 0.18);
	border-radius: 14px;
	padding: 1.1rem 1.25rem;
	margin-top: -0.25rem;
}
.kp-tl__item.is-current .kp-tl__title { font-size: 1.05rem; }

.kp-tl__body { min-width: 0; padding-top: 0.5rem; }
.kp-tl__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.kp-tl__title {
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	line-height: 1.3;
}
.kp-tl__badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	background: var(--kp-tone, var(--wp--preset--color--primary));
	color: #fff;
}
.kp-tl__meta {
	margin: 0.3rem 0 0;
	font-size: 0.85rem;
	color: #7a869a;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.kp-tl__loc { color: var(--wp--preset--color--navy); font-weight: 600; }
.kp-tl__toggle {
	margin-top: 0.5rem;
	background: none;
	border: none;
	padding: 0.2rem 0;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}
.kp-tl__toggle:hover { text-decoration: underline; }
.kp-tl__detail { margin-top: 0.4rem; }
.kp-tl__desc { margin: 0; font-size: 0.92rem; color: var(--wp--preset--color--ink); }
.kp-tl__empty { color: #7a869a; font-size: 0.92rem; padding: 1rem 0; }

/* Hover: whole row lifts subtly. Kept off the current event, which is already
   a raised card and would wobble. */
.kp-tl__item:not(.is-current) .kp-tl__body {
	border-radius: 12px;
	transition: background 0.15s ease;
}
.kp-tl__item:not(.is-current):hover .kp-tl__body {
	background: rgba(10, 23, 48, 0.025);
}

/* Upcoming/projected steps — muted, and deliberately carrying no timestamp
   or location, because those have not happened yet. */
.kp-timeline-projected { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dashed rgba(10, 23, 48, 0.15); }
.kp-timeline-projected__label,
.kp-timeline-projected__note {
	font-size: 0.78rem;
	color: #7a869a;
}
.kp-timeline-projected__label {
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}
.kp-timeline-projected__note { margin: 0.75rem 0 0; font-style: italic; }
.kp-tl__item--upcoming { opacity: 0.55; padding-bottom: 1.25rem; }
.kp-tl__item--upcoming::before { border-left: 2px dashed rgba(10, 23, 48, 0.18); background: none; width: 0; }
.kp-tl__item--upcoming .kp-tl__node { border-style: dashed; }

/* Entrance. Opacity/transform only (both compositor-friendly), and fully
   disabled under prefers-reduced-motion rather than merely shortened. */
@media (prefers-reduced-motion: no-preference) {
	.kp-track-console-result.is-visible .kp-tl__item {
		animation: kp-tl-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
		animation-delay: var(--kp-delay, 0ms);
	}
}
@keyframes kp-tl-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
	.kp-tl__item,
	.kp-tl__item.is-current { grid-template-columns: 32px 1fr; gap: 0.85rem; }
	.kp-tl__node { width: 32px; height: 32px; }
	.kp-tl__node svg { width: 15px; height: 15px; }
	.kp-tl__node.is-current { width: 36px; height: 36px; }
	.kp-tl__node.is-current svg { width: 17px; height: 17px; }
	.kp-tl__item::before { left: 15px; top: 32px; }
	.kp-tl__item.is-current::before { left: 17px; top: 36px; }
	.kp-tl__item.is-current .kp-tl__body { padding: 0.9rem 1rem; }
}

/* ---------- Quote calculator ---------- */
.kp-quote-form {
	background: #fff;
	border: 1px solid rgba(10, 23, 48, 0.08);
	border-radius: 16px;
	padding: 2rem;
	margin-top: 2rem;
}
.kp-quote-form fieldset { border: none; margin: 0; padding: 0; }
.kp-quote-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}
.kp-quote-grid.kp-quote-grid--wide { grid-template-columns: repeat(4, 1fr); }
.kp-quote-form label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--wp--preset--color--navy); }
.kp-quote-form select,
.kp-quote-form input {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border-radius: 8px;
	border: 2px solid rgba(10, 23, 48, 0.12);
	font-size: 0.95rem;
}
.kp-quote-estimate {
	margin-top: 1.5rem;
	padding: 1.25rem;
	border-radius: 12px;
	background: var(--wp--preset--color--muted);
	text-align: center;
	display: none;
}
.kp-quote-estimate.is-visible { display: block; }
.kp-quote-estimate__amount { font-size: 1.8rem; font-weight: 800; color: var(--wp--preset--color--primary); }
.kp-quote-estimate__disclaimer { font-size: 0.8rem; color: #7a869a; margin-top: 0.25rem; }
.kp-quote-submit-fields { margin-top: 1.5rem; display: none; }
.kp-quote-submit-fields.is-visible { display: grid; }
.kp-quote-form button[type="submit"] {
	margin-top: 1.5rem;
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 0.9rem 1.6rem;
	font-weight: 700;
	cursor: pointer;
	width: 100%;
}
.kp-form-message { margin-top: 1rem; padding: 0.9rem; border-radius: 8px; font-size: 0.9rem; display: none; }
.kp-form-message.is-visible { display: block; }
.kp-form-message.is-success { background: #e6f6ee; color: #1a9c5f; }
.kp-form-message.is-error { background: #fbe9e9; color: #b23333; }

@media (max-width: 782px) {
	.kp-quote-grid, .kp-quote-grid.kp-quote-grid--wide { grid-template-columns: 1fr; }
}

/* ---------- Contact form ---------- */
.kp-contact-form label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 0.4rem; }
.kp-contact-form input,
.kp-contact-form textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border-radius: 8px;
	border: 2px solid rgba(10, 23, 48, 0.12);
	margin-bottom: 1rem;
	font-size: 0.95rem;
}
.kp-contact-form button[type="submit"] {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 0.9rem 1.6rem;
	font-weight: 700;
	cursor: pointer;
}
.kp-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- FAQ accordion ---------- */
.kp-faq-item {
	border-bottom: 1px solid rgba(10, 23, 48, 0.1);
}
.kp-faq-question {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 1.25rem 2rem 1.25rem 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	position: relative;
}
.kp-faq-question::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 1.1rem;
	font-size: 1.4rem;
	color: var(--wp--preset--color--primary);
	transition: transform 0.2s ease;
}
.kp-faq-item.is-open .kp-faq-question::after { transform: rotate(45deg); }
.kp-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
}
.kp-faq-answer p { padding-bottom: 1.25rem; margin: 0; }
.kp-faq-item.is-open .kp-faq-answer { max-height: 500px; }

/* ---------- Invoice ---------- */
.kp-invoice-box {
	background: #fff;
	border: 1px solid rgba(10, 23, 48, 0.1);
	border-radius: 16px;
	padding: 2rem;
}
.kp-invoice-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.kp-invoice-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.kp-invoice-table th, .kp-invoice-table td { text-align: left; padding: 0.75rem; border-bottom: 1px solid rgba(10, 23, 48, 0.08); font-size: 0.92rem; }
.kp-invoice-table tfoot td { font-weight: 800; border-bottom: none; }
.kp-invoice-bank { background: var(--wp--preset--color--muted); border-radius: 10px; padding: 1.25rem; margin-top: 1.5rem; font-size: 0.9rem; }
.kp-invoice-paid-badge { background: #1a9c5f; color: #fff; padding: 0.3rem 0.9rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; }
.kp-invoice-unpaid-badge { background: #d64545; color: #fff; padding: 0.3rem 0.9rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; }
.kp-invoice-partial-badge { background: #e2a13a; color: #fff; padding: 0.3rem 0.9rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; }

/* ---------- Footer ---------- */
.kp-footer__trustbar { font-size: 0.85rem; color: var(--wp--preset--color--silver); }
.kp-footer__small { opacity: 0.7; }

/* ---------- Focus states / a11y ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-bright);
	outline-offset: 2px;
}