/*
 * RWI Consent: small adjustments on top of CookieConsent's stylesheet. Colours come from the site's
 * `colors` configuration (CookieConsent's --cc-* variables), printed inline after this file.
 */

#cc-main {
	--cc-font-family: inherit;
	font-family: var(--cc-font-family);
}

/* The cookie tables are reference material: keep them compact. */
#cc-main .pm__table-td,
#cc-main .pm__table-th {
	font-size: 0.8125rem;
}

/* Cookie tables on the policy page ([rwi_consent_table]): scroll sideways on phones, don't overflow. */
.rwi-consent-table {
	overflow-x: auto;
	margin: 0 0 1.5rem;
}

.rwi-consent-table table {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
}

.rwi-consent-table th,
.rwi-consent-table td {
	padding: 0.5rem 0.75rem 0.5rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	text-align: left;
	vertical-align: top;
}

/* Fallback "Cookie settings" button, only when the site has no footer link for it. */
.rwi-consent-revisit {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 2147483000;
	padding: 0.5rem 0.875rem;
	border: 0;
	border-radius: var(--cc-btn-border-radius, 0.4rem);
	background: var(--cc-btn-primary-bg, #30363c);
	color: var(--cc-btn-primary-color, #fff);
	font: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
	opacity: 0.85;
}

.rwi-consent-revisit:hover,
.rwi-consent-revisit:focus-visible {
	opacity: 1;
}

/*
 * Notice in place of a blocked video (includes/embeds.php). Inside WordPress's responsive embed
 * wrapper it fills the 16:9 box; elsewhere it keeps a minimum height. Colours: --rwi-embed-bg,
 * --rwi-embed-color, --rwi-embed-accent (button hover) in the site's `colors`.
 */
.rwi-embed {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	padding: 1.5rem;
	box-sizing: border-box;
	background: var(--rwi-embed-bg, #1f2427);
	color: var(--rwi-embed-color, #fff);
	text-align: center;
}

.wp-has-aspect-ratio .rwi-embed {
	position: absolute;
	inset: 0;
	min-height: 0;
}

.rwi-embed__notice {
	max-width: 34rem;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
}

/* Two classes, so content styles of the theme (e.g. `.entry-content p`) don't recolour the notice. */
.rwi-embed .rwi-embed__notice p {
	margin: 0 0 1rem;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.rwi-embed__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.25rem;
}

.rwi-embed .rwi-embed__actions a {
	color: inherit;
	text-decoration: underline;
}

.rwi-embed__load {
	padding: 0.75rem 1.5rem;
	border: 1px solid currentColor;
	border-radius: var(--cc-btn-border-radius, 0.4rem);
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.rwi-embed__load:hover,
.rwi-embed__load:focus-visible {
	background: var(--rwi-embed-accent, #fff);
	border-color: var(--rwi-embed-accent, #fff);
	color: var(--rwi-embed-bg, #1f2427);
}

/* Phones: a 16:9 box is too short for the notice, so it grows with its content instead. */
@media (max-width: 600px) {
	/* Beats WordPress's `.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper:before`. */
	.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper:has(> .rwi-embed)::before {
		display: none;
	}

	.wp-has-aspect-ratio .rwi-embed {
		position: static;
		min-height: 0;
	}
}

@media print {
	.rwi-consent-revisit {
		display: none;
	}
}