/**
 * VH Citizenship — Cookie Consent (VHC-P10)
 * Bottom consent bar + "Customise" preferences modal. Follows the site's
 * existing modal conventions (vhc-form-modal.css: two-stage .is-open/
 * .is-visible, backdrop, focus-trapped panel) so it behaves identically to
 * every other overlay on the site rather than introducing a new pattern.
 * All copy comes from PHP (vhc-cookie-consent.php) via ICL_LANGUAGE_CODE;
 * this file is presentation only.
 */

/* ---------------------------------------------------------------------
 * Bottom bar
 * ------------------------------------------------------------------- */
.vhc-cookiebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--vhc-z-toast, 950);
	background: var(--vhc-color-primary, #0F2317);
	color: var(--vhc-color-text-inverse, #F5F3EE);
	border-top: 1px solid var(--vhc-color-accent-gold, #BB7822);
	padding: var(--vhc-space-sm, 1.25rem) var(--vhc-space-md, 2rem);
	transform: translateY(100%);
	transition: transform var(--vhc-duration-entrance, 500ms) var(--vhc-ease-entrance, cubic-bezier(0.16,1,0.3,1));
}
.vhc-cookiebar.is-visible {
	transform: translateY(0);
}
.vhc-cookiebar[hidden] {
	display: none;
}
.vhc-cookiebar__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vhc-space-md, 2rem);
	flex-wrap: wrap;
}
.vhc-cookiebar__text {
	flex: 1 1 420px;
	min-width: 0;
}
.vhc-cookiebar__label {
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-label);
	font-weight: 700;
	letter-spacing: var(--vhc-ls-label, 0.05em);
	text-transform: uppercase;
	color: var(--vhc-color-accent-gold, #BB7822);
	margin: 0 0 0.35rem;
}
.vhc-cookiebar__body {
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-caption, 0.875rem);
	line-height: 1.6;
	color: var(--vhc-color-text-inverse, #F5F3EE);
	opacity: 0.92;
	margin: 0;
	max-width: 62ch;
}
/* Ancestor-prefixed (.vhc-cookiebar .vhc-cookiebar__body a, not just
   .vhc-cookiebar__body a) deliberately — Elementor's own `.elementor-kit-5 a`
   rule ties this selector's specificity exactly and wins on source order,
   which was rendering this link in the kit's dark link color: invisible
   against the bar's own dark green background. The extra ancestor class
   clears that tie for good instead of depending on load order. */
.vhc-cookiebar .vhc-cookiebar__body a {
	color: var(--vhc-color-text-inverse, #F5F3EE);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: rgba(245, 243, 238, 0.5);
}
.vhc-cookiebar .vhc-cookiebar__body a:hover {
	color: var(--vhc-color-text-inverse, #F5F3EE);
	text-decoration-color: var(--vhc-color-accent-gold, #BB7822);
}
.vhc-cookiebar__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--vhc-space-xs, 0.75rem);
	flex-wrap: wrap;
}

/* Reject sits at equal visual weight to Accept (both filled/bordered
   buttons of the same size) — deliberately avoiding the dark-pattern of
   a prominent "Accept" button next to a de-emphasised text-link reject.
   Customise is the tertiary action (opens more detail, not itself a
   yes/no decision), styled as a plain underlined link accordingly.
   Accept needs no override for its resting state — .vhc-btn.vhc-btn--primary
   already sets gold background + near-white text, the fixed, correct-
   contrast pairing used for every other primary CTA on the site (do NOT
   reintroduce dark-on-gold text here) — but its HOVER state, like every
   hover rule below, is pinned explicitly on both color and background.
   Reason: Elementor's own `.elementor-kit-5 button:hover` rule applies a
   background/color pair of its own on hover, and if either property is
   left undeclared by this component (e.g. .vhc-btn--ghost is meant to
   always have a transparent background, so nothing here ever set one for
   its hover state), Elementor's kit rule fills the gap uncontested —
   which is exactly what made Customise's hover render gold text on a
   gold background (both picking up the kit's accent color) and go
   invisible. All four interactive elements below now explicitly declare
   both color and background-color on :hover, ancestor-prefixed for a
   comfortable specificity margin over the kit rule regardless of CSS
   load order. */
.vhc-cookiebar .vhc-cookiebar__accept.vhc-btn.vhc-btn--primary:hover {
	background-color: var(--vhc-color-accent-gold-muted, #D6A04E);
	color: var(--vhc-color-text-inverse, #F5F3EE);
}
.vhc-cookiebar .vhc-cookiebar__reject.vhc-btn.vhc-btn--secondary {
	border-color: rgba(245, 243, 238, 0.5);
	color: var(--vhc-color-text-inverse, #F5F3EE);
}
.vhc-cookiebar .vhc-cookiebar__reject.vhc-btn.vhc-btn--secondary:hover {
	background-color: var(--vhc-color-text-inverse, #F5F3EE);
	color: var(--vhc-color-primary, #0F2317);
}
.vhc-cookiebar .vhc-cookiebar__customise.vhc-btn.vhc-btn--ghost {
	color: var(--vhc-color-text-inverse, #F5F3EE);
	background-color: transparent;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.vhc-cookiebar .vhc-cookiebar__customise.vhc-btn.vhc-btn--ghost:hover {
	color: var(--vhc-color-accent-gold, #BB7822);
	background-color: transparent;
}

/* Mobile: a short, compact strip — not a stacked full-height block. The
   previous version stacked the label, full body paragraph, and three
   full-width buttons in a single column, which added up to most of a
   small phone's viewport (reported as "taking full screen, covering all
   content"). Fixed by: dropping the small "Cookies" label (redundant
   with the body text right below it), tightening padding/line-height,
   and — the main space saver — making Accept a single full-width row
   with Reject/Customise sharing a second, shorter row below it instead
   of three full-width rows stacked individually. A max-height + internal
   scroll is kept as a safety net for unusually long translated strings
   on very short viewports, so the bar can never exceed the screen even
   in a worst case. */
@media (max-width: 640px) {
	.vhc-cookiebar {
		padding: 0.85rem 1rem;
		max-height: 70vh;
		overflow-y: auto;
	}
	.vhc-cookiebar__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}
	/* The real cause of the "full screen" bug: .vhc-cookiebar__text's
	   `flex: 1 1 420px` (below, desktop rule) sets a 420px FLEX-BASIS
	   that means width in the desktop row layout — but flex-basis always
	   tracks the main axis, and .vhc-cookiebar__inner switches to
	   flex-direction:column right above, making that same 420px apply to
	   HEIGHT instead. The text block was rendering 420px tall regardless
	   of its actual (much shorter) content, which is what was pushing the
	   whole bar toward full-screen. */
	.vhc-cookiebar__text {
		flex: 0 1 auto;
	}
	.vhc-cookiebar__label {
		display: none;
	}
	.vhc-cookiebar__body {
		font-size: 0.8125rem;
		line-height: 1.45;
	}
	.vhc-cookiebar__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}
	.vhc-cookiebar__accept {
		grid-column: 1 / -1;
	}
	.vhc-cookiebar__actions .vhc-btn {
		width: 100%;
		padding-block: 0.6rem;
		font-size: 0.8125rem;
	}
}

/* ---------------------------------------------------------------------
 * Preferences modal — self-contained backdrop/viewport (not dependent on
 * vhc-form-modal.css being enqueued on every page, since the cookie
 * banner must work everywhere); the JS behavior pattern (two-stage
 * .is-open/.is-visible, focus trap, ESC-close, reduced-motion) mirrors
 * vhc-form-modal.js exactly for a consistent feel with the rest of the
 * site's overlays.
 * ------------------------------------------------------------------- */
.vhc-cookie-modal {
	position: fixed;
	inset: 0;
	/* Must sit above the bar (--vhc-z-toast) when open, not below it — the
	   site's z-scale otherwise ranks toast above modal, which is backwards
	   for this specific interaction (Customise opens the modal on top of
	   the bar it was triggered from). */
	z-index: calc(var(--vhc-z-toast, 950) + 10);
	display: none;
}
.vhc-cookie-modal.is-open {
	display: block;
}
.vhc-cookie-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 35, 23, 0.6);
	opacity: 0;
	transition: opacity var(--vhc-duration-entrance, 400ms) var(--vhc-ease-out, ease-out);
}
.vhc-cookie-modal.is-visible .vhc-cookie-modal__backdrop {
	opacity: 1;
}
.vhc-cookie-modal__viewport {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--vhc-space-md, 2rem) var(--vhc-space-sm, 1.25rem);
}
.vhc-cookie-modal__panel {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--vhc-duration-entrance, 400ms) var(--vhc-ease-entrance, cubic-bezier(0.16,1,0.3,1)),
		transform var(--vhc-duration-entrance, 400ms) var(--vhc-ease-entrance, cubic-bezier(0.16,1,0.3,1));
	box-shadow: 0 24px 64px rgba(15, 35, 23, 0.28);
}
.vhc-cookie-modal.is-visible .vhc-cookie-modal__panel {
	opacity: 1;
	transform: translateY(0);
}
.vhc-cookie-modal__close {
	position: absolute;
	top: var(--vhc-space-sm, 1.25rem);
	right: var(--vhc-space-sm, 1.25rem);
	background: none;
	border: 0;
	color: var(--vhc-color-neutral, #5F6567);
	cursor: pointer;
	padding: 0.25rem;
	line-height: 1;
	font-size: 1.5rem;
}
.vhc-cookie-modal__close:hover {
	color: var(--vhc-color-primary, #0F2317);
}
[dir="rtl"] .vhc-cookie-modal__close {
	right: auto;
	left: var(--vhc-space-sm, 1.25rem);
}
@media (prefers-reduced-motion: reduce) {
	.vhc-cookie-modal__backdrop,
	.vhc-cookie-modal__panel {
		transition: none;
	}
}
.vhc-cookie-modal__panel {
	max-width: 40rem;
	width: 100%;
	background: var(--vhc-color-bg, #FAFAF8);
	border-radius: var(--vhc-radius-lg, 16px);
	padding: var(--vhc-space-lg, 2.5rem);
}
.vhc-cookie-modal__title {
	font-family: var(--vhc-font-display);
	font-size: var(--vhc-fs-h3);
	font-weight: 600;
	color: var(--vhc-color-primary, #0F2317);
	margin: 0 0 0.5rem;
}
.vhc-cookie-modal__intro {
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-caption, 0.875rem);
	line-height: 1.6;
	color: var(--vhc-color-neutral, #5F6567);
	margin: 0 0 var(--vhc-space-md, 2rem);
	max-width: 56ch;
}
.vhc-cookie-modal__intro a {
	color: var(--vhc-color-accent-gold, #BB7822);
}

.vhc-cookie-category {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--vhc-space-sm, 1.25rem);
	padding: var(--vhc-space-sm, 1.25rem) 0;
	border-top: 1px solid var(--vhc-color-border, #E2DFD6);
}
.vhc-cookie-category:first-of-type {
	border-top: none;
}
.vhc-cookie-category__copy {
	flex: 1 1 auto;
	min-width: 0;
}
.vhc-cookie-category__name {
	font-family: var(--vhc-font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--vhc-color-primary, #0F2317);
	margin: 0 0 0.3rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.vhc-cookie-category__always-on {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--vhc-color-neutral, #5F6567);
}
.vhc-cookie-category__desc {
	font-family: var(--vhc-font-body);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--vhc-color-neutral, #5F6567);
	margin: 0;
}

/* Toggle switch */
.vhc-cookie-toggle {
	flex: 0 0 auto;
	position: relative;
	display: inline-flex;
	align-items: center;
}
.vhc-cookie-toggle input {
	position: absolute;
	opacity: 0;
	width: 44px;
	height: 24px;
	margin: 0;
	cursor: pointer;
}
.vhc-cookie-toggle input:disabled {
	cursor: not-allowed;
}
.vhc-cookie-toggle__track {
	width: 44px;
	height: 24px;
	border-radius: var(--vhc-radius-pill, 999px);
	background: var(--vhc-color-border, #E2DFD6);
	transition: background-color var(--vhc-duration-micro, 180ms) var(--vhc-ease-out, ease-out);
	position: relative;
	pointer-events: none;
}
.vhc-cookie-toggle__track::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 35, 23, 0.25);
	transition: transform var(--vhc-duration-micro, 180ms) var(--vhc-ease-out, ease-out);
}
.vhc-cookie-toggle input:checked ~ .vhc-cookie-toggle__track {
	background: var(--vhc-color-accent-gold, #BB7822);
}
.vhc-cookie-toggle input:checked ~ .vhc-cookie-toggle__track::before {
	transform: translateX(20px);
}
[dir="rtl"] .vhc-cookie-toggle input:checked ~ .vhc-cookie-toggle__track::before {
	transform: translateX(-20px);
}
.vhc-cookie-toggle input:disabled ~ .vhc-cookie-toggle__track {
	background: var(--vhc-color-accent-gold, #BB7822);
	opacity: 0.55;
}
.vhc-cookie-toggle input:focus-visible ~ .vhc-cookie-toggle__track {
	box-shadow: 0 0 0 3px var(--vhc-color-focus-ring, rgba(187,120,34,.35));
}

.vhc-cookie-modal__footer {
	margin-top: var(--vhc-space-md, 2rem);
	padding-top: var(--vhc-space-sm, 1.25rem);
	border-top: 1px solid var(--vhc-color-border, #E2DFD6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--vhc-space-sm, 1.25rem);
}
.vhc-cookie-modal__links {
	display: flex;
	gap: var(--vhc-space-sm, 1.25rem);
	font-size: 0.8125rem;
}
/* Same tied-specificity issue as the bar's own policy link (see comment
   above .vhc-cookiebar .vhc-cookiebar__body a) — ancestor-prefixed for a
   real margin over Elementor's `.elementor-kit-5 a` rule rather than
   depending on load order. */
.vhc-cookie-modal .vhc-cookie-modal__links a {
	color: var(--vhc-color-neutral, #5F6567);
	text-decoration: underline;
}
.vhc-cookie-modal .vhc-cookie-modal__links a:hover {
	color: var(--vhc-color-accent-gold, #BB7822);
}
.vhc-cookie-modal__buttons {
	display: flex;
	gap: var(--vhc-space-xs, 0.75rem);
}
/* Save Preferences / Accept All use the plain sitewide .vhc-btn--primary/
   --secondary classes (no cookie-specific modifier to hook a fix onto),
   which only declare a hover BACKGROUND, not hover color — leaving color
   open for Elementor's `.elementor-kit-5 button:hover` rule to win on
   (it out-specifies the base .vhc-btn--primary/--secondary resting-state
   color rule). Pinned here via their data-attributes so both properties
   are always explicit on hover, matching the bar's buttons above. */
[data-vhc-cookie-save].vhc-btn.vhc-btn--primary:hover {
	background-color: var(--vhc-color-accent-gold-muted, #D6A04E);
	color: var(--vhc-color-text-inverse, #F5F3EE);
}
[data-vhc-cookie-accept-all].vhc-btn.vhc-btn--secondary:hover {
	background-color: var(--vhc-color-text, #14201B);
	color: var(--vhc-color-bg, #FAFAF8);
}

@media (max-width: 560px) {
	.vhc-cookie-modal__footer {
		flex-direction: column;
		align-items: stretch;
	}
	.vhc-cookie-modal__buttons {
		flex-direction: column;
	}
	.vhc-cookie-modal__buttons .vhc-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vhc-cookiebar {
		transition: none;
	}
}