/**
 * Termly consent UI — brand override (#833)
 * =============================================================================
 * Termly's dashboard theme paints its action buttons in the legacy orange
 * (#e86b45), which is off-brand on every page since the v2 teal reskin. Same
 * class of problem as the Constant Contact embed the theme already overrides
 * in `themes/letterjacket/src/scss/layout/_footer.scss` — this is the Termly
 * counterpart, and it lives with the module that loads Termly.
 *
 * HOW TERMLY RENDERS (observed on spectra.test, 2026-07-31, resource-blocker
 * script `app.termly.io/resource-blocker/<uuid>?autoBlock=off`):
 *
 *   - Plain light DOM inside `#termly-code-snippet-support`. NO iframe, NO
 *     shadow root — our CSS reaches every node.
 *   - The dashboard theme is pushed down as inline CUSTOM PROPERTIES on the
 *     single wrapper div directly under that id:
 *       --termly-theme-button-background-color: #e86b45
 *       --termly-theme-button-text-color:       #ffffff
 *       --termly-theme-color / --termly-theme-background-color / font vars
 *   - The banner and modal buttons ALSO carry the resolved colors as inline
 *     `style="background: rgb(232,107,69); …"` attributes, so a plain
 *     stylesheet rule loses no matter how specific. Beating an inline
 *     declaration needs `!important` — that is why every color declaration
 *     below carries one. `!important` also survives Termly's React
 *     re-renders, which rewrite the inline attribute. Layout and layering
 *     rules (sections 5+) override class rules only and need none.
 *
 * SELECTORS: keyed ONLY on Termly's stable semantic hooks (`t-` prefix:
 * `t-consentPrompt`, `t-acceptAllButton`, `t-allowAllButton`,
 * `t-declineAllButton`, `t-preference-button`, `t-preference-modal`; the
 * `data-termly-part` / `data-termly-variant` attributes: `consent-banner`,
 * `banner-message`, `banner-actions`, `banner`) and on
 * the `#termly-code-snippet-support` container. FRAGILITY NOTE: Termly's
 * other classes are content-hashed per release
 * (`termly-styles-module-solid-aab01d`, …) and WILL churn — never key on
 * those. If Termly ever renames the `t-` hooks the override goes silent
 * (buttons return to orange) but nothing breaks; re-check the hook names.
 *
 * DELIBERATE NON-CHANGES (see the issue #833 report):
 *   - "Decline All" keeps the SAME visual weight as "Allow All" (both solid
 *     teal, exactly as Termly ships them both solid orange). Demoting the
 *     decline action would be a consent dark pattern, not a color fix.
 *   - Body copy, the Cookie Policy / Details links and the category toggles
 *     are NOT orange (black text, Termly-blue checkmark) and are left alone:
 *     tinting 12px links teal on white would drop them to ~3:1 contrast.
 */

/* -----------------------------------------------------------------------------
 * 1. Theme variables — retint every Termly rule that reads the dashboard theme
 *    (button variants of banner styles we don't currently render, the consent
 *    badge, future layouts). Matched by the inline custom-property block
 *    rather than by position, so it holds if Termly re-nests its wrapper.
 * -------------------------------------------------------------------------- */
#termly-code-snippet-support [style*="--termly-theme-button-background-color"] {
	--termly-theme-button-background-color: var(--lj-color-primary, #00a5b2) !important;
	--termly-theme-button-text-color: var(--lj-color-text-inverse, #ffffff) !important;
}

/* -----------------------------------------------------------------------------
 * 2. Solid actions — banner "Accept", modal "Allow All" / "Decline All".
 *    These carry the orange inline, so the variables above are not enough.
 * -------------------------------------------------------------------------- */
#termly-code-snippet-support .t-acceptAllButton,
#termly-code-snippet-support .t-allowAllButton,
#termly-code-snippet-support .t-declineAllButton {
	background: var(--lj-color-primary, #00a5b2) !important;
	border-color: var(--lj-color-primary, #00a5b2) !important;
	color: var(--lj-color-text-inverse, #ffffff) !important;
	transition: background var(--lj-duration-1, 120ms) var(--lj-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}

#termly-code-snippet-support .t-acceptAllButton:hover,
#termly-code-snippet-support .t-allowAllButton:hover,
#termly-code-snippet-support .t-declineAllButton:hover,
#termly-code-snippet-support .t-acceptAllButton:focus-visible,
#termly-code-snippet-support .t-allowAllButton:focus-visible,
#termly-code-snippet-support .t-declineAllButton:focus-visible {
	background: var(--lj-color-primary-hover, #008a96) !important;
	border-color: var(--lj-color-primary-hover, #008a96) !important;
	color: var(--lj-color-text-inverse, #ffffff) !important;
}

#termly-code-snippet-support .t-acceptAllButton:active,
#termly-code-snippet-support .t-allowAllButton:active,
#termly-code-snippet-support .t-declineAllButton:active {
	background: var(--lj-color-primary-active, #00747e) !important;
	border-color: var(--lj-color-primary-active, #00747e) !important;
}

/* -----------------------------------------------------------------------------
 * 3. Quiet action — banner "Preferences" (outline). Termly ships it as a
 *    black hairline on white; the theme's quiet button (.lj-btn--ghost) is a
 *    white face with an ink label and a teal ring, filling teal on hover.
 * -------------------------------------------------------------------------- */
#termly-code-snippet-support .t-preference-button {
	background: var(--lj-color-bg, #ffffff) !important;
	border-color: var(--lj-color-primary, #00a5b2) !important;
	color: var(--lj-color-text, #32322c) !important;
	transition:
		background var(--lj-duration-1, 120ms) var(--lj-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
		color var(--lj-duration-1, 120ms) var(--lj-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}

#termly-code-snippet-support .t-preference-button:hover,
#termly-code-snippet-support .t-preference-button:focus-visible {
	background: var(--lj-color-primary, #00a5b2) !important;
	border-color: var(--lj-color-primary, #00a5b2) !important;
	color: var(--lj-color-text-inverse, #ffffff) !important;
}

/* -----------------------------------------------------------------------------
 * 4. Focus ring — Termly ships none on these buttons. Keyboard users get the
 *    theme's ring treatment (offset outline in the darkest teal so it reads
 *    against both the teal fill and the white banner).
 * -------------------------------------------------------------------------- */
#termly-code-snippet-support .t-acceptAllButton:focus-visible,
#termly-code-snippet-support .t-allowAllButton:focus-visible,
#termly-code-snippet-support .t-declineAllButton:focus-visible,
#termly-code-snippet-support .t-preference-button:focus-visible {
	outline: 2px solid var(--lj-color-primary-active, #00747e) !important;
	outline-offset: 2px !important;
}

/* -----------------------------------------------------------------------------
 * 5. Layering (#1527) — the banner sits just under first-party modal surfaces
 *    (--lj-z-modal and up: the checkout-prep drawer, the filters drawer, the
 *    mobile nav), so it never covers their actions while one is open. The
 *    Preferences modal is a separate node and keeps Termly's own z-index.
 * -------------------------------------------------------------------------- */
#termly-code-snippet-support [data-termly-part="consent-banner"] {
	z-index: calc(var(--lj-z-modal, 1000) - 1);
}

/* -----------------------------------------------------------------------------
 * 6. Compact banner below the theme's md breakpoint (#1527) — a full-width
 *    bar instead of a card: the message becomes a 2.5-line scroll window
 *    (the full text and its links stay in place, nothing is hidden) and the
 *    actions sit side by side as 44px targets. About 113px tall at 375px
 *    wide, against 362px for Termly's stacked layout.
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	#termly-code-snippet-support [data-termly-part="consent-banner"][data-termly-variant="banner"] {
		width: 100%;
		max-width: none;
		margin: 0;
		border-radius: 0;
		padding: var(--lj-space-2, 0.5rem) var(--lj-space-4, 1rem);
	}

	#termly-code-snippet-support [data-termly-variant="banner"] [data-termly-part="banner-message"] {
		max-height: 3.75em;
		margin: 0;
		line-height: 1.5;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	#termly-code-snippet-support [data-termly-variant="banner"] [data-termly-part="banner-actions"] {
		flex-direction: row;
		gap: var(--lj-space-2, 0.5rem);
		width: 100%;
		box-sizing: border-box;
		margin: var(--lj-space-2, 0.5rem) 0 0;
		padding: 0;
		border: 0;
	}

	#termly-code-snippet-support [data-termly-variant="banner"] [data-termly-part="banner-actions"] button {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		max-width: none;
		min-height: 44px;
		padding: 0 var(--lj-space-3, 0.75rem);
	}
}