/* =============================================================
   CHE — Cookie consent
   Follows the live site: Montserrat headings and pill buttons in
   the theme green (#55754A), museo-sans body copy in #465A5A,
   the warm #F5F1ED surface from the Elementor palette.

   Deliberately compact: it is secondary UI and shouldn't compete
   with the page. Everything is scoped under #che-cc — Hello
   Elementor's reset styles every <button> pink (#c36) on hover
   and focus, and the ID keeps these rules ahead of it without
   !important.
   ============================================================= */

#che-cc {
	--che-cc-green: #55754a;
	--che-cc-green-dark: #445e3b;
	--che-cc-heading: #5b7e49;
	--che-cc-ink: #34482e;
	--che-cc-text: #465a5a;
	--che-cc-muted: #5f6f6f;
	--che-cc-surface: #f5f1ed;
	--che-cc-line: rgba(70, 90, 90, .14);
	--che-cc-focus: #146f50;
	--che-cc-switch-off: #7d8984;
	--che-cc-shadow: 0 14px 40px rgba(32, 48, 23, .14), 0 2px 8px rgba(32, 48, 23, .06);
	--che-cc-font-ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--che-cc-font-body: "museo-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--che-cc-ease: cubic-bezier(.2, .8, .2, 1);
}

#che-cc [hidden] {
	display: none !important;
}

#che-cc *,
#che-cc *::before,
#che-cc *::after {
	box-sizing: border-box;
}

#che-cc p {
	margin: 0;
}

/* ---------- buttons (also used by Calendly placeholders outside #che-cc) ---------- */

#che-cc .che-cc-btn,
.che-cc-embed .che-cc-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 0;
	padding: 8px 20px;
	border: 2px solid var(--che-cc-green, #55754a);
	border-radius: 30px;
	background: var(--che-cc-green, #55754a);
	box-shadow: none;
	color: #fff;
	font: 600 14px/1.2 var(--che-cc-font-ui, "Montserrat", sans-serif);
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

#che-cc .che-cc-btn:hover,
.che-cc-embed .che-cc-btn:hover {
	border-color: var(--che-cc-green-dark, #445e3b);
	background: var(--che-cc-green-dark, #445e3b);
	color: #fff;
}

#che-cc .che-cc-btn:active,
.che-cc-embed .che-cc-btn:active {
	transform: translateY(1px);
}

#che-cc .che-cc-btn--outline,
.che-cc-embed .che-cc-btn--outline {
	background: transparent;
	color: var(--che-cc-green, #55754a);
}

#che-cc .che-cc-btn--outline:hover,
.che-cc-embed .che-cc-btn--outline:hover {
	background: var(--che-cc-surface, #f5f1ed);
	color: var(--che-cc-green-dark, #445e3b);
}

/* No border, so the label sits exactly its left padding (12px) in from the
   edge — the -12px margins further down rely on that to line it up with
   the text above it. */
#che-cc .che-cc-btn--text {
	padding: 8px 12px;
	border: 0;
	background: transparent;
	color: var(--che-cc-green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

#che-cc .che-cc-btn--text:hover {
	background: var(--che-cc-surface);
	color: var(--che-cc-green-dark);
}

#che-cc button:focus,
#che-cc a:focus,
.che-cc-embed .che-cc-btn:focus {
	outline: none;
}

#che-cc button:focus-visible,
#che-cc a:focus-visible,
#che-cc [tabindex]:focus-visible,
.che-cc-embed .che-cc-btn:focus-visible {
	outline: 3px solid var(--che-cc-focus, #146f50);
	outline-offset: 3px;
}

/* ---------- first layer: the banner ---------- */

#che-cc .che-cc-banner {
	position: fixed;
	z-index: 2147483000;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	left: 16px;
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px 20px;
	border: 1px solid var(--che-cc-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--che-cc-shadow);
	color: var(--che-cc-text);
	font: 400 14px/1.5 var(--che-cc-font-body);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .35s ease, transform .45s var(--che-cc-ease);
}

#che-cc .che-cc-banner.is-visible {
	opacity: 1;
	transform: none;
}

#che-cc .che-cc-banner__text {
	flex: 1 1 auto;
	min-width: 0;
}

#che-cc .che-cc-banner__title {
	margin-bottom: 2px;
	color: var(--che-cc-heading);
	font: 700 15px/1.35 var(--che-cc-font-ui);
}

#che-cc .che-cc-banner__body a,
#che-cc .che-cc-modal__body a {
	color: var(--che-cc-green);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

#che-cc .che-cc-banner__body a:hover,
#che-cc .che-cc-modal__body a:hover {
	color: var(--che-cc-green-dark);
}

#che-cc .che-cc-banner__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
}

/* Reject and Accept are the same size as well as the same style (brief §4). */
#che-cc .che-cc-banner__actions .che-cc-btn:not(.che-cc-btn--text) {
	min-width: 120px;
}

/* ---------- second layer: modals ---------- */

#che-cc .che-cc-modal {
	position: fixed;
	z-index: 2147483001;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

#che-cc .che-cc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(28, 40, 24, .45);
	opacity: 0;
	transition: opacity .3s ease;
}

#che-cc .che-cc-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 580px;
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow: hidden;
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--che-cc-shadow);
	color: var(--che-cc-text);
	font: 400 14px/1.55 var(--che-cc-font-body);
	opacity: 0;
	transform: translateY(14px) scale(.98);
	transition: opacity .3s ease, transform .4s var(--che-cc-ease);
}

#che-cc .che-cc-modal--sm .che-cc-modal__panel {
	max-width: 440px;
}

/* Calendly prompt: two equal choices, side by side. */
#che-cc .che-cc-modal--sm .che-cc-modal__foot {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

#che-cc .che-cc-modal--sm .che-cc-modal__foot .che-cc-btn {
	padding-right: 12px;
	padding-left: 12px;
	white-space: normal;
}

#che-cc .che-cc-modal.is-open .che-cc-modal__backdrop {
	opacity: 1;
}

#che-cc .che-cc-modal.is-open .che-cc-modal__panel {
	opacity: 1;
	transform: none;
}

#che-cc .che-cc-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 14px 8px 24px;
}

#che-cc .che-cc-modal__title {
	margin: 0;
	color: var(--che-cc-heading);
	font: 700 19px/1.25 var(--che-cc-font-ui);
	letter-spacing: 0;
	text-transform: none;
}

#che-cc .che-cc-modal__title:focus {
	outline: none;
}

#che-cc .che-cc-modal__close {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--che-cc-text);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

#che-cc .che-cc-modal__close:hover {
	background: var(--che-cc-surface);
	color: var(--che-cc-ink);
}

#che-cc .che-cc-modal__close svg {
	display: block;
	width: 18px;
	height: 18px;
}

#che-cc .che-cc-modal__body {
	padding: 0 24px 14px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

#che-cc .che-cc-modal__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 18px 16px;
	border-top: 1px solid var(--che-cc-line);
	background: #fff;
}

/* ---------- categories ---------- */

#che-cc .che-cc-cats {
	display: grid;
	gap: 8px;
	margin: 14px 0 12px;
	padding: 0;
	list-style: none;
}

#che-cc .che-cc-cat {
	margin: 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--che-cc-surface);
}

#che-cc .che-cc-cat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}

#che-cc .che-cc-cat__label {
	margin: 0;
	color: var(--che-cc-ink);
	font: 700 14.5px/1.3 var(--che-cc-font-ui);
}

#che-cc label.che-cc-cat__label {
	cursor: pointer;
}

#che-cc .che-cc-cat__desc {
	font-size: 13.5px;
	line-height: 1.5;
}

#che-cc .che-cc-cat__vendors {
	margin-top: 4px;
	color: var(--che-cc-muted);
	font-size: 12.5px;
	line-height: 1.5;
}

#che-cc .che-cc-cat__vendors span {
	font-weight: 600;
}

#che-cc .che-cc-cat__always {
	flex: 0 0 auto;
	padding: 4px 10px;
	border-radius: 20px;
	background: rgba(85, 117, 74, .13);
	color: var(--che-cc-ink);
	font: 600 11.5px/1.2 var(--che-cc-font-ui);
	white-space: nowrap;
}

#che-cc .che-cc-meta {
	color: var(--che-cc-muted);
	font-size: 12px;
	line-height: 1.5;
	word-break: break-all;
}

/* ---------- switch ---------- */

#che-cc .che-cc-switch {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	width: 44px;
	height: 24px;
	margin: 0;
	cursor: pointer;
}

#che-cc .che-cc-switch input {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

#che-cc .che-cc-switch__track {
	position: absolute;
	inset: 0;
	border-radius: 24px;
	background: var(--che-cc-switch-off);
	transition: background-color .2s ease;
}

#che-cc .che-cc-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .25s var(--che-cc-ease);
}

#che-cc .che-cc-switch input:checked + .che-cc-switch__track {
	background: var(--che-cc-green);
}

#che-cc .che-cc-switch input:checked + .che-cc-switch__track::after {
	transform: translateX(20px);
}

#che-cc .che-cc-switch input:focus-visible + .che-cc-switch__track {
	outline: 3px solid var(--che-cc-focus);
	outline-offset: 3px;
}

/* ---------- toast ---------- */

#che-cc .che-cc-toast {
	position: fixed;
	z-index: 2147483002;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	left: 50%;
	max-width: calc(100vw - 32px);
	padding: 10px 18px;
	border-radius: 30px;
	background: #2c3b27;
	box-shadow: 0 10px 30px rgba(32, 48, 23, .25);
	color: #fff;
	font: 600 13.5px/1.4 var(--che-cc-font-ui);
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 14px);
	transition: opacity .3s ease, transform .4s var(--che-cc-ease);
}

#che-cc .che-cc-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---------- Calendly placeholder (rendered inside the page, not #che-cc) ---------- */

.che-cc-embed {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	min-height: 240px;
	padding: 28px 20px;
	border-radius: 14px;
	background: #f5f1ed;
	color: #465a5a;
	font: 400 14px/1.55 "museo-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	text-align: center;
}

.che-cc-embed p {
	max-width: 420px;
	margin: 0;
}

.che-cc-embed .che-cc-embed__title {
	color: #5b7e49;
	font: 700 16px/1.3 "Montserrat", sans-serif;
}

.che-cc-embed .che-cc-embed__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 6px;
}

/* ---------- page state ---------- */

html.che-cc-locked {
	overflow: hidden;
	padding-right: var(--che-cc-gap, 0);
}

/* ---------- responsive ----------
   >= 1024px  text and buttons side by side (text column >= ~500px)
   561-1023   text on top, buttons in one row underneath
   <= 560     Reject and Accept share the width; dialogs become bottom sheets
   DOM order is Manage, Reject, Accept everywhere, so tab order always matches
   what's on screen. */

@media (max-width: 1023px) {
	#che-cc .che-cc-banner {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		left: 12px;
		padding: 14px 18px;
	}

	/* Label flush with the text above; Reject/Accept pushed to the right. */
	#che-cc .che-cc-banner__actions [data-che-cc="manage"] {
		margin: 0 auto 0 -12px;
	}
}

@media (max-width: 560px) {
	#che-cc .che-cc-banner {
		right: 10px;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		left: 10px;
		padding: 14px 16px;
		font-size: 13.5px;
	}

	#che-cc .che-cc-banner__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	#che-cc .che-cc-banner__actions [data-che-cc="manage"] {
		grid-column: 1 / -1;
		justify-self: start;
		min-height: 30px;
		padding: 4px 12px;
		margin: -4px 0 0 -12px;
	}

	/* Equal grid columns keep the two the same size; drop the desktop
	   min-width so they can't overflow a 320px screen. */
	#che-cc .che-cc-banner .che-cc-btn:not(.che-cc-btn--text) {
		min-width: 0;
		padding-right: 12px;
		padding-left: 12px;
		white-space: normal;
	}

	#che-cc .che-cc-modal {
		align-items: flex-end;
		padding: 0;
	}

	#che-cc .che-cc-modal__panel,
	#che-cc .che-cc-modal--sm .che-cc-modal__panel {
		max-width: none;
		max-height: 92vh;
		max-height: 92dvh;
		border-radius: 18px 18px 0 0;
		transform: translateY(40px);
	}

	#che-cc .che-cc-modal__head {
		padding: 16px 10px 6px 18px;
	}

	#che-cc .che-cc-modal__title {
		font-size: 18px;
	}

	#che-cc .che-cc-modal__body {
		padding: 0 18px 12px;
	}

	#che-cc .che-cc-modal__foot {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
	}

	#che-cc .che-cc-modal__foot .che-cc-btn {
		padding-right: 10px;
		padding-left: 10px;
		white-space: normal;
	}

	#che-cc .che-cc-modal__foot [data-che-cc="save"] {
		grid-column: 1 / -1;
	}

	#che-cc .che-cc-modal--sm .che-cc-modal__foot > * {
		grid-column: 1 / -1;
	}
}

/* Small phones (320-380px wide). */
@media (max-width: 380px) {
	#che-cc .che-cc-banner {
		padding: 12px 14px;
		font-size: 13px;
	}

	#che-cc .che-cc-banner__title {
		font-size: 14.5px;
	}
}

/* Short screens: phones held sideways (~320-430px tall) and the 568px-tall
   iPhone SE. Tighten everything so the banner never takes over the page. */
@media (max-height: 600px) {
	#che-cc .che-cc-banner {
		bottom: 8px;
		gap: 8px;
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 13px;
		line-height: 1.45;
	}

	#che-cc .che-cc-banner__title {
		margin-bottom: 1px;
		font-size: 14px;
	}

	#che-cc .che-cc-btn {
		min-height: 36px;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	#che-cc .che-cc-modal__head {
		padding-top: 12px;
		padding-bottom: 4px;
	}

	#che-cc .che-cc-modal__title {
		font-size: 17px;
	}

	#che-cc .che-cc-modal__body {
		padding-bottom: 8px;
	}

	#che-cc .che-cc-cats {
		gap: 6px;
		margin: 10px 0 8px;
	}

	#che-cc .che-cc-cat {
		padding: 10px 12px;
	}

	#che-cc .che-cc-modal__foot {
		padding-top: 8px;
		padding-bottom: 10px;
	}
}

/* Centred dialogs on short, wide screens: use nearly the full height. */
@media (max-height: 600px) and (min-width: 561px) {
	#che-cc .che-cc-modal {
		padding: 8px;
	}

	#che-cc .che-cc-modal__panel {
		max-height: calc(100vh - 16px);
		max-height: calc(100dvh - 16px);
	}
}

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

@media print {
	#che-cc {
		display: none !important;
	}
}