/* =============================================================================
   Kashi Core — module styles

   Loaded only on pages that actually render one of these modules.

   01. Before / after comparison slider   (Kashi Project Detail.dc.html)
   02. Pull-quote and checklist shortcodes (Kashi Blog Post.dc.html)

   Every declaration is the verbatim literal from the design source. Colour
   literals are swapped for the --kashi-* token whose default IS that literal;
   nothing else is substituted, rounded or merged. There are no media queries in
   the design and none are added here.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   01. Before / after
   -------------------------------------------------------------------------- */

.k-ba-stack {
	max-width: 1440px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(34px, 4vw, 56px);
}

.k-ba__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	margin-bottom: 16px;
}

.k-ba__title {
	font-family: var(--kashi-font-display);
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 500;
	margin: 0;
}

.k-ba__note {
	font-size: 13.5px;
	color: var(--kashi-text-dim);
	font-weight: 300;
}

/* `touch-action:none` is LOAD-BEARING. Without it the browser claims horizontal
   drags for panning and the divider simply will not move on a touch screen —
   pointermove stops firing the moment the gesture is recognised as a scroll. */
.k-ba__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	border-radius: 6px;
	background: var(--kashi-navy-deep);
	user-select: none;
	touch-action: none;
	cursor: ew-resize;

	/* The divider position. Defaults to 50% so a JS-free page renders a static
	   50/50 split rather than a fully-covered "before". The inline style on the
	   element overrides this with the admin's own start position. */
	--p: 50%;
}

/* `max-width:none` is LOAD-BEARING. Themes and Elementor both ship a global
   `img{max-width:100%}`; combined with the clipping wrapper that would shrink
   the "before" photograph to the visible sliver and squash it. This is the whole
   reason the design measured a pixel `frameW` — declaring it away is what lets
   the port drop the measurement JS entirely. */
.k-ba__after,
.k-ba__before {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

/* The clip is a pure window: the image inside keeps full frame geometry at all
   times, so no position of the divider can distort it. This reproduces the
   design's frameW trick declaratively. */
.k-ba__clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	clip-path: inset(0 calc(100% - var(--p)) 0 0);
}

.k-ba__tag {
	position: absolute;
	top: 16px;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 999px;
}

/* The blur is on the Before pill only — the design is deliberately asymmetric. */
.k-ba__tag--before {
	left: 16px;
	background: rgba(10, 26, 49, 0.72);
	color: var(--kashi-white);
	backdrop-filter: blur(6px);
}

.k-ba__tag--after {
	right: 16px;
	background: rgba(201, 169, 110, 0.9);
	color: var(--kashi-navy-deep);
}

.k-ba__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--p);
	width: 2px;
	background: var(--kashi-shell);
	transform: translateX(-1px);
	box-shadow: var(--kashi-shadow-divider);
	pointer-events: none;
}

.k-ba__knob {
	position: absolute;
	top: 50%;
	left: var(--p);
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--kashi-shell);
	border: 1px solid var(--kashi-hairline-strong);
	box-shadow: var(--kashi-shadow-knob);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1px;
	color: var(--kashi-navy);
	pointer-events: none;
}

/* Invisible, but focusable and screen-reader-addressable: it is the entire
   keyboard and assistive-tech surface of the control. */
.k-ba__range {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	margin: 0;
	opacity: 0;
}

/* NET-NEW: the design has no keyboard path at all, so an opacity:0 control would
   be an invisible focus stop. Pairing :focus-visible with the design's :hover-less
   control is the accessibility floor agreed for the build. */
.k-ba__range:focus-visible {
	outline: 2px solid var(--kashi-gold);
	outline-offset: 2px;
	opacity: 1;
	height: 24px;
	bottom: 8px;
	accent-color: var(--kashi-gold);
}

/* The three range rules, verbatim from the design source. The transparent thumb
   is what lets the painted .k-ba__knob stand in for it at exactly 46px. */
input[type=range].kashi-slider {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: ew-resize;
}

input[type=range].kashi-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: transparent;
	cursor: ew-resize;
}

input[type=range].kashi-slider::-moz-range-thumb {
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 999px;
	background: transparent;
	cursor: ew-resize;
}

/* -----------------------------------------------------------------------------
   02. [kashi_quote] and [kashi_checklist]
   Copied from the Blog Post design's pull-quote and checklist.
   -------------------------------------------------------------------------- */

.k-quote {
	border-left: 2px solid var(--kashi-gold);
	padding: 4px 0 4px 22px;
	margin: 0 0 28px;
}

.k-quote__text {
	font-family: var(--kashi-font-display);
	font-style: italic;
	font-size: clamp(17px, 1.7vw, 21px);
	line-height: 1.65;
	color: var(--kashi-navy);
	margin: 0;
}

.k-checklist {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 28px;
}

.k-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--kashi-text-muted);
	font-weight: 300;
}

/* The 5px nudge is the design's, and it is what puts the tick on the cap-height
   of the first line rather than its ascender. */
.k-checklist__item svg {
	width: 17px;
	height: 17px;
	color: var(--kashi-gold);
	flex: none;
	margin-top: 5px;
}

/* -----------------------------------------------------------------------------
   03. Inline contact shortcodes
   No design source: these are inline text helpers, so they inherit everything
   and only the social chips carry geometry — copied from the footer's chips.
   -------------------------------------------------------------------------- */

.k-socials {
	display: flex;
	align-items: center;
	gap: 9px;
}

.k-socials__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--kashi-gold);
	color: var(--kashi-navy-deep);
	/* Not --kashi-pill. That token is `all .25s ease`, which the design never
	   declares here and which would also animate the focus ring added below.
	   The design's chip changes background on hover and nothing else. */
	transition: background .25s ease, color .25s ease;
}

.k-socials__link:hover {
	background: var(--kashi-white);
	color: var(--kashi-navy-deep);
}

/* NET-NEW: focus parity with the hover the design does define. */
.k-socials__link:focus-visible {
	outline: 2px solid var(--kashi-gold);
	outline-offset: 2px;
}

.k-map__frame {
	border: 1px solid var(--kashi-hairline-strong);
	border-radius: 3px;
	overflow: hidden;
}

.k-map__frame iframe {
	width: 100%;
	height: clamp(240px, 26vw, 340px);
	border: 0;
	display: block;
}