/* ---------------------------------------------------------------------------
 * FK Lead Magnet Popup
 *
 * Desktop: centred modal. Phones: compact bottom slide-in — deliberately NOT a
 * full-screen interstitial, which Google treats as a ranking risk on the very
 * pages this plugin runs on. These are two different treatments on purpose.
 *
 * Every var() carries a literal fallback so the plugin looks right with no
 * theme support. To brand it, define the --fk-* properties on :root in the
 * theme (or Customizer → Additional CSS):
 *
 *   --fk-action, --fk-action-hi   buttons, panel top border, text link
 *   --fk-heading, --fk-ink        title, close-button hover
 *   --fk-muted                    body copy, fine print
 *   --fk-accent                   eyebrow
 *   --fk-focus                    focus rings — keep this at 3:1 or better
 *   --fk-serif, --fk-sans         type
 *
 * The fallbacks are neutral placeholders, not Fierce Kindness brand colours.
 * ------------------------------------------------------------------------ */

/* ---------- In-article trigger --------------------------------------------
 * Rendered by [fk_lead_magnet]. Also styles anything an editor gives the
 * .fk-lm-open class to. Loads only when a rule matches, same as the popup.
 * ------------------------------------------------------------------------ */

.fk-lm-button {
	display: inline-block;
	background: var(--fk-action, #2F5D62);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 0.75em 1.5em;
	font-family: var(--fk-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.fk-lm-button:hover,
.fk-lm-button:focus { background: var(--fk-action-hi, #3B747A); color: #fff; }

.fk-lm-textlink {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--fk-action, #2F5D62);
	text-decoration: underline;
	cursor: pointer;
}

.fk-lm-button:focus-visible,
.fk-lm-textlink:focus-visible {
	outline: 3px solid var(--fk-focus, #2F5D62);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.fk-lm-button { display: block; width: 100%; }
}

.fk-popup[hidden] { display: none; }

.fk-popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fk-popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 16, 30, 0.55);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.fk-popup.is-open .fk-popup-backdrop { opacity: 1; }

.fk-popup-panel {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 1.4em;
	width: min(660px, calc(100vw - 2.5rem));
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	background: #fffbee;
	border-top: 5px solid var(--fk-action, #2F5D62);
	border-radius: var(--fk-radius, 12px);
	box-shadow: 0 18px 50px rgba(20, 16, 30, 0.3);
	padding: 1.9em 2em;
	opacity: 0;
	transform: translateY(14px) scale(0.98);
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.fk-popup.is-open .fk-popup-panel { opacity: 1; transform: none; }

/* No border, radius or shadow: the cover art is a product mockup that already
   carries its own page edges and shading, so a frame around it only shrank the
   artwork and read as a second, competing box inside the panel.

   200px is about as large as the panel can go: 660 panel - 64 padding - 22 gap
   leaves 574, so the body column keeps ~374px for the heading and the two form
   fields. Push the cover past ~220px and the fields start to feel cramped.

   Scoped to the panel so it outranks theme rules like `.entry-content img
   { border: ... }`, which would otherwise tie on specificity and put the frame
   straight back. */
.fk-popup-panel .fk-popup-cover {
	flex: 0 0 200px;
	width: 200px;
	height: auto;
	align-self: center;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.fk-popup-body { flex: 1 1 auto; min-width: 0; }

.fk-popup-eyebrow {
	font-family: var(--fk-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* Small uppercase text: whatever --fk-accent is set to needs 4.5:1 on
	   white to pass AA. Bright brand accents often do not. */
	color: var(--fk-accent, #A6402A);
	margin: 0 0 0.4em !important;
}

.fk-popup-title {
	font-family: var(--fk-serif, Georgia, "Times New Roman", serif);
	font-size: 1.9rem;
	line-height: 1.15;
	color: var(--fk-heading, #015E69);
	margin: 0 0 0.45em !important;
}

.fk-popup-desc {
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--fk-muted, #555555);
	margin: 0 0 1.1em !important;
}

.fk-popup-desc p { margin: 0 0 0.6em; }
.fk-popup-desc p:last-child { margin-bottom: 0; }

.fk-popup-fine {
	font-family: var(--fk-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-size: 0.74rem;
	color: var(--fk-muted, #555555);
	margin: 0.9em 0 0 !important;
	line-height: 1.3;
}

/* --- After a signup: confirmation and fine print only --- */

/*
 * popup.js adds .is-signed when the form is submitted. The description is
 * persuasion copy and has done its job by then, so it is dropped.
 *
 * Hidden in CSS rather than removed from the DOM because the panel has to go
 * back to its normal state on the next page load, and PHP renders the markup
 * fresh each time. The heading stays — it is the dialog's accessible name via
 * aria-labelledby, so removing it would leave the dialog unnamed.
 */
.fk-popup.is-signed .fk-popup-desc { display: none; }
.fk-popup.is-signed .fk-popup-fine { text-align: center; }

.fk-popup-thanks {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--fk-ink, #1A1A1A);
}

.fk-popup-thanks p { margin: 0 0 0.6em; }
.fk-popup-thanks p:last-child { margin-bottom: 0; }

/* --- AWeber form ---------------------------------------------------------
 *
 * AWeber forms arrive with their own stylesheet, scoped by ID
 * (#af-form-123456 .af-body input.text { ... }). An ID outranks any class
 * selector this file could use, so the rules that have to win carry
 * !important. Only layout and the fields themselves are overridden; the
 * form's own colours stay wherever these rules do not reach, so a form
 * designed in AWeber still looks like itself.
 *
 * Best results come from one of AWeber's plain templates with no header,
 * because the popup already supplies a heading, image and description.
 * ------------------------------------------------------------------------ */

.fk-popup-form .af-form,
.fk-popup-form .af-body,
.fk-popup-form .af-header,
.fk-popup-form .af-footer,
.fk-popup-form [id^="af-form-"],
.fk-popup-form [id^="af-body-"],
.fk-popup-form [id^="af-header-"],
.fk-popup-form [id^="af-footer-"] {
	max-width: 100% !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.fk-popup-form form { margin: 0; }

.fk-popup-form .af-element {
	padding: 0 !important;
	margin: 0 0 0.6em !important;
}

.fk-popup-form label,
.fk-popup-form .previewLabel {
	display: block;
	margin: 0 0 0.25em;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 0.9rem !important;
	font-weight: 600;
	color: var(--fk-ink, #1A1A1A) !important;
}

.fk-popup-form input[type="text"],
.fk-popup-form input[type="email"] {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.7em 0.8em !important;
	background: #fff !important;
	border: 1px solid var(--fk-line-strong, #C9C3B8) !important;
	border-radius: 8px !important;
	font-family: var(--fk-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif) !important;
	font-size: 1rem !important;
	color: var(--fk-ink, #1A1A1A) !important;
}

.fk-popup-form input[type="submit"],
.fk-popup-form button[type="submit"] {
	display: block;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0.6em 0 0 !important;
	background: var(--fk-action, #7ca500) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 0.75em 1.4em !important;
	font-family: Arial, Verdana, sans-serif !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	text-shadow: none !important;
	cursor: pointer;
}

.fk-popup-form input[type="submit"]:hover,
.fk-popup-form button[type="submit"]:hover {
	background: var(--fk-action-hi, #638500) !important;
}

/* AWeber's "privacy" and powered-by lines under the button. */
.fk-popup-form .af-element.privacyPolicy,
.fk-popup-form .af-element.poweredBy {
	font-size: 0.74rem !important;
	color: var(--fk-muted, #555555) !important;
	text-align: left !important;
}

.fk-popup-close {
	position: absolute;
	top: 0.4em;
	right: 0.55em;
	background: none;
	border: 0;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--fk-muted, #555555);
	cursor: pointer;
	padding: 0.15em 0.3em;
	border-radius: 6px;
}

.fk-popup-close:hover { color: var(--fk-ink, #1A1A1A); background: #F2F0EC; }

/* Focus ring has its own custom property rather than reusing an accent, so
   it can be held to the 3:1 minimum for non-text indicators even if the
   brand accent cannot. */
.fk-popup-close:focus-visible,
.fk-popup-form :focus-visible {
	outline: 3px solid var(--fk-focus, #2F5D62);
	outline-offset: 2px;
}

/* --- Phones: bottom slide-in strip, no backdrop, article stays reachable --- */
@media (max-width: 600px) {
	.fk-popup { align-items: flex-end; }
	.fk-popup-backdrop { display: none; }

	.fk-popup-panel {
		width: 100%;
		max-height: 62vh;
		gap: 0.9em;
		padding: 1.1em 1.1em 1.3em;
		border-radius: 12px 12px 0 0;
		border-top-width: 4px;
		transform: translateY(100%);
		transition: transform 0.3s ease;
		opacity: 1;
	}

	.fk-popup.is-open .fk-popup-panel { transform: translateY(0); }

	/* At 68px the cover was too small to sell anything and only cluttered the
	   strip, so the phone layout is heading, one line of body, and the form.
	   The panel is a flex row and the body is flex: 1 1 auto, so the body takes
	   the full width and the gap collapses with one child left. Hidden in CSS
	   rather than skipped server-side because device detection cannot survive a
	   full-page cache; loading="lazy" means phones usually never fetch it. */
	.fk-popup-cover { display: none; }
	.fk-popup-title { font-size: 1.15rem; }

	.fk-popup-desc {
		font-size: 0.87rem;
		margin-bottom: 0.8em !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.fk-popup-fine { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fk-popup-backdrop,
	.fk-popup-panel { transition: none; }
}