/**
 * Root Cause Rx lead-magnet modal.
 *
 * The signup form lives inside a modal dialog. By default (no JS / editor)
 * the modal renders inline like a normal section so it stays fully visible
 * and editable. The frontend script adds `rootcause-modal--js`, which turns
 * it into a hidden overlay that opens when a trigger link is clicked.
 *
 * The modal carries the `fxmedce` class, so it inherits that design layer's
 * tokens (--coral, --ink, --paper, --display, --r, shadows). Everything here
 * is scoped under `.rootcause-modal` so restyling Ninja Forms' default chrome
 * never leaks to the other forms on the site.
 */

/* ---------- overlay ---------- */

.rootcause-modal.rootcause-modal--js {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
	background: transparent;

	/* The modal block sits inside a constrained layout, which caps its children
	   at the theme's content width and auto-centers them. Left alone, the fixed
	   overlay is stuck at that width instead of filling the viewport, so it can
	   only be clicked to dismiss within a narrow column. */
	max-width: none;
	width: auto;
	margin: 0;
}

.rootcause-modal.rootcause-modal--js.is-open {
	display: flex;
}

/* ---------- panel ---------- */

.rootcause-modal__panel {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	background: var(--paper, #fff);
	border: 1px solid var(--line-2, rgba(22, 34, 59, 0.08));
	border-radius: var(--r-lg, 26px);
	box-shadow: var(--shadow-lg, 0 30px 70px -28px rgba(22, 34, 59, 0.42));
}

.rootcause-modal.rootcause-modal--js .rootcause-modal__panel {
	position: relative;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
}

/* A coral hairline across the top ties the panel to the page's accent. */
.rootcause-modal__panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	border-radius: var(--r-lg, 26px) var(--r-lg, 26px) 0 0;
	background: var(--coral, #d7384a);
}

@media ( prefers-reduced-motion: no-preference ) {
	.rootcause-modal.rootcause-modal--js .rootcause-modal__panel {
		animation: rootcause-modal-in 0.2s ease-out;
	}
}

@keyframes rootcause-modal-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.rootcause-modal.rootcause-modal--js .rootcause-modal__panel {
		animation: none;
	}
}

body.rootcause-modal-open-lock {
	overflow: hidden;
}

/* ---------- close button ---------- */

.rootcause-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
}

.rootcause-modal .rootcause-modal__close .wp-block-button__link {
	background: transparent;
	color: var(--ink-soft, #5b6580);
	font-size: 22px;
	line-height: 1;
	padding: 0;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	box-shadow: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.rootcause-modal .rootcause-modal__close .wp-block-button__link:hover,
.rootcause-modal .rootcause-modal__close .wp-block-button__link:focus-visible {
	color: var(--ink, #16223b);
	background: var(--cream-2, rgba(22, 34, 59, 0.06));
}

/* ---------- panel copy ---------- */

.rootcause-modal .wp-block-heading {
	font-family: var(--display, "Bricolage Grotesque", system-ui, sans-serif);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink, #16223b);
}

/* ---------- opt-in form ---------- */

.rc-form {
	font-family: var(--body, "Hanken Grotesk", system-ui, sans-serif);
	margin: 0;
}

.rc-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 14px;
}

@media ( min-width: 620px ) {
	.rc-form__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.rc-field {
	display: block;
	margin: 0 0 16px;
}

.rc-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--ink-2, #3a4661);
	margin-bottom: 6px;
}

.rc-req {
	color: var(--coral, #d7384a);
}

.rc-field input,
.rc-field select {
	width: 100%;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.3;
	color: var(--ink, #16223b);
	background: #fff;
	border: 1px solid var(--line, rgba(22, 34, 59, 0.12));
	border-radius: 12px;
	padding: 13px 15px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rc-field input:focus,
.rc-field select:focus {
	outline: none;
	border-color: var(--coral, #d7384a);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--coral, #d7384a) 18%, transparent );
}

/* Native select arrow is inconsistent across browsers — draw our own. */
.rc-field select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235B6580' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 15px center;
}

.rc-field.has-error input,
.rc-field.has-error select {
	border-color: var(--wp--preset--color--error, #df1642);
}

.rc-field__error {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: var(--wp--preset--color--error, #df1642);
	margin-top: 5px;
}

/* Bot trap: off-screen rather than display:none, so bots that skip hidden
   inputs still fill it in. */
.rc-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- submit ---------- */

/* Scoped one level deeper on purpose: the theme's bare `[type="submit"]` rule
   has the same specificity as `.rc-submit` and loads later, so it would win. */
.rc-form .rc-submit {
	width: 100%;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--coral, #d7384a);
	border: 0;
	border-radius: 100px;
	padding: 16px 30px;
	margin-top: 6px;
	cursor: pointer;
	box-shadow: var(--shadow-coral, 0 18px 40px -16px rgba(215, 56, 74, 0.5));
	transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.rc-form .rc-submit:hover:not(:disabled) {
	background: var(--coral-deep, #b92c3c);
}

.rc-form .rc-submit:active:not(:disabled) {
	transform: translateY(1px);
}

.rc-form .rc-submit:disabled {
	opacity: 0.65;
	cursor: progress;
	box-shadow: none;
}

.rc-form__note {
	margin: 12px 0 0;
	font-size: 13px;
	text-align: center;
	color: var(--ink-soft, #5b6580);
}

.rc-form__status:empty {
	display: none;
}

.rc-form__status {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
	color: var(--wp--preset--color--error, #df1642);
}

/* ---------- confirmation ---------- */

/* The panel's intro ("Create Your Free Account" and its blurb) is written for
   someone about to fill the form in. Once they have, it contradicts the
   confirmation sitting under it, so the success state drops it. */
.rootcause-modal__panel.is-complete .rootcause-modal__intro {
	display: none;
}

.rc-success {
	text-align: center;
	padding: 8px 0 4px;
}

.rc-success:focus {
	outline: none;
}

.rc-success__heading {
	font-family: var(--display, "Bricolage Grotesque", system-ui, sans-serif);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink, #16223b);
	margin: 0 0 8px;
}

.rc-success__message {
	font-family: var(--body, "Hanken Grotesk", system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-soft, #5b6580);
	margin: 0 0 20px;
}

/* Scoped one level deeper: the design layer's `.fxmedce a { color: inherit }`
   outranks a lone class and would leave dark text on the coral pill. */
.rc-success .rc-success__cta {
	display: inline-block;
	font-family: var(--body, "Hanken Grotesk", system-ui, sans-serif);
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: var(--coral, #d7384a);
	border-radius: 100px;
	padding: 14px 30px;
	text-decoration: none;
	box-shadow: var(--shadow-coral, 0 18px 40px -16px rgba(215, 56, 74, 0.5));
}

.rc-success .rc-success__cta:hover,
.rc-success .rc-success__cta:focus {
	background: var(--coral-deep, #b92c3c);
	color: #fff;
}

/* ---------- small screens ---------- */

@media ( max-width: 619px ) {
	.rootcause-modal.rootcause-modal--js {
		padding: 12px;
	}

	.rootcause-modal__panel {
		padding-left: 22px !important;
		padding-right: 22px !important;
		padding-top: 34px !important;
	}
}