/* ============================================================
   /subscribe/ — Insider paid signup landing.
   Loads only on this page (see inc/bootstrap.php).
   ============================================================ */

.uj-subscribe {
	font: 1rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1f2937;
}
.uj-subscribe h1,
.uj-subscribe h2,
.uj-subscribe h3 {
	font-family: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif !important;
	letter-spacing: 0.01em;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.uj-subscribe-hero {
	background: linear-gradient(135deg, #B3421D 0%, #8E331A 100%);
	color: #ffffff;
	padding: 3.25rem 1.25rem 3rem;
	text-align: center;
}
.uj-subscribe-hero__inner {
	max-width: 760px;
	margin: 0 auto;
}
.uj-subscribe-hero__eyebrow {
	margin: 0 0 0.625rem;
	font: 700 0.75rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.uj-subscribe-hero__headline {
	margin: 0 0 1rem !important;
	font-size: clamp(2rem, 4.5vw, 3rem) !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	line-height: 1.1;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.uj-subscribe-hero__lede {
	margin: 0;
	color: rgba(255, 255, 255, 0.95);
	font-size: 1.0625rem;
	line-height: 1.55;
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------
   Generic section wrapper
   ------------------------------------------------------------ */
.uj-subscribe-section {
	padding: 3.25rem 1.25rem;
}
.uj-subscribe-section--alt {
	background: #f9fafb;
}
.uj-subscribe-section__inner {
	max-width: 1100px;
	margin: 0 auto;
}
.uj-subscribe-section__inner--narrow {
	max-width: 720px;
}
.uj-subscribe-section__heading {
	margin: 0 0 0.75rem !important;
	font-size: clamp(1.625rem, 2.8vw, 2.125rem) !important;
	font-weight: 600 !important;
	color: #B3421D !important;
}
.uj-subscribe-section__sub {
	margin: 0 0 1.5rem;
	color: #4b5563;
}

/* ------------------------------------------------------------
   Value props grid
   ------------------------------------------------------------ */
.uj-subscribe-perks {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}
.uj-subscribe-perks li {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-left: 4px solid #B3421D;
	border-radius: 8px;
	padding: 1.25rem 1.375rem;
	color: #374151;
	line-height: 1.55;
}
.uj-subscribe-perks li strong {
	display: block;
	margin: 0 0 0.375rem;
	font: 600 1.0625rem/1.2 "Oswald", "Arial Narrow", Impact, sans-serif;
	color: #B3421D;
	letter-spacing: 0.01em;
}

/* ------------------------------------------------------------
   Pricing + form
   ------------------------------------------------------------ */
.uj-subscribe-pricing {
	background: #ffffff;
	border-radius: 12px;
	padding: 2rem 1.875rem 1.875rem;
	border: 1px solid #F0C7B3;
	box-shadow: 0 4px 16px rgba(179, 66, 29, 0.08);
}
/* Pricing summary line. Frames the minimum + opens the door to
   higher contribution amounts. Centered, calm typography (the chips
   below carry the visual weight). */
.uj-subscribe-pricing__summary {
	margin: 1rem auto 1rem;
	max-width: 560px;
	text-align: center;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: #4b5563;
}
.uj-subscribe-pricing__summary strong {
	color: #B3421D;
	font-weight: 700;
}

/* Suggested-amount chips. Visual social proof for "people give various
   amounts." Non-clickable spans, just informational. Soft peach
   backgrounds, brand-red text. Wraps cleanly on mobile. */
.uj-subscribe-pricing__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem auto 1.5rem;
	max-width: 560px;
	font-size: 0.9375rem;
	color: #6b7280;
}
.uj-subscribe-pricing__chips-label {
	margin-right: 0.25rem;
	color: #6b7280;
	font-size: 0.875rem;
}
/* Chips are <button>s now (clickable) — reset default browser button
   styling and re-apply our pill look. cursor:pointer + hover/focus
   states make the click affordance obvious. */
.uj-subscribe-pricing__chip {
	display: inline-block;
	padding: 0.3125rem 0.75rem;
	background: #FFF5F0;
	border: 1px solid #F0C7B3;
	border-radius: 999px;
	color: #B3421D;
	font: 600 0.875rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
	-webkit-appearance: none;
	appearance: none;
}
.uj-subscribe-pricing__chip:hover {
	background: #B3421D;
	border-color: #B3421D;
	color: #ffffff;
}
.uj-subscribe-pricing__chip:focus-visible {
	outline: none;
	border-color: #B3421D;
	box-shadow: 0 0 0 3px rgba(179, 66, 29, 0.20);
}
.uj-subscribe-pricing__chip:active {
	transform: translateY(1px);
}

/* Highlight the Forminator currency input so visitors see it's the
   thing they choose. Subtle peach background, brand-red focus ring.
   Targets Forminator's emitted classes; scoped under .uj-subscribe-form
   so we don't restyle other currency fields elsewhere on the site. */
.uj-subscribe-form .forminator-input.forminator-currency,
.uj-subscribe-form input[name="currency-1"] {
	background: #FFF5F0 !important;
	border: 2px solid #F0C7B3 !important;
	border-radius: 6px !important;
	padding: 0.625rem 0.875rem !important;
	font: 600 1.0625rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	color: #1f2937 !important;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.uj-subscribe-form .forminator-input.forminator-currency:focus,
.uj-subscribe-form input[name="currency-1"]:focus {
	outline: none !important;
	border-color: #B3421D !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(179, 66, 29, 0.15) !important;
}

/* "Why we let you set your own amount" reinforcement callout below
   the form. Calm, secondary visual weight. Sits inside the same
   pricing card so it reads as part of the same context. */
.uj-subscribe-why {
	margin: 1.5rem 0 0;
	padding: 1.25rem 1.5rem;
	background: #FFF5F0;
	border-left: 3px solid #B3421D;
	border-radius: 6px;
}
.uj-subscribe-why__heading {
	margin: 0 0 0.5rem !important;
	font: 700 1rem/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	color: #B3421D !important;
}
.uj-subscribe-why__body {
	margin: 0;
	color: #1f2937;
	font-size: 0.9375rem;
	line-height: 1.55;
}
.uj-subscribe-form {
	margin: 1.25rem 0 0;
}

/* Forminator submit button → site CTA pill */
.uj-subscribe-form .forminator-button-submit,
.uj-subscribe-form button[type="submit"] {
	display: inline-block !important;
	padding: 0.875rem 2rem !important;
	background: #B3421D !important;
	color: #fff !important;
	font: 600 1rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	text-decoration: none !important;
	border-radius: 999px !important;
	border: 0 !important;
	cursor: pointer !important;
	transition: background 0.15s ease, transform 0.15s ease;
}
.uj-subscribe-form .forminator-button-submit:hover,
.uj-subscribe-form button[type="submit"]:hover {
	background: #8E331A !important;
	transform: translateY(-1px);
}
.uj-subscribe-pricing__small {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	color: #6b7280;
	text-align: center;
}

/* Sample-content card grid lives in shared page-front.css now
   (loaded conditionally on /subscribe/ via inc/bootstrap.php).
   The .uj-front-card / .uj-front-row__grid classes give us the
   same look as /latest/, category archives, and search results.
   No subscribe-specific styles needed here. */

/* ------------------------------------------------------------
   Press strip
   ------------------------------------------------------------ */
.uj-subscribe-press__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem 1rem;
	justify-content: center;
}
.uj-subscribe-press__list li {
	font: 700 0.875rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #4b5563;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.625rem 1rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
}

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.uj-subscribe-faq {
	margin: 1.5rem 0 0;
}
.uj-subscribe-faq dt {
	margin: 1.25rem 0 0.5rem;
	font: 600 1.0625rem/1.3 "Oswald", "Arial Narrow", Impact, sans-serif;
	color: #B3421D;
	letter-spacing: 0.01em;
}
.uj-subscribe-faq dd {
	margin: 0;
	color: #374151;
	line-height: 1.6;
}
.uj-subscribe-faq a {
	color: #B3421D;
	font-weight: 600;
	text-decoration: none;
}
.uj-subscribe-faq a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   Free-newsletter fallback CTA
   ------------------------------------------------------------ */
.uj-subscribe-fallback {
	text-align: center;
}
.uj-subscribe-fallback__heading {
	margin: 0 0 0.625rem !important;
	font: 600 clamp(1.375rem, 2.5vw, 1.75rem)/1.2 "Oswald", "Arial Narrow", Impact, sans-serif !important;
	color: #B3421D !important;
}
.uj-subscribe-fallback p {
	margin: 0 0 1.25rem;
	color: #4b5563;
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
}
.uj-subscribe-fallback__cta {
	display: inline-block;
	padding: 0.75rem 1.625rem;
	background: transparent;
	color: #B3421D !important;
	border: 2px solid #B3421D;
	border-radius: 999px;
	font: 600 0.9375rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease;
}
.uj-subscribe-fallback__cta:hover {
	background: #B3421D;
	color: #fff !important;
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */
@media (max-width: 900px) {
	.uj-subscribe-perks { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.uj-subscribe-hero { padding: 2.5rem 1rem 2.25rem; }
	.uj-subscribe-section { padding: 2.25rem 1rem; }
	.uj-subscribe-pricing { padding: 1.5rem 1.25rem; }
	.uj-subscribe-paypal-card { padding: 1.5rem 1.25rem; }
	.uj-subscribe-paypal-notice { padding: 1rem 1.125rem 0.75rem; }
}

/* ------------------------------------------------------------
   PayPal recurring subscription — sits below the primary
   Stripe/PayPal-one-time form. Anchor #paypal-subscription
   on the section heading is link-target-able.
   ------------------------------------------------------------ */
.uj-subscribe-paypal-notice {
	margin: 1rem 0 1.5rem;
	padding: 1.25rem 1.5rem 1rem;
	background: linear-gradient(135deg, #FFF5F0 0%, #FCE9DF 100%);
	border: 1px solid #F0C7B3;
	border-left: 4px solid #B3421D;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(179, 66, 29, 0.06);
}
.uj-subscribe-paypal-notice__eyebrow {
	margin: 0 0 0.5rem;
	font: 700 0.75rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #B3421D;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.uj-subscribe-paypal-notice__body {
	margin: 0 0 0.625rem;
	color: #1f2937;
	font-size: 0.9375rem;
	line-height: 1.55;
}
.uj-subscribe-paypal-notice__body:last-child {
	margin-bottom: 0;
}
.uj-subscribe-paypal-notice__body a {
	color: #B3421D;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.uj-subscribe-paypal-notice__body a:hover,
.uj-subscribe-paypal-notice__body a:focus-visible {
	color: #8E331A;
	border-bottom-color: #8E331A;
}

/* PayPal button card — wraps PayPal SDK button with the same
   white-card treatment as the primary Forminator form. */
.uj-subscribe-paypal-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 1.75rem 1.75rem 1.5rem;
	box-shadow: 0 4px 16px rgba(179, 66, 29, 0.08);
}
.uj-subscribe-paypal-card__intro {
	margin: 0 0 1.25rem;
	color: #1f2937;
	font-size: 1rem;
	line-height: 1.6;
}
/* PayPal injects its button here; cap width so it doesn't
   stretch across the full card on desktop. */
.uj-subscribe-paypal-card [id^="paypal-button-container"] {
	max-width: 360px;
	margin: 0 auto;
}