/* ==================================================

	Clippy

	@related stacking_order

================================================== */

.clippy {
	position: fixed;
	right: 15px;
	bottom: 11.5px;
	z-index: var(--z-clippy);

	width: 160.5px;
}

.clippy__toggle {
	display: block;

	width: 100%;
}

.clippy__figure {
	width: 100%;
	height: auto;
}

/* -------------------------------------
	=FAQ bubble
------------------------------------- */

.clippy__bubble {
	position: absolute;
	right: 135px;
	bottom: 62%;
	z-index: 1;

	width: 172px;
	max-height: 220px;
	overflow-y: auto;

	padding: 12px 13px 14px;

	border: 1px solid #e2d9ac;
	border-radius: 8px;
	background-color: #f7f1cf;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);

	font-family: var(--font-family-pixel);
	font-size: 11px;
	line-height: 1.45;
	color: #3a3a3a;
}

.clippy__bubble[hidden] {
	display: none;
}

/* takes focus on toggle-open for announcement; nothing to act on until the next Tab */
.clippy__bubble:focus,
.clippy__bubble:focus-visible {
	outline: none;
}

.clippy__bubble::after {
	content: "";
	position: absolute;
	right: 20px;
	bottom: -8px;

	border-width: 8px 7px 0;
	border-style: solid;
	border-color: #f7f1cf transparent transparent;
}

.clippy__prompt {
	margin-top: 10px;
}

.clippy__options {
	margin-top: 8px;
}

.clippy__option {
	display: flex;
	align-items: center;
	gap: 7px;

	width: 100%;
	padding: 3px 0;

	border: 0;
	background-color: transparent;

	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.clippy__option::before {
	content: "";
	flex: 0 0 auto;

	width: 9px;
	height: 9px;

	border: 1px solid var(--black);
	border-right-color: transparent;
	border-bottom-color: transparent;
	outline: 1px solid #999;
	background-color: var(--white);
}

.clippy__option:hover,
.clippy__option:focus-visible {
	color: var(--blue);
}

/* -------------------------------------
	=Mobile
------------------------------------- */

@media ( max-width: 1076px ) {

	.clippy {
		right: 4px;
		bottom: 46px;

		width: 94.25px;
	}

	.clippy__bubble {
		right: 80px;

		width: 150px;
	}

}