/**
 * Outhands WordPress Manager: Consent Mode facades on the front-end.
 *
 * A facade stands in for a video or a social post until the visitor agrees
 * (src/Consent/Facade.php, assets/js/consent.js). Not in a cascade layer and
 * with single classes, so a theme's general styles (button, p, label) do not
 * break it.
 *
 * A theme sets the look with custom properties, for example on :root:
 *   --owm-consent-bg, --owm-consent-fg, --owm-consent-accent,
 *   --owm-consent-accent-fg, --owm-consent-radius, --owm-consent-font
 *
 * @author      Mike Collet <mike@outhands.nl>
 * @copyright   (c) 2026 - Outhands Internet & Media
 * @subpackage  Outhands WordPress Manager 0.13.0
 * @version     1.0.0
 */

.owm-consent-facade {
	position: relative;
	display: grid;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	/* clip, not hidden: a small video box with a title may grow instead of cutting text off. */
	overflow: clip;
	color: var(--owm-consent-fg, #fff);
	background: var(--owm-consent-bg, #1d2327);
	border-radius: var(--owm-consent-radius, 6px);
	font-family: var(--owm-consent-font, inherit);
	font-size: 16px;
	line-height: 1.5;
	text-align: start;
	container-type: inline-size;
}

/* Video: the size of the original, so nothing jumps when it loads. */
.owm-consent-facade--video {
	aspect-ratio: var(--owm-consent-ratio, 16 / 9);
	max-inline-size: var(--owm-consent-width, 100%);
	align-items: end;
}

/* Map and calendar: the height of the original, so nothing jumps. */
.owm-consent-facade--map,
.owm-consent-facade--booking {
	min-block-size: var(--owm-consent-height, 400px);
	max-inline-size: var(--owm-consent-width, 100%);
	align-items: end;
}

/* Inside a responsive embed block (padding trick), fill the wrapper like the iframe would. */
.wp-has-aspect-ratio .wp-block-embed__wrapper > .owm-consent-facade {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	max-inline-size: none;
}

.owm-consent-facade__media {
	position: absolute;
	inset: 0;
}

.owm-consent-facade__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
}

/* Dark shade under the text, for contrast on any thumbnail. */
.owm-consent-facade--video .owm-consent-facade__media::after,
.owm-consent-facade--map .owm-consent-facade__media::after,
.owm-consent-facade--booking .owm-consent-facade__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0.15) 100%);
}

.owm-consent-facade__body {
	position: relative;
	display: grid;
	gap: 8px;
	padding: clamp(12px, 3vw, 24px);
	max-inline-size: 60ch;
}

.owm-consent-facade__title {
	margin: 0;
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.3;
}

.owm-consent-facade__text {
	margin: 0;
	font-size: 0.95em;
}

.owm-consent-facade__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 4px 0 0;
}

.owm-consent-facade__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	border: 0;
	border-radius: var(--owm-consent-radius, 6px);
	background: var(--owm-consent-accent, #fc0);
	color: var(--owm-consent-accent-fg, #1d2327);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.owm-consent-facade__button:hover {
	filter: brightness(1.08);
}

.owm-consent-facade__button:focus-visible,
.owm-consent-facade__link:focus-visible,
.owm-consent-facade__remember input:focus-visible {
	outline: 3px solid var(--owm-consent-accent, #fc0);
	outline-offset: 3px;
}

/* A play triangle before "Video afspelen". */
.owm-consent-facade--video .owm-consent-facade__button::before {
	content: "";
	inline-size: 0;
	block-size: 0;
	border-block: 6px solid transparent;
	border-inline-start: 10px solid currentColor;
}

.owm-consent-facade__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.owm-consent-facade__remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.85em;
	cursor: pointer;
}

.owm-consent-facade__remember input {
	margin: 0;
	inline-size: 16px;
	block-size: 16px;
	accent-color: var(--owm-consent-accent, #fc0);
}

/* Social post and reviews: a light box (a bar under the text of a post). */
.owm-consent-facade--social,
.owm-consent-facade--reviews {
	color: var(--owm-consent-bar-fg, #1d2327);
	background: var(--owm-consent-bar-bg, #f6f7f7);
	border: 1px solid var(--owm-consent-bar-border, #dcdcde);
	margin-block: 8px;
}

.owm-consent-facade--social .owm-consent-facade__body,
.owm-consent-facade--reviews .owm-consent-facade__body {
	padding: 12px 16px;
	max-inline-size: none;
}

.owm-consent-facade--social .owm-consent-facade__button,
.owm-consent-facade--reviews .owm-consent-facade__button {
	background: var(--owm-consent-bar-accent, #1d2327);
	color: var(--owm-consent-bar-accent-fg, #fff);
}

.owm-consent-facade--social .owm-consent-facade__button:focus-visible,
.owm-consent-facade--social .owm-consent-facade__link:focus-visible,
.owm-consent-facade--social .owm-consent-facade__remember input:focus-visible,
.owm-consent-facade--reviews .owm-consent-facade__button:focus-visible,
.owm-consent-facade--reviews .owm-consent-facade__link:focus-visible,
.owm-consent-facade--reviews .owm-consent-facade__remember input:focus-visible {
	outline-color: var(--owm-consent-bar-accent, #1d2327);
}

.owm-consent-facade--social .owm-consent-facade__remember input,
.owm-consent-facade--reviews .owm-consent-facade__remember input {
	accent-color: var(--owm-consent-bar-accent, #1d2327);
}

/* Chat (B3): a floating button until consent or a click. */
.owm-consent-chat-button {
	position: fixed;
	inset-block-end: 20px;
	z-index: 2147483000;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--owm-consent-accent, #fc0);
	color: var(--owm-consent-accent-fg, #1d2327);
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
	font-family: var(--owm-consent-font, inherit);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.owm-consent-chat-button--right {
	inset-inline-end: 20px;
}

.owm-consent-chat-button--left {
	inset-inline-start: 20px;
}

/* A speech bubble before the text. */
.owm-consent-chat-button::before {
	content: "";
	inline-size: 20px;
	block-size: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M3 0h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H9l-5 4v-4H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M3 0h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H9l-5 4v-4H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.owm-consent-chat-button:hover {
	filter: brightness(1.08);
}

.owm-consent-chat-button:focus-visible {
	outline: 3px solid var(--owm-consent-bar-accent, #1d2327);
	outline-offset: 3px;
}

/* The note for screen readers; sighted visitors see it as the button's title. */
.owm-consent-chat-button__note {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Small boxes: text a bit smaller, less padding. */
@container (max-width: 360px) {
	.owm-consent-facade__body {
		gap: 6px;
		padding: 10px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.owm-consent-facade__button {
		transition: filter 0.15s ease;
	}
}