/* CloudSprout Leads — consent banner, preferences dialog, embed placeholders.
   Theme it by setting public custom properties anywhere above the banner (usually :root):
     --csl-bg --csl-ink --csl-muted --csl-border --csl-accent --csl-accent-hover --csl-accent-ink --csl-link
     --csl-focus-ring --csl-toggle-on --csl-secondary-bg --csl-secondary-ink --csl-secondary-border
     --csl-radius --csl-btn-radius --csl-font --csl-font-heading --csl-size --csl-shadow --csl-z --csl-bottom-offset --csl-max
   Aliases also read (PWW 1.9.0 names): --csl-text, --csl-text-muted, --csl-surface, --csl-primary, --csl-primary-hover,
   --csl-primary-text, --csl-secondary-text, --csl-button-radius, --csl-offset-bottom.
   Also read (St George 2.10 / Pats v10 names): --csl-accent-text, --csl-focus, --csl-max-width, --csl-heading (title colour),
   --csl-link-hover, --csl-overlay (dialog backdrop), --csl-toggle-off, --csl-font-label, --csl-offset (CK 8.5).
   Settings-page colours are only the fallback; a theme variable always wins. Private --_x vars are internal. */
.csl-cc, .csl-cc-modal, .csl-embed, .csl-cc-link {
	--_bg: var(--csl-bg, var(--csl-surface, #ffffff));
	--_ink: var(--csl-ink, var(--csl-text, #1d2327));
	--_accent: var(--csl-accent, var(--csl-primary, #2f7d4f));
	--_accent-ink: var(--csl-accent-ink, var(--csl-accent-text, var(--csl-primary-text, #ffffff)));
	--_accent-hover: var(--csl-accent-hover, var(--csl-primary-hover, var(--_accent)));
	--_muted: var(--csl-muted, var(--csl-text-muted, #50575e));
	--_border: var(--csl-border, rgba(0, 0, 0, .14));
	--_link: var(--csl-link, currentColor);
	--_focus: var(--csl-focus-ring, var(--csl-focus, var(--_accent)));
	--_toggle: var(--csl-toggle-on, var(--_accent));
	--_btn2-bg: var(--csl-secondary-bg, var(--_bg));
	--_btn2-ink: var(--csl-secondary-ink, var(--csl-secondary-text, var(--_ink)));
	--_btn2-border: var(--csl-secondary-border, var(--_border));
	--_radius: var(--csl-radius, 12px);
	--_btn-radius: var(--csl-btn-radius, var(--csl-button-radius, 8px));
	--_font: var(--csl-font, inherit);
	--_font-h: var(--csl-font-heading, var(--_font));
	--_size: var(--csl-size, 15px);
	--_shadow: var(--csl-shadow, 0 8px 32px rgba(0, 0, 0, .18));
	--_z: var(--csl-z, 99999);
	--_bottom: var(--csl-bottom-offset, var(--csl-offset-bottom, var(--csl-offset, 0px)));
	--_max: var(--csl-max, var(--csl-max-width, 760px));
	--_heading: var(--csl-heading, inherit);
	--_link-hover: var(--csl-link-hover, var(--_link));
	--_overlay: var(--csl-overlay, rgba(0, 0, 0, .5));
	--_toggle-off: var(--csl-toggle-off, #8c8f94);
	--_font-label: var(--csl-font-label, inherit);
}
.csl-cc[hidden], .csl-cc-modal[hidden] { display: none !important; }
.csl-cc, .csl-cc-modal { font-family: var(--_font); font-size: var(--_size); line-height: 1.5; color: var(--_ink); }
.csl-cc *, .csl-cc-modal * { box-sizing: border-box; }

/* Banner: fixed overlay, never pushes content (no layout shift). Mobile first. */
.csl-cc { position: fixed; left: 8px; right: 8px; bottom: calc(8px + var(--_bottom)); z-index: var(--_z); margin: 0 auto; max-width: var(--_max); }
.csl-cc--bottom-left { right: auto; max-width: min(420px, calc(100vw - 16px)); }
.csl-cc--bottom-right { left: auto; max-width: min(420px, calc(100vw - 16px)); }
.csl-cc__box { background: var(--_bg); color: var(--_ink); border: 1px solid var(--_border); border-radius: var(--_radius); box-shadow: var(--_shadow); padding: 16px; max-height: calc(100vh - 16px - var(--_bottom)); overflow-y: auto; }
.csl-cc__title { margin: 0 0 4px; font-family: var(--_font-h); font-weight: 700; font-size: 1.05em; color: var(--_heading); }
.csl-cc__text { margin: 0 0 12px; font-size: .93em; }
.csl-cc__link { color: var(--_link); text-decoration: underline; text-underline-offset: 2px; }
.csl-cc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.csl-cc__actions > :nth-child(3) { grid-column: 1 / -1; }
.csl-cc__btn.csl-cc__btn, .csl-cc__btn.csl-cc__btn:focus {
	appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; min-width: 44px; padding: 10px 16px; margin: 0; border: 2px solid var(--_accent); border-radius: var(--_btn-radius);
	background: var(--_accent); color: var(--_accent-ink); font: inherit; font-weight: 600; font-size: .95em; line-height: 1.2; cursor: pointer; text-align: center;
	text-transform: none; letter-spacing: normal; box-shadow: none; width: 100%;
}
.csl-cc__btn.csl-cc__btn:hover { color: var(--_accent-ink); background: var(--_accent-hover); border-color: var(--_accent-hover); }
/* Doubled classes (1.1.2): beat theme resets such as Hello Elementor's [type=button] / button:hover / :focus colours.
   Accept and Reject always share one style (equal prominence). Only "Preferences" may use the secondary style. */
.csl-cc__btn--alt.csl-cc__btn--alt, .csl-cc__btn--alt.csl-cc__btn--alt:focus { background: var(--_btn2-bg); color: var(--_btn2-ink); border-color: var(--_btn2-border); }
.csl-cc__btn--alt.csl-cc__btn--alt:hover { color: var(--_btn2-ink); background: var(--_btn2-bg); border-color: var(--_accent); }
.csl-cc__btn:focus-visible, .csl-cc-modal__close:focus-visible, .csl-cc-switch:focus-visible, .csl-cc__link:focus-visible,
.csl-cc-cat__svc summary:focus-visible, .csl-cc-modal__panel:focus-visible, .csl-embed__btn:focus-visible {
	outline: 3px solid var(--_focus); outline-offset: 2px;
}
.csl-cc-modal__panel:focus { outline: none; }
@media (min-width: 600px) {
	.csl-cc { left: 16px; right: 16px; bottom: calc(16px + var(--_bottom)); }
	.csl-cc--bottom-left { right: auto; }
	.csl-cc--bottom-right { left: auto; }
	.csl-cc__box { padding: 20px 22px; }
	.csl-cc--bottom .csl-cc__actions { grid-template-columns: repeat(3, 1fr); }
	.csl-cc--bottom .csl-cc__actions > :nth-child(3) { grid-column: auto; }
}

/* Preferences dialog */
.csl-cc-modal { position: fixed; inset: 0; z-index: calc(var(--_z) + 1); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.csl-cc-modal__backdrop { position: absolute; inset: 0; background: var(--_overlay); }
.csl-cc-modal__panel {
	position: relative; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column;
	background: var(--_bg); color: var(--_ink); border-radius: var(--_radius) var(--_radius) 0 0; box-shadow: var(--_shadow);
}
@media (min-width: 600px) {
	.csl-cc-modal { align-items: center; padding: 24px; }
	.csl-cc-modal__panel { border-radius: var(--_radius); }
}
.csl-cc-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 4px 20px; }
.csl-cc-modal__title { margin: 0; font-size: 1.2em; line-height: 1.3; font-weight: 700; color: var(--_heading); font-family: var(--_font-h); }
.csl-cc-modal__close.csl-cc-modal__close, .csl-cc-modal__close.csl-cc-modal__close:focus {
	appearance: none; -webkit-appearance: none; width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; background: transparent; color: inherit;
	font-size: 28px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.csl-cc-modal__close.csl-cc-modal__close:hover { color: inherit; background: var(--_border); }
.csl-cc-modal__body { overflow-y: auto; padding: 0 20px 8px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.csl-cc-modal__desc { margin: 0 0 12px; font-size: .93em; }
.csl-cc-modal__gpc { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--_border); font-size: .9em; }
.csl-cc-modal__actions { padding: 12px 20px 20px; border-top: 1px solid var(--_border); }
@media (min-width: 600px) { .csl-cc-modal__actions { grid-template-columns: repeat(3, 1fr); } .csl-cc-modal__actions > :nth-child(3) { grid-column: auto; } }

.csl-cc-cat { border-top: 1px solid var(--_border); padding: 12px 0; }
.csl-cc-cat__row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.csl-cc-cat__label { font-family: var(--_font-label); flex: 1; font-weight: 600; cursor: pointer; padding: 10px 0; }
.csl-cc-cat__always { font-size: .82em; color: var(--_muted); }
.csl-cc-cat__desc { margin: 0; font-size: .88em; color: var(--_muted); }
.csl-cc-cat__svc { margin-top: 6px; font-size: .86em; }
.csl-cc-cat__svc summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--_ink); text-decoration: underline; text-underline-offset: 2px; width: max-content; }
.csl-cc-cat__svc ul { margin: 0 0 4px; padding-left: 18px; }
.csl-cc-cat__svc li { margin: 4px 0; }

/* Switch: native checkbox inside a 44px row */
.csl-cc-switch {
	appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 48px; height: 28px; margin: 8px 0; border-radius: 28px;
	background: var(--_toggle-off); border: 0; cursor: pointer; transition: background-color .15s ease;
}
.csl-cc-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s ease; }
.csl-cc-switch:checked { background: var(--_toggle); }
.csl-cc-switch:checked::after { transform: translateX(20px); }
.csl-cc-switch:disabled { cursor: not-allowed; opacity: .6; }

/* Click-to-load embeds: <iframe data-csl-category="marketing" data-csl-src="..."> */
.csl-embed {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px;
	background: var(--_border); color: var(--_ink); border-radius: var(--_radius); font-family: var(--_font); font-size: var(--_size); line-height: 1.45;
	width: 100%; min-height: 200px; box-sizing: border-box;
}
.csl-embed p { margin: 0; max-width: 46ch; }
.csl-embed__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.csl-embed__btn.csl-embed__btn, .csl-embed__btn.csl-embed__btn:focus, .csl-embed__btn.csl-embed__btn:hover {
	appearance: none; min-height: 44px; padding: 10px 16px; border-radius: var(--_btn-radius); border: 2px solid var(--_accent);
	background: var(--_accent); color: var(--_accent-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.csl-embed__btn--alt.csl-embed__btn--alt, .csl-embed__btn--alt.csl-embed__btn--alt:focus, .csl-embed__btn--alt.csl-embed__btn--alt:hover { background: transparent; color: var(--_ink); }
iframe[data-csl-src][data-csl-waiting] { display: none !important; }

/* Motion: gentle, and none for people who ask for less. */
@media (prefers-reduced-motion: no-preference) {
	.csl-cc.is-open { animation: csl-in .22s ease-out; }
	.csl-cc-modal.is-open .csl-cc-modal__panel { animation: csl-in .2s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
	.csl-cc-switch, .csl-cc-switch::after { transition: none; }
}
@keyframes csl-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media print { .csl-cc, .csl-cc-modal, .csl-cc-link { display: none !important; } }
/* 1.3.0: quiet "Cookie settings" link, only on pages whose theme has no such link (after a choice). Hide: filter csl_cookie_link. */
.csl-cc-link { position: fixed; left: 10px; bottom: calc(10px + var(--_bottom)); z-index: calc(var(--_z) - 1); font-family: var(--_font); font-size: 12px; line-height: 1.4; color: var(--_muted); background: var(--_bg); border: 1px solid var(--_border); border-radius: 4px; padding: 3px 8px; text-decoration: underline; text-underline-offset: 2px; opacity: .92; }
.csl-cc-link:hover { color: var(--_ink); opacity: 1; }
.csl-cc-link:focus-visible { outline: 2px solid var(--_focus); outline-offset: 2px; opacity: 1; }
.csl-cc:not([hidden]) ~ .csl-cc-link { display: none; }
@media (forced-colors: active) { .csl-cc__btn, .csl-cc-switch, .csl-embed__btn { border: 2px solid ButtonText; } }

/* Form message helper (plugin writes text into [data-csl-message]) */
[data-csl-message][data-csl-state="error"] { color: var(--csl-error, #b32d2e); }
[data-csl-message][data-csl-state="success"] { color: var(--csl-success, inherit); }

.csl-cc__link:hover { color: var(--_link-hover); }
