/*
 * Site Answers widget. Colours come from OGAL's design tokens when a site has
 * them. Otherwise only the accent is borrowed from the theme (GeneratePress's
 * "accent" slot, then the theme.json "primary" colour), because that's the one
 * colour whose meaning is the same on every site: GeneratePress's other slots
 * ("contrast" and so on) are whatever each site made them, often a bright brand
 * colour. Everything else falls back to neutral greys, and the header to a
 * darker shade of the accent. The plugin's style settings override all of
 * this per site (see OGAL_SA_Front::style_overrides()).
 *
 * Fonts: the plugin's font settings (--sa-font-*) win, then the site's
 * --font-body / --font-heading tokens. With neither, the declaration is
 * invalid and the widget inherits the page's own font.
 */

.site-answers {
	--sa-accent: var(--color-accent, var(--accent, var(--wp--preset--color--primary, #1c6ea4)));
	--sa-accent-hover: var(--color-accent-hover, color-mix(in srgb, var(--sa-accent) 80%, #000));
	--sa-on-accent: var(--color-on-accent, #fff);
	--sa-text: var(--color-text, #2b2f33);
	--sa-muted: var(--color-text-muted, #5f666d);
	--sa-heading: var(--color-heading, color-mix(in srgb, var(--sa-accent) 55%, #000));
	--sa-surface: var(--color-surface, #fff);
	--sa-tint: var(--color-surface-tint, color-mix(in srgb, var(--sa-accent) 7%, var(--sa-surface)));
	--sa-border: var(--color-border-field, #7a8288);
	--sa-focus: var(--color-focus, var(--sa-accent));
	--sa-link: var(--color-link, var(--sa-accent-hover));
	--sa-error: var(--color-error, #b3261e);
	--sa-radius: var(--radius-m, 8px);
	--sa-radius-s: var(--radius-s, 4px);
	--sa-gap: 1rem;

	font-family: var(--sa-font-body, var(--font-body));
	font-size: var(--font-size-s, 1rem);
	line-height: 1.5;
	color: var(--sa-text);
}

.site-answers *,
.site-answers *::before,
.site-answers *::after {
	box-sizing: border-box;
}

/*
 * Themes often size every paragraph, list item, heading and field (p { font-size:
 * 1.25rem }). That beats inheritance, so text inside the widget follows the
 * widget instead. :where() adds no weight, so the component rules below can
 * still set their own sizes.
 */
.site-answers :where(p, li, h2, h3, blockquote, ul, ol, label, input, button, a, mark, span) {
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

/* Two-tone focus ring: a white gap inside a colored outline, so it shows
   on light and dark page backgrounds alike. */
.site-answers :focus-visible {
	outline: 2px solid var(--sa-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

.site-answers__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Toggle bubble */

.site-answers__toggle {
	position: fixed;
	inset-block-end: max(1rem, env(safe-area-inset-bottom));
	inset-inline-end: max(1rem, env(safe-area-inset-right));
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 3.5rem;
	padding: 0 1.25rem 0 1rem;
	border: 0;
	border-radius: var(--radius-pill, 999px);
	background: var(--sa-accent);
	color: var(--sa-on-accent);
	font: inherit;
	font-weight: var(--font-weight-bold, 700);
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.2);
	cursor: pointer;
}

/*
 * Themes often restyle every button:hover and button:focus (GeneratePress
 * turns the text white). Each widget button sets its own hover and focus
 * colours so the theme can't make text vanish.
 */
.site-answers__toggle:focus {
	background: var(--sa-accent);
	color: var(--sa-on-accent);
}

.site-answers__toggle:hover {
	background: var(--sa-accent-hover);
	color: var(--sa-on-accent);
}

.site-answers__toggle svg {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
}

.site-answers__toggle[aria-expanded="true"] .site-answers__icon-open,
.site-answers__toggle[aria-expanded="false"] .site-answers__icon-close {
	display: none;
}

@media (max-width: 30em) {
	.site-answers__toggle {
		padding: 0;
		width: 3.5rem;
		justify-content: center;
	}

	.site-answers__toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* Panel */

.site-answers__panel {
	position: fixed;
	inset-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + 4.25rem);
	inset-inline-end: max(1rem, env(safe-area-inset-right));
	z-index: 9999;
	display: flex;
	flex-direction: column;
	width: min(26rem, calc(100vw - 2rem));
	max-height: min(40rem, calc(100dvh - 6.5rem));
	border-radius: var(--sa-radius);
	background: var(--sa-surface);
	box-shadow: 0 8px 40px rgb(0 0 0 / 0.22);
	/* If everything can't fit, scroll rather than cut off the footer. */
	overflow-y: auto;
}

/* Short screens (landscape phones, 200% zoom): the whole panel scrolls as
   one, instead of squeezing the answers and hiding the footer and its links. */
@media (max-height: 34em) {
	.site-answers__log {
		flex: none;
		min-height: 0;
		overflow: visible;
	}
}

.site-answers__panel[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.site-answers__panel:not([hidden]) {
		animation: site-answers-in 160ms ease-out;
	}

	@keyframes site-answers-in {
		from {
			opacity: 0;
			transform: translateY(0.5rem);
		}
	}
}

.site-answers__header {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: var(--sa-gap);
	padding: var(--sa-gap) var(--sa-gap) 0.75rem 1.25rem;
	background: var(--sa-heading);
	color: var(--sa-on-accent);
}

.site-answers__title {
	margin: 0;
	font-family: var(--sa-font-heading, var(--font-heading));
	font-size: 1.25rem;
	line-height: 1.3;
	color: inherit;
}

.site-answers__subtitle {
	margin: 0.125rem 0 0;
	font-size: var(--font-size-xs, 0.875rem);
	opacity: 0.9;
}

.site-answers__close {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: -0.25rem -0.25rem 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.site-answers__close:focus {
	background: transparent;
	color: inherit;
}

.site-answers__close:hover {
	background: rgb(255 255 255 / 0.15);
	color: inherit;
}

.site-answers__close:focus-visible {
	outline-color: currentColor;
}

.site-answers__close svg {
	width: 1.25rem;
	height: 1.25rem;
}

.site-answers__log {
	position: relative;
	flex: 1 1 auto;
	min-height: 8rem;
	padding: var(--sa-gap) 1.25rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.site-answers__log > * + * {
	margin-top: 1.75rem; /* Clear separation between one question and the next. */
}

/* Low priority (:where adds none), so the spacing rules below still apply. */
:where(.site-answers__log) p {
	margin: 0;
}

.site-answers__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-answers__suggestion {
	min-height: 2.25rem;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--sa-accent);
	border-radius: var(--radius-pill, 999px);
	background: var(--sa-surface);
	color: var(--sa-accent-hover);
	font: inherit;
	font-size: var(--font-size-xs, 0.875rem);
	text-align: start;
	cursor: pointer;
}

.site-answers__suggestion:focus {
	background: var(--sa-surface);
	color: var(--sa-accent-hover);
}

.site-answers__suggestion:hover {
	background: var(--sa-tint);
	color: var(--sa-accent-hover);
}

/* One question and what came back */

.site-answers__exchange > * + * {
	margin-top: 0.75rem;
}

/* The visitor's bubble gets more room before the answer starts. */
.site-answers__exchange > .site-answers__question + * {
	margin-top: 1.25rem;
}

.site-answers__question {
	width: fit-content;
	max-width: 85%;
	margin-inline-start: auto !important;
	padding: 0.5rem 0.875rem;
	border-radius: var(--sa-radius) var(--sa-radius) var(--sa-radius-s) var(--sa-radius);
	background: var(--sa-accent);
	color: var(--sa-on-accent);
}

.site-answers__status {
	color: var(--sa-muted);
	font-style: italic;
}

/* A heading for screen readers, styled like the text around it. */
.site-answers .site-answers__lead {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
}

.site-answers__results {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-answers__result {
	padding: 0.875rem 1rem;
	border-inline-start: 4px solid var(--sa-accent);
	border-radius: var(--sa-radius-s);
	background: var(--sa-tint);
}

.site-answers__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--font-size-xs, 0.875rem);
	font-style: normal;
	color: var(--sa-text);
}

.site-answers__quote > * {
	margin: 0;
}

.site-answers__quote > * + * {
	margin-top: 0.375rem;
}

.site-answers__quote ul {
	padding-inline-start: 1.25rem;
}

.site-answers__quote mark {
	padding: 0 0.125rem;
	background: rgb(255 214 102 / 0.55);
	color: inherit;
}

.site-answers__source {
	margin-top: 0.5rem !important;
	font-size: var(--font-size-xs, 0.875rem);
	font-weight: var(--font-weight-bold, 700);
}

.site-answers__source a {
	color: var(--sa-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.site-answers__source a:hover {
	color: var(--sa-heading);
}

/* Special messages (e.g. a crisis line), shown above the answers */

.site-answers__exchange > .site-answers__notice {
	margin-top: 1rem;
}

.site-answers__notice {
	padding: 0.875rem 1rem;
	border-inline-start: 4px solid var(--sa-notice, #b45309);
	border-radius: var(--sa-radius-s);
	background: var(--sa-notice-bg, #fff7ed);
	color: var(--sa-text);
	font-weight: var(--font-weight-bold, 700);
}

.site-answers__notice p + p {
	margin-top: 0.375rem !important;
}

.site-answers__notice a {
	color: var(--sa-link);
	text-decoration: underline;
}

/* No answer: button to the contact page */

.site-answers__exchange > .site-answers__contact {
	margin-top: 1rem;
}

/* Shared by the Ask button and the contact link. */
.site-answers__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	border: 0;
	border-radius: var(--radius-pill, 999px);
	background: var(--sa-accent);
	color: var(--sa-on-accent);
	font: inherit;
	font-weight: var(--font-weight-bold, 700);
	text-decoration: none;
	cursor: pointer;
}

.site-answers__button:focus,
.site-answers__button:visited {
	background: var(--sa-accent);
	color: var(--sa-on-accent);
}

.site-answers__button:hover {
	background: var(--sa-accent-hover);
	color: var(--sa-on-accent);
}

.site-answers__button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.site-answers__message--error {
	color: var(--sa-error);
}

/* Ask box */

.site-answers__form input {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius-s);
	background: var(--sa-surface);
	color: var(--sa-text);
	font: inherit;
}

.site-answers__form {
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem 0.25rem;
	border-top: 1px solid var(--color-border, #dbe6eb);
}

.site-answers__form .site-answers__button {
	flex: none;
}

.site-answers__note {
	margin: 0;
	padding: 0.25rem 1.25rem 0.75rem;
	font-size: 0.75rem;
	color: var(--sa-muted);
}

.site-answers__note p {
	margin: 0;
}

.site-answers__note p + p {
	margin-top: 0.25rem;
}