/*
 * RockingGEO Answers Ask: widget + selected-list cards (spec §8 "Styling").
 * Everything is scoped under .rgeo-*. Link text in the reply card (answer
 * titles) is #6CC30F with a #333366 hover, like the blog's text links: no
 * underline, weight 400, the browser's focus ring.
 * Buttons and the selected-list cards stay #143300. Hello's reset colors
 * a and a:hover, .page-content a is underlined and Hello paints a pink
 * :hover/:focus on bare buttons, hence the !important color, background
 * and text-decoration on links and buttons here. Kit 1709 styles bare
 * h2/h3 (Bagoss 40/35 px) with .elementor-kit-1709 hN, so the heading
 * rules below use two classes to win. Fonts come from the kit's global
 * variables (Bagoss = primary, Lato = text), with literal fallbacks.
 */

.rgeo-ask {
	--rgeo-dark: #143300;
	--rgeo-green: #6CC30F;
	--rgeo-items: #9DE64F;
	--rgeo-light: #F1F5F2;
	--rgeo-link-hover: #333366;
	box-sizing: border-box;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	font-family: var(--e-global-typography-text-font-family, "Lato"), sans-serif;
}

.rgeo-ask *,
.rgeo-ask *::before,
.rgeo-ask *::after {
	box-sizing: border-box;
}

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

.rgeo-ask__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Thread: grows above the input. */
.rgeo-ask__thread {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}

.rgeo-ask__thread:empty {
	display: none;
}

.rgeo-ask__bubble {
	align-self: flex-end;
	max-width: 90%;
	padding: 12px 18px;
	border-radius: 20px 20px 4px 20px;
	background: var(--rgeo-dark);
	color: #fff;
	font-size: 17px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.rgeo-ask__reply {
	align-self: flex-start;
	max-width: 90%;
	padding: 14px 18px;
	border-radius: 20px 20px 20px 4px;
	background: #fff;
	border: 1px solid #dfe6e1;
	box-shadow: 0 2px 8px rgba(20, 51, 0, 0.06);
	color: #333;
	font-size: 17px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.rgeo-ask__who {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--rgeo-dark);
}

.rgeo-ask__reply p {
	margin: 0 0 8px;
}

.rgeo-ask__reply p:last-child {
	margin-bottom: 0;
}

.rgeo-ask__error {
	color: #8a1f11;
}

.rgeo-ask__note:empty {
	display: none;
}

.rgeo-ask__note {
	margin-top: 8px;
	color: #8a1f11;
	font-size: 15px;
}

/* Results: one item per answer, a thin divider between items. */
.rgeo-ask__results {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.rgeo-ask__result {
	margin: 0;
	padding: 0;
}

.rgeo-ask__result + .rgeo-ask__result {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #dfe6e1;
}

/* Title: the blog's text-link style. No :focus rule, so the browser's focus ring stays. */
.rgeo-ask__title {
	display: block;
	margin: 0 0 6px;
	font-weight: 400;
}

a.rgeo-ask__title {
	color: var(--rgeo-green) !important;
	text-decoration: none !important;
}

a.rgeo-ask__title:hover,
a.rgeo-ask__title:active {
	color: var(--rgeo-link-hover) !important;
	text-decoration: none !important;
}

/* Plain-text fallback (unsafe or missing URL): must not look like a link. */
p.rgeo-ask__title {
	color: var(--rgeo-dark);
}

/* The last word and the link icon never wrap apart. */
.rgeo-ask__nowrap {
	white-space: nowrap;
}

.rgeo-ask__link-icon {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.3em;
	vertical-align: -0.1em;
}

.rgeo-ask__teaser {
	color: #444;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Typing indicator. */
.rgeo-ask__typing {
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 16px 18px;
}

.rgeo-ask__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rgeo-dark);
	opacity: 0.3;
	animation: rgeo-ask-dot 1s infinite ease-in-out;
}

.rgeo-ask__dot:nth-child(2) {
	animation-delay: 0.15s;
}

.rgeo-ask__dot:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes rgeo-ask-dot {
	0%, 100% { opacity: 0.3; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
	.rgeo-ask__dot {
		animation: none;
		opacity: 0.6;
	}
}

/* Main input card. */
.rgeo-ask__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 10px 10px 22px;
	border-radius: 999px;
	background: var(--rgeo-light);
	border: 1px solid #dfe6e1;
}

.rgeo-ask__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #222;
	font: inherit;
	font-size: 18px;
}

.rgeo-ask__input:focus {
	outline: none;
}

.rgeo-ask__form:focus-within {
	border-color: var(--rgeo-dark);
	box-shadow: 0 0 0 3px rgba(108, 195, 15, 0.35);
}

.rgeo-ask__send {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--rgeo-dark) !important;
	color: #fff !important;
	cursor: pointer;
}

.rgeo-ask__send:hover,
.rgeo-ask__send:focus {
	background: var(--rgeo-green) !important;
	color: var(--rgeo-dark) !important;
}

/* Queued: email subscribe form inside the reply card. */
.rgeo-ask__sub {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.rgeo-ask__email {
	flex: 1 1 200px;
	min-width: 0;
	height: 44px;
	padding: 0 14px !important;
	border: 1px solid #c9d3cc !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: #222;
	font: inherit;
	font-size: 16px;
}

.rgeo-ask__notify {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--rgeo-dark) !important;
	color: #fff !important;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.rgeo-ask__notify:hover,
.rgeo-ask__notify:focus {
	background: var(--rgeo-green) !important;
	color: var(--rgeo-dark) !important;
}

.rgeo-ask__notify:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Answered: the "Not the answer you were looking for?" block at the bottom of the card. Its email form is the queued card's. */
.rgeo-ask__again {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #dfe6e1;
}

.rgeo-ask__reply .rgeo-ask__again-title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: inherit;
}

.rgeo-ask__reply .rgeo-ask__again-text {
	margin: 0;
	font-size: 14px;
	color: #444;
}

.rgeo-ask__again .rgeo-ask__sub {
	margin-top: 8px;
}

/* Selected list. */
.rgeo-featured {
	box-sizing: border-box;
	width: 100%;
	font-family: var(--e-global-typography-text-font-family, "Lato"), sans-serif;
}

.rgeo-featured .rgeo-featured__heading {
	margin: 0 0 24px;
	font-family: var(--e-global-typography-primary-font-family, "Bagoss"), sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.25;
	color: #143300;
}

.rgeo-featured__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.rgeo-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border-radius: 16px;
	background: #F1F5F2;
	border: 1px solid transparent;
	color: #333 !important;
	text-decoration: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rgeo-card:hover,
.rgeo-card:focus {
	border-color: #9DE64F;
	box-shadow: 0 6px 18px rgba(20, 51, 0, 0.08);
	text-decoration: none !important;
}

.rgeo-card .rgeo-card__title {
	margin: 0;
	font-family: var(--e-global-typography-primary-font-family, "Bagoss"), sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	color: #143300;
}

.rgeo-card .rgeo-card__teaser {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}

.rgeo-card__more {
	margin-top: auto;
	font-weight: 700;
	color: #143300;
}

/* Load more under the grid. Same pill as .rgeo-ask__notify. */
.rgeo-featured__actions {
	margin: 32px 0 0;
	text-align: center;
}

.rgeo-featured__more {
	height: 48px;
	padding: 0 28px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #143300 !important;
	color: #fff !important;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.rgeo-featured__more:hover,
.rgeo-featured__more:focus {
	background: #6CC30F !important;
	color: #143300 !important;
}

.rgeo-featured__more:disabled {
	opacity: 0.6;
	cursor: default;
}

.rgeo-featured__error {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	color: #8a1f11;
}

@media (max-width: 1024px) {
	.rgeo-featured__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.rgeo-ask,
	.rgeo-featured {
		padding-left: 16px;
		padding-right: 16px;
	}

	.rgeo-featured__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.rgeo-featured .rgeo-featured__heading {
		font-size: 26px;
	}

	.rgeo-ask__form {
		padding-left: 16px;
	}

	.rgeo-ask__input {
		font-size: 16px;
	}
}

/* Email forms (queued card and "Not the answer" block): input and button stacked, full width. */
@media (max-width: 480px) {
	.rgeo-ask__email,
	.rgeo-ask__notify {
		flex: 1 1 100%;
	}
}