/**
 * 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 declaration below
 *     carries one. `!important` also survives Termly's React re-renders,
 *     which rewrite the inline attribute.
 *
 * 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`) 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;
}