/**
 * Content Questionnaires – Frontend structural CSS.
 *
 * Uses BEM-style class names. No colours or fonts defined here;
 * those are inherited from the active theme. Add your own overrides
 * using the semantic class names.
 */

/* -------------------------------------------------------------------------
   Questionnaire wrapper
   ------------------------------------------------------------------------- */
.cq-questionnaire {
	margin: 1.5em 0;
}

.cq-questionnaire__title {
	margin-bottom: 0.5em;
}

.cq-questionnaire__description {
	margin-bottom: 1em;
}

.cq-questionnaire__questions {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

/* -------------------------------------------------------------------------
   Question
   ------------------------------------------------------------------------- */
.cq-question {
	padding: 1em 0;
	border-top: 1px solid currentColor;
	opacity: 0.85;
}

.cq-question:last-child {
	border-bottom: 1px solid currentColor;
	opacity: 0.85;
}

.cq-question__title {
	margin: 0 0 0.5em;
}

.cq-question__description {
	margin-bottom: 1em;
}

/* -------------------------------------------------------------------------
   Options: shared styles
   ------------------------------------------------------------------------- */
.cq-question__options {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin-bottom: 1em;
}

.cq-option {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	cursor: pointer;
}

.cq-option__input {
	flex-shrink: 0;
	margin-top: 0.2em;
}

.cq-option__label {
	flex: 1;
}

/* -------------------------------------------------------------------------
   Options: button style (type = buttons / button_feedback)
   ------------------------------------------------------------------------- */
.cq-question__options--buttons {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5em;
}

.cq-option--button {
	cursor: pointer;
	padding: 0.4em 1em;
	border: 1px solid currentColor;
	border-radius: 2px;
	background: transparent;
	transition: background 0.15s, color 0.15s;
}

.cq-option--button.is-active,
.cq-option--button[aria-pressed="true"] {
	background: currentColor;
}

.cq-option--button.is-active .cq-option__label,
.cq-option--button[aria-pressed="true"] {
	/* invert text when button is active – theme can override */
	filter: invert(1);
}

/* -------------------------------------------------------------------------
   Actions row
   ------------------------------------------------------------------------- */
.cq-question__actions {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: 0.75em;
}

.cq-save-btn {
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   Save status indicator
   ------------------------------------------------------------------------- */
.cq-save-status {
	font-size: 0.875em;
	opacity: 0.75;
	transition: opacity 0.2s;
}

.cq-save-status[data-state="saving"] {
	opacity: 0.5;
}

.cq-save-status[data-state="error"] {
	color: red; /* kept intentionally as a semantic error colour */
}

/* -------------------------------------------------------------------------
   Feedback (shared, per-option)
   ------------------------------------------------------------------------- */
.cq-feedback {
	margin-top: 1em;
	padding: 0.75em 1em;
	border-left: 3px solid currentColor;
}

.cq-option-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

/* -------------------------------------------------------------------------
   Reveal content (button_feedback type)
   ------------------------------------------------------------------------- */
.cq-reveal-content {
	margin-top: 1em;
}

.cq-reveal-btn {
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   Accessibility: focus visible
   ------------------------------------------------------------------------- */
.cq-option__input:focus-visible,
.cq-save-btn:focus-visible,
.cq-reveal-btn:focus-visible,
.cq-option--button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}