/**
 * P&C FAQ grid.
 *
 * Colours are explicit rather than inherited. Inheriting looks elegant but
 * breaks on dark-palette themes, where the global heading and link colour
 * is white: the cards then render white text on a white card and appear
 * empty. Explicit defaults assume a light card, which is the common case.
 *
 * For a grid placed on a dark background, pass the variant class:
 *
 *   [pandc_faq_grid class="pandc-faq-grid--on-dark"]
 *
 * Or override the custom properties directly:
 *
 *   .pandc-faq-grid {
 *     --pandc-faq-title-color: #1a1a1a;
 *     --pandc-faq-button-bg: #c8102e;
 *     --pandc-faq-button-color: #fff;
 *     --pandc-faq-button-border: none;
 *   }
 */

/* -------------------------------------------------------------------------
 * Grid
 * ---------------------------------------------------------------------- */

.pandc-faq-grid {
	--pandc-faq-columns: 3;
	--pandc-faq-gap: 1.5rem;

	/*
	 * Both default to "off" so the grid fills whatever container it is
	 * dropped into, which is correct when the builder section is already
	 * boxed. Set them when the shortcode sits in a full-bleed section:
	 *   [pandc_faq_grid max_width="1200px" gutter="24px"]
	 */
	--pandc-faq-max-width: none;
	--pandc-faq-padding-x: 0px;

	--pandc-faq-card-bg: #fff;
	--pandc-faq-card-padding: 1.6rem;
	--pandc-faq-card-border: none;
	--pandc-faq-card-radius: 8px;
	--pandc-faq-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.05);
	--pandc-faq-card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.08), 0 10px 24px rgba(0, 0, 0, 0.09);

	--pandc-faq-divider: 1px solid rgba(0, 0, 0, 0.09);
	--pandc-faq-footer-padding: 0.9rem 1.6rem;

	--pandc-faq-title-size: 1.125rem;
	--pandc-faq-title-color: #1a1a1a;
	--pandc-faq-title-weight: 600;
	/* Lines of title height reserved. Not a maximum — longer titles run on. */
	--pandc-faq-title-lines: 2;
	--pandc-faq-title-line-height: 1.35;

	--pandc-faq-excerpt-size: 0.9375rem;
	--pandc-faq-excerpt-color: #444;
	--pandc-faq-excerpt-lines: 3;
	--pandc-faq-excerpt-line-height: 1.55;

	--pandc-faq-meta-size: 0.8125rem;
	--pandc-faq-meta-color: #666;

	--pandc-faq-button-space: 12px;
	--pandc-faq-button-bg: #1a1a1a;
	--pandc-faq-button-color: #fff;
	--pandc-faq-button-border: none;
	--pandc-faq-button-padding: 0.7em 1.4em;
	--pandc-faq-button-radius: 4px;
	--pandc-faq-button-size: 0.8125rem;
	--pandc-faq-button-weight: 600;
	--pandc-faq-button-spacing: 0.03em;
	--pandc-faq-button-transform: none;

	display: grid;

	/*
	 * minmax(0, 1fr) rather than 1fr: prevents a long unbroken string in a
	 * question from forcing its column wider than the track.
	 */
	grid-template-columns: repeat(var(--pandc-faq-columns), minmax(0, 1fr));
	gap: var(--pandc-faq-gap);

	box-sizing: border-box;
	max-width: var(--pandc-faq-max-width);
	margin: 0 auto 2rem;
	padding: 0 var(--pandc-faq-padding-x);
	list-style: none;
}

.pandc-faq-grid--cols-1 { --pandc-faq-columns: 1; }
.pandc-faq-grid--cols-2 { --pandc-faq-columns: 2; }
.pandc-faq-grid--cols-3 { --pandc-faq-columns: 3; }
.pandc-faq-grid--cols-4 { --pandc-faq-columns: 4; }

/*
 * Variant for grids sitting on a dark background section.
 * Apply with: [pandc_faq_grid class="pandc-faq-grid--on-dark"]
 */
.pandc-faq-grid.pandc-faq-grid--on-dark {
	--pandc-faq-card-bg: rgba(255, 255, 255, 0.06);
	--pandc-faq-card-border: 1px solid rgba(255, 255, 255, 0.18);
	--pandc-faq-card-shadow: none;
	--pandc-faq-card-shadow-hover: none;
	--pandc-faq-divider: 1px solid rgba(255, 255, 255, 0.18);
	--pandc-faq-title-color: #fff;
	--pandc-faq-excerpt-color: rgba(255, 255, 255, 0.85);
	--pandc-faq-meta-color: rgba(255, 255, 255, 0.65);
	--pandc-faq-button-bg: #fff;
	--pandc-faq-button-color: #1a1a1a;
	--pandc-faq-button-border: none;
}

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

.pandc-faq-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	background: var(--pandc-faq-card-bg);
	border: var(--pandc-faq-card-border);
	border-radius: var(--pandc-faq-card-radius);
	box-shadow: var(--pandc-faq-card-shadow);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pandc-faq-card:hover,
.pandc-faq-card:focus-within {
	box-shadow: var(--pandc-faq-card-shadow-hover);
	transform: translateY(-2px);
}

/*
 * The body grows to fill the card so the footer is pinned to the bottom
 * and divider lines align across a row regardless of title length.
 */
.pandc-faq-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	box-sizing: border-box;
	min-width: 0;
	padding: var(--pandc-faq-card-padding);
}

.pandc-faq-card__title {
	margin: 0 0 0.9rem;
	font-size: var(--pandc-faq-title-size);
	font-weight: var(--pandc-faq-title-weight);
	line-height: var(--pandc-faq-title-line-height);
	color: var(--pandc-faq-title-color);

	/* Long questions and unbroken strings stay inside the card. */
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;

	/*
	 * Height is reserved but not clamped: a one-line question is padded out
	 * to two lines so the gap above the button matches its neighbours, while
	 * a longer question is allowed to run on rather than be truncated. The
	 * question is the content here, so cutting it is never the right trade.
	 *
	 * This reservation is what keeps buttons level: with the title and the
	 * excerpt both a known height, every card's button lands in the same
	 * place without needing to be pinned to the bottom.
	 */
	min-height: calc(
		var(--pandc-faq-title-lines) * var(--pandc-faq-title-line-height) *
		var(--pandc-faq-title-size)
	);
}

/*
 * Link selectors are scoped under .pandc-faq-grid to raise specificity to
 * 0,2,0. Theme rules like `.entry-content a` or `.et_pb_text a` are also
 * 0,2,0 but appear earlier in the cascade, so these win. This is what keeps
 * the card from inheriting a theme link colour intended for coloured button
 * fills — the classic white-text-on-white-card result.
 */
.pandc-faq-grid .pandc-faq-card__title a {
	color: var(--pandc-faq-title-color);
	text-decoration: none;
	background: none;
	box-shadow: none;
}

.pandc-faq-grid .pandc-faq-card__title a:hover,
.pandc-faq-grid .pandc-faq-card__title a:focus {
	color: var(--pandc-faq-title-color);
	text-decoration: underline;
}

.pandc-faq-card__excerpt {
	/*
	 * No bottom margin. The gap above the button is owned solely by the
	 * button's own margin-top, so one property controls it and the setting
	 * means exactly what it says.
	 */
	margin: 0;
	font-size: var(--pandc-faq-excerpt-size);
	line-height: var(--pandc-faq-excerpt-line-height);
	color: var(--pandc-faq-excerpt-color);
	overflow-wrap: break-word;

	/*
	 * Clamp to a fixed number of lines. The 20-word trim in PHP is an upper
	 * bound on how much text is emitted; this is what stops a single word
	 * dropping onto a line of its own, which a word count cannot fix — the
	 * same 20 words wrap differently at 2, 3 and 4 columns.
	 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--pandc-faq-excerpt-lines);
	line-clamp: var(--pandc-faq-excerpt-lines);
	overflow: hidden;

	/* Reserved so a short excerpt does not shift the button up. */
	min-height: calc(
		var(--pandc-faq-excerpt-lines) * var(--pandc-faq-excerpt-line-height) *
		var(--pandc-faq-excerpt-size)
	);
}

.pandc-faq-card__footer {
	border-top: var(--pandc-faq-divider);
	padding: var(--pandc-faq-footer-padding);
	font-size: var(--pandc-faq-meta-size);
	line-height: 1.4;
	color: var(--pandc-faq-meta-color);
}

.pandc-faq-card__meta {
	margin: 0;
	color: inherit;
}

.pandc-faq-grid .pandc-faq-card__button {
	/*
	 * A fixed gap, not margin-top:auto. Auto absorbed whatever free space
	 * the card had, so the rendered gap was whatever flex decided rather
	 * than the configured value. Alignment does not suffer: the title
	 * reserves two lines and the excerpt three, so the content above the
	 * button is already a predictable height.
	 */
	margin-top: var(--pandc-faq-button-space);
	align-self: flex-start;

	display: inline-block;
	background: var(--pandc-faq-button-bg);
	color: var(--pandc-faq-button-color);
	border: var(--pandc-faq-button-border);
	border-radius: var(--pandc-faq-button-radius);
	padding: var(--pandc-faq-button-padding);
	font-size: var(--pandc-faq-button-size);
	font-weight: var(--pandc-faq-button-weight);
	letter-spacing: var(--pandc-faq-button-spacing);
	text-transform: var(--pandc-faq-button-transform);
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	box-shadow: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.pandc-faq-grid .pandc-faq-card__button:hover,
.pandc-faq-grid .pandc-faq-card__button:focus {
	color: var(--pandc-faq-button-color);
	background: var(--pandc-faq-button-bg);
	text-decoration: none;
	opacity: 0.85;
}

/* -------------------------------------------------------------------------
 * Empty state
 * ---------------------------------------------------------------------- */

.pandc-faq-grid__empty {
	margin: 0 0 2rem;
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */

.pandc-faq-pagination {
	box-sizing: border-box;
	max-width: var(--pandc-faq-max-width, none);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--pandc-faq-padding-x, 0px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 2rem;
}

.pandc-faq-pagination .page-numbers {
	display: inline-block;
	min-width: 2.25em;
	padding: 0.45em 0.7em;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 3px;
	font-size: 0.875rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--pandc-faq-pagination-color, #1a1a1a);
}

.pandc-faq-pagination a.page-numbers,
.pandc-faq-pagination a.page-numbers:hover,
.pandc-faq-pagination a.page-numbers:focus {
	color: var(--pandc-faq-pagination-color, #1a1a1a);
	text-decoration: none;
}

.pandc-faq-pagination .page-numbers.current {
	font-weight: 700;
	border-color: var(--pandc-faq-pagination-color, #1a1a1a);
}

.pandc-faq-pagination .page-numbers.dots {
	border-color: transparent;
}

.pandc-faq-pagination a.page-numbers:hover {
	border-color: var(--pandc-faq-pagination-color, #1a1a1a);
}

.pandc-faq-grid--on-dark + .pandc-faq-pagination {
	--pandc-faq-pagination-color: #fff;
}

/* -------------------------------------------------------------------------
 * Focus
 * ---------------------------------------------------------------------- */

.pandc-faq-card__title a:focus-visible,
.pandc-faq-pagination a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Responsive
 *
 * Each rule names only the column counts that need to step down, so a
 * grid set to 1 or 2 columns is never widened at a narrower viewport.
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {

	.pandc-faq-grid--cols-3,
	.pandc-faq-grid--cols-4 {
		--pandc-faq-columns: 2;
	}
}

@media (max-width: 640px) {

	.pandc-faq-grid--cols-2,
	.pandc-faq-grid--cols-3,
	.pandc-faq-grid--cols-4 {
		--pandc-faq-columns: 1;
	}

	.pandc-faq-grid {
		--pandc-faq-gap: 1rem;
	}
}

/* -------------------------------------------------------------------------
 * Motion and contrast preferences
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.pandc-faq-card,
	.pandc-faq-card__button {
		transition: none;
	}

	.pandc-faq-card:hover,
	.pandc-faq-card:focus-within {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Single answer page
 *
 * Only rendered when the plugin layout is selected in FAQs > Settings.
 *
 * Colours are set explicitly on the elements themselves, not inherited.
 * Elementor kits set a global text colour (frequently white, for dark
 * designs) and Hello Elementor ships almost no layout CSS of its own, so a
 * wrapper colour alone does not survive. Selectors are scoped under
 * .pandc-faq-single to raise specificity above theme content rules.
 *
 * Override per site:
 *
 *   .pandc-faq-single {
 *     --pandc-faq-single-width: 860px;
 *     --pandc-faq-single-gutter: 32px;
 *     --pandc-faq-single-space-top: 160px;
 *     --pandc-faq-single-text: #222;
 *     --pandc-faq-single-link: #c8102e;
 *   }
 * ---------------------------------------------------------------------- */

.pandc-faq-single {
	--pandc-faq-single-width: 900px;
	--pandc-faq-single-gutter: 24px;
	--pandc-faq-single-space-top: 3rem;
	--pandc-faq-single-space-bottom: 3rem;
	--pandc-faq-single-title-size: clamp(1.75rem, 4vw, 2.5rem);
	--pandc-faq-single-body-size: 1.0625rem;
	--pandc-faq-single-text: #1a1a1a;
	--pandc-faq-single-heading: #1a1a1a;
	--pandc-faq-single-meta: #666;
	--pandc-faq-single-link: #0b57d0;
	--pandc-faq-single-rule: 1px solid rgba(0, 0, 0, 0.12);

	box-sizing: border-box;
	max-width: var(--pandc-faq-single-width);
	margin: 0 auto;
	padding: var(--pandc-faq-single-space-top) var(--pandc-faq-single-gutter)
		var(--pandc-faq-single-space-bottom);
	color: var(--pandc-faq-single-text);
}

.pandc-faq-single .pandc-faq-single__title {
	margin: 0 0 0.75rem;
	font-size: var(--pandc-faq-single-title-size);
	line-height: 1.2;
	color: var(--pandc-faq-single-heading);
	overflow-wrap: break-word;
	hyphens: auto;
}

.pandc-faq-single .pandc-faq-single__meta {
	margin: 0 0 2rem;
	padding-bottom: 1.25rem;
	border-bottom: var(--pandc-faq-single-rule);
	font-size: 0.875rem;
	color: var(--pandc-faq-single-meta);
}

.pandc-faq-single .pandc-faq-single__content {
	font-size: var(--pandc-faq-single-body-size);
	line-height: 1.7;
	color: var(--pandc-faq-single-text);
	overflow-wrap: break-word;
}

/*
 * Every text-bearing descendant is named. Inheriting from the wrapper is
 * not enough: an Elementor kit rule targeting p or li directly outranks
 * inherited colour, regardless of the wrapper's own value.
 */
.pandc-faq-single .pandc-faq-single__content p,
.pandc-faq-single .pandc-faq-single__content li,
.pandc-faq-single .pandc-faq-single__content td,
.pandc-faq-single .pandc-faq-single__content th,
.pandc-faq-single .pandc-faq-single__content dd,
.pandc-faq-single .pandc-faq-single__content dt,
.pandc-faq-single .pandc-faq-single__content span,
.pandc-faq-single .pandc-faq-single__content strong,
.pandc-faq-single .pandc-faq-single__content em,
.pandc-faq-single .pandc-faq-single__content blockquote {
	color: var(--pandc-faq-single-text);
}

.pandc-faq-single .pandc-faq-single__content h2,
.pandc-faq-single .pandc-faq-single__content h3,
.pandc-faq-single .pandc-faq-single__content h4,
.pandc-faq-single .pandc-faq-single__content h5,
.pandc-faq-single .pandc-faq-single__content h6 {
	color: var(--pandc-faq-single-heading);
}

.pandc-faq-single .pandc-faq-single__content a {
	color: var(--pandc-faq-single-link);
	text-decoration: underline;
}

.pandc-faq-single .pandc-faq-single__content a:hover,
.pandc-faq-single .pandc-faq-single__content a:focus {
	color: var(--pandc-faq-single-link);
	text-decoration: none;
}

.pandc-faq-single .pandc-faq-single__content > *:first-child {
	margin-top: 0;
}

.pandc-faq-single .pandc-faq-single__content > *:last-child {
	margin-bottom: 0;
}

.pandc-faq-single .pandc-faq-single__content h2 {
	margin: 2.25rem 0 0.75rem;
	font-size: 1.5rem;
	line-height: 1.3;
}

.pandc-faq-single .pandc-faq-single__content h3 {
	margin: 1.75rem 0 0.6rem;
	font-size: 1.25rem;
	line-height: 1.35;
}

.pandc-faq-single .pandc-faq-single__content p,
.pandc-faq-single .pandc-faq-single__content ul,
.pandc-faq-single .pandc-faq-single__content ol {
	margin: 0 0 1.25rem;
}

.pandc-faq-single .pandc-faq-single__content ul,
.pandc-faq-single .pandc-faq-single__content ol {
	padding-left: 1.5rem;
}

.pandc-faq-single .pandc-faq-single__content li {
	margin-bottom: 0.4rem;
}

.pandc-faq-single .pandc-faq-single__content img {
	max-width: 100%;
	height: auto;
}

.pandc-faq-single .pandc-faq-single__content table {
	width: 100%;
	border-collapse: collapse;
}

.pandc-faq-single .pandc-faq-single__content blockquote {
	margin: 1.5rem 0;
	padding-left: 1.25rem;
	border-left: 3px solid rgba(0, 0, 0, 0.15);
	border-radius: 0;
}

@media (max-width: 640px) {

	.pandc-faq-single {
		--pandc-faq-single-space-bottom: 2rem;
		--pandc-faq-single-gutter: 20px;
	}
}