/*
 * Component styles for the shared shortcodes.
 *
 * Loaded after the theme stylesheet, so a site can still override any rule here
 * from its own custom.css. Bump GO_SHARED_VERSION in go-shared.php to bust the
 * cache; there is no separate ?ver= to remember.
 *
 * Colours deliberately come from the theme's --primary / --secondary custom
 * properties, which every GO theme defines. That is what lets one stylesheet
 * serve gonnaorder.com, gonnaorder.io and gonnapay.io.
 */

/* ---------------------------------------------------------------- FAQ ----- */

.accordion-item {
	/* The card's own padding. It is also the clearance the text keeps from the
	   +/- circle on the right, which is what makes the block look symmetric. */
	--go-faq-gutter: 16px;
	/* Width of the FontAwesome plus-circle / minus-circle glyph below. */
	--go-faq-icon: 20px;

	padding: var(--go-faq-gutter);
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 2px 25px -3px rgba(0, 0, 0, 0.1);
	margin-bottom: 10px;
	border: none;
}

.accordion-item h3,
.accordion-item h4 {
	margin: 0;
}

.accordion-button1 {
	position: relative;
	display: flex;
	width: 100%;
	padding: 0;
	margin: 0;
	color: var(--primary);
	background-color: #fff;
	border: 0;
	cursor: pointer;
	text-align: left;
	gap: var(--go-faq-gutter);
}

.accordion-button1:not(.collapsed) {
	margin: 0 0 5px;
}

/* The circle. margin-left:auto parks it against the right edge of the row. */
.accordion-button1::after {
	margin-left: auto;
	content: '\f055';
	font-family: FontAwesome;
	color: #183153;
	font-size: 20px;
}

.accordion-button1:not(.collapsed)::after {
	content: '\f056';
	color: var(--secondary);
}

/* The answer is not part of the flex row above, so the gap does not apply to
   it and it would otherwise run under the circle. Reserve the circle's width
   plus the same gutter, so question and answer wrap at the same point. */
.accordion-collapse {
	padding-right: calc(var(--go-faq-icon) + var(--go-faq-gutter));
}

.accordion-collapse p {
	padding: 0;
	margin: 0;
}