/* Roche FAQ — Frontend Styles */

.roche-faq {
	--ra-border: #e2e6ea;
	--ra-header-bg: #ffffff;
	--ra-header-hover: #f5f7fa;
	--ra-header-open: #003087;
	--ra-header-open-text: #ffffff;
	--ra-panel-bg: #ffffff;
	--ra-text: #1a1a2e;
	--ra-radius: 6px;
	--ra-shadow: 0 2px 8px rgba(0,0,0,0.07);
	--ra-transition: 0.22s ease;

	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--ra-border);
	border-radius: var(--ra-radius);
	overflow: hidden;
	box-shadow: var(--ra-shadow);
	margin: 1.5em 0;
}

.roche-faq__item {
	border-bottom: 1px solid var(--ra-border);
}

.roche-faq__item:last-child {
	border-bottom: none;
}

.roche-faq__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 18px 22px;
	background: var(--ra-header-bg);
	border: none;
	cursor: pointer;
	text-align: left;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ra-text);
	letter-spacing: 0.01em;
	transition: background var(--ra-transition), color var(--ra-transition);
}

.roche-faq__header:hover {
	background: var(--ra-header-hover);
}

.roche-faq__header:focus-visible {
	outline: 2px solid #003087;
	outline-offset: -2px;
	z-index: 1;
	position: relative;
}

.roche-faq__item.is-open > .roche-faq__header {
	background: var(--ra-header-open);
	color: var(--ra-header-open-text);
}

.roche-faq__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-left: 12px;
	transition: transform var(--ra-transition);
}

.roche-faq__item.is-open > .roche-faq__header .roche-faq__icon {
	transform: rotate(180deg);
}

.roche-faq__panel {
	background: var(--ra-panel-bg);
	overflow: hidden;
}

.roche-faq__content {
	padding: 20px 22px 24px;
	font-size: 0.975rem;
	line-height: 1.7;
	color: #444;
}

.roche-faq__content > *:first-child { margin-top: 0; }
.roche-faq__content > *:last-child  { margin-bottom: 0; }