/**
 * css/components/cookie-consent.css — 2.0 skin for Cookie Law Info.
 *
 * The plugin ships its own inline styles (grey pill buttons, system font,
 * rounded corners) which read as a third-party artefact sitting on top of the
 * site. This restyles the consent bar and its settings modal onto the brand:
 * ink band, cream text, Averta, hard edges, `.cg-btn`-shaped actions.
 *
 * The plugin is third-party (never edited — see CLAUDE.md); everything here
 * is theme CSS reaching in by class name only. `#cookie-law-info-bar` is the
 * plugin's own id and its inline background is set on that element, so the
 * bar rules are id-scoped to outrank it without `!important`.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

/* ---------- Consent bar ---------- */

#cookie-law-info-bar {
	padding: 22px var( --pad-x );
	border-top: var( --hairline ) solid var( --rule-on-dark );
	background: var( --cg-ink );
	box-shadow: none;
	font-family: var( --font-sans );
	color: var( --cg-cream );
}

#cookie-law-info-bar .cli-bar-container {
	gap: 24px;
	align-items: center;
}

#cookie-law-info-bar .cli-bar-message {
	font-family: var( --font-sans );
	font-size: 14px;
	line-height: 1.5;
	color: var( --cg-cream );
}

#cookie-law-info-bar a {
	color: var( --cg-cream );
	text-decoration: underline;
	text-underline-offset: 3px;
}

#cookie-law-info-bar a:hover {
	color: var( --accent );
}

/* Actions — shaped like .cg-btn: hard edges, Averta, tracked caps. */
#cookie-law-info-bar .cli-bar-btn_container a,
#cookie-law-info-bar .cli_action_button,
#cookie-law-info-bar .cli-bar-btn_container .cli_settings_button {
	display: inline-block;
	padding: 14px 26px;
	border: var( --box-border ) solid var( --cg-cream );
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var( --font-sans );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --cg-cream );
}

#cookie-law-info-bar .cli_action_button:hover,
#cookie-law-info-bar .cli-bar-btn_container a:hover {
	background: var( --cg-cream );
	color: var( --cg-ink );
}

/* The accept action is the primary — solid rust. */
#cookie-law-info-bar .cli_action_button[ data-cli_action='accept' ] {
	border-color: var( --accent );
	background: var( --accent );
	color: var( --cg-cream );
}

#cookie-law-info-bar .cli_action_button[ data-cli_action='accept' ]:hover {
	border-color: var( --cg-cream );
	background: var( --cg-cream );
	color: var( --cg-ink );
}

/* ---------- Settings modal ---------- */

.cli-modal .cli-modal-content {
	border-radius: 0;
	background: var( --cg-cream );
	font-family: var( --font-sans );
	color: var( --cg-ink );
}

.cli-modal .cli-modal-close {
	border-radius: 0;
	color: var( --cg-ink );
}

.cli-modal .cli-nav-link,
.cli-modal .cli-privacy-content-text,
.cli-modal .cli-necessary-caption {
	font-family: var( --font-sans );
	color: var( --cg-ink );
}

.cli-modal h4,
.cli-modal .cli-privacy-overview h4 {
	font-family: var( --font-serif );
	font-weight: 400;
	letter-spacing: -0.4px;
	color: var( --cg-ink );
}

.cli-modal .cli-privacy-readmore,
.cli-modal a {
	color: var( --accent );
}

.cli-modal .cli-modal-footer .cli_setting_save_button,
.cli-modal .wt-cli-privacy-accept-btn {
	padding: 14px 26px;
	border: var( --box-border ) solid var( --accent );
	border-radius: 0;
	background: var( --accent );
	font-family: var( --font-sans );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --cg-cream );
}

.cli-modal .cli-modal-footer .cli_setting_save_button:hover,
.cli-modal .wt-cli-privacy-accept-btn:hover {
	border-color: var( --cg-ink );
	background: var( --cg-ink );
	color: var( --cg-cream );
}

@media ( max-width: 820px ) {

	#cookie-law-info-bar {
		padding: 18px var( --pad-x );
	}

	#cookie-law-info-bar .cli-bar-container {
		gap: 16px;
	}
}