/* =============================================================================
   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;
	}
}

/* ── TABLETS, 641-1024px (HORIZON-20261001-027) ─────────────────────────────
   Until this block a tablet got the desktop banner: 14px copy, three 38px
   buttons, 206px tall, so with the 72px header the fixed bars covered 27% of a
   768x1024 screen. The full mobile ratchet failed every page of every site with
   the banner at 768 (655 NEW on 2026-10-01). Now ONE row: the title and the
   phone's short sentence with its inline Cookie settings link, then Essential
   only and Accept all at EQUAL weight, as on phones (D1: reject as easy as
   accept). 16px copy, 44px buttons, about 103px tall: 17% with the header.
   The full explanation stays one tap away in the settings panel. Desktop
   (1025px up) is unchanged. */
@media ( min-width: 641px ) and ( max-width: 1024px ) {
	.hz-cc__inner {
		flex-wrap: nowrap;
		align-items: center;
		gap: 1.5rem;
		padding: 0.875rem 1.5rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
	}
	.hz-cc__copy { flex: 1 1 auto; }
	.hz-cc__title {
		font-size: 1.0625rem;
		line-height: 1.3;
		margin: 0 0 0.25rem;
	}
	.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.5;
	}
	.hz-cc__lbl-short { display: inline; }
	.hz-cc__actions {
		flex: 0 0 auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}
	.hz-cc__actions .hz-cc__btn {
		min-height: 44px;
		font-size: 0.9375rem;
		white-space: nowrap;
	}

	/* D18 on tablets too: at 768 the floating links button sat on the banner's
	   top edge. While the banner is showing, it and the subscribe bar wait. */
	body:has(#hz-cc:not([hidden])) .hp-subscribe-bar,
	body:has(#hz-cc:not([hidden])) .hp-hottest-links-btn {
		display: none;
	}
}

/* ── A PHONE HELD SIDEWAYS (HORIZON-20261003-001, Alex chose B + D) ─────────────
   Short AND landscape, so no upright phone (812px+ tall) or tablet (768px+ tall)
   can match. Until this block a sideways phone (641px and up) got the TABLET
   banner: 99-127px, 24-34% of a 320-430px-tall screen on its own, and with the
   72px header about half the screen until the visitor answered.
   B: the upright phone's one-line banner (Alex agreed it 2026-09-27, 1.41.15),
   in ONE row because there is width: the title + the Cookie settings link, then
   Essential only and Accept all at equal weight (D1: reject as easy as accept).
   The explanation sentence is hidden BY SIZE, so a screen reader still reads it;
   the full wording is one tap away in the settings panel. The title keeps the
   17px a sideways visitor saw before. 61-68px, 14-21% of the screen. */
@media ( max-width: 1024px ) and ( max-height: 500px ) and ( orientation: landscape ) {
	.hz-cc__inner {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 1rem;
		padding: 0.5rem 1.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
	}
	.hz-cc__copy { flex: 1 1 auto; min-width: 0; }
	.hz-cc__title { display: inline; font-size: 1.0625rem; line-height: 1.3; 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; }
	.hz-cc__actions { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
	.hz-cc__actions .hz-cc__btn { min-height: 44px; font-size: 0.9375rem; white-space: nowrap; }
}

/* D: THE HEADER STEPS ASIDE UNTIL THE BANNER IS ANSWERED (same screens). No banner can
   pass the 25% fixed-bar limit beside a pinned 72px header on a ~390px-tall screen
   (72 + any 44px-button banner > 97px), so while the banner is showing the header
   scrolls with the page instead of staying pinned, like D18 above makes the subscribe
   bar and the links button wait. The banner sets `hidden` when answered, `:has()`
   stops matching, and the header is pinned again at once: no script. `absolute` from
   601px, where the themes already take the header out of the flow; `relative` at 600px
   and under, where it is in the flow (sticky): so nothing at the top of the page moves
   (measured on every home, 2026-10-03). No theme or Core sheet pins the header with
   !important, so this wins in any load order. Trade-off, signed: before answering, a
   visitor who scrolls down has no menu or cart until they scroll up or tap the banner. */
@media ( min-width: 601px ) and ( max-width: 1024px ) and ( max-height: 500px ) and ( orientation: landscape ) {
	html body.hp:has(#hz-cc:not([hidden])) #masthead { position: absolute !important; }
}
@media ( max-width: 600px ) and ( max-height: 500px ) and ( orientation: landscape ) {
	html body.hp:has(#hz-cc:not([hidden])) #masthead { position: relative !important; }
}

/* The settings panel on phones AND tablets (to 1024px since HORIZON-20261002-007):
   its close button, switches and buttons are tap targets too. Measured open (the
   probe with --inject-js clicking Cookie settings): tablets got the desktop panel,
   14px copy and a 35x36 close; on every width the three action buttons were 38px.
   A normal ratchet run cannot open the panel: re-measure it that way after a deploy. */
@media ( max-width: 1024px ) {
	.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; }
	.hz-cc-modal__actions .hz-cc__btn { min-height: 44px; }
}