/* =================================================================
   THE SERVICE PAGE'S QUESTIONS
   =================================================================
   A list of <details>. No script: the browser owns the disclosure, so
   the keyboard, the announced expanded state and find-in-page opening
   a closed answer all work before anything loads.

   PALETTE
   -------
   The site's. #17A2B8 is --themeht-primary-color, the colour of the
   logo and the header, and the dark is a teal-black rather than a
   navy — a blue-black beside a teal accent reads violet.
   ================================================================= */

.cb-faq {
	--brand:      #17A2B8;
	--brand-deep: #0D7C8E;
	--brand-wash: #EAF7F9;

	--ink:        #0A2A33;
	--ink-soft:   #55686F;
	--line:       #DFE9EC;
	--paper:      #FFFFFF;
	--ground:     #F5F8F9;

	background: var(--ground);
}

.cb-faq__inner {
	max-width: 1000px;
	margin-inline: auto;

	/* The same band as the sections above — see the note on --band in
	   service-sections.css. Two neighbouring blocks breathing at
	   different rates is more noticeable than either rate. */
	padding: 64px 24px;
}

/*
 * The section class is on the type rules because the theme ships
 * `.entry-content h2` at 28px/600 and `html[dir="rtl"] h1, h2, h3
 * { line-height: 1.45 }`, both (0,1,1), which beat a plain class at
 * (0,1,0). The same collision resized every heading in the home hero.
 */
.cb-faq .cb-faq__title {
	margin: 0 0 40px;
	font-size: clamp(26px, 2.6vw, 40px);
	font-weight: 800;
	line-height: 1.3;
	color: var(--ink);
	text-wrap: balance;
}

.cb-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cb-faq__item {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease;
}

.cb-faq__item[open] {
	border-color: var(--brand);

	box-shadow:
		0 1px 2px rgba(10, 42, 51, .04),
		0 8px 18px -10px rgba(10, 42, 51, .10);
}

/*
 * The default triangle is removed on both engines.
 *
 * `list-style: none` covers Firefox and Chrome; ::-webkit-details-marker
 * is what Safari still reads. Missing either leaves a stray arrow
 * beside the drawn chevron.
 */
.cb-faq__q {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	cursor: pointer;
	color: var(--ink);
	transition: background-color .2s ease, color .2s ease;
}

.cb-faq__q::-webkit-details-marker { display: none; }

.cb-faq .cb-faq__q > span {
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.6;
}

.cb-faq__q:hover { background: var(--brand-wash); }

.cb-faq__item[open] .cb-faq__q { color: var(--brand-deep); }

/* A visible ring on the row itself: the summary is the control, and
   the theme removes outlines in places. */
.cb-faq__q:focus-visible {
	outline: 2px solid var(--brand-deep);
	outline-offset: -3px;
}

.cb-faq__chevron {
	flex: 0 0 auto;
	color: var(--brand);
	transition: transform .25s ease;
}

.cb-faq__item[open] .cb-faq__chevron { transform: rotate(180deg); }

/* Not mirrored: the chevron means "this opens downward", which is the
   same direction in both writing directions. */
[dir="rtl"] .cb-faq__chevron { transform: none; }
[dir="rtl"] .cb-faq__item[open] .cb-faq__chevron { transform: rotate(180deg); }

.cb-faq .cb-faq__a {
	padding: 0 22px 22px;
	font-size: 16.5px;
	line-height: 1.95;
	color: var(--ink-soft);
	border-block-start: 1px solid var(--line);
	padding-block-start: 18px;
	margin-block-start: 2px;
}

.cb-faq .cb-faq__a > :first-child { margin-block-start: 0; }
.cb-faq .cb-faq__a > :last-child  { margin-block-end: 0; }

.cb-faq .cb-faq__a p { margin: 0 0 14px; }

.cb-faq .cb-faq__a ul,
.cb-faq .cb-faq__a ol {
	margin: 0 0 14px;
	padding-inline-start: 22px;
}

.cb-faq .cb-faq__a li { margin-block-end: 8px; }

.cb-faq .cb-faq__a a,
.cb-faq .cb-faq__a a:visited {
	color: var(--brand-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}


@media (prefers-reduced-motion: reduce) {

	.cb-faq__item,
	.cb-faq__q,
	.cb-faq__chevron { transition: none; }
}


@media (max-width: 767px) {

	.cb-faq__inner { padding: 38px 20px; }

	.cb-faq .cb-faq__title { margin-block-end: 28px; }

	.cb-faq__q { padding: 16px 18px; }

	.cb-faq .cb-faq__q > span { font-size: 16px; }

	.cb-faq .cb-faq__a {
		padding-inline: 18px;
		padding-block-end: 18px;
		font-size: 15.5px;
	}
}