/* ==========================================================================
   GAROE GDPR — banner.css
   Consent banner styles + marketing consent checkbox for forms.
   Loaded on every front-end page via the garoe-gdpr plugin.
   Uses CSS custom property fallbacks so it works even if style.css loads
   after this file in an edge case.
   ========================================================================== */


/* ==========================================================================
   CONSENT BANNER
   Fixed strip anchored to the bottom of the viewport. Hidden via the
   [hidden] attribute (server-side when consent cookie exists, JS otherwise).
   ========================================================================== */

.garoe-consent-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: var(--z-toast, 300);
	background: var(--color-carbon, #0a0a0a);
	border-top: 1px solid rgba(200, 169, 110, 0.35);
	padding: 16px 0;
}

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

.garoe-consent-inner {
	max-width: var(--container-max, 1120px);
	margin-inline: auto;
	padding-inline: var(--space-8, 2rem);
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.garoe-consent-text {
	flex: 1;
	min-width: 200px;
	font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
	font-size: 13px;
	line-height: 1.65;
	color: rgba(240, 236, 228, 0.6);
	margin: 0;
}

.garoe-consent-text a {
	color: var(--color-gold, #c8a96e);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s;
}

.garoe-consent-text a:hover {
	color: var(--color-gold-light, #d9be8a);
}

.garoe-consent-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.garoe-consent-btn {
	font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 12px 22px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	white-space: nowrap;
	line-height: 1;
}

.garoe-consent-btn:focus-visible {
	outline: 2px solid var(--color-gold, #c8a96e);
	outline-offset: 3px;
}

/* Accept all — gold filled, mirrors .btn-submit from contact.css */
.garoe-consent-btn--accept {
	background: var(--color-gold, #c8a96e);
	color: var(--color-carbon, #0a0a0a);
	border-color: var(--color-gold, #c8a96e);
}

.garoe-consent-btn--accept:hover {
	background: var(--color-gold-light, #d9be8a);
	border-color: var(--color-gold-light, #d9be8a);
}

/* Decline — ghost/outline */
.garoe-consent-btn--decline {
	background: transparent;
	color: rgba(240, 236, 228, 0.5);
	border-color: rgba(200, 169, 110, 0.22);
}

.garoe-consent-btn--decline:hover {
	color: rgba(240, 236, 228, 0.8);
	border-color: rgba(200, 169, 110, 0.45);
}

@media ( max-width: 600px ) {
	.garoe-consent-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		padding-inline: var(--space-4, 1rem);
	}

	.garoe-consent-actions {
		width: 100%;
	}

	.garoe-consent-btn {
		flex: 1;
		text-align: center;
		justify-content: center;
	}
}


/* ==========================================================================
   MARKETING CONSENT CHECKBOX
   Used by the [garoe_marketing_consent] shortcode inside .form-field
   context (contact page dark theme). Inherits the form's label tokens.
   ========================================================================== */

.garoe-consent-check-wrap {
	margin-top: 4px;
}

.garoe-consent-check-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	/* Inherits .form-field label styles (mono, uppercase, gold-muted) */
	line-height: 1.55;
}

.garoe-consent-check-label input[type="checkbox"] {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin-top: 1px;
	accent-color: var(--color-gold, #c8a96e);
	cursor: pointer;
	/* Remove default styles in favour of accent-color */
	background: rgba(200, 169, 110, 0.04);
	border: 1px solid var(--color-line-dark, rgba(200, 169, 110, 0.2));
}

.garoe-consent-check-label a {
	color: rgba(200, 169, 110, 0.7);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.garoe-consent-check-label a:hover {
	color: var(--color-gold, #c8a96e);
}