/* ==========================================================================
   consent.css - cookie consent banner.
   Loaded unconditionally from header.php, OUTSIDE the $layout branch, so it
   reaches 404.php (legacy chrome) as well as the 15 redesign routes.
   ==========================================================================

   On the tokens: every colour/spacing value below is consumed by name from
   redesign.css:8-37. But redesign.css is loaded INSIDE the $layout ===
   'redesign' branch, so it never arrives on 404.php -- and an undefined
   custom property resolves to nothing, which would leave the banner there
   with no background and unreadable text.

   The fix is a var() fallback per usage, NOT a :root block in this file.
   Redeclaring :root here would be actively harmful: redesign.css:399 drops
   --rd-gutter to 20px inside its <=980px block, and a later unconditional
   :root in this stylesheet would outrank that at every width, silently
   restoring the 32px gutter on .rd-hero / .rd-services / .rd-container
   site-wide. Fallbacks stay inert whenever the real token is defined.
   ========================================================================== */

.rd-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Above main.css:4018's #menu slide-out panel (z-index 10002) -- the
	   highest value anywhere in the CSS tree, and it renders on 404.php. */
	z-index: 10010;
	display: none;
	background: var(--rd-navy, #003D77);
	color: #ffffff;
	font-family: var(--rd-sans, 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.22);
}

.rd-consent.is-visible {
	display: block;
}

.rd-consent-inner {
	max-width: var(--rd-container, 1180px);
	margin: 0 auto;
	padding: 18px var(--rd-gutter, 32px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.rd-consent-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}

.rd-consent-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* Altitude's main.css styles bare <button>, so these restate what they need
   explicitly rather than inheriting -- same convention as redesign.css. */
.rd-consent-accept,
.rd-consent-refuse {
	font-family: var(--rd-sans, 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	padding: 12px 22px;
	border-radius: 3px;
	cursor: pointer;
	white-space: nowrap;
	text-transform: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rd-consent-accept {
	background: var(--rd-gold-light, #E7C27D);
	color: var(--rd-navy, #003D77);
	border: 1px solid var(--rd-gold-light, #E7C27D);
}

.rd-consent-accept:hover {
	background: #ffffff;
	border-color: #ffffff;
}

.rd-consent-refuse {
	background: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.55);
}

.rd-consent-refuse:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #ffffff;
}

.rd-consent-accept:focus-visible,
.rd-consent-refuse:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

@media (max-width: 736px) {
	.rd-consent-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 16px var(--rd-gutter, 32px);
	}
	.rd-consent-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.rd-consent-accept,
	.rd-consent-refuse {
		width: 100%;
		padding: 13px 22px;
	}
}