/* =============================================================================
   COOKIE CONSENT -- banner + preferences modal
   Uses --hp- design tokens (hp-design-system.css / skins). First-party CMP.
   ============================================================================= */

/* Banner --------------------------------------------------------------------- */

.hz-cc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: var(--hp-bg-surface);
	border-top: 1px solid var(--hp-border);
	box-shadow: var(--hp-shadow-raised);
	color: var(--hp-text);
	font-family: var(--hp-font-body);
}

.hz-cc[hidden] { display: none; }

.hz-cc__inner {
	max-width: var(--hp-content-max);
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.hz-cc__copy { flex: 1 1 420px; min-width: 0; }

.hz-cc__title {
	margin: 0 0 0.35rem;
	font-family: var(--hp-font-display);
	font-size: var(--hp-text-xl);
	font-weight: 600;
	color: var(--hp-text);
}

.hz-cc__text {
	margin: 0;
	font-size: var(--hp-text-sm);
	line-height: 1.6;
	color: var(--hp-text-muted);
}

.hz-cc__text a,
.hz-cc-modal a {
	color: var(--hp-gold-light);
	text-decoration: underline;
}

.hz-cc__actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: center;
}

/* Buttons (shared) ----------------------------------------------------------- */

.hz-cc__btn {
	appearance: none;
	cursor: pointer;
	border-radius: 0; /* house style: sharp corners */
	font-family: var(--hp-font-body);
	font-size: var(--hp-text-sm);
	font-weight: 600;
	padding: 0.7rem 1.25rem;
	line-height: 1;
	transition: background var(--hp-dur) var(--hp-ease), border-color var(--hp-dur) var(--hp-ease), color var(--hp-dur) var(--hp-ease);
}

.hz-cc__btn--primary {
	background: var(--hp-gold);
	border: 1px solid var(--hp-gold);
	color: var(--hp-on-accent);
}

.hz-cc__btn--primary:hover { background: var(--hp-gold-light); border-color: var(--hp-gold-light); }

.hz-cc__btn--ghost {
	background: transparent;
	border: 1px solid var(--hp-border);
	color: var(--hp-text);
}

.hz-cc__btn--ghost:hover { border-color: var(--hp-gold); color: var(--hp-gold-light); }

.hz-cc__btn:focus-visible,
.hz-cookie-settings:focus-visible {
	outline: 2px solid var(--hp-gold-light);
	outline-offset: 2px;
}

/* Modal ---------------------------------------------------------------------- */

.hz-cc-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.hz-cc-modal[hidden] { display: none; }

.hz-cc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--hp-bg-overlay);
}

.hz-cc-modal__panel {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--hp-bg-surface);
	border: 1px solid var(--hp-border);
	border-radius: 0; /* house style: sharp corners */
	box-shadow: var(--hp-shadow-raised);
	padding: 1.75rem;
	color: var(--hp-text);
	font-family: var(--hp-font-body);
}

.hz-cc-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.hz-cc-modal__title {
	margin: 0;
	font-family: var(--hp-font-display);
	font-size: var(--hp-text-2xl);
	font-weight: 600;
}

.hz-cc-modal__close {
	appearance: none;
	background: transparent;
	border: 0;
	color: var(--hp-text-muted);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
}

.hz-cc-modal__close:hover { color: var(--hp-text); }

.hz-cc-modal__intro {
	margin: 0 0 1rem;
	font-size: var(--hp-text-sm);
	line-height: 1.6;
	color: var(--hp-text-muted);
}

.hz-cc-gpc {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--hp-border-strong);
	border-radius: 0; /* house style: sharp corners */
	background: var(--hp-gold-muted);
	font-size: var(--hp-text-sm);
	line-height: 1.55;
	color: var(--hp-text);
}

.hz-cc-gpc[hidden] { display: none; }

/* Category rows -------------------------------------------------------------- */

.hz-cc-cat {
	padding: 1rem 0;
	border-top: 1px solid var(--hp-border);
}

.hz-cc-cat__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.hz-cc-cat__label { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }

.hz-cc-cat__name {
	font-size: var(--hp-text-base);
	font-weight: 600;
	color: var(--hp-text);
}

.hz-cc-cat__always {
	font-size: var(--hp-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hp-gold-light);
}

.hz-cc-cat__desc {
	margin: 0.5rem 0 0;
	font-size: var(--hp-text-sm);
	line-height: 1.55;
	color: var(--hp-text-muted);
}

/* Toggle switch -------------------------------------------------------------- */

.hz-cc-switch {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 24px;
	display: inline-block;
}

.hz-cc-switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.hz-cc-switch__track {
	position: absolute;
	inset: 0;
	background: var(--hp-bg-raised);
	border: 1px solid var(--hp-border);
	border-radius: 999px;
	transition: background var(--hp-dur) var(--hp-ease), border-color var(--hp-dur) var(--hp-ease);
	pointer-events: none;
}

.hz-cc-switch__track::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 3px;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--hp-text-muted);
	transition: transform var(--hp-dur) var(--hp-ease), background var(--hp-dur) var(--hp-ease);
}

.hz-cc-switch input:checked + .hz-cc-switch__track {
	background: var(--hp-gold);
	border-color: var(--hp-gold);
}

.hz-cc-switch input:checked + .hz-cc-switch__track::before {
	transform: translateY(-50%) translateX(20px);
	background: var(--hp-on-accent);
}

.hz-cc-switch input:focus-visible + .hz-cc-switch__track {
	outline: 2px solid var(--hp-gold-light);
	outline-offset: 2px;
}

.hz-cc-switch--locked { opacity: 0.85; }
.hz-cc-switch--locked input { cursor: not-allowed; }

/* Modal actions -------------------------------------------------------------- */

.hz-cc-modal__actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--hp-border);
}

/* Footer "Cookie settings" trigger styled like a footer link ----------------- */

.hz-cookie-settings {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
}

/* Match footer link styling when used inside the footer Legal column */
.hz-footer .hz-footer__col ul li button.hz-cookie-settings {
	font-family: var(--hp-font-body);
	font-size: var(--hp-text-sm);
	color: var(--hp-text-muted);
	line-height: 1.4;
	transition: color var(--hp-dur) var(--hp-ease);
}

.hz-footer .hz-footer__col ul li button.hz-cookie-settings:hover {
	color: var(--hp-text);
}

body.hz-cc-open { overflow: hidden; }

/* Responsive ----------------------------------------------------------------- */

/* The phone-only short text and button label (see consent.php). */
.hz-cc__text--short,
.hz-cc__lbl-short { display: none; }

@media ( max-width: 640px ) {
	.hz-cc__inner { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 1rem; }
	.hz-cc__copy { flex: 0 0 auto; }
	.hz-cc__actions { justify-content: flex-start; }
	.hz-cc__actions .hz-cc__btn { flex: 1 1 auto; text-align: center; }
	.hz-cc-modal__actions { justify-content: flex-start; }
	.hz-cc-modal__actions .hz-cc__btn { flex: 1 1 auto; text-align: center; }

	/* ── COMPACT ON PHONES (HORIZON-20260924-001, D1) ──────────────────────
	   Measured: 291px tall = 36% of a 375x812 phone, 45% with the sticky header
	   (the signed limit for all fixed bars together is 25%). Now about 125px:
	   two lines of 16px text, then Essential only and Accept all at EQUAL
	   weight, side by side. Reject must be as easy as accept; that is why the
	   two share one row and one size. The title, the long explanation and the
	   separate Cookie settings button are one tap away in the settings panel
   (the title came back in 1.41.13, below),
	   through the inline link. Desktop is unchanged. */
	.hz-cc__inner {
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
		gap: 0.625rem;
	}
	.hz-cc__text:not(.hz-cc__text--short),
	.hz-cc__actions .hz-cc__btn[data-hz-cc="settings"],
	.hz-cc__lbl-long { display: none; }
	.hz-cc__text--short {
		display: block;
		font-size: 1rem;
		line-height: 1.4;
	}
	/* The title stays on phones too (HORIZON-20260927-001, Core 1.41.13). Alex chose
	   "We value your privacy" so a phone reads like dev.automatehorizon.com's banner,
	   at this layer's own sizes (16px copy, 44px buttons, which dev's phone rules
	   undercut). About 18% of a 375x812 screen, inside the 25% fixed-bar limit. */
	.hz-cc__title {
		font-size: 1.0625rem;
		line-height: 1.25;
		margin: 0 0 0.25rem;
	}
	.hz-cc__lbl-short { display: inline; }
	.hz-cc__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}
	.hz-cc__actions .hz-cc__btn {
		min-height: 44px;
		font-size: 0.9375rem;
	}

	/* ── ONE LINE OF WORDS ON PHONES (Core 1.41.15, HORIZON-20260927-008, Alex "agreed") ──
	   With the title back (1.41.13) the banner measured 149px, and with the 72px sticky
	   header the fixed bars covered 27% of a 375x812 phone, over the 25% limit: the mobile
	   ratchet flagged 23 pages. Now 99px (12%, 21% with the header): the title and the
	   "Cookie settings" link share one line, then the two equal buttons. The explanation
	   sentence is hidden on phones only, by size not by display, so a screen reader still
	   reads it; the full wording is in the settings panel one tap away. */
	.hz-cc__inner {
		padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
		gap: 0.5rem;
	}
	.hz-cc__title { display: inline; font-size: 1rem; line-height: 1.4; margin: 0; }
	.hz-cc__title::after { content: " "; }
	.hz-cc__copy .hz-cc__text--short { display: inline; font-size: 0; line-height: 1.4; }
	.hz-cc__copy .hz-cc__text--short a { font-size: 1rem; white-space: nowrap; }

	/* D18: never stack the banner with the fixed subscribe bar or the floating
	   links button. While the banner is showing, they wait. */
	body:has(#hz-cc:not([hidden])) .hp-subscribe-bar,
	body:has(#hz-cc:not([hidden])) .hp-hottest-links-btn {
		display: none;
	}
}

/* The settings panel on a phone: its close button and switches are tap targets
   too. The probe cannot open it: check it by hand after a deploy. */
@media ( max-width: 640px ) {
	.hz-cc-modal { padding: 0.75rem; }
	.hz-cc-modal__close { min-width: 44px; min-height: 44px; }
	.hz-cc-modal__intro,
	.hz-cc-cat__desc,
	.hz-cc-gpc { font-size: 1rem; }
}