/*
 * GC Form Accordion.
 * Root: .gc-fa. Matches the GC Flip Card family: dark frosted cards on the light
 * page background, pill eyebrow + ink heading + italic subtext. Rows are dark
 * glass cards (radial brand glow like the flip-card fronts) that lift + glow on
 * open and reveal a clean white form panel for readability. Optional full-bleed
 * band (off by default) via the ::before. Driven by the --fa-* contract.
 */

.gc-fa {
	--fa-gap: 16px;
	--fa-max: 940px;
	--fa-pad: 48px;
	--fa-band-1: #FFFFFF; --fa-band-2: #E4F1FA; --fa-angle: 160deg; --fa-fade: 110px; --fa-glow: #5BA7DB;
	--fa-accent: #5BA7DB; --fa-accent-dark: #3D82B3;
	--fa-heading: #0E1B25; --fa-eyebrow: #3D82B3; --fa-subtext: #5A6B75;
	--fa-row-bg: #FFFFFF; --fa-title: #14212B;
	--fa-panel-bg: #F6FAFD; --fa-panel-text: #14212B;
	position: relative;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	color: var(--fa-panel-text); line-height: 1.6; padding: 88px 0;
	-webkit-font-smoothing: antialiased;
}
.gc-fa *, .gc-fa *::before, .gc-fa *::after { box-sizing: border-box; }

/* Optional full-bleed band behind the section (hidden by default; toggle in the
   Background tab). Bleeds to the viewport edges without making the section itself
   full-width, so the page's light pattern shows through when it is off. */
.gc-fa::before {
	content: ""; display: none; position: absolute; top: 0; bottom: 0;
	left: calc(50% - 50vw); width: 100vw; z-index: 0; pointer-events: none;
	background:
		radial-gradient(46% 55% at 12% 42%, color-mix(in srgb, var(--fa-glow, #5BA7DB) 18%, transparent), transparent 72%),
		radial-gradient(44% 52% at 90% 66%, color-mix(in srgb, var(--fa-glow, #5BA7DB) 12%, transparent), transparent 74%),
		linear-gradient(var(--fa-angle, 160deg), var(--fa-band-1), var(--fa-band-2));
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fa-fade, 110px), #000 calc(100% - var(--fa-fade, 110px)), transparent 100%);
	        mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fa-fade, 110px), #000 calc(100% - var(--fa-fade, 110px)), transparent 100%);
}
.gc-fa.gc-fa--band::before { display: block; }
/* Edge to edge: the section itself breaks out, not just the band behind it. */
.gc-fa--full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.gc-fa-inner { position: relative; z-index: 1; width: 100%; max-width: var(--fa-max, 940px); margin-inline: auto; padding-inline: var(--fa-pad, 48px); }

/* ---- Header (page-standard: pill eyebrow, ink heading, italic subtext) ---- */
.gc-fa-header { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.gc-fa-eyebrow {
	display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
	font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-style: normal;
	color: var(--fa-eyebrow);
}
.gc-fa .gc-fa-header h2 {
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 800; line-height: 1.15; margin: 0 0 0.35em; letter-spacing: -0.01em;
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem); color: var(--fa-heading, #0E1B25);
}
.gc-fa-header p { margin: 0; color: var(--fa-subtext, #5A6B75); font-size: 16px; font-style: italic; }

/* ---- List ---- */
.gc-fa-list { display: flex; flex-direction: column; gap: var(--fa-gap, 16px); }

/* ---- Row: dark frosted card echoing the flip-card fronts ---- */
.gc-fa-row {
	position: relative; overflow: hidden;
	border-radius: 20px;
	background:
		radial-gradient(120% 130% at 50% -10%, color-mix(in srgb, var(--fa-accent, #5BA7DB) 10%, transparent), transparent 62%),
		var(--fa-row-bg, #fff);
	border: 1px solid color-mix(in srgb, var(--fa-accent, #5BA7DB) 22%, transparent);
	box-shadow: 0 12px 30px color-mix(in srgb, var(--fa-accent, #5BA7DB) 16%, transparent), 0 2px 8px rgba(20, 33, 43, 0.05);
	transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.gc-fa-row:hover { border-color: color-mix(in srgb, var(--fa-accent, #5BA7DB) 45%, transparent); }
.gc-fa-row.is-open {
	border-color: color-mix(in srgb, var(--fa-accent, #5BA7DB) 55%, transparent);
	box-shadow:
		0 22px 46px color-mix(in srgb, var(--fa-accent, #5BA7DB) 26%, transparent),
		0 6px 16px rgba(20, 33, 43, 0.07);
}

/* ---- Row header (button) ---- */
.gc-fa-row-h { margin: 0; }
.gc-fa-row-head {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	width: 100%; text-align: left; cursor: pointer;
	padding: 24px 26px; border: 0; margin: 0; background: transparent;
	color: var(--fa-title, #fff);
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	transition: background 0.25s ease;
}
.gc-fa-row-head:hover { background: color-mix(in srgb, var(--fa-accent, #5BA7DB) 7%, transparent); }
.gc-fa-row-head:focus-visible { outline: 3px solid color-mix(in srgb, var(--fa-accent, #5BA7DB) 60%, transparent); outline-offset: -3px; }
.gc-fa-row-title {
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25;
}

/* Chevron chip — brand blue gradient toggle (signature detail) */
.gc-fa-chev-wrap {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: linear-gradient(135deg, var(--fa-accent, #5BA7DB), #6EC1E4);
	color: #fff;
	box-shadow: 0 8px 22px color-mix(in srgb, var(--fa-accent, #5BA7DB) 48%, transparent);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.gc-fa-row.is-open .gc-fa-chev-wrap {
	transform: rotate(180deg);
	box-shadow: 0 10px 28px color-mix(in srgb, var(--fa-accent, #5BA7DB) 62%, transparent);
}
.gc-fa-chev { width: 20px; height: 20px; }

/* ---- Panel: clean white surface emerging from the dark card ---- */
.gc-fa-panel { background: var(--fa-panel-bg, #F6FAFD); color: var(--fa-panel-text, #14212B); border-top: 1px solid color-mix(in srgb, var(--fa-accent, #5BA7DB) 18%, transparent); }
.gc-fa-panel[hidden] { display: none; }
.gc-fa-panel-inner { padding: 30px; }
/* The widget's own Sub text control first, the global muted only as a fallback.
   The other way round -- which this was -- means the control is dead wherever a
   skin sets --gc-muted, and the two disagree about the ground: --gc-muted is
   light on the GenChem skin while this copy sits on the white --fa-panel-bg, so
   the intro went light-on-white on every GenChem page carrying this widget. */
.gc-fa-intro { margin: 0 0 22px; color: var(--fa-subtext, var(--gc-muted, #5A6B75)); font-size: 16px; }
.gc-fa-btn-wrap { display: flex; justify-content: flex-start; }

/* Height animation (JS drives inline height) */
.gc-fa-panel.gc-fa-anim { overflow: hidden; transition: height 0.34s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---- Buttons (link / popup) — brand primary pill ---- */
.gc-fa-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 32px; border-radius: var(--gc-radius-pill, 999px);
	background: linear-gradient(135deg, #5BA7DB, #6EC1E4);
	color: #fff; text-decoration: none;
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 800; font-size: 15px; border: 0; cursor: pointer;
	box-shadow: 0 14px 34px rgba(91, 167, 219, 0.45);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gc-fa-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(91, 167, 219, 0.62); }
.gc-fa-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--fa-accent, #5BA7DB) 60%, transparent); outline-offset: 3px; }

/* ---- Secondary CTA — filled brand gradient pill with arrow (matches site CTAs) ---- */
.gc-fa-secondary { text-align: center; margin-top: 40px; }
.gc-fa-sec-caption { margin: 0 0 16px; font-style: italic; color: var(--fa-subtext, #5A6B75); font-size: 17px; }
.gc-fa-sec-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 34px; border-radius: var(--gc-radius-pill, 999px);
	background: linear-gradient(135deg, #5BA7DB, #6EC1E4); color: #fff;
	text-decoration: none; cursor: pointer;
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 800; font-size: 16px; letter-spacing: 0.01em; border: 0;
	box-shadow: 0 14px 34px rgba(91, 167, 219, 0.45);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gc-fa-sec-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(91, 167, 219, 0.62); }
.gc-fa-sec-btn:focus-visible { outline: 3px solid color-mix(in srgb, #fff 70%, transparent); outline-offset: 3px; }

/* Arrow icon on both CTAs — nudges on hover */
.gc-fa-btn .gc-fa-arrow, .gc-fa-sec-btn .gc-fa-arrow { width: 18px; height: 18px; transition: transform 0.3s ease; }
.gc-fa-btn:hover .gc-fa-arrow, .gc-fa-sec-btn:hover .gc-fa-arrow { transform: translateX(4px); }

/* ---- Embedded form (WPForms / affiliate register) tokenised to the theme ---- */
.gc-fa-panel-inner .gc-embed { margin: 0; }
.gc-fa-panel-inner .wpforms-field-label,
.gc-fa-panel-inner label {
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 700; color: var(--gc-ink, #14212B); font-size: 15px;
}
.gc-fa-panel-inner input[type="text"],
.gc-fa-panel-inner input[type="email"],
.gc-fa-panel-inner input[type="url"],
.gc-fa-panel-inner input[type="tel"],
.gc-fa-panel-inner input[type="password"],
.gc-fa-panel-inner input[type="number"],
.gc-fa-panel-inner select,
.gc-fa-panel-inner textarea {
	width: 100%;
	border: 1px solid color-mix(in srgb, var(--gc-ink, #14212B) 16%, transparent);
	border-radius: var(--gc-radius-sm, 10px);
	padding: 12px 14px; font-family: var(--gc-font-body, "Inter", sans-serif);
	font-size: 15px; color: var(--gc-ink, #14212B); background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gc-fa-panel-inner input:focus,
.gc-fa-panel-inner select:focus,
.gc-fa-panel-inner textarea:focus {
	outline: none;
	border-color: var(--fa-accent, #5BA7DB);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa-accent, #5BA7DB) 20%, transparent);
}
.gc-fa-panel-inner button[type="submit"],
.gc-fa-panel-inner input[type="submit"],
.gc-fa-panel-inner .wpforms-submit {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 34px; border: 0; cursor: pointer;
	border-radius: var(--gc-radius-pill, 999px);
	background: linear-gradient(135deg, #5BA7DB, #6EC1E4); color: #fff;
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 800; font-size: 15px;
	box-shadow: 0 14px 34px rgba(91, 167, 219, 0.45);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gc-fa-panel-inner button[type="submit"]:hover,
.gc-fa-panel-inner input[type="submit"]:hover,
.gc-fa-panel-inner .wpforms-submit:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(91, 167, 219, 0.62); }

/* ---- Elementor editor: panels render in flow so authors can edit content ---- */
.elementor-editor-active .gc-fa-panel[hidden] { display: block; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
	.gc-fa { padding: 64px 0; }
	.gc-fa-inner { padding-inline: clamp(20px, 6vw, 48px); }
	.gc-fa-row-head { padding: 20px; gap: 12px; }
	.gc-fa-panel-inner { padding: 22px 20px 26px; }
}

@media (max-width: 640px) {
	.gc-fa { --fa-gap: 12px; padding: 56px 0; }
	.gc-fa-inner { padding-inline: 20px; }
	.gc-fa.gc-fa--band::before { background: linear-gradient(var(--fa-angle, 160deg), var(--fa-band-1), var(--fa-band-2)); }
	.gc-fa-header { margin-bottom: 28px; }
	.gc-fa-eyebrow { margin-bottom: 14px; font-size: 11px; letter-spacing: 0.04em; }
	.gc-fa .gc-fa-header h2 { font-size: 1.6rem; }
	.gc-fa-header p { font-size: 15px; line-height: 1.5; }
	.gc-fa-row { border-radius: 16px; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24); }
	.gc-fa-row.is-open { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); }
	.gc-fa-row-head { padding: 16px 18px; gap: 12px; }
	.gc-fa-row-title { font-size: 1.05rem; }
	.gc-fa-chev-wrap { width: 34px; height: 34px; box-shadow: none; }
	.gc-fa-chev { width: 17px; height: 17px; }
	.gc-fa-row.is-open .gc-fa-chev-wrap { box-shadow: none; }
	.gc-fa-panel-inner { padding: 18px; }
	.gc-fa-intro { margin-bottom: 16px; font-size: 15px; line-height: 1.5; }
	.gc-fa-btn, .gc-fa-sec-btn { width: 100%; justify-content: center; min-height: 44px; box-shadow: none; }
	.gc-fa-btn-wrap { display: block; }
	.gc-fa-secondary { margin-top: 28px; }
	.gc-fa-sec-caption { font-size: 15px; margin-bottom: 12px; }
	.gc-fa-panel-inner button[type="submit"],
	.gc-fa-panel-inner input[type="submit"],
	.gc-fa-panel-inner .wpforms-submit { width: 100%; min-height: 44px; padding: 13px 24px; box-shadow: none; }
}

@media (max-width: 480px) {
	.gc-fa { padding: 48px 0; }
	.gc-fa-inner { padding-inline: 16px; }
	.gc-fa .gc-fa-header h2 { font-size: 1.45rem; }
	.gc-fa-row-head { padding: 14px 16px; }
	.gc-fa-panel-inner { padding: 16px; }
	.gc-fa-panel-inner input[type="text"],
	.gc-fa-panel-inner input[type="email"],
	.gc-fa-panel-inner input[type="url"],
	.gc-fa-panel-inner input[type="tel"],
	.gc-fa-panel-inner input[type="password"],
	.gc-fa-panel-inner input[type="number"],
	.gc-fa-panel-inner select,
	.gc-fa-panel-inner textarea { font-size: 16px; }
	.gc-fa-btn, .gc-fa-sec-btn { padding-inline: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.gc-fa-row, .gc-fa-chev-wrap, .gc-fa-btn, .gc-fa-sec-btn { transition: none; }
	.gc-fa-panel.gc-fa-anim { transition: none; }
	.gc-fa-btn:hover, .gc-fa-sec-btn:hover { transform: none; }
	.gc-fa-btn:hover .gc-fa-arrow, .gc-fa-sec-btn:hover .gc-fa-arrow { transform: none; }
}

.gc-fa--rows-quiet .gc-fa-list { gap: 0; }

.gc-fa--rows-quiet .gc-fa-row {
	border: 0;
	border-top: 1px solid var(--gc-line, #E1E9EE);
	border-radius: 0;
	background: none;
	box-shadow: none;
	transition: border-color 0.25s ease;
}
.gc-fa--rows-quiet .gc-fa-row:last-child { border-bottom: 1px solid var(--gc-line, #E1E9EE); }
.gc-fa--rows-quiet .gc-fa-row:hover,
.gc-fa--rows-quiet .gc-fa-row.is-open {
	border-color: color-mix(in srgb, var(--fa-accent, #5BA7DB) 45%, transparent);
	box-shadow: none;
}

/* Same correction as .gc-fa-intro above, and the one that was actually visible.
   The card variant reads --fa-title (the Row title control); this one read the
   global --gc-ink instead, so the control did nothing here and the ink followed
   the SKIN rather than the row. Quiet rows are transparent, so their ground is
   whatever the Elementor container paints -- which the skin does not know. On
   GenChem that put #E8F1F8 on the white tile of /beard-balm/ and
   /privacy-policy/: measured 1.06:1, i.e. every collapsed question invisible.
   --gc-ink stays as the fallback for a render where no control value exists. */
.gc-fa--rows-quiet .gc-fa-row-head {
	gap: 20px;
	padding: 22px 6px;
	color: var(--fa-title, var(--gc-ink, #14212B));
	transition: color 0.25s ease;
}
.gc-fa--rows-quiet .gc-fa-row-head:hover { background: none; color: var(--fa-accent, #5BA7DB); }
.gc-fa--rows-quiet .gc-fa-row-head:focus-visible { outline-offset: 2px; }
.gc-fa--rows-quiet .gc-fa-row.is-open .gc-fa-row-head { color: var(--fa-accent-dark, #3D82B3); }
.gc-fa--rows-quiet .gc-fa-row-title {
	font-size: clamp(1rem, 0.94rem + 0.34vw, 1.18rem);
	font-weight: 700;
}

.gc-fa--rows-quiet .gc-fa-chev-wrap {
	width: 26px;
	height: 26px;
	background: none;
	box-shadow: none;
	color: var(--fa-accent, #5BA7DB);
}
.gc-fa--rows-quiet .gc-fa-row.is-open .gc-fa-chev-wrap { box-shadow: none; }
.gc-fa--rows-quiet .gc-fa-chev { width: 22px; height: 22px; }

.gc-fa--rows-quiet .gc-fa-panel { background: none; }
.gc-fa--rows-quiet .gc-fa-panel-inner { padding: 0 6px 26px; }
.gc-fa--rows-quiet .gc-fa-intro { margin: 0; max-width: 68ch; }

@media (max-width: 768px) {
	.gc-fa--rows-quiet .gc-fa-row-head { padding: 20px 2px; gap: 14px; }
	.gc-fa--rows-quiet .gc-fa-panel-inner { padding: 0 2px 22px; }
}
@media (max-width: 640px) {
	.gc-fa--rows-quiet .gc-fa-row { border-radius: 0; box-shadow: none; }
	.gc-fa--rows-quiet .gc-fa-row.is-open { box-shadow: none; }
	.gc-fa--rows-quiet .gc-fa-row-head { padding: 17px 0; }
	.gc-fa--rows-quiet .gc-fa-row-title { font-size: 1rem; }
	.gc-fa--rows-quiet .gc-fa-chev-wrap { width: 22px; height: 22px; }
	.gc-fa--rows-quiet .gc-fa-chev { width: 19px; height: 19px; }
	.gc-fa--rows-quiet .gc-fa-panel-inner { padding: 0 0 20px; }
}