/* ==========================================================================
   GEMSai FAQ section - shared across all pages that carry an FAQ.
   Markup is generated by tools/build_faqs.py from faqs/<page>.json.
   Compact <details>/<summary> accordion; no JS required to open a row.
   ========================================================================== */

.gems-faq-band {
	background-color: #cedcff;
	color: blue;
}

.gems-faq-band h2 {
	padding: 14px 15px;
	margin: 0;
	text-align: center;
	line-height: 1.4;
}

.gems-faq-body {
	padding-top: 22px;
	padding-bottom: 22px;
}

.gems-faq-intro {
	font-size: 15px;
	line-height: 1.6;
	color: #555;
	text-align: left;
	margin: 0 0 18px;
}

/* ---------- the accordion ---------- */

.gems-faq-list {
	margin: 0;
	border-top: 1px solid #dfe7f8;
}

.gems-faq-item {
	border-bottom: 1px solid #dfe7f8;
}

/* the clickable question row */
.gems-faq-item > summary {
	position: relative;
	display: block;            /* kills the default disclosure triangle in FF */
	cursor: pointer;
	list-style: none;
	padding: 11px 34px 11px 2px;
	outline: none;
}

.gems-faq-item > summary::-webkit-details-marker { display: none; }
.gems-faq-item > summary::marker { content: ""; }

.gems-faq-item > summary h3 {
	display: inline;
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
	font-weight: 600;
	color: #4b81e8;
}

.gems-faq-item > summary:hover h3,
.gems-faq-item > summary:focus h3 { color: #2f61c0; }

.gems-faq-item > summary:focus-visible {
	outline: 2px solid #4b81e8;
	outline-offset: 2px;
}

/* chevron */
.gems-faq-item > summary::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 2px solid #4b81e8;
	border-bottom: 2px solid #4b81e8;
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.gems-faq-item[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.gems-faq-item[open] > summary h3 { color: #2f61c0; }

/* the answer */
.gems-faq-item .gems-faq-a {
	margin: 0;
	padding: 0 34px 14px 2px;
	font-size: 15px;
	line-height: 1.65;
	color: #444;
	text-align: left;
}

.gems-faq-more {
	margin: 20px 0 0;
	font-size: 15px;
	line-height: 1.6;
	text-align: left;
	color: #555;
}

.gems-faq-more a { color: #4b81e8; font-weight: 600; }

/* ---------- small screens ---------- */

@media (max-width: 575px) {
	.gems-faq-band h2 { font-size: 20px; }
	.gems-faq-item > summary { padding: 10px 30px 10px 2px; }
	.gems-faq-item > summary h3 { font-size: 15px; }
	.gems-faq-item .gems-faq-a {
		font-size: 14.5px;
		padding-right: 4px;
	}
	.gems-faq-intro, .gems-faq-more { font-size: 14.5px; }
}

/* ---------- print ---------- */
/* A closed <details> hides its content via the UA's content-visibility, which
   CSS here cannot override - js/faq.js opens every row on beforeprint. */

@media print {
	.gems-faq-item > summary::after { display: none; }
	.gems-faq-item > summary { cursor: auto; }
}