/**
 * RASM Phase 1 design layer.
 *
 * Scoped to .rasm-designed (see class-rasm-design.php) - /books/, the four title
 * pages, /thank-you/. Never loads on the client's existing pages.
 *
 * Tokens are documented in docs/design-tokens.md. Colour and type deliberately
 * REFERENCE Astra's --ast-global-color-* variables rather than restating hex
 * values, so a Customizer change still cascades. The only values invented here
 * are the spacing scale (there was no rhythm on the client's pages to inherit -
 * see design-tokens.md section 5) and the reading measure.
 *
 * Constraints honoured: no webfonts, no animation libraries, no external assets.
 * /books/ is the QR landing page with a sub-2.0s mobile LCP budget.
 */

.rasm-designed {
	/* Spacing scale - rounded to the client's most-used ad-hoc values (96/40/24). */
	--rasm-space-section: 96px;
	--rasm-space-block: 40px;
	--rasm-space-tight: 24px;

	/* Readable measure for long-form body copy. */
	--rasm-measure: 68ch;

	/* Semantic aliases onto the Astra palette. Fallbacks match docs/design-tokens.md
	   so the layer degrades sanely if Astra's vars ever go missing. */
	--rasm-ink: var( --ast-global-color-2, #382f28 );
	--rasm-body: var( --ast-global-color-3, #796f67 );
	--rasm-brand: var( --ast-global-color-1, #af8360 );
	--rasm-brand-light: var( --ast-global-color-0, #c5a180 );
	--rasm-cream: var( --ast-global-color-4, #f9f6f2 );
	--rasm-white: var( --ast-global-color-5, #fff );
	--rasm-rule: var( --ast-global-color-6, rgba( 176, 132, 97, 0.3 ) );
}

@media ( max-width: 768px ) {
	.rasm-designed {
		--rasm-space-section: 56px;
		--rasm-space-block: 28px;
		--rasm-space-tight: 20px;
	}
}

/* ------------------------------------------------------------ vertical rhythm --
 * The single highest-value change in this pass: our sections previously had 0
 * padding and butted directly together. Applied to the section wrapper so it
 * works for both Elementor sections and the classic /thank-you/ page.
 */
.rasm-designed .rasm-section {
	padding-top: var( --rasm-space-section );
	padding-bottom: var( --rasm-space-section );
}

/* Alternating cream bands, full-bleed, matching the client's use of color-4. */
.rasm-designed .rasm-section--alt {
	background-color: var( --rasm-cream );
}

/* ------------------------------------------------------------------- headings --
 * Sizes inherit from Astra. We only correct the two things the extraction
 * flagged: the 27px mobile h1 (too weak for a page reached by scanning printed
 * matter) and heading-to-body spacing.
 */
.rasm-designed .rasm-hero h1 {
	margin-bottom: var( --rasm-space-tight );
}

@media ( max-width: 768px ) {
	/* Astra's global mobile h1 is 27px. Overridden HERE ONLY - on our heroes -
	   never globally, which would restyle the client's pages. */
	.rasm-designed .rasm-hero h1 {
		font-size: 36px;
		line-height: 1.15;
	}
}

.rasm-designed .rasm-hero h3 {
	color: var( --rasm-body );
	font-weight: 400;
	margin-bottom: var( --rasm-space-block );
}

/* --------------------------------------------------------------------- prose --
 * Body copy ran ~150 characters per line at 1200px. Cap the measure; keep left
 * alignment (the client's pages are left-aligned for long form).
 */
.rasm-designed .rasm-prose p,
.rasm-designed .rasm-mission-copy p {
	max-width: var( --rasm-measure );
}

/* Centre the whole prose column to the reading measure. Without this the measure
   caps the body at ~68ch but leaves it stranded in the left half of a full-bleed
   cream band; centring the column makes the surrounding whitespace symmetric and
   deliberate. Text stays left-aligned within the column. */
.rasm-designed .rasm-prose > .elementor-container > .elementor-column > .elementor-widget-wrap.elementor-element-populated {
	max-width: var( --rasm-measure );
	margin-left: auto;
	margin-right: auto;
}

.rasm-designed .rasm-hero p {
	max-width: var( --rasm-measure );
	margin-left: auto;
	margin-right: auto;
}

.rasm-designed .rasm-section h2 {
	margin-bottom: var( --rasm-space-tight );
}

/* ------------------------------------------------------------- the title grid --
 * Elementor's 4-column layout is replaced with a real grid so the cards align
 * and stack predictably. This is the /books/ QR landing centrepiece.
 */
.rasm-designed .rasm-cards > .elementor-container {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --rasm-space-block );
	align-items: stretch;
}

@media ( max-width: 1024px ) {
	.rasm-designed .rasm-cards > .elementor-container {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 600px ) {
	.rasm-designed .rasm-cards > .elementor-container {
		grid-template-columns: 1fr;
		gap: var( --rasm-space-tight );
	}
}

/* Elementor sets inline percentage widths on columns; the grid owns sizing now. */
.rasm-designed .rasm-cards > .elementor-container > .rasm-card {
	width: auto;
}

/* The `.elementor-element-populated` qualifier is required, not decorative:
   Elementor ships `.elementor-column-gap-default > .elementor-column >
   .elementor-element-populated { padding: 10px }` at four-class specificity, which
   silently beats a three-class selector and leaves the cards with 10px padding. */
.rasm-designed .rasm-card > .elementor-widget-wrap.elementor-element-populated {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var( --rasm-space-tight );
	background: var( --rasm-white );
	border: 1px solid var( --rasm-rule );
	/* Square corners - the client's buttons are radius 0; rounded reads foreign. */
	border-radius: 0;
}

.rasm-designed .rasm-card--flagship > .elementor-widget-wrap.elementor-element-populated {
	/* The purchasable title carries visible weight over the forthcoming three. */
	background: var( --rasm-cream );
	border-color: var( --rasm-brand );
	border-width: 2px;
	/* Same border BOX as the 1px cards so cover heights - and therefore the card
	   titles - stay aligned across the row. */
	padding: calc( var( --rasm-space-tight ) - 1px );
}

/* Covers: the 2:3 box lives on the CONTAINER, not the <img>. Putting it on the
   image lets differing intrinsic dimensions produce differing rendered heights,
   which knocks the card titles out of alignment across the row. A fixed-ratio
   container with a centred, contained image gives every card an identical cover
   box - so real covers of any ratio drop in without rework and without cropping. */
.rasm-designed .rasm-card-cover .elementor-widget-container {
	aspect-ratio: 2 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --rasm-cream );
	overflow: hidden;
}

.rasm-designed .rasm-card-cover img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.rasm-designed .rasm-card--flagship .rasm-card-cover .elementor-widget-container {
	background: var( --rasm-white );
}

.rasm-designed .rasm-card-cover {
	margin-bottom: var( --rasm-space-tight );
}

/* Card typography: clear title > subtitle hierarchy, h3 stepped down from the
   38px global (that size is for page sections, not cards). */
.rasm-designed .rasm-card-title {
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 6px;
}

.rasm-designed .rasm-card-title a {
	color: var( --rasm-ink );
	text-decoration: none;
}

.rasm-designed .rasm-card-title a:hover {
	color: var( --rasm-brand );
}

.rasm-designed .rasm-card-sub {
	font-size: 15px;
	line-height: 1.5;
	color: var( --rasm-body );
	margin: 0 0 var( --rasm-space-tight );
}

/* Push the CTA to the card foot so actions align across a row of uneven text.
   Targets the explicit .rasm-card-foot widget, NOT :last-child - the forthcoming
   cards have fewer widgets, and :last-child would grab their title block and
   shove the title to the bottom of the card. */
.rasm-designed .rasm-card .rasm-card-foot {
	margin-top: auto;
}

/* Status badge: quiet label, not a button - it must not compete with Buy Direct. */
.rasm-designed .rasm-status-badge {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --rasm-brand );
	border: 1px solid var( --rasm-rule );
	padding: 4px 10px;
	margin: 0 0 var( --rasm-space-tight );
}

.rasm-designed .rasm-card-cta {
	color: var( --rasm-brand );
	font-weight: 600;
	text-decoration: none;
}

.rasm-designed .rasm-card-cta:hover {
	color: var( --rasm-brand-light );
}

/* ------------------------------------------------------------------- buttons --
 * WooCommerce and our form buttons are brought onto the Astra button spec:
 * #af8360, white, Lora 16/500, 16x24 padding, SQUARE corners.
 */
.rasm-designed .rasm-sub-form button,
.rasm-designed .woocommerce a.button,
.rasm-designed .woocommerce button.button,
.rasm-designed a.button,
.rasm-designed .rasm-leadmagnet-download a.button {
	background-color: var( --rasm-brand );
	color: var( --rasm-white );
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	padding: 16px 24px;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.rasm-designed .rasm-sub-form button:hover,
.rasm-designed .woocommerce a.button:hover,
.rasm-designed .woocommerce button.button:hover,
.rasm-designed a.button:hover {
	background-color: var( --rasm-brand-light );
	color: var( --rasm-white );
}

@media ( max-width: 768px ) {
	.rasm-designed .rasm-sub-form button,
	.rasm-designed .woocommerce a.button,
	.rasm-designed a.button {
		padding: 12px 24px;
	}
}

/* Hero Buy CTA: one product-labelled button, centred, allowed to wrap on narrow
   screens rather than overflow ("Buy The Audacity to ASK! — $19.99"). */
.rasm-designed .rasm-buy-flagship {
	margin: var( --rasm-space-tight ) 0 0;
	text-align: center;
}

/* The `.rasm-buy-flagship` wrapper is included for specificity, not nesting:
   Astra's `.woocommerce-js a.button` (0,2,1) sets `text-transform: capitalize`
   and beats a two-class selector. This label carries a book title ("...to ASK!")
   whose lowercase "to" must be preserved, so we override capitalize on THIS button
   only - Astra's capitalize stays the site-wide button style everywhere else. */
.rasm-designed .rasm-buy-flagship .rasm-buy-button {
	display: inline-block;
	max-width: 100%;
	white-space: normal;
	text-transform: none;
}

.rasm-designed .rasm-cart-link {
	margin-top: var( --rasm-space-tight );
	text-align: center;
}

.rasm-designed .rasm-cart-link a {
	color: var( --rasm-brand );
	font-weight: 600;
}

/* --------------------------------------------------------------------- forms --
 * Previously browser defaults with a 2px radius and a cool grey (#f9fafb) that
 * is not in the client's palette. Now: warm cream field, brand rule, square.
 */
.rasm-designed .rasm-sub-form {
	max-width: 520px;
	margin: 0 auto;
}

.rasm-designed .rasm-cards .rasm-sub-form,
.rasm-designed .rasm-prose .rasm-sub-form {
	margin-left: 0;
}

.rasm-designed .rasm-sub-form label {
	display: block;
	font-weight: 600;
	color: var( --rasm-ink );
	margin-bottom: 8px;
}

.rasm-designed .rasm-sub-form input[type="email"] {
	width: 100%;
	font-family: inherit;
	font-size: 16px; /* 16px avoids iOS zoom-on-focus */
	color: var( --rasm-ink );
	background: var( --rasm-cream );
	border: 1px solid var( --rasm-rule );
	border-radius: 0;
	padding: 14px 16px;
	margin-bottom: 12px;
}

.rasm-designed .rasm-sub-form input[type="email"]:focus {
	outline: 2px solid var( --rasm-brand );
	outline-offset: 1px;
	background: var( --rasm-white );
}

.rasm-designed .rasm-sub-note {
	font-size: 14px;
	color: var( --rasm-body );
	margin: 12px 0 0;
}

.rasm-designed .rasm-sub-message {
	margin: 12px 0 0;
	font-weight: 600;
	color: var( --rasm-brand );
}

.rasm-designed .rasm-sub-message:empty {
	margin: 0;
}

/* Cards are narrow - let the notify form fill the card. */
.rasm-designed .rasm-card .rasm-sub-form {
	max-width: none;
}

/* Newsletter block heading (rendered by [rasm_newsletter]) - matches the
   free-chapter H2 so the two capture panels mirror. Astra sizes the h2; we only
   centre and space it, as the free-chapter heading is centred. */
.rasm-designed .rasm-form-heading {
	text-align: center;
	margin: 0 0 var( --rasm-space-tight );
}

/* ---------------------------------------------------------- capture panels --
 * The PRIMARY capture (free chapter on /books/, and the /thank-you/ newsletter)
 * is a centred cream panel with the same thin brand rule as the covers.
 * High-specificity selector: Elementor ships a 3-class .elementor-element-populated
 * padding rule that a shorter selector would lose to (same fight as the cards).
 */
.rasm-designed .rasm-capture > .elementor-container > .elementor-column > .elementor-widget-wrap.elementor-element-populated,
.rasm-designed .rasm-capture-panel {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
	padding: var( --rasm-space-block );
	background: var( --rasm-cream );
	border: 1px solid var( --rasm-rule );
	border-radius: 0;
}

/* The classic-content panel (/thank-you/) has no Elementor section to give it
   vertical rhythm, so it carries its own top margin off the prose above it. */
.rasm-designed .rasm-capture-panel {
	margin-top: var( --rasm-space-section );
}

/* ----------------------------------------------------- secondary newsletter --
 * On /books/ the newsletter is the SECONDARY capture: a slim, quiet bar pulled
 * up close beneath the primary free-chapter panel. Tighten the gap by trimming
 * the free-chapter section's bottom padding and dropping the slim section's top
 * padding, so the two sit ~40px apart rather than a full 96px band.
 */
.rasm-designed .rasm-capture {
	padding-bottom: var( --rasm-space-block );
}
.rasm-designed .rasm-capture-slim {
	padding-top: 0;
}

.rasm-designed .rasm-newsletter-slim {
	max-width: 620px;
	margin: 0 auto;
	padding-top: var( --rasm-space-block );
	border-top: 1px solid var( --rasm-rule );
	text-align: center;
}

/* Small secondary heading - deliberately far below the 45px primary H2. */
.rasm-designed .rasm-form-heading--slim {
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 var( --rasm-space-tight );
}

/* Compact form: field + button on one row; wraps (stacks) on narrow screens so
   nothing overflows the QR-page mobile budget. */
.rasm-designed .rasm-sub-form--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 460px;
	margin: 0 auto;
}
.rasm-designed .rasm-sub-form--inline input[type="email"] {
	flex: 1 1 220px;
	margin-bottom: 0;
}
.rasm-designed .rasm-sub-form--inline button {
	flex: 0 0 auto;
}
.rasm-designed .rasm-sub-form--inline .rasm-sub-message {
	flex-basis: 100%;
	margin: 8px 0 0;
}

/* Visually-hidden label: kept for screen readers on the compact bar. */
.rasm-designed .rasm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* NOTE: Astra's duplicate page title on /thank-you/ is suppressed in PHP via the
   astra_the_title_enabled filter (Rasm_Design::suppress_thankyou_title), not CSS -
   hiding it here would leave a hidden first heading that fails the E2E "a heading
   is visible" guard. */

/* ------------------------------------------------------- title page composition */
.rasm-designed .rasm-title-hero .rasm-hero-cover img {
	max-width: 280px;
	width: 100%;
	height: auto;
	margin: 0 auto var( --rasm-space-block );
	display: block;
}

/* The hero's own widgets are centred by Elementor's align setting, but raw HTML
   widgets (the status badge) are not - left-aligning the badge under a centred
   title orphans it. Centre the whole hero column instead. */
.rasm-designed .rasm-title-hero .elementor-widget-html {
	text-align: center;
}

/* Hero and CTA are one composition: close the gap between them so the buy/notify
   action reads as part of the hero rather than a detached band. */
.rasm-designed .rasm-title-hero {
	padding-bottom: var( --rasm-space-block );
}

.rasm-designed .rasm-cta {
	padding-top: 0;
}

/* --------------------------------------- initiative list (title pages only) --
 * The /books/ footer link list was removed (the four cards already link every
 * title); this styles the "Also in the Audacious Prayer Initiative" list that
 * still appears on the individual title pages.
 */
.rasm-designed .rasm-initiative-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rasm-designed .rasm-initiative-links li {
	border-bottom: 1px solid var( --rasm-rule );
	padding: 12px 0;
}

.rasm-designed .rasm-initiative-links a {
	color: var( --rasm-ink );
	text-decoration: none;
	font-weight: 600;
}

.rasm-designed .rasm-initiative-links a:hover {
	color: var( --rasm-brand );
}

/* ------------------------------------------------------- flagship card price --
 * The card's [add_to_cart show_price style=""] renders the price as
 * .woocommerce-Price-amount inline before the Add-to-cart button (style=""
 * already stripped WooCommerce's default grey inline box). Make the price bold
 * and prominent, and left-align the whole block with the rest of the card. */
.rasm-designed .rasm-card--flagship .add_to_cart_inline {
	margin: 0 0 var( --rasm-space-tight );
	padding: 0;
	text-align: left;
}
.rasm-designed .rasm-card--flagship .woocommerce-Price-amount {
	display: block;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	color: var( --rasm-ink );
	margin-bottom: 10px;
}

/* ----------------------------------------------------------- accessibility --- */
.rasm-designed a:focus-visible,
.rasm-designed button:focus-visible {
	outline: 2px solid var( --rasm-brand );
	outline-offset: 2px;
}