/* Jamuh Datenschutz – colours come only from Blocksy, so light and dark mode both work. */

.jpv-gate,
.jpv-notice,
.jpv-settings {
	--jpv-fg: var(--theme-text-color);
	--jpv-bg: var(--theme-palette-color-3);
	--jpv-btn-bg: var(--theme-button-background-initial-color);
	--jpv-btn-bg-hover: var(--theme-button-background-hover-color);
	--jpv-btn-fg: var(--theme-button-text-initial-color);
	--jpv-btn-fg-hover: var(--theme-button-text-hover-color);
	--jpv-surface: color-mix(in srgb, var(--jpv-fg) 6%, var(--jpv-bg));
	--jpv-line: color-mix(in srgb, var(--jpv-fg) 16%, transparent);
	--jpv-muted: color-mix(in srgb, var(--jpv-fg) 75%, transparent);
	box-sizing: border-box;
	color: var(--jpv-fg);
	font-size: 0.8rem;
	line-height: 1.5;
}

.jpv-gate *,
.jpv-notice * {
	box-sizing: border-box;
}

.jpv-gate [hidden],
.jpv-notice[hidden],
.jpv-settings [hidden] {
	display: none !important;
}

/* ---------- Embed placeholder */

.jpv-gate {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1.5rem 1rem;
	background: var(--jpv-surface);
	border: 1px solid var(--jpv-line);
	text-align: center;
}

/* Core sizes responsive embeds with a ::before ratio box and an absolute iframe.
   The placeholder may need more height on phones, so let it grow instead. */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:has(> .jpv-gate)::before {
	display: none;
}

.wp-embed-responsive .wp-block-embed__wrapper > .jpv-gate {
	position: static;
	aspect-ratio: 16 / 9;
}

.wp-embed-aspect-4-3 .wp-block-embed__wrapper > .jpv-gate { aspect-ratio: 4 / 3; }
.wp-embed-aspect-1-1 .wp-block-embed__wrapper > .jpv-gate { aspect-ratio: 1 / 1; }
.wp-embed-aspect-9-16 .wp-block-embed__wrapper > .jpv-gate { aspect-ratio: 9 / 16; }
.wp-embed-aspect-21-9 .wp-block-embed__wrapper > .jpv-gate { aspect-ratio: 21 / 9; }

.jpv-gate__ph {
	max-width: 32rem;
}

.jpv-gate__text {
	margin: 0 0 0.75rem;
	color: var(--jpv-muted);
}

.jpv-gate__text a,
.jpv-notice__text a {
	color: inherit;
	text-decoration: underline;
}

.jpv-gate__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
}

.jpv-gate__load,
.jpv-notice__ok,
.jpv-settings__reset {
	min-height: 44px;
	padding: 0.5rem 1.1rem;
	border: 0;
	border-radius: 6px;
	background: var(--jpv-btn-bg);
	color: var(--jpv-btn-fg);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.jpv-gate__load:hover,
.jpv-notice__ok:hover,
.jpv-settings__reset:hover {
	background: var(--jpv-btn-bg-hover);
	color: var(--jpv-btn-fg-hover);
}

.jpv-gate button:focus-visible,
.jpv-gate a:focus-visible,
.jpv-gate input:focus-visible,
.jpv-notice button:focus-visible,
.jpv-notice a:focus-visible,
.jpv-settings__reset:focus-visible {
	outline: 2px solid var(--jpv-fg);
	outline-offset: 2px;
}

.jpv-gate__remember {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	cursor: pointer;
}

.jpv-gate__open {
	color: var(--jpv-muted);
}

/* ---------- Notice bar (non-modal) */

.jpv-notice {
	position: fixed;
	z-index: 99999;
	left: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 30rem;
	padding: 0.75rem 0.75rem 0.75rem 1rem;
	background: var(--jpv-surface);
	border: 1px solid var(--jpv-line);
	border-radius: 8px;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--jpv-fg) 18%, transparent);
}

.jpv-notice__text {
	margin: 0;
}

@media (max-width: 600px) {
	.jpv-notice {
		left: 16px;
		right: 16px;
		max-width: none;
	}
}

/* ---------- [jamuh_privacy_settings] */

.jpv-settings {
	margin: 1em 0;
	color: inherit;
	font-size: inherit;
}

.jpv-settings__status {
	margin: 0 0 0.5em;
}

.jpv-settings__reset {
	font-size: 0.8rem;
}