/**
 * DFL FAQ + Newsletter.
 *
 * Panels animate with the grid 0fr -> 1fr technique so they open to their real
 * height without JavaScript measuring anything.
 */

.dfl-faq {
	--dfl-panel-width: 48%;
	--dfl-col-gap: 64px;
	--dfl-col-align: start;
	--dfl-panel-align: center;
	--dfl-perk-cols: 3;
	--dfl-perk-gap: 20px;
	--dfl-perk-align: center;
	--dfl-form-gap: 10px;
	--dfl-acc-speed: 320ms;

	display: flex;
	align-items: var(--dfl-col-align, start);
	gap: var(--dfl-col-gap, 64px);
	width: 100%;
}

.dfl-faq *,
.dfl-faq *::before,
.dfl-faq *::after {
	box-sizing: border-box;
}

.dfl-faq__col--faq {
	flex: 1 1 auto;
	min-width: 0;
}

.dfl-faq__col--panel {
	flex: 0 0 var(--dfl-panel-width, 48%);
	max-width: var(--dfl-panel-width, 48%);
	min-width: 0;
}

.dfl-faq--panel-left {
	flex-direction: row-reverse;
}

/* A single visible column should use the full width. */
.dfl-faq--single .dfl-faq__col--panel {
	flex-basis: 100%;
	max-width: 100%;
}

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

.dfl-faq__header {
	margin-bottom: 34px;
}

.dfl-faq__eyebrow {
	margin-bottom: 14px;
	color: #b08d45;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.dfl-faq__heading {
	margin: 0;
	color: #14100b;
	font-size: 40px;
	font-weight: 500;
	line-height: 1.15;
}

/* ------------------------------- Accordion ------------------------------- */

.dfl-faq__list {
	border-top: 1px solid rgba(20, 16, 11, 0.12);
}

.dfl-faq__item {
	border-bottom: 1px solid rgba(20, 16, 11, 0.12);
}

.dfl-faq__q {
	margin: 0;
	font: inherit;
}

.dfl-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 22px 4px;
	margin: 0;
	text-align: left;
	cursor: pointer;
}

/* Themes style bare <button> elements — Betheme gives them a background,
   border, shadow and a hover colour, including a rule keyed on
   [aria-expanded=true], which this accordion sets. These selectors are
   deliberately specific enough to win that back. */
.dfl-faq .dfl-faq__item .dfl-faq__trigger,
.dfl-faq .dfl-faq__item .dfl-faq__trigger:hover,
.dfl-faq .dfl-faq__item .dfl-faq__trigger:focus,
.dfl-faq .dfl-faq__item .dfl-faq__trigger:active,
.dfl-faq .dfl-faq__item .dfl-faq__trigger[aria-expanded],
.dfl-faq .dfl-faq__item .dfl-faq__trigger[aria-expanded="true"],
.dfl-faq .dfl-faq__item .dfl-faq__trigger[aria-expanded="true"]:hover {
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	min-height: 0;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
}

/* Betheme animates a ::before panel across its buttons; not wanted here. */
.dfl-faq .dfl-faq__trigger::before,
.dfl-faq .dfl-faq__trigger::after {
	display: none;
}

.dfl-faq__question {
	color: #14100b;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	transition: color 250ms ease;
}

.dfl-faq__icon {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	color: #14100b;
	font-size: 14px;
	line-height: 1;
	transition: color 250ms ease;
}

.dfl-faq__icon-closed,
.dfl-faq__icon-open {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 200ms ease, transform 250ms ease;
}

.dfl-faq__icon-open {
	opacity: 0;
	transform: rotate(-90deg);
}

.dfl-faq__item.is-open .dfl-faq__icon-closed {
	opacity: 0;
	transform: rotate(90deg);
}

.dfl-faq__item.is-open .dfl-faq__icon-open {
	opacity: 1;
	transform: rotate(0deg);
}

.dfl-faq__item.is-open .dfl-faq__icon {
	color: #b08d45;
}

.dfl-faq__icon i,
.dfl-faq__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

/* Animate to the panel's real height without measuring it in JS.
   visibility carries the closed state on its own, so a closed answer stays
   invisible and out of the tab order even if the grid collapse is overridden
   by theme CSS. It flips instantly on open and only after the collapse
   finishes on close, so the animation still reads. */
.dfl-faq .dfl-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	overflow: hidden;
	height: 0;
	transition:
		grid-template-rows var(--dfl-acc-speed, 320ms) cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear var(--dfl-acc-speed, 320ms);
}

.dfl-faq .dfl-faq__panel > * {
	min-height: 0;
}

.dfl-faq .dfl-faq__item.is-open .dfl-faq__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	height: auto;
	transition:
		grid-template-rows var(--dfl-acc-speed, 320ms) cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear 0s;
}

/* The hidden attribute is only present before the script runs. */
.dfl-faq__panel[hidden] {
	display: none;
}

.dfl-faq__answer {
	padding: 0 40px 24px 4px;
	color: #6b6358;
	font-size: 14px;
	line-height: 1.8;
}

.dfl-faq__answer > :first-child {
	margin-top: 0;
}

.dfl-faq__answer > :last-child {
	margin-bottom: 0;
}

/* --------------------------------- Card ---------------------------------- */

.dfl-faq__card {
	padding: 56px;
	border-radius: 6px;
	background-color: #f2eee7;
	text-align: var(--dfl-panel-align, center);
}

.dfl-faq__card-eyebrow {
	margin-bottom: 14px;
	color: #b08d45;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.dfl-faq__card-heading {
	margin: 0 0 14px;
	color: #14100b;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
}

.dfl-faq__card-text {
	margin: 0 0 30px;
	color: #6b6358;
	font-size: 14px;
	line-height: 1.7;
}

.dfl-faq__card-text p {
	margin: 0;
}

.dfl-faq__card-text p + p {
	margin-top: 0.6em;
}

/* --------------------------------- Form ---------------------------------- */

.dfl-faq__form {
	margin-bottom: 44px;
	text-align: start;
}

.dfl-faq__form-empty {
	padding: 18px;
	margin-bottom: 44px;
	border: 1px dashed rgba(20, 16, 11, 0.25);
	color: #9a9186;
	font-size: 13px;
	text-align: center;
}

.dfl-faq__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.dfl-faq__form textarea,
.dfl-faq__form select {
	width: 100%;
	padding: 17px 20px;
	border: 0;
	border-radius: 2px;
	background-color: #fff;
	color: #14100b;
	font-size: 14px;
	line-height: 1.3;
}

.dfl-faq__form input[type="submit"],
.dfl-faq__form button[type="submit"] {
	padding: 17px 34px;
	border: 0;
	border-radius: 2px;
	background-color: #14100b;
	color: #fffef3;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.3;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 250ms ease, background-color 250ms ease;
}

/* Contact Form 7 wraps controls in <p> and <span class="wpcf7-form-control-wrap">. */
.dfl-faq__form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Form templates often use the theme's own grid classes to place fields —
   the Betheme markup for a newsletter form is
   <div class="column two-third">…</div><div class="column one-third">…</div>.
   Those carry float, percentage widths and side margins that fight the flex
   row, so they are neutralised inside the form. !important is deliberate:
   .two-third.column sets an explicit width and this must win outright, and
   the scope is narrow enough that it cannot leak past the form. */
.dfl-faq .dfl-faq__form form > .column,
.dfl-faq .dfl-faq__form form > .columns,
.dfl-faq .dfl-faq__form form > .mcb-column,
.dfl-faq .dfl-faq__form form > [class*="one-"],
.dfl-faq .dfl-faq__form form > [class*="two-"],
.dfl-faq .dfl-faq__form form > [class*="three-"] {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	box-sizing: border-box;
}

/* The form itself is the flex row. Form templates wrap controls in all sorts
   of things — plain <p>, or theme column <div>s — so every direct child is
   treated as a row item rather than assuming one particular structure. */
.dfl-faq--form-inline .dfl-faq__form form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--dfl-form-gap, 10px);
}

/* Every visible direct child becomes a column in that row. The exclusions
   matter: Contact Form 7 keeps its hidden-field fieldset and its status
   message hidden with display:none, and a blanket display:flex here would
   override that and reveal both. */
.dfl-faq--form-inline .dfl-faq__form form > *:not(.hidden-fields-container):not(.wpcf7-response-output):not(.screen-reader-response):not(.akismet-fields-container) {
	display: flex;
	/* Basis 0, not a pixel figure: a 180px basis plus the button plus the gap
	   overflows a narrow newsletter card, and the flex line wraps — which is
	   what put the button on its own row. With basis 0 the field simply takes
	   whatever is left of the row. */
	flex: 1 1 0%;
	align-items: stretch;
	gap: var(--dfl-form-gap, 10px);
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	float: none;
}
.dfl-faq--form-inline .dfl-faq__form form > *:not(.hidden-fields-container):not(.wpcf7-response-output):not(.screen-reader-response):not(.akismet-fields-container) p {
	width: 100%;
}
.dfl-faq--form-inline .dfl-faq__form form > *:not(.hidden-fields-container):not(.wpcf7-response-output):not(.screen-reader-response):not(.akismet-fields-container) input[type="submit"] {
	height: 100%;
}

/* Whichever child holds the button hugs its content instead of growing;
   everything else shares the remaining width. */
.dfl-faq--form-inline .dfl-faq__form form > *:has(input[type="submit"]),
.dfl-faq--form-inline .dfl-faq__form form > *:has(button[type="submit"]) {
	flex: 0 0 auto !important;
}

/* Betheme's button_full_width class is often added to the submit tag; inside
   the hugging column it would otherwise stretch to an odd width. */
.dfl-faq--form-inline .dfl-faq__form form > *:has(input[type="submit"]) input[type="submit"],
.dfl-faq--form-inline .dfl-faq__form form > *:has(button[type="submit"]) button[type="submit"] {
	width: auto;
	white-space: nowrap;
}

.dfl-faq--form-inline .dfl-faq__form form p {
	margin: 0;
}

.dfl-faq--form-inline .dfl-faq__form .wpcf7-form-control-wrap {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.dfl-faq--form-inline .dfl-faq__form form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.dfl-faq--form-inline .dfl-faq__form form select {
	flex: 1 1 auto;
	min-width: 0;
}

.dfl-faq--form-inline .dfl-faq__form input[type="submit"],
.dfl-faq--form-inline .dfl-faq__form button[type="submit"] {
	flex: 0 0 auto;
}

/* Status messages take a row of their own when they appear. No display here —
   Contact Form 7 owns that, and setting it would unhide the empty box. */
.dfl-faq--form-inline .dfl-faq__form form > .wpcf7-response-output,
.dfl-faq--form-inline .dfl-faq__form form > .screen-reader-response {
	flex: 1 0 100%;
	margin-left: 0;
	margin-right: 0;
}

.dfl-faq--form-stacked .dfl-faq__form form {
	display: flex;
	flex-direction: column;
	gap: var(--dfl-form-gap, 10px);
}

.dfl-faq--form-stacked .dfl-faq__form form > p {
	display: flex;
	flex-direction: column;
	gap: var(--dfl-form-gap, 10px);
	margin: 0;
}

.dfl-faq--form-stacked .dfl-faq__form input[type="submit"],
.dfl-faq--form-stacked .dfl-faq__form button[type="submit"] {
	width: 100%;
}

/* CF7 status messages. */
.dfl-faq__form .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 10px 14px;
	font-size: 13px;
}

.dfl-faq__form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 12px;
}

.dfl-faq__form .wpcf7-spinner {
	margin: 0 0 0 8px;
}

/* ------------------------------ Trust badges ----------------------------- */

.dfl-faq__perks {
	display: grid;
	grid-template-columns: repeat(var(--dfl-perk-cols, 3), minmax(0, 1fr));
	gap: var(--dfl-perk-gap, 20px);
}

.dfl-faq__perk {
	display: flex;
	flex-direction: column;
	align-items: var(--dfl-perk-align, center);
	min-width: 0;
	text-align: var(--dfl-perk-align, center);
}

.dfl-faq__perk-icon {
	display: flex;
	margin-bottom: 12px;
	color: #14100b;
	font-size: 26px;
	line-height: 1;
}

.dfl-faq__perk-icon i,
.dfl-faq__perk-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

.dfl-faq__perk-title {
	margin-bottom: 4px;
	color: #14100b;
	font-size: 13px;
	font-weight: 600;
}

.dfl-faq__perk-subtitle {
	color: #9a9186;
	font-size: 11px;
	line-height: 1.5;
}

.dfl-faq__trigger:focus-visible {
	outline: 2px solid #b08d45;
	outline-offset: -2px;
}

/* ------------------------------- Stacking -------------------------------- */

@media (max-width: 1024px) {
	.dfl-faq--stack-tablet {
		flex-direction: column;
	}

	.dfl-faq--stack-tablet .dfl-faq__col--panel {
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.dfl-faq--stack-mobile {
		flex-direction: column;
	}

	.dfl-faq--stack-mobile .dfl-faq__col--panel {
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
	}

	.dfl-faq__card {
		padding: 32px 24px;
	}

	.dfl-faq--form-inline .dfl-faq__form form > *:not(.hidden-fields-container):not(.wpcf7-response-output):not(.screen-reader-response):not(.akismet-fields-container) {
		flex: 1 0 100%;
	}

	.dfl-faq--form-inline .dfl-faq__form input[type="submit"],
	.dfl-faq--form-inline .dfl-faq__form button[type="submit"] {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dfl-faq__panel,
	.dfl-faq__icon-closed,
	.dfl-faq__icon-open,
	.dfl-faq__question {
		transition-duration: 1ms;
	}
}