/* ==========================================================================
   LPF Preview — SHARED styles
   Used by every preview page (home, spanish, devotional, devotional-es).
   Design tokens taken from the reference site (custom.css):
     Yellow  #f4dc35 | Black #000 | White #fff | Zoom tint #FDF8D0
   All classes are prefixed `lpf-` and scoped under body.lpf-preview so they
   never leak into other pages or the Divi Builder.
   Page-specific sections live in the per-page CSS files.
   ========================================================================== */

:root {
	--lpf-yellow: #f4dc35;
	--lpf-black: #000;
	--lpf-white: #fff;
	--lpf-tint: #fdf8d0;
	--lpf-gray: #d3d3d4;
	--lpf-container: 1140px;
}

body.lpf-preview {
	margin: 0;
	padding: 0;
	background: var(--lpf-white);
	color: var(--lpf-black);
	font-family: "nexa", "Open Sans", Arial, Helvetica, sans-serif;
	line-height: 1.6;
}

body.lpf-preview * {
	box-sizing: border-box;
}

body.lpf-preview img {
	max-width: 100%;
	height: auto;
}

.lpf-page {
	overflow: hidden;
}

.lpf-container {
	width: 100%;
	max-width: var(--lpf-container);
	margin: 0 auto;
	padding: 0 20px;
}

.lpf-yellow {
	color: var(--lpf-yellow);
}

.lpf-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Buttons (pill style from reference .btnorder / .btnfree)
   -------------------------------------------------------------------------- */
.lpf-btn {
	display: inline-block;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 20px;
	padding: 8px 24px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lpf-btn--solid {
	background: var(--lpf-yellow);
	border: 2px solid var(--lpf-yellow);
	color: var(--lpf-black);
}

.lpf-btn--solid:hover {
	background: transparent;
	border-color: var(--lpf-black);
	color: var(--lpf-black);
}

.lpf-btn--outline {
	background: transparent;
	border: 2px solid var(--lpf-black);
	color: var(--lpf-black);
}

.lpf-btn--outline:hover {
	background: var(--lpf-yellow);
	border-color: var(--lpf-yellow);
}

.lpf-btn[disabled] {
	opacity: 0.65;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Section titles
   -------------------------------------------------------------------------- */
.lpf-section-title {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.15rem;
	font-size: 2.4rem;
	line-height: 1.2;
	margin: 0 0 40px;
	font-weight: 800;
}

.lpf-section-title--light {
	color: var(--lpf-white);
}

.lpf-section-title--yellow {
	color: var(--lpf-yellow);
}

.lpf-section-title--dark {
	color: var(--lpf-black);
}

/* --------------------------------------------------------------------------
   1. Navigation (shared)
   -------------------------------------------------------------------------- */
.lpf-nav {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--lpf-black);
}

.lpf-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
}

.lpf-nav__brand {
	color: var(--lpf-white);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.2rem;
	letter-spacing: 1px;
}

.lpf-nav__menu ul {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lpf-nav__menu a {
	color: var(--lpf-white);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.95rem;
	padding: 6px 12px;
	display: inline-block;
}

.lpf-nav__menu a:hover {
	color: var(--lpf-yellow);
}

.lpf-nav__cta {
	background: var(--lpf-yellow);
	color: var(--lpf-black) !important;
	border-radius: 20px;
	padding: 6px 14px !important;
}

.lpf-nav__cta:hover {
	background: var(--lpf-white);
}

.lpf-nav__checkbox,
.lpf-nav__toggle {
	display: none;
}

.lpf-nav__toggle {
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 40px;
	border: 2px solid var(--lpf-white);
	border-radius: 16px;
	cursor: pointer;
}

.lpf-nav__toggle span {
	display: block;
	height: 2px;
	width: 22px;
	margin: 0 auto;
	background: var(--lpf-white);
}

/* --------------------------------------------------------------------------
   2. Hero (shared)
   -------------------------------------------------------------------------- */
.lpf-hero {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	padding: 70px 0 40px;
}

.lpf-hero__inner {
	display: flex;
	align-items: center;
	gap: 40px;
}

.lpf-hero__image {
	flex: 0 0 30%;
	text-align: center;
}

.lpf-hero__image img {
	min-width: 260px;
}

.lpf-hero__text {
	flex: 1;
	text-align: center;
}

.lpf-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.5rem;
	font-size: 2rem;
	margin: 0;
	font-weight: 300;
}

.lpf-hero__title {
	text-transform: uppercase;
	letter-spacing: 0.4rem;
	font-size: 3.2rem;
	line-height: 1.1;
	margin: 16px 0;
	font-weight: 700;
}

.lpf-hero__subtitle {
	text-transform: uppercase;
	letter-spacing: 0.5rem;
	font-size: 2.2rem;
	margin: 0 0 30px;
	font-weight: 300;
}

.lpf-hero__cta {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Buy modal (opens on Order Now / Get It Now / Ordene Hoy), shared
   Hidden by default; shown via .is-open (JS) or :target (no-JS fallback).
   -------------------------------------------------------------------------- */
.lpf-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	padding: 20px;
}

.lpf-modal.is-open,
.lpf-modal:target {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lpf-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: block;
}

.lpf-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 500px;
	background: var(--lpf-white);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.lpf-modal__header {
	position: relative;
	background: var(--lpf-black);
	color: var(--lpf-white);
	text-align: center;
	padding: 22px 44px;
}

/* Live modal header: white NexaThin on black (.modal-header h2.txt-primary).
   The color is set explicitly because Divi's global `h2 { color }` rule targets
   the heading directly and otherwise overrides the header's inherited white,
   leaving the title gray (the modal is relocated to <body>, away from any
   lighter-background context). */
.lpf-modal__title {
	margin: 0;
	color: var(--lpf-white);
	font-family: "nexa", "Open Sans", Arial, Helvetica, sans-serif;
	font-weight: 100; /* NexaThin. */
	font-size: 1.6rem;
	line-height: 1.3;
	text-transform: none;
}
/* Ensure the "Praying" accent stays brand yellow (not the forced white above). */
.lpf-modal__title .lpf-yellow {
	color: var(--lpf-yellow);
}

.lpf-modal__close {
	position: absolute;
	top: 8px;
	right: 14px;
	color: var(--lpf-white);
	text-decoration: none;
	font-size: 1.6rem;
	line-height: 1;
}

.lpf-modal__close:hover {
	color: var(--lpf-yellow);
}

.lpf-modal__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lpf-modal__body .lpf-btn {
	display: block;
	width: 100%;
	text-align: center;
}

/* Retailer buttons in the modal: hover to white with a black border, matching
   the live modal's `.btn-secondary:hover` (not the transparent hover used for
   in-page pills, which reads as "empty" on the white dialog). */
.lpf-modal__body .lpf-btn--solid:hover {
	background: var(--lpf-white);
	border-color: var(--lpf-black);
	color: var(--lpf-black);
}

/* Terms modal: underline the inline links (live `#terms-conditions .modal-body a`).
   Scoped to paragraph links so the retailer buttons above are unaffected. */
.lpf-modal__body p a {
	text-decoration: underline;
}

body.lpf-modal-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Benefits ("Do You Want To" / "¿Quiere usted?") — shared home + spanish
   -------------------------------------------------------------------------- */
.lpf-benefits {
	background: var(--lpf-black);
	color: var(--lpf-white);
	padding: 60px 0;
}

.lpf-benefits__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}

.lpf-benefit {
	flex: 1 1 160px;
	max-width: 200px;
	text-align: center;
}

.lpf-benefit__icon {
	max-width: 120px;
	margin: 0 auto 12px;
}

.lpf-benefits__intro {
	max-width: 760px;
	margin: 0 auto 24px;
	text-align: center;
	color: var(--lpf-yellow);
}

.lpf-benefits__cta {
	text-align: center;
}

/* --------------------------------------------------------------------------
   About the book — shared home + spanish
   -------------------------------------------------------------------------- */
.lpf-about {
	padding: 60px 0;
}

.lpf-about__inner {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.lpf-about__text {
	flex: 1 1 66%;
}

.lpf-about__image {
	flex: 0 0 30%;
	text-align: center;
}

.lpf-about__cta {
	text-align: right;
	margin-top: 20px;
}

/* --------------------------------------------------------------------------
   About the author — shared home + spanish
   -------------------------------------------------------------------------- */
.lpf-author {
	padding: 60px 0;
	background: var(--lpf-yellow);
}

.lpf-author__inner {
	display: flex;
	align-items: center;
	gap: 30px;
}

.lpf-author__photo {
	flex: 0 0 auto;
	text-align: center;
}

.lpf-author__photo img {
	border-radius: 50%;
}

.lpf-author__links {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.lpf-author__links a {
	color: var(--lpf-black);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Free stuff / signup — shared home + spanish
   -------------------------------------------------------------------------- */
.lpf-free {
	padding: 60px 0;
}

.lpf-free__inner {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.lpf-free__image {
	flex: 0 0 20%;
	text-align: center;
}

.lpf-free__content {
	flex: 1;
}

.lpf-free__content .lpf-section-title {
	text-align: left;
}

.lpf-free__lead {
	font-size: 1.1rem;
	margin: 0 0 20px;
}

.lpf-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.lpf-form input[type="text"],
.lpf-form input[type="email"] {
	flex: 1 1 200px;
	padding: 8px 14px;
	text-align: center;
	border-radius: 20px;
	border: 2px solid var(--lpf-yellow);
	font-size: 1rem;
	font-family: inherit;
	background: var(--lpf-white);
	color: var(--lpf-black);
}

.lpf-form input[type="submit"].lpf-btn,
.lpf-form button.lpf-btn {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
}

.lpf-form__terms {
	margin: 12px 0 4px;
}

.lpf-form__terms a {
	color: var(--lpf-black);
	text-decoration: underline;
}

.lpf-form__note {
	margin: 0;
	font-size: 0.85rem;
	color: #666;
	font-style: italic;
}

.lpf-form__responses {
	margin: 8px 0 0;
	font-size: 0.95rem;
}

.lpf-form__responses .response {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Footer (shared)
   -------------------------------------------------------------------------- */
.lpf-footer {
	background: var(--lpf-black);
	color: var(--lpf-white);
	padding: 30px 0;
	text-align: center;
}

.lpf-footer__title {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	margin: 0 0 8px;
}

.lpf-footer__copy {
	font-size: 0.85rem;
	margin: 0 0 12px;
}

.lpf-footer__nav {
	font-size: 0.9rem;
	font-weight: 700;
}

.lpf-footer__nav a {
	color: var(--lpf-gray);
	text-decoration: none;
	margin: 0 6px;
}

.lpf-footer__nav a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Responsive: tablet
   ========================================================================== */
@media (max-width: 991px) {
	.lpf-hero__title {
		font-size: 2.6rem;
	}

	.lpf-about__cta {
		text-align: center;
	}
}

/* ==========================================================================
   Responsive: mobile
   ========================================================================== */
@media (max-width: 767px) {
	.lpf-nav__inner {
		flex-wrap: wrap;
	}

	.lpf-nav__toggle {
		display: flex;
	}

	.lpf-nav__menu {
		flex-basis: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	.lpf-nav__checkbox:checked ~ .lpf-nav__menu {
		max-height: 520px;
	}

	.lpf-nav__menu ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 10px 0;
	}

	.lpf-nav__menu a {
		display: block;
		text-align: center;
		padding: 12px;
	}

	.lpf-hero__inner,
	.lpf-about__inner,
	.lpf-author__inner,
	.lpf-free__inner {
		flex-direction: column;
	}

	.lpf-about__image {
		order: -1;
	}

	.lpf-hero__eyebrow {
		font-size: 1.6rem;
	}

	.lpf-hero__title {
		font-size: 2.1rem;
	}

	.lpf-hero__subtitle {
		font-size: 1.6rem;
	}

	.lpf-section-title {
		font-size: 1.8rem;
	}

	.lpf-author__inner {
		text-align: center;
	}

	.lpf-author__links {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.lpf-hero__cta {
		flex-direction: column;
		align-items: center;
	}
}

/* ==========================================================================
   Mobile: scale down the native Divi rebuild-page headings
   --------------------------------------------------------------------------
   The rebuild pages (home / español / devotional) build their hero + section
   titles with native Divi text modules that carry desktop-sized INLINE
   font-sizes in rem (hero 3.2/2.8rem, section titles 2.4rem, hero eyebrow/
   subtitle 2/2.2rem). On phones those overflow the viewport (e.g. "CONFIDENT
   CONVERSATION" ran off the right edge). Cap them to match the live site.

   Matched by inline `style` substring so no per-page DB edit is needed, and
   scoped to `.et-l--post` (Divi's post-content wrapper) so the header/menu is
   never affected. `!important` is required to beat the inline font-size.
   ========================================================================== */
@media (max-width: 767px) {
	.et-l--post [style*="font-size:3.2rem"],
	.et-l--post [style*="font-size:2.8rem"] {
		font-size: 1.8rem !important;
		letter-spacing: 0.1em !important;
	}
	.et-l--post [style*="font-size:2.4rem"] {
		font-size: 1.5rem !important;
	}
	.et-l--post [style*="font-size:2.2rem"] {
		font-size: 1.35rem !important;
		letter-spacing: 0.2em !important;
	}
	.et-l--post [style*="font-size:2rem"] {
		font-size: 1.25rem !important;
		letter-spacing: 0.25em !important;
	}
}