/*
Theme Name: Livable Flathead
Theme URI: https://livableflathead.org
Author: Livable Flathead (built with Claude Code)
Author URI: https://livableflathead.org
Description: Custom WordPress block theme (Full Site Editing) for Livable Flathead, a nonpartisan pro-housing nonprofit in the Flathead Valley, Montana. Clean, typographic, and responsive — Montserrat headings + Inter body, off-white base with deep-navy sections, Flathead Gold primary buttons and Flathead Blue links. Fonts self-hosted (no external request). Accessibility (WCAG AA) baked in.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 5.2.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: livable-flathead
Tags: full-site-editing, block-patterns, accessibility-ready, blog, custom-colors, custom-logo, news, education
*/

/* ==========================================================================
   Colors, fonts, sizes, and spacing live in theme.json. This stylesheet holds
   the accessibility helpers, the signup form, and the custom sections (hero,
   stats, crossroads, priorities, featured cards, missing-middle, tiers).
   ========================================================================== */


/* 1. SKIP LINK + SR TEXT ---------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; }
.skip-link:focus {
	left: 8px; top: 8px; width: auto; height: auto; clip: auto; clip-path: none; overflow: visible;
	padding: 12px 20px; background-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--inter); font-weight: 700; font-size: 0.9rem;
	text-decoration: none; border-radius: 7px;
}
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px;
	margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important;
}

/* 2. FOCUS RINGS ------------------------------------------------------------ */
:where(a, button, input, textarea, select, summary, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--blue); outline-offset: 2px; border-radius: 3px;
}
.has-navy-background-color :where(a, button, input, .wp-element-button):focus-visible,
.has-navy-deep-background-color :where(a, button, input, .wp-element-button):focus-visible {
	outline-color: var(--wp--preset--color--gold);
}
html { scroll-padding-top: 5.5rem; }

/* 3. LINKS ------------------------------------------------------------------ */
.wp-block-post-content a, .entry-content a, p a, li a { text-underline-offset: 0.14em; text-decoration-thickness: 1.5px; }

/* 4. EYEBROW — small bold uppercase kicker ----------------------------------- */
.lf-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--wp--preset--color--blue); margin: 0 0 1rem;
}
.lf-eyebrow.on-dark { color: var(--wp--preset--color--gold); }

/* 5. BUTTONS — default (gold) from theme.json; Blue + Ghost styles here ------ */
.wp-element-button, .wp-block-button__link { transition: transform 0.1s ease, background-color 0.15s ease, box-shadow 0.15s ease; line-height: 1.2; }
.wp-element-button:active { transform: translateY(1px); }

.wp-block-button.is-style-blue > .wp-block-button__link { background-color: var(--wp--preset--color--blue); color: var(--wp--preset--color--paper); }
.wp-block-button.is-style-blue > .wp-block-button__link:hover,
.wp-block-button.is-style-blue > .wp-block-button__link:focus { background-color: var(--wp--preset--color--blue-deep); color: var(--wp--preset--color--paper); }

/* is-style-gold kept for back-compat: identical to the default button. */
.wp-block-button.is-style-gold > .wp-block-button__link { background-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-gold > .wp-block-button__link:hover { background-color: var(--wp--preset--color--gold-deep); }

.wp-block-button.is-style-ghost > .wp-block-button__link {
	background-color: transparent; color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1.5px #CFCDC6;
}
.wp-block-button.is-style-ghost > .wp-block-button__link:hover,
.wp-block-button.is-style-ghost > .wp-block-button__link:focus { box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--ink); background-color: transparent; color: var(--wp--preset--color--ink); }
.has-navy-background-color .wp-block-button.is-style-ghost > .wp-block-button__link,
.has-navy-deep-background-color .wp-block-button.is-style-ghost > .wp-block-button__link,
.lf-hero-photo .wp-block-button.is-style-ghost > .wp-block-button__link { color: var(--wp--preset--color--paper); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.8); }
.has-navy-background-color .wp-block-button.is-style-ghost > .wp-block-button__link:hover,
.has-navy-deep-background-color .wp-block-button.is-style-ghost > .wp-block-button__link:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--wp--preset--color--paper); }
.lf-hero-photo .wp-block-button.is-style-ghost > .wp-block-button__link:hover,
.lf-hero-photo .wp-block-button.is-style-ghost > .wp-block-button__link:focus { background-color: var(--wp--preset--color--paper); color: var(--wp--preset--color--navy-deep); box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--paper); }

/* 6. SIGNUP FORM ------------------------------------------------------------ */
.lf-signup { width: 100%; max-width: 32rem; }
.lf-signup__label {
	display: block; font-family: var(--wp--preset--font-family--inter);
	font-size: 0.82rem; font-weight: 700; color: var(--wp--preset--color--ink); margin-bottom: 0.5rem;
}
.lf-signup__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.lf-signup__input {
	flex: 1 1 14rem; min-width: 0; font-family: var(--wp--preset--font-family--inter); font-size: 1rem;
	padding: 0.85rem 1rem; color: var(--wp--preset--color--ink); background-color: var(--wp--preset--color--paper);
	border: 1.5px solid #C9C7C0; border-radius: 7px;
}
.lf-signup__input:focus { outline: none; border-color: var(--wp--preset--color--blue); box-shadow: 0 0 0 3px rgba(20, 89, 167, 0.18); }
.lf-signup__button {
	flex: 0 0 auto; cursor: pointer; border: 0; border-radius: 7px; padding: 0.85rem 1.35rem;
	font-family: var(--wp--preset--font-family--inter); font-size: 0.98rem; font-weight: 700;
	color: var(--wp--preset--color--ink); background-color: var(--wp--preset--color--gold);
	transition: background-color 0.15s ease, transform 0.1s ease; line-height: 1.2;
}
.lf-signup__button:hover, .lf-signup__button:focus { background-color: var(--wp--preset--color--gold-deep); }
.lf-signup__button:active { transform: translateY(1px); }
.lf-signup__fineprint { margin: 0.8rem 0 0; font-family: var(--wp--preset--font-family--inter); font-size: 0.85rem; color: var(--wp--preset--color--muted); }
/* One-line fallback under the shared beehiiv signup iframe (all four signup spots). */
.lf-signup__fallback { font-size: 0.8rem; }
.has-navy-background-color .lf-signup__fallback a,
.has-navy-deep-background-color .lf-signup__fallback a,
.lf-hero-photo .lf-signup__fallback a { color: #fff; }
/* Shared donation legal fine print (patterns/legal-fineprint.php); inherits the
   section's text color (muted on light via .lf-support, paper on navy bands). */
.lf-legal-fineprint { margin-top: 1.4rem; font-size: 0.88rem; text-align: center; }
.lf-support .lf-legal-fineprint { color: var(--wp--preset--color--muted); }

/* Navy sections + photo hero: the label is redundant here (placeholder + button
   read clearly), so hide it visually while keeping it for screen readers. */
.has-navy-background-color .lf-signup__label,
.has-navy-deep-background-color .lf-signup__label,
.lf-hero-photo .lf-signup__label {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.has-navy-background-color .lf-signup__fineprint, .has-navy-deep-background-color .lf-signup__fineprint { color: #A9B6C9; }
.has-navy-background-color .lf-signup__input, .has-navy-deep-background-color .lf-signup__input {
	background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); color: var(--wp--preset--color--paper);
}
.has-navy-background-color .lf-signup__input::placeholder, .has-navy-deep-background-color .lf-signup__input::placeholder { color: #A9B6C9; }
.has-navy-background-color .lf-signup__input:focus, .has-navy-deep-background-color .lf-signup__input:focus { border-color: var(--wp--preset--color--gold); box-shadow: none; }

/* Photo hero: near-solid white field so it reads on the aerial photo. */
.lf-hero-photo .lf-signup__input {
	background-color: rgba(255, 255, 255, 0.96); border-color: rgba(255, 255, 255, 0.7); color: var(--wp--preset--color--ink);
}
.lf-hero-photo .lf-signup__input::placeholder { color: #7C7A72; }
.lf-hero-photo .lf-signup__input:focus { border-color: var(--wp--preset--color--gold); box-shadow: 0 0 0 3px rgba(249, 216, 56, 0.4); }

.lf-capture { max-width: 32rem; }
.lf-capture--center { margin-inline: auto; }
/* Wrapper for the beehiiv signup iframe (Newsletters page). The form itself is a
   self-contained navy card styled in beehiiv, so this is just a centered slot. */
.lf-embed-slot { max-width: 34rem; margin-inline: auto; }
.lf-signup-embed { display: block; margin-inline: auto; }
/* Hero: sit the card under the text (not floating center) with even space above/below. */
.lf-hero-photo .lf-signup-embed { margin: 2rem 0; }
/* Cal.com embed: hide the plain fallback link once the live scheduler renders. */
.lf-cal-embed:has(cal-inline) > p { display: none; }

/* 7. PHOTO HERO ------------------------------------------------------------- */
.lf-hero__sub { font-size: 1.18rem; color: var(--wp--preset--color--muted); line-height: 1.55; }

.lf-hero-photo {
	position: relative; display: flex; align-items: flex-end; padding-inline: 0;
	min-height: clamp(540px, 78vh, 760px); padding-block: clamp(2.5rem, 6vw, 4.5rem); color: #fff;
	background: var(--wp--preset--color--navy-deep) center 40% / cover no-repeat;
	background-image:
		linear-gradient(180deg, rgba(10, 28, 48, 0.12) 0%, rgba(10, 28, 48, 0) 26%, rgba(10, 28, 48, 0.5) 66%, rgba(10, 28, 48, 0.86) 100%),
		linear-gradient(90deg, rgba(10, 28, 48, 0.62) 0%, rgba(10, 28, 48, 0.12) 52%, rgba(10, 28, 48, 0) 78%),
		var(--lf-hero-img, none);
}
.lf-hero-photo__wrap {
	position: relative; z-index: 1; width: 100%; max-width: 1280px; margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.lf-hero-photo .lf-hero__kicker {
	color: #DCE6F2; font-family: var(--wp--preset--font-family--inter); font-weight: 600; font-size: 0.95rem; margin: 0 0 1.2rem;
}
.lf-hero-photo h1 {
	color: #fff; font-weight: 800; font-size: clamp(2.35rem, 5vw, 4rem); line-height: 1.05; max-width: 18ch;
	letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
	overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance;
}
.lf-hero-photo .lf-hero__sub {
	color: #EAEFF5; font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.5; max-width: 50ch;
	margin-top: 1.4rem; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
}
.lf-hero-photo .lf-signup { margin-top: 2rem; max-width: 34rem; }
.lf-hero-photo .lf-hero__secondary { margin-top: 1.1rem; }
.lf-hero-photo .lf-hero__micro { color: #D3DCE8; font-size: 0.9rem; margin-top: 0.9rem; max-width: 44rem; }
.lf-hero-photo .lf-hero__micro a { color: #fff; }

/* Text link — bold, no underline, trailing arrow (calm inline CTA). */
.lf-textlink { font-family: var(--wp--preset--font-family--inter); font-weight: 600; text-decoration: none; }
.lf-textlink::after { content: " \2192"; }
.lf-textlink:hover { text-decoration: underline; }

/* 8. QUIET FACTS strip ------------------------------------------------------ */
.lf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2.5rem; border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.lf-stat { padding: 1.9rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
.lf-stat__num { font-family: var(--wp--preset--font-family--montserrat); font-weight: 800; font-size: 1.5rem; color: var(--wp--preset--color--ink); line-height: 1.1; letter-spacing: -0.02em; }
.lf-stat__lbl { color: var(--wp--preset--color--muted); font-size: 0.95rem; }
@media (max-width: 1080px) {
	.lf-stats { grid-template-columns: repeat(2, 1fr); }
	.lf-stat:nth-child(n+3) { border-top: 1px solid var(--wp--preset--color--line); }
}
@media (max-width: 760px) {
	.lf-stats { grid-template-columns: 1fr; gap: 0; }
	.lf-stat { padding: 1.1rem 0; }
	.lf-stat + .lf-stat { border-top: 1px solid var(--wp--preset--color--line); }
}

/* Two-column grids: neutralise any block-gap margin on the columns so the grid
   `gap` alone controls spacing and the two columns stay top-aligned. */
.lf-cross > *, .lf-work > *, .lf-brief > *, .lf-oneone > * { margin-block: 0; }

/* 9. CROSSROADS — lede + ruled list ----------------------------------------- */
.lf-cross { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.lf-cross__lede { font-size: 1.15rem; color: var(--wp--preset--color--ink); margin-top: 1.5rem; max-width: 56ch; }
.lf-cross__stance { margin-top: 2rem; font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; }
.lf-cross__stance a { margin-left: 0.75rem; font-family: var(--wp--preset--font-family--inter); font-weight: 600; font-size: 1rem; }
.lf-ruled__h { font-family: var(--wp--preset--font-family--inter); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 0.9rem; }
.lf-ruled { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--line); }
.lf-ruled li { padding: 1.15rem 0; border-bottom: 1px solid var(--wp--preset--color--line); display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; }
.lf-ruled b { font-weight: 600; font-size: 1.05rem; }
.lf-ruled span { color: var(--wp--preset--color--muted); font-size: 0.93rem; text-align: right; max-width: 22ch; }
@media (max-width: 880px) { .lf-cross { grid-template-columns: 1fr; } }

/* 10. STAKES — full-bleed photo band ---------------------------------------- */
.lf-stakes {
	position: relative; display: flex; align-items: flex-end; padding-inline: 0;
	min-height: clamp(320px, 42vw, 500px);
	background: var(--wp--preset--color--navy-deep) center / cover no-repeat;
	background-image: linear-gradient(180deg, rgba(10, 28, 48, 0) 40%, rgba(10, 28, 48, 0.8) 100%), var(--lf-stakes-img, none);
}
.lf-stakes__cap {
	position: relative; z-index: 1; width: 100%; max-width: 1280px; margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 3rem); padding-block: clamp(1.5rem, 3vw, 2.5rem); color: #fff;
}
.lf-stakes__cap b { display: block; max-width: 42rem; font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); }
.lf-stakes__cap small { display: block; max-width: 42rem; margin-top: 0.6rem; font-weight: 500; font-size: 0.9rem; color: #CBD6E6; }

/* 11. WORK — portrait photo + ruled items ----------------------------------- */
/* Hairline-ruled paper band (shared by "What we work for" + Housing data). */
.lf-band-paper { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.lf-band-top { border-top: 1px solid var(--wp--preset--color--line); }
.lf-work { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.lf-work__photo { margin: 0; border-radius: var(--wp--custom--radius-large, 12px); overflow: hidden; }
.lf-work__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; display: block; }
.lf-work__intro { font-size: 1.15rem; color: var(--wp--preset--color--muted); max-width: 52ch; margin-top: 1.3rem; }
.lf-work__item { border-top: 1px solid var(--wp--preset--color--line); padding-top: 1.05rem; margin-top: 1.5rem; }
.lf-work__item:first-of-type { margin-top: 2rem; }
.lf-work__item h3 { font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; font-size: 1.18rem; margin: 0 0 0.35rem; }
.lf-work__item p { margin: 0; color: var(--wp--preset--color--muted); }
@media (max-width: 880px) { .lf-work { grid-template-columns: 1fr; } }

/* 12. MISSING-MIDDLE ladder -------------------------------------------------- */
.lf-ladder__cap { font-size: 1.15rem; color: var(--wp--preset--color--muted); max-width: 56ch; margin-top: 1.4rem; }
.lf-ladder { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 3.25rem; padding-bottom: 1.4rem; border-bottom: 2px solid var(--wp--preset--color--ink); }
.lf-ladder__item { flex: 1; text-align: center; }
.lf-ladder__svg { display: flex; align-items: flex-end; justify-content: center; }
.lf-ladder__svg svg { display: block; margin: 0 auto; }
.lf-ladder__name { margin-top: 1rem; font-family: var(--wp--preset--font-family--inter); font-weight: 600; font-size: 0.95rem; }
.lf-ladder__meta { display: block; margin-top: 0.15rem; font-family: var(--wp--preset--font-family--inter); font-weight: 400; color: var(--wp--preset--color--muted); font-size: 0.85rem; }
.lf-middle__after { margin-top: 1.4rem; color: var(--wp--preset--color--muted); font-size: 0.95rem; max-width: 62ch; }
@media (max-width: 760px) { .lf-ladder { flex-wrap: wrap; gap: 2rem 1rem; } .lf-ladder__item { flex: 1 1 40%; } }

/* 13. HOUSING DATA — dashboard preview --------------------------------------- */
.lf-data__intro { font-size: 1.15rem; color: var(--wp--preset--color--muted); max-width: 60ch; margin-top: 1.3rem; }
.lf-dash-preview { margin: 2.75rem 0 0; border-radius: var(--wp--custom--radius-large, 12px); overflow: hidden; box-shadow: 0 24px 50px -34px rgba(23, 24, 26, 0.35); }
.lf-dash-preview img { width: 100%; height: auto; display: block; }
.lf-data__cta { margin-top: 2rem; display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.lf-data__note { font-size: 0.85rem; color: var(--wp--preset--color--muted); font-style: italic; margin-top: 1.2rem; }

/* 14. THE BRIEF — navy band ------------------------------------------------- */
.lf-brief { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.lf-brief__lede { color: #C7D2E2; font-size: 1.12rem; margin-top: 1.2rem; max-width: 46ch; }
.lf-brief-list { list-style: none; margin: 1.6rem 0 0; padding: 0; color: #C7D2E2; }
.lf-brief-list li { padding: 0.55rem 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.lf-brief-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
@media (max-width: 880px) { .lf-brief { grid-template-columns: 1fr; } }

/* 15. SUPPORT — calm centered ask ------------------------------------------- */
.lf-support { text-align: center; }
.lf-support__lede { font-size: 1.15rem; color: var(--wp--preset--color--muted); max-width: 52ch; margin: 1.4rem auto 0; }
.lf-amounts { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 2.2rem; }
.lf-amt {
	font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; font-size: 1.05rem;
	padding: 0.7rem 1.4rem; border: 1.5px solid var(--wp--preset--color--ink); border-radius: var(--wp--custom--radius, 7px);
	background: transparent; color: var(--wp--preset--color--ink); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease;
}
.lf-amt:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--bone); }

/* 16. ONE-TO-ONE — conversation ask ----------------------------------------- */
.lf-oneone { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
.lf-oneone__lede { font-size: 1.12rem; color: var(--wp--preset--color--muted); margin-top: 1.2rem; max-width: 52ch; }
.lf-oneone__who { margin-top: 1.5rem; font-size: 0.95rem; color: var(--wp--preset--color--muted); }
.lf-oneone__who b { color: var(--wp--preset--color--ink); font-weight: 600; }
.lf-oneone__photo { margin: 0; border-radius: var(--wp--custom--radius-large, 12px); overflow: hidden; }
.lf-oneone__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; display: block; }
@media (max-width: 840px) { .lf-oneone { grid-template-columns: 1fr; } }

/* 17. FEATURED content cards (other pages) ---------------------------------- */
.lf-fcard {
	height: 100%; display: flex; flex-direction: column; border-radius: var(--wp--custom--radius-large, 12px); overflow: hidden;
	background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lf-fcard:hover { transform: translateY(-3px); box-shadow: var(--wp--custom--shadow--card, 0 18px 40px -30px rgba(23, 24, 26, 0.35)); }
.lf-fcard__img { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wp--preset--color--bone); }
.lf-fcard__img svg, .lf-fcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-fcard__body { padding: 1.4rem 1.4rem 1.6rem; }
.lf-fcard__k { font-family: var(--wp--preset--font-family--inter); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--blue); }
.lf-fcard h3 { font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; font-size: 1.15rem; line-height: 1.15; margin: 0.55rem 0 0; }
.lf-fcard h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.lf-fcard h3 a:hover { color: var(--wp--preset--color--blue); }
.lf-fcard__more { margin: 0.9rem 0 0; font-family: var(--wp--preset--font-family--inter); font-weight: 700; font-size: 0.95rem; }
.lf-fcard__more a { color: var(--wp--preset--color--blue); text-decoration: none; }

/* 18. BLOG CARDS (query loop) ------------------------------------------------ */
.lf-card {
	height: 100%; background-color: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-large, 12px); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lf-card:hover { transform: translateY(-3px); box-shadow: var(--wp--custom--shadow--card, 0 18px 40px -30px rgba(23, 24, 26, 0.35)); }
.lf-card img { transition: transform 0.3s ease; }
.lf-card:hover img { transform: scale(1.02); }
.lf-img-placeholder {
	display: flex; align-items: center; justify-content: center; text-align: center; min-height: 180px; padding: 1rem;
	background-color: var(--wp--preset--color--bone); color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--inter); font-size: 0.82rem; font-weight: 600;
}

/* 19. DONATION tiers (donate page) ------------------------------------------- */
.lf-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.lf-tier {
	position: relative; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-large, 12px); padding: 1.8rem 1.25rem; text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lf-tier:hover { transform: translateY(-3px); box-shadow: var(--wp--custom--shadow--card, 0 18px 40px -30px rgba(23, 24, 26, 0.35)); }
.lf-tier.is-featured { border-color: var(--wp--preset--color--blue); border-width: 2px; }
.lf-tier__flag {
	position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--inter); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
	background: var(--wp--preset--color--blue); color: var(--wp--preset--color--paper); padding: 0.25rem 0.7rem; border-radius: 999px;
}
.lf-tier__amt { font-family: var(--wp--preset--font-family--montserrat); font-weight: 800; font-size: 2rem; color: var(--wp--preset--color--ink); letter-spacing: -0.02em; }
.lf-tier__what { margin: 0.5rem 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--wp--preset--color--muted); }
@media (max-width: 760px) { .lf-tiers { grid-template-columns: 1fr; } }

/* 20. STICKY HEADER ----------------------------------------------------------- */
.lf-header {
	position: sticky; top: 0; z-index: 100; background-color: rgba(251, 251, 249, 0.92);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--line); transition: box-shadow 0.2s ease;
}
.lf-header.is-scrolled { box-shadow: 0 6px 20px -16px rgba(23, 24, 26, 0.35); }

/* Mobile nav overlay fix: the header's backdrop-filter makes .lf-header the
   containing block for fixed-position descendants, which traps the navigation
   block's full-screen overlay inside the short header (it renders as a cramped
   strip). Neutralize the filter while the overlay is open so it fills the viewport. */
.lf-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* 21. FOOTER + misc helpers ---------------------------------------------------- */
.lf-footer-nav { list-style: none; padding-left: 0; }
.lf-postcta { border: 1px solid var(--wp--preset--color--line); }
.wp-block-post-content > p, .entry-content > p { max-width: var(--wp--custom--measure, 66ch); }

/* 22. MYTHS VS FACTS ----------------------------------------------------------- */
.lf-myths__cap { font-size: 1.15rem; color: var(--wp--preset--color--muted); max-width: 56ch; margin-top: 1.4rem; }
.lf-myths { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem clamp(2.5rem, 5vw, 4.5rem); margin-top: 2.75rem; }
.lf-myth { border-top: 1px solid var(--wp--preset--color--line); padding-top: 1.15rem; }
.lf-myth__q { margin: 0; font-style: italic; color: var(--wp--preset--color--muted); font-size: 1.05rem; line-height: 1.5; }
.lf-myth__a { margin: 0.7rem 0 0; color: var(--wp--preset--color--ink); }
.lf-myth__a b { font-weight: 700; }
@media (max-width: 760px) { .lf-myths { grid-template-columns: 1fr; gap: 2rem; } }

/* 23. REDUCED MOTION ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wp-element-button:active, .lf-signup__button:active { transform: none; }
	.lf-card:hover, .lf-tier:hover, .lf-fcard:hover { transform: none; box-shadow: none; }
	.lf-card:hover img { transform: none; }
}