/* Karvaan popups. Colours, radius, font and width arrive as custom properties on each popup. */
.karvaan-popup {
	--kp-bg: #ece3d3; --kp-text: #1a1814; --kp-accent: #bc4119; --kp-on-accent: #fff; --kp-radius: 20px;
	--kp-font: Georgia, "Times New Roman", serif; --kp-overlay: rgba(26, 24, 20, .55); --kp-width: 560px;
	--kp-line: color-mix(in srgb, var(--kp-text) 18%, transparent);
	--kp-soft: color-mix(in srgb, var(--kp-text) 72%, var(--kp-bg));
	--kp-gap: 20px;
	position: fixed; inset: 0; z-index: 99990;
	display: flex; box-sizing: border-box; padding: var(--kp-gap);
	pointer-events: none;
	font-family: Arial, Helvetica, sans-serif;
}
.karvaan-popup *, .karvaan-popup *::before, .karvaan-popup *::after { box-sizing: border-box; }
.karvaan-popup[hidden] { display: none !important; }
html.kp-lock { overflow: hidden; }

/* Position: slide-ins and bars never block the page; only modals capture clicks. */
.kp-pos-center { align-items: center; justify-content: center; }
.kp-pos-bottom-right { align-items: flex-end; justify-content: flex-end; }
.kp-pos-bottom-left { align-items: flex-end; justify-content: flex-start; }
.kp-pos-bottom-center { align-items: flex-end; justify-content: center; }
.kp-pos-top-right { align-items: flex-start; justify-content: flex-end; }
.kp-pos-top-left { align-items: flex-start; justify-content: flex-start; }
.kp-pos-top-center { align-items: flex-start; justify-content: center; }
.kp-pos-center-right { align-items: center; justify-content: flex-end; }
.kp-pos-center-left { align-items: center; justify-content: flex-start; }
.kp-pos-bottom { align-items: flex-end; justify-content: center; }
.kp-pos-top { align-items: flex-start; justify-content: center; }
.kp-layout-modal, .kp-layout-fullscreen { pointer-events: auto; }

.karvaan-popup .kp-overlay { position: absolute; inset: 0; background: var(--kp-overlay); opacity: 0; transition: opacity .28s ease; }
.karvaan-popup.is-open .kp-overlay { opacity: 1; }

.karvaan-popup .kp-box {
	position: relative; width: min(100%, var(--kp-width));
	max-height: calc(100vh - 2 * var(--kp-gap)); max-height: calc(100dvh - 2 * var(--kp-gap));
	overflow: auto; overscroll-behavior: contain;
	padding: clamp(24px, 4vw, 36px);
	background: var(--kp-bg); color: var(--kp-text);
	border-radius: var(--kp-radius);
	box-shadow: 0 24px 60px rgba(26, 24, 20, .28);
	outline: 0; pointer-events: auto;
	opacity: 0; transform: var(--kp-from, none);
	transition: opacity .28s ease, transform .28s ease;
}
.karvaan-popup.is-open .kp-box { opacity: 1; transform: none; }

/* Opening animations. Slide moves in from the edge the popup sits on. */
.kp-anim-slide .kp-box { --kp-from: translateY(36px); }
.kp-anim-slide.kp-pos-bottom-right .kp-box { --kp-from: translate(14px, 36px); }
.kp-anim-slide.kp-pos-bottom-left .kp-box { --kp-from: translate(-14px, 36px); }
.kp-anim-slide[class*="kp-pos-top"] .kp-box { --kp-from: translateY(-28px); }
.kp-anim-slide.kp-pos-center-right .kp-box { --kp-from: translateX(28px); }
.kp-anim-slide.kp-pos-center-left .kp-box { --kp-from: translateX(-28px); }
.kp-anim-zoom .kp-box { --kp-from: scale(.94); }
.kp-anim-none .kp-box, .kp-anim-none .kp-overlay { transition: none; }

/* Bar: full-width strip, content on one row where there is room. */
.kp-layout-bar { padding: 0; }
.kp-layout-bar .kp-box { width: 100%; border-radius: 0; padding: 16px clamp(52px, 6vw, 72px) 16px clamp(20px, 4vw, 40px); box-shadow: 0 -8px 30px rgba(26, 24, 20, .18); }
.kp-layout-bar.kp-pos-top .kp-box { box-shadow: 0 8px 30px rgba(26, 24, 20, .18); }
.kp-layout-bar .kp-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; max-width: 1200px; margin: 0 auto; }
.kp-layout-bar .kp-content > * { margin: 0; }
.kp-layout-bar .kp-content :is(h1, h2, h3, h4) { font-size: clamp(18px, 2vw, 22px); }
.kp-layout-bar .kp-content p { font-size: 16px; }
.kp-layout-bar .kp-close { top: 50%; right: 14px; transform: translateY(-50%); }

/* Fullscreen: the box fills the screen and centres a readable column. */
.kp-layout-fullscreen { padding: 0; }
.kp-layout-fullscreen .kp-box { width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.kp-layout-fullscreen .kp-content { width: 100%; max-width: 720px; }

/* Close button */
.karvaan-popup .kp-close {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; min-width: 0; min-height: 0; margin: 0; padding: 0;
	border: 0; border-radius: 50%; box-shadow: none;
	background: color-mix(in srgb, var(--kp-text) 10%, transparent); color: var(--kp-text);
	cursor: pointer; line-height: 1; transition: background .15s;
}
.karvaan-popup .kp-close:hover { background: color-mix(in srgb, var(--kp-text) 20%, transparent); color: var(--kp-text); }
.karvaan-popup .kp-close:focus-visible { outline: 3px solid var(--kp-text); outline-offset: 2px; }
.karvaan-popup .kp-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.kp-has-close.kp-layout-modal .kp-content > :is(h1, h2, h3, h4, h5, h6),
.kp-has-close.kp-layout-slide-in .kp-content > :is(h1, h2, h3, h4, h5, h6) { padding-right: 36px; }

/* Content: block output styled to match the donation box and article cards. */
.karvaan-popup .kp-content { font: 400 17px/1.6 var(--kp-font); color: var(--kp-text); overflow-wrap: break-word; }
.karvaan-popup .kp-content > :first-child { margin-top: 0; }
.karvaan-popup .kp-content > :last-child { margin-bottom: 0; }
.karvaan-popup .kp-content :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 12px; font-family: var(--kp-font); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--kp-text); }
.karvaan-popup .kp-content h1, .karvaan-popup .kp-content h2 { font-size: clamp(26px, 3.4vw, 34px); }
.karvaan-popup .kp-content h3 { font-size: clamp(22px, 2.8vw, 28px); }
.karvaan-popup .kp-content h4 { font-size: 20px; }
.karvaan-popup .kp-content p { margin: 0 0 16px; font: inherit; color: inherit; }
.karvaan-popup .kp-content img, .karvaan-popup .kp-content video, .karvaan-popup .kp-content iframe { max-width: 100%; height: auto; }
.karvaan-popup .kp-content img { border-radius: calc(var(--kp-radius) * .6); }
.karvaan-popup .kp-content a:not(.wp-element-button):not(.karvaan-popup-button) { color: var(--kp-accent); text-decoration: underline; text-underline-offset: 2px; }

/* Buttons: core Button blocks, the shortcode button and plain form buttons share the donation box's button. */
.karvaan-popup .kp-content .wp-block-buttons { gap: 10px; margin: 0 0 16px; }
.karvaan-popup .kp-content .wp-block-button__link,
.karvaan-popup .kp-content button[type="submit"],
.karvaan-popup .kp-content input[type="submit"],
.karvaan-popup-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 4px;
	min-height: 54px; padding: 0 28px; margin: 0;
	border: 0; border-radius: calc(var(--kp-radius, 20px) * .6);
	background: var(--kp-accent, #bc4119); color: var(--kp-on-accent, #fff);
	font: 700 17px/1 Arial, Helvetica, sans-serif; letter-spacing: 0; text-transform: none; text-decoration: none;
	box-shadow: none; cursor: pointer; transition: filter .15s, background .15s, color .15s;
}
.karvaan-popup .kp-content .wp-block-button__link:hover,
.karvaan-popup .kp-content button[type="submit"]:hover,
.karvaan-popup .kp-content input[type="submit"]:hover,
.karvaan-popup-button:hover { filter: brightness(.92); color: var(--kp-on-accent, #fff); }
.karvaan-popup .kp-content .is-style-outline > .wp-block-button__link { background: transparent; color: var(--kp-accent); box-shadow: inset 0 0 0 2px var(--kp-accent); }
.karvaan-popup .kp-content .is-style-outline > .wp-block-button__link:hover { background: var(--kp-accent); color: var(--kp-on-accent); filter: none; }
.karvaan-popup .kp-content .wp-block-button__link:focus-visible,
.karvaan-popup-button:focus-visible { outline: 3px solid var(--kp-text, #1a1814); outline-offset: 3px; }
/* Optional arrow, as on the donation button: give the button block the "kp-arrow" class. */
.karvaan-popup .kp-content .kp-arrow > .wp-block-button__link::after { content: "\2192"; margin-left: 6px; }
.karvaan-popup-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Small uppercase pill above a heading: add the "kp-label" class to a paragraph. */
.karvaan-popup .kp-content p.kp-label { display: inline-block; margin: 0 0 14px; padding: 7px 14px; border-radius: 999px; background: var(--kp-accent); color: var(--kp-on-accent); font: 700 11px/1.2 Arial, Helvetica, sans-serif; letter-spacing: .08em; text-transform: uppercase; }

/* Form fields (newsletter and similar blocks) */
.karvaan-popup .kp-content :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
	width: 100%; min-height: 48px; padding: 0 14px; background: #fff; color: #1a1814;
	border: 1.5px solid var(--kp-line); border-radius: calc(var(--kp-radius) * .5);
	font: 400 16px/1.2 Arial, Helvetica, sans-serif;
}
.karvaan-popup .kp-content textarea { padding: 12px 14px; min-height: 96px; }
.karvaan-popup .kp-content :is(input, textarea, select):focus { outline: 3px solid color-mix(in srgb, var(--kp-accent) 45%, transparent); outline-offset: 1px; border-color: var(--kp-accent); }

/* Slide-in: a roomy card, with the picture beside the text. */
.karvaan-popup.kp-layout-slide-in .kp-box { padding: 30px 32px 30px 30px; box-shadow: 0 22px 50px rgba(26, 24, 20, .20), 0 2px 8px rgba(26, 24, 20, .08); }
.karvaan-popup.kp-layout-slide-in .kp-content { font-size: 16px; line-height: 1.6; }
.karvaan-popup.kp-layout-slide-in .kp-content :is(h1, h2, h3, h4, h5, h6) { margin-bottom: 10px; font-size: clamp(24px, 2.2vw, 28px); line-height: 1.15; }
.karvaan-popup.kp-layout-slide-in .kp-content p { margin-bottom: 20px; }
.karvaan-popup.kp-layout-slide-in .kp-content p.kp-label { margin-bottom: 14px; }
.karvaan-popup.kp-layout-slide-in .kp-content .wp-block-buttons { margin-bottom: 0; }
.karvaan-popup.kp-layout-slide-in .kp-close { top: 14px; right: 14px; width: 32px; height: 32px; }
.karvaan-popup.kp-layout-slide-in .kp-close svg { width: 13px; height: 13px; }
.karvaan-popup.kp-layout-slide-in.kp-has-close .wp-block-media-text__content > :is(h1, h2, h3, h4, h5, h6) { padding-right: 36px; }

/* Picture-and-text blocks stay side by side, even on phones. */
.karvaan-popup .kp-content .wp-block-media-text { align-items: center; column-gap: 22px; margin: 0; }
.karvaan-popup .kp-content .wp-block-media-text__content { padding: 0; }
.karvaan-popup .kp-content .wp-block-media-text__content > :last-child { margin-bottom: 0; }
.karvaan-popup .kp-content .wp-block-media-text__media { margin: 0; }
.karvaan-popup .kp-content .wp-block-media-text__media img { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(26, 24, 20, .18)); }
.karvaan-popup .kp-content .wp-block-media-text:has(> .wp-block-media-text__media:empty) { display: block; }
.karvaan-popup .kp-content .wp-block-media-text__media:empty { display: none; }

@media (max-width: 640px) {
	.karvaan-popup { --kp-gap: 12px; }
	.karvaan-popup .kp-box { max-height: calc(100vh - 2 * var(--kp-gap)); max-height: calc(100dvh - 2 * var(--kp-gap)); }
	.kp-layout-bar .kp-content { flex-direction: column; gap: 10px; text-align: center; }
	.kp-layout-bar .kp-box { padding-left: 20px; padding-right: 52px; }
	.kp-pos-bottom-center, .kp-pos-top-center, .kp-pos-center-left, .kp-pos-center-right, .kp-pos-bottom-left, .kp-pos-top-left, .kp-pos-bottom-right, .kp-pos-top-right { justify-content: center; }
	.kp-layout-slide-in { padding-bottom: calc(var(--kp-gap) + env(safe-area-inset-bottom, 0px)); }
	.karvaan-popup.kp-layout-slide-in .kp-box { width: 100%; padding: 22px 22px 22px 20px; }
	.karvaan-popup.kp-layout-slide-in .kp-content :is(h1, h2, h3, h4, h5, h6) { font-size: 22px; }
	.karvaan-popup.kp-layout-slide-in .kp-content .wp-block-button__link { min-height: 48px; padding: 0 22px; font-size: 16px; }
	/* Buttons span the card on phones: easier to tap, and several stack neatly. */
	.karvaan-popup .kp-content .wp-block-buttons { display: block; }
	.karvaan-popup .kp-content .wp-block-buttons > .wp-block-button { display: block; width: 100%; margin: 0 0 10px; }
	.karvaan-popup .kp-content .wp-block-buttons > .wp-block-button:last-child { margin-bottom: 0; }
	.karvaan-popup .kp-content .wp-block-buttons > .wp-block-button > .wp-block-button__link { display: flex; width: 100%; }
	.kp-anim-slide[class*="kp-layout-slide-in"][class*="kp-pos-bottom"] .kp-box { --kp-from: translateY(60px); }
}

/* The live editor swaps markup without replaying the opening animation. */
.karvaan-popup.kp-instant .kp-box, .karvaan-popup.kp-instant .kp-overlay { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
	.karvaan-popup .kp-box, .karvaan-popup .kp-overlay, .karvaan-popup .kp-close { transition: none; }
}