/**
 * FerventWord
 *
 * @package   ferventword
 * @author    Jerry Simmons <jerry@ferventsolutions.com>
 * @copyright 2026 Jerry Simmons
 * @license   GPL-2.0+
 **/


/**
 * iPhone 12 Mini: 360 x 780
 * iPhone 12: 390 x 844
 * iPad: 810 x 1080
 * MacBook: 1280 x 800
 *
 * 1280px
 * 1079px
 * 779px
 * 389px
 **/


/*** TRIGGER ***/

/**
 * A <button> that has to read as the link it replaced, so the UA button styling comes
 * off entirely. body.fwbg prefixes throughout: ferventword.css is enqueued after this
 * file and Divi styles `button` and `a` globally, so an unprefixed rule loses on order.
 **/
body.fwbg .fwui_quotation_trigger {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var( --fw-red-text );
	font: inherit;
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}
body.fwbg .fwui_quotation_trigger:hover {
	color: var( --fw-black-text );
}


/*** COMPARISON OVERLAY ***/

/**
 * Wider than the 900px .fwbgmm_dialog_html so two passages have room, and shrink-wrapped
 * so a two-verse comparison is not a 94%-tall box with an empty bottom half.
 *
 * fit-content, not auto: the overlay is position:fixed with inset:0, so height:auto
 * resolves against the containing block and fills it -- measured at 846px around 326px
 * of content. That is why .fwbgmm_overlay itself uses fit-content.
 *
 * Compound selector so this beats .fwbgmm_dialog_html's own width/height whichever
 * stylesheet the browser sees last; equal specificity would leave it to load order.
 **/
.fwbgmm_dialog_html.fwbgmm_dialog_compare {
	width: min( 94%, 1200px );
	height: fit-content;
	max-height: 94%;
}
.fwui_quotation_compare {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 40px;
	padding: 40px;
	background-color: var( --fw-surface );
}
body.fwbg .fwui_quotation_heading {
	grid-column: 1 / -1;
	margin: 0;
	color: var( --fw-black-text );
	font-size: clamp( 20px, 2.5vw, 28px );
	line-height: 1.25;
}
.fwui_quotation_side {
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
}
/* The second column carries the rule, so it never hangs off the end of a single column. */
@media ( min-width: 780px ) {
	.fwui_quotation_side + .fwui_quotation_side {
		padding-left: 40px;
		margin-left: -40px;
		border-left: solid 1px var( --fw-black-rule );
	}
}
body.fwbg .fwui_quotation_role {
	margin: 0 0 2px;
	color: var( --fw-black-text-65 );
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
body.fwbg .fwui_quotation_reference {
	margin: 0 0 10px;
	color: var( --fw-red-text );
	font-size: clamp( 16px, 1.8vw, 20px );
	line-height: 1.25;
}
body.fwbg .fwui_quotation_text {
	margin: 0 0 20px;
	color: var( --fw-black-text );
	line-height: 1.55;
}
/* Pushes the chapter button to the bottom so both columns line their buttons up. */
body.fwbg .fwui_quotation_chapter_link {
	margin-top: auto;
}


/*** BREAKPOINTS ***/

@media ( max-width: 779px ) {
	.fwui_quotation_compare {
		grid-template-columns: 1fr;
		gap: 25px;
		padding: 25px 20px;
	}
	.fwui_quotation_side + .fwui_quotation_side {
		padding-top: 25px;
		border-top: solid 1px var( --fw-black-rule );
	}
	body.fwbg .fwui_quotation_chapter_link {
		margin-top: 0;
	}
}

@media ( max-width: 389px ) {
	.fwui_quotation_compare {
		padding: 15px;
	}
}