/**
 * Cookie consent banner.
 *
 * Every value here comes from tokens.css. Nothing hardcodes a colour or a size —
 * which is the whole reason this is a theme file rather than a plugin's colour
 * pickers: when a token changes, this changes with it instead of drifting.
 *
 * ⚠️ The two buttons are DELIBERATELY identical in size, padding, border, weight
 * and position. Making "Accept" louder than "Decline" is the most commonly
 * criticised defect in consent design, and the visual hierarchy an interface
 * designer would reach for here is exactly the thing regulators read as steering.
 * If a future change gives one of them a filled background, it has to give the
 * other one the same.
 */

.vc-consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 900;
	background: var(--paper);
	border-top: var(--rule-hairline);
	box-shadow: var(--shadow);
	padding: var(--space-4) var(--gutter-page);
}

.vc-consent[hidden] {
	display: none;
}

.vc-consent__wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.vc-consent__text {
	flex: 1 1 22rem;
	margin: 0;
	font-family: var(--font-text);
	font-size: var(--size-body-sm);
	font-weight: var(--weight-regular);
	line-height: var(--lh-body);
	color: var(--text-body);
}

.vc-consent__text a {
	color: var(--ocean);
}

.vc-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.vc-consent__button {
	flex: 0 0 auto;
	min-width: 10rem;
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-text);
	font-size: var(--size-body-sm);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-body);
	color: var(--ocean);
	background: var(--paper);
	border: 1px solid var(--ocean);
	border-radius: var(--radius);
	cursor: pointer;
}

/**
 * ⚠️ `:focus` is listed as well as `:focus-visible`, and both pin `color`.
 *
 * GeneratePress's Customizer emits inline CSS with
 * `button:focus { color:#ffffff; background-color:#3f4047 }`. `:focus-visible`
 * does NOT match a mouse click or a programmatic focus() — only keyboard focus —
 * so with `:focus-visible` alone that dark fill won, and reopening the banner
 * from the footer focuses Accept. The result was a filled charcoal Accept beside
 * an outlined Decline: precisely the unequal prominence the two buttons are
 * built to avoid, appearing only in the state the reopen flow puts them in.
 * Caught by looking at it; no amount of unit testing would have.
 */
.vc-consent__button:hover,
.vc-consent__button:focus,
.vc-consent__button:focus-visible,
.vc-consent__button:active {
	color: var(--ocean);
	background: var(--panel);
}

/* The ring stays keyboard-only, which is what focus-visible is for. */
.vc-consent__button:focus-visible {
	outline: 2px solid var(--ocean);
	outline-offset: 2px;
}

@media ( max-width: 600px ) {

	.vc-consent__actions {
		width: 100%;
	}

	.vc-consent__button {
		flex: 1 1 auto;
	}
}