/**
 * 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
 **/
/**
 * Colors come from the tokens in ferventword.css. Surfaces and text are theme aware; the
 * band is the one fixed-dark surface, --fw-red with white text, the same group the footer
 * and the book nav use. Selectors carry a body.fwbg prefix so `.fwbg p` in ferventword.css,
 * which loads later, does not win on order (CLAUDE.md section 6, the load-order trap).
 **/


/*** SHARED ***/
.fwui_app_cta {
	box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 16px 24px;
	margin: 30px 0;
}
body.fwbg .fwui_app_cta p {
	margin: 0;
	padding: 0;
}
.fwui_app_cta .fwbg_app_store_link {
	flex: 0 0 auto;
}
.fwui_app_cta .fwbg_app_store_badge img {
	display: block;
	width: 156px;
	height: auto;
}

/* Fallback until Apple's badge artwork is in assets/ */
body.fwbg .fwbg_app_store_button {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 6px;
	background-color: var( --fw-red );
	color: var( --fw-true-white );
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
}
body.fwbg .fwbg_app_store_button:hover,
body.fwbg .fwbg_app_store_button:focus-visible {
	background-color: var( --fw-black );
	color: var( --fw-true-white );
}


/*** STRIP ***/
.fwui_app_cta_strip {
	padding: 14px 20px;
	border-left: 4px solid var( --fw-red );
	background-color: var( --fw-surface );
	box-shadow: inset 0 0 0 1px var( --fw-black-rule );
}
body.fwbg .fwui_app_cta_strip .fwui_app_cta_text {
	flex: 1 1 320px;
	color: var( --fw-black-text );
	font-size: var( --fw-body-font-size );
	line-height: 1.5;
}
body.fwbg .fwui_app_cta_strip .fwui_app_cta_text strong {
	color: var( --fw-red-text );
}


/*** CARD ***/
.fwui_app_cta_card {
	padding: 24px 28px;
	border-radius: 12px;
	background-color: var( --fw-orange-bg );
}
.fwui_app_cta_card .fwui_app_cta_body {
	flex: 1 1 320px;
	max-width: 62ch;
}
body.fwbg .fwui_app_cta_card .fwui_app_cta_eyebrow {
	margin-bottom: 6px;
	color: var( --fw-orange-text );
	font-size: .8em;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
body.fwbg .fwui_app_cta_card .fwui_app_cta_title {
	margin-bottom: 8px;
	color: var( --fw-black-text );
	font-size: 1.35em;
	font-weight: 600;
	line-height: 1.3;
}
body.fwbg .fwui_app_cta_card .fwui_app_cta_text {
	margin-bottom: 16px;
	color: var( --fw-black-text-85 );
	line-height: 1.5;
}
.fwui_app_cta_card .fwui_app_cta_actions {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 12px 20px;
}
body.fwbg .fwui_app_cta_card .fwui_app_cta_learn_more {
	color: var( --fw-red-text );
	text-decoration: underline;
}


/*** BAND ***/
.fwui_app_cta_band {
	margin: 0 auto;
	padding: 20px max( 20px, calc( ( 100% - 1280px ) / 2 + 20px ) );
	background-color: var( --fw-red );
}
.fwui_app_cta_band .fwui_app_cta_body {
	flex: 1 1 320px;
}
body.fwbg .fwui_app_cta_band .fwui_app_cta_title {
	color: var( --fw-true-white );
	font-size: 1.2em;
	font-weight: 600;
}
body.fwbg .fwui_app_cta_band .fwui_app_cta_text {
	color: var( --fw-true-white );
	font-size: .9em;
}
/* The fallback button is --fw-red, which would vanish into the band */
body.fwbg .fwui_app_cta_band .fwbg_app_store_button {
	background-color: var( --fw-true-white );
	color: var( --fw-red );
}
body.fwbg .fwui_app_cta_band .fwbg_app_store_button:hover,
body.fwbg .fwui_app_cta_band .fwbg_app_store_button:focus-visible {
	background-color: var( --fw-black );
	color: var( --fw-true-white );
}
.fwui_app_cta_band .fwui_app_cta_qr {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	padding: 4px;
	border-radius: 6px;
	background-color: var( --fw-true-white );
}


/*** PANEL ***/
.fwui_app_cta_panel {
	flex-flow: column nowrap;
	max-width: 420px;
	margin: 0 auto 60px;
	text-align: center;
}
body.fwbg .fwui_app_cta_panel .fwui_app_cta_text {
	color: var( --fw-black-text-85 );
}


/*** RESPONSIVE ***/
@media ( max-width: 779px ) {
	.fwui_app_cta_card {
		padding: 20px;
	}
	/* A phone can tap the badge; the QR code is for desktop visitors only */
	.fwui_app_cta_band .fwui_app_cta_qr {
		display: none;
	}
}