/*
 * Table - FAQ: base styles. They reproduce the original "Fee-Only vs
 * Fee-Based" table and belong to this widget only.
 *
 * Selectors start with .efw-faq and use three classes at most, so the
 * {{WRAPPER}} selectors Elementor builds from the panel controls (four
 * classes or more) always override them.
 *
 * The scrollable and stacked-card layouts of each device are in
 * faq-table-layouts.css, wrapped in the site's Elementor breakpoints by
 * Plugin::get_responsive_css().
 */

.efw-faq {
	--efw-faq-cell-bg: #fff;
	--efw-faq-label-bg: #fff;
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	/* As in the original, the edges clip the card shadow; the Padding
	   control of Style › Table makes room to show it. */
	overflow: hidden;
	font-family: Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Grid view */

.efw-faq-grid {
	--efw-faq-cols: 2;
	display: grid;
	position: relative;
	width: 100%;
	grid-template-columns: repeat(var(--efw-faq-cols), minmax(0, 1fr));
	grid-template-rows: auto;
	grid-auto-rows: auto;
	row-gap: 20px;
	column-gap: 0;
}

.efw-faq-grid.efw-faq-grid--label {
	grid-template-columns: var(--efw-faq-label-width, 30%) repeat(var(--efw-faq-cols), minmax(0, 1fr));
}

.efw-faq-grid--cols-1 { --efw-faq-cols: 1; }
.efw-faq-grid--cols-2 { --efw-faq-cols: 2; }
.efw-faq-grid--cols-3 { --efw-faq-cols: 3; }
.efw-faq-grid--cols-4 { --efw-faq-cols: 4; }
.efw-faq-grid--cols-5 { --efw-faq-cols: 5; }

.efw-faq-grid.efw-faq-grid--no-header {
	grid-template-rows: none;
}

/* Every body row as tall as the tallest one. */
.efw-faq-equal-rows .efw-faq-grid {
	grid-auto-rows: 1fr;
}

.efw-faq-row {
	display: contents;
}

/* Raised card behind a highlighted column. An absolutely positioned grid
   child takes its grid area as containing block: with no row set, the full
   height of the grid. Its column needs an explicit end line, or it would
   stretch to the grid's right edge and cover the columns after it. */
.efw-faq-card {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background-color: #fff;
	box-shadow:
		-6px 0 15px rgba(0, 0, 0, 0.07),
		6px 0 15px rgba(0, 0, 0, 0.07),
		0 -6px 15px rgba(0, 0, 0, 0.07),
		0 6px 15px rgba(0, 0, 0, 0.07);
	pointer-events: none;
}

.efw-faq-card--col-1 { grid-column: 1 / 2; }
.efw-faq-card--col-2 { grid-column: 2 / 3; }
.efw-faq-card--col-3 { grid-column: 3 / 4; }
.efw-faq-card--col-4 { grid-column: 4 / 5; }
.efw-faq-card--col-5 { grid-column: 5 / 6; }
.efw-faq-card--col-6 { grid-column: 6 / 7; }

/* Cells and headers. Content is vertically centered; Style › Cells and
   Style › Headers › Vertical alignment change it. */

.efw-faq .efw-faq-cell,
.efw-faq .efw-faq-head {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 24px 20px;
	color: #4a4a4a;
	font-size: 18px;
	line-height: 1.7;
	text-align: left;
	overflow-wrap: break-word;
}

/* Below the card, so its shadow falls on the neighboring columns. */
.efw-faq .efw-faq-cell {
	z-index: 0;
	background-color: var(--efw-faq-cell-bg);
}

/* The vertical padding includes the original h4's 1.33em margins, so the
   Padding control sets all the space around the title. */
.efw-faq .efw-faq-head {
	z-index: 2;
	align-items: flex-start;
	padding-top: 44px;
	padding-bottom: 44px;
	background-color: transparent;
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 600;
}

.efw-faq .efw-faq-head.efw-faq-col--label {
	color: #555;
	font-weight: 500;
}

.efw-faq .efw-faq-cell.efw-faq-col--label {
	background-color: var(--efw-faq-label-bg);
	color: #1a1a1a;
	font-weight: 600;
}

.efw-faq .efw-faq-cell.efw-faq-col--highlight {
	z-index: 2;
	background-color: #fff;
}

.efw-faq-grid .efw-faq-cell.efw-faq-col--highlight {
	padding: 24px 28px;
}

.efw-faq-grid .efw-faq-head.efw-faq-col--highlight {
	padding: 44px 28px;
}

/* Headers */

.efw-faq-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	max-width: 100%;
}

/* Like the original's unstyled h4: the header cell's size and bold (its
   margins are part of the header padding). Set here so the theme's heading
   styles don't change the table; Style › Headers › Typography overrides it. */
.efw-faq .efw-faq-header-title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
}

/* "Bold titles" switch. Deliberately stronger than the {{WRAPPER}} selectors
   of the Typography controls, so it also wins over a global typography. */
.efw-faq.efw-faq-titles-bold .efw-faq-grid .efw-faq-row .efw-faq-head .efw-faq-header-title {
	font-weight: 700;
}

.efw-faq.efw-faq-titles-normal .efw-faq-grid .efw-faq-row .efw-faq-head .efw-faq-header-title {
	font-weight: 400;
}

.efw-faq-header-img {
	display: block;
	width: 100px;
	max-width: 100%;
	height: auto;
}

/* Cell content */

/* Column name above each value: only shown in the card layout. */
.efw-faq-cell-label {
	display: none;
	margin-bottom: 0.25rem;
	color: #64748b;
	font-size: 0.9375rem;
	font-weight: 600;
}

.efw-faq-col--highlight .efw-faq-cell-label {
	color: #1b5e3f;
}

.efw-faq-cell-content {
	display: flex;
	align-items: flex-start;
	gap: var(--efw-faq-icon-gap, 0.5rem);
}

.efw-faq-cell-text {
	flex: 1 1 auto;
	min-width: 0;
}

.efw-faq-cell-text > * {
	margin-top: 0;
	margin-bottom: 0.75em;
}

.efw-faq-cell-text > :last-child {
	margin-bottom: 0;
}

.efw-faq-cell-text ul,
.efw-faq-cell-text ol {
	padding-left: 1.25em;
}

/* Icon-only cells follow the cell's text alignment. */
.efw-faq-cell-content--icon-only {
	display: block;
}

.efw-faq-icon-pos-top .efw-faq-cell-content {
	display: block;
}

.efw-faq-icon-pos-top .efw-faq-cell-content:not(.efw-faq-cell-content--icon-only) .efw-faq-icon {
	margin-bottom: var(--efw-faq-icon-gap, 0.5rem);
}

/* Icons */

.efw-faq-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	line-height: 1;
}

.efw-faq-icon-pos-inline .efw-faq-cell-content:not(.efw-faq-cell-content--icon-only) .efw-faq-icon {
	margin-top: 0.15em;
}

.efw-faq-icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

.efw-faq-icon i {
	font-size: 1em;
}

.efw-faq-icon--check {
	color: #1b5e3f;
}

.efw-faq-icon--cross {
	color: #b91c1c;
}

.efw-faq-icon--custom {
	color: #1b5e3f;
}

.efw-faq-icon--custom svg {
	fill: currentColor;
}

/* Screen-reader-only text */

.efw-faq-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}