/* cms-faq.css v1.3.1 | 2026-10-28
   Tokens: corsetmaking.css :root (2026-10-28, Design Tokens Pass 2 / Typography Pass 2).
   No hex, font stacks, px font sizes or var() fallbacks. Spacing / sizing px values are allowed.
   Modes: .cms-faq--mode-faq (accordion) / .cms-faq--mode-comments (blog-style thread).
   Breakpoints: 479 / 767 / 979 / 1199 */

/* ==========================================================================
   Wrapper
   ========================================================================== */
.cms-faq {
	box-sizing: border-box;
	width: 100%;
	padding: 30px 0;
	color: var(--text-body);
	font-family: var(--font-primary);
}

.cms-faq--width-medium {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Left edge lines up with the page H1 */
.cms-faq--width-medium-left {
	max-width: 800px;
	margin-left: 0;
	margin-right: auto;
}

.cms-faq__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Section header
   ========================================================================== */
.cms-faq__header {
	margin-bottom: 24px;
}

.cms-faq__heading {
	margin-top: 0;
	margin-bottom: 10px;
	color: var(--text-body);
	font-weight: 600;
}

/* Page Title - Crimson Text 35 (30 mobile) */
.cms-faq__heading--xl {
	font-family: var(--font-accent-family);
	font-size: var(--font-size-35);
	line-height: 1.2;
}

/* Section Title - Crimson Text 25 (20 mobile) */
.cms-faq__heading--large {
	font-family: var(--font-accent-family);
	font-size: var(--font-accent-size-md);
	line-height: 1.25;
}

/* Content Header - Montserrat 20 (18 mobile) */
.cms-faq__heading--medium {
	font-family: var(--font-heading-family);
	font-size: var(--font-heading-size-md);
	line-height: 1.3;
}

/* Label / Small - Montserrat 14 uppercase */
.cms-faq__heading--small {
	font-family: var(--font-heading-family);
	font-size: var(--font-size-14);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cms-faq__heading a {
	color: inherit;
	text-decoration: none;
}

.cms-faq__heading a:hover,
.cms-faq__heading a:focus-visible {
	color: var(--link-hover);
	text-decoration: underline;
}

.cms-faq__intro {
	font-size: var(--font-size-16);
	line-height: 1.7;
	color: var(--text-body);
}

.cms-faq__intro p {
	margin: 0 0 12px;
}

/* ==========================================================================
   FAQ mode - items
   ========================================================================== */
.cms-faq__item {
	box-sizing: border-box;
}

.cms-faq--border-lines .cms-faq__item {
	border-bottom: 1px solid var(--border-light);
}

.cms-faq--border-lines .cms-faq__item:first-child {
	border-top: 1px solid var(--border-light);
}

.cms-faq--border-solid .cms-faq__item {
	border: 1px solid var(--border-light);
	margin-bottom: 6px;
}

.cms-faq--border-rounded .cms-faq__item {
	border: 1px solid var(--border-light);
	border-radius: 6px;
	margin-bottom: 6px;
	overflow: hidden;
}

/* Question button */
.cms-faq__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 16px 4px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-primary);
	font-size: var(--font-size-16);
	font-weight: 600;
	line-height: 1.4;
	color: var(--text-body);
}

.cms-faq--border-solid .cms-faq__question,
.cms-faq--border-rounded .cms-faq__question {
	padding: 16px 18px;
}

.cms-faq__question:hover,
.cms-faq__question--open {
	color: var(--brand-gold-text);
}

.cms-faq__question:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* Gold question color variant */
.cms-faq--q-gold .cms-faq__question {
	color: var(--brand-gold-text);
}

.cms-faq--q-gold .cms-faq__question:hover,
.cms-faq--q-gold .cms-faq__question--open {
	color: var(--text-body);
}

/* Chevron */
.cms-faq__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-left: 12px;
	position: relative;
}

.cms-faq__icon::before,
.cms-faq__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 9px;
	height: 2px;
	background-color: currentColor;
}

.cms-faq__icon::before {
	left: 1px;
	transform: translateY(-50%) rotate(45deg);
}

.cms-faq__icon::after {
	right: 1px;
	transform: translateY(-50%) rotate(-45deg);
}

.cms-faq__question--open .cms-faq__icon::before {
	transform: translateY(-50%) rotate(-45deg);
}

.cms-faq__question--open .cms-faq__icon::after {
	transform: translateY(-50%) rotate(45deg);
}

/* Answer panel. Height is measured by JS (no 2000px cap, so long answers are never cut off).
   Closed panels are visibility:hidden so links inside can't be tabbed to. */
.cms-faq__answer {
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
}

.cms-faq__answer--open {
	visibility: visible;
}

.cms-faq__answer-inner {
	padding: 0 4px 18px;
	font-size: var(--font-size-16);
	color: var(--text-body);
	line-height: 1.7;
}

.cms-faq--border-solid .cms-faq__answer-inner,
.cms-faq--border-rounded .cms-faq__answer-inner {
	padding: 0 18px 18px;
}

.cms-faq__answer-inner p {
	margin: 0 0 12px;
}

.cms-faq__answer-inner p:last-child {
	margin-bottom: 0;
}

.cms-faq__answer-inner ul,
.cms-faq__answer-inner ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.cms-faq__answer-inner li {
	margin-bottom: 4px;
}

/* Body links (both modes) */
.cms-faq__answer-inner a,
.cms-faq__intro a,
.cms-faq__comment-body a {
	color: var(--link-color);
	text-decoration: underline;
}

.cms-faq__answer-inner a:hover,
.cms-faq__answer-inner a:focus-visible,
.cms-faq__intro a:hover,
.cms-faq__intro a:focus-visible,
.cms-faq__comment-body a:hover,
.cms-faq__comment-body a:focus-visible {
	color: var(--link-hover);
}

/* Ask a Question item */
.cms-faq__item--ask .cms-faq__question {
	font-style: italic;
	color: var(--text-subtle);
}

.cms-faq--q-gold .cms-faq__item--ask .cms-faq__question {
	color: var(--brand-gold-text);
}

.cms-faq__item--ask .cms-faq__question:hover,
.cms-faq__item--ask .cms-faq__question--open {
	color: var(--brand-gold-text);
}

/* ==========================================================================
   Comments & Questions mode
   ========================================================================== */
.cms-faq__comments {
	margin: 0;
	padding: 0 0 0 30px;
	list-style: decimal;
}

.cms-faq__comments > .cms-faq__comment::marker {
	font-size: var(--font-size-16);
	font-weight: 600;
	color: var(--text-body);
}

.cms-faq__comment {
	margin: 0 0 30px;
	padding: 0;
}

.cms-faq__replies {
	margin: 20px 0 0;
	padding: 0 0 0 60px;
	list-style: none;
}

.cms-faq__comment--reply {
	margin-bottom: 0;
}

.cms-faq__meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cms-faq__avatar {
	flex-shrink: 0;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.cms-faq__avatar--staff {
	display: block;
	object-fit: cover;
}

.cms-faq__avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--surface-muted);
	color: var(--text-body);
	font-family: var(--font-ui-family);
	font-size: var(--font-size-16);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.cms-faq__byline {
	margin: 0;
	font-size: var(--font-size-16);
	line-height: 1.4;
}

.cms-faq__author {
	font-weight: 600;
	color: var(--brand-gold-text);
}

.cms-faq__says {
	color: var(--text-body);
}

.cms-faq__date {
	margin: 8px 0 6px;
	font-size: var(--font-size-14);
	color: var(--brand-gold-text);
}

.cms-faq__comment-body {
	font-size: var(--font-size-16);
	line-height: 1.7;
	color: var(--text-body);
}

/* Before the markdown script runs, keep the line breaks readable */
.cms-faq__comment-body[data-markdown]:not([data-rendered]) {
	white-space: pre-line;
}

.cms-faq__comment-body p {
	margin: 0 0 12px;
}

.cms-faq__comment-body p:last-child {
	margin-bottom: 0;
}

.cms-faq__comment-body ul,
.cms-faq__comment-body ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.cms-faq__reply-link {
	display: inline-block;
	margin-top: 10px;
	padding: 4px 0;
	font-size: var(--font-size-14);
	font-weight: 600;
	color: var(--link-color);
	text-decoration: none;
}

.cms-faq__reply-link:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

.cms-faq__reply-link:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* Leave a comment form. scroll-margin-top keeps the heading clear of the
   sticky site header when a Reply link jumps here (1.3.1). */
.cms-faq__respond {
	scroll-margin-top: 90px;
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid var(--border-light);
}

.cms-faq__respond-heading {
	margin: 0 0 10px;
	font-family: var(--font-heading-family);
	font-size: var(--font-heading-size-md);
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-body);
}

/* ==========================================================================
   Form (both modes)
   ========================================================================== */
.cms-faq__ask-intro {
	font-size: var(--font-size-14);
	color: var(--text-muted);
	margin: 0 0 16px;
	line-height: 1.6;
}

.cms-faq__honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.cms-faq__ask-form {
	margin: 0;
}

.cms-faq__ask-field {
	margin-bottom: 14px;
}

.cms-faq__ask-field--half {
	width: calc(50% - 8px);
}

.cms-faq__ask-row {
	display: flex;
	gap: 16px;
	margin-bottom: 14px;
}

.cms-faq__ask-row .cms-faq__ask-field {
	margin-bottom: 0;
}

.cms-faq__ask-label {
	display: block;
	font-family: var(--font-ui-family);
	font-size: var(--font-ui-size-sm);
	font-weight: 600;
	color: var(--text-body);
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cms-faq__ask-required {
	color: var(--brand-gold-text);
}

.cms-faq__ask-optional-label {
	font-size: var(--font-size-14);
	color: var(--text-muted);
	font-style: italic;
	margin: 0 0 10px;
}

.cms-faq__ask-privacy {
	font-size: var(--font-size-14);
	color: var(--text-muted);
	margin: 0 0 4px;
	line-height: 1.5;
}

.cms-faq__ask-textarea,
.cms-faq__ask-input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-family: var(--font-primary);
	font-size: var(--font-size-16);
	color: var(--text-body);
	background-color: var(--color-white);
	border: 1px solid var(--border-light);
	border-radius: 3px;
	-webkit-appearance: none;
	appearance: none;
}

.cms-faq__ask-textarea:focus,
.cms-faq__ask-input:focus {
	border-color: var(--brand-gold-accent);
}

.cms-faq__ask-textarea:focus-visible,
.cms-faq__ask-input:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

.cms-faq__ask-textarea {
	resize: vertical;
	min-height: 110px;
}

.cms-faq__ask-submit {
	margin-top: 16px;
}

/* Gold button style (section 7 of the Standards) */
.cms-faq__ask-button {
	display: inline-block;
	min-height: 44px;
	padding: 10px 24px;
	background-color: var(--btn-gold-bg);
	color: var(--btn-gold-text);
	font-family: var(--font-primary);
	font-size: var(--font-size-14);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: 1px solid var(--btn-gold-bg);
	border-radius: 3px;
	cursor: pointer;
}

.cms-faq__ask-button:hover {
	background-color: var(--btn-gold-hover-bg);
	border-color: var(--btn-gold-hover-bg);
	color: var(--btn-gold-hover-text);
}

.cms-faq__ask-button:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

.cms-faq__ask-button:disabled {
	cursor: wait;
	opacity: 0.8;
}

/* Success message */
.cms-faq__ask-success {
	position: relative;
	background-color: var(--status-success-bg);
	border: 1px solid var(--status-success-border);
	color: var(--status-success-text);
	padding: 12px 44px 12px 16px;
	border-radius: 3px;
	font-size: var(--font-size-14);
	line-height: 1.5;
}

.cms-faq__ask-success p {
	margin: 0;
}

.cms-faq__ask-success-close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	font-size: var(--font-size-20);
	line-height: 1;
	color: var(--status-success-text);
	cursor: pointer;
}

.cms-faq__ask-success-close:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* ==========================================================================
   Motion - only when the visitor hasn't asked for reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.cms-faq__answer {
		transition: max-height 0.3s ease, visibility 0s linear 0.3s;
	}

	.cms-faq__answer--open {
		transition: max-height 0.3s ease, visibility 0s linear 0s;
	}

	.cms-faq__question,
	.cms-faq__icon::before,
	.cms-faq__icon::after {
		transition: color 0.15s ease, transform 0.2s ease;
	}

	.cms-faq__ask-success {
		transition: opacity 0.5s ease;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 767px) {
	.cms-faq__heading--xl { font-size: var(--font-size-30); }
	.cms-faq__heading--large { font-size: var(--font-size-20); }
	.cms-faq__heading--medium,
	.cms-faq__respond-heading { font-size: var(--font-heading-size-sm); }

	.cms-faq__ask-row {
		flex-wrap: wrap;
		gap: 14px;
	}

	.cms-faq__ask-field--half {
		width: 100%;
	}

	.cms-faq__comments {
		padding-left: 22px;
	}

	.cms-faq__replies {
		padding-left: 20px;
	}

	.cms-faq__avatar {
		width: 40px;
		height: 40px;
	}
}