/**
 * Theme Name:     EcoPeace Child
 * Author:         Jegtheme
 * Template:       ecopeace
 * Text Domain:	   ecopeace-child
 * Description:    EcoPeace is modern and clean design WordPress theme that is perfect for those who want to create website for the Environment & Ecology, Foundation, Donations, Fundraising, and any kind of Non-Governmental Organisation (NGO).
 * Theme URI:      https://fse.jegtheme.com/ecopeace/
 * Author URI:     https://support.jegtheme.com/
 * Version:        1.0.0
 * License:        GNU General Public License v3 or later.
 * License URI:    https://www.gnu.org/licenses/gpl-3.0.html
 * Tags:           grid-layout,block-styles,full-site-editing,blog
 */

/* =========================================================================
   AACORN brand typography override
   -------------------------------------------------------------------------
   Gutenverse blocks bake a per-block font (Heebo) into inline CSS via
   --gutenverse-font-family-* variables, which sit below theme.json and cannot
   be reached by the global styles. These rules reassert the brand fonts on the
   existing Gutenverse content. Font-family only: per-block weight, size, and
   spacing set by Gutenverse are left intact. Scoped to text elements so SVG /
   icon markup is untouched. The values reference the theme.json font tokens so
   there is a single source of truth.
   ========================================================================= */

/* Headings -> Fraunces */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--primary) !important;
}

/* Body and running text -> Nunito Sans */
body,
p, li, dd, dt, blockquote, figcaption, caption, label,
.wp-block-button__link, .guten-button, button,
input, select, textarea {
	font-family: var(--wp--preset--font-family--secondary) !important;
}

/* =========================================================================
   Campaign single hero (guten-hero-campsingle)
   -------------------------------------------------------------------------
   Matches the Our Farm hero: centered title over the full-bleed image. The
   dynamic post-title and post-terms (status) blocks don't reliably honor the
   Gutenverse text-align/color attributes, so center them here and force the
   status eyebrow to a light color (legible on the dark hero overlay), styled
   as a small uppercase eyebrow above the title.
   ========================================================================= */
.guten-hero-campsingle-h1,
.guten-hero-campsingle-h1 h1,
.guten-hero-campsingle .guten-post-terms,
.guten-hero-campsingle .guten-post-terms .term-list {
	text-align: center !important;
}
/* gutenverse post-title/post-terms render as flex, so text-align alone
   does not center the content; force flex centering too. */
.guten-hero-campsingle-h1,
.guten-hero-campsingle-h1 h1,
.guten-hero-campsingle .guten-post-terms,
.guten-hero-campsingle .guten-post-terms .term-list {
	justify-content: center !important;
}
.guten-hero-campsingle .guten-post-terms,
.guten-hero-campsingle .guten-post-terms a {
	color: var(--wp--preset--color--parchment) !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8125rem;
	font-family: var(--wp--preset--font-family--mono) !important;
	text-decoration: none;
}

/* =========================================================================
   Blog category filter pills (guten-blog-pill-*)
   -------------------------------------------------------------------------
   The pills are individual gutenverse button wrappers that otherwise stack
   vertically; lay them out as a centered horizontal wrapping row.
   ========================================================================= */
.guten-column-wrapper:has(> [class*="guten-blog-pill-"]) {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 8px;
}
/* Two-class selectors (.guten-button-wrapper[...]) raise specificity above the
   per-block rule Gutenverse generates, which otherwise forces full width. */
.guten-button-wrapper[class*="guten-blog-pill-"] {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
}
.guten-button-wrapper[class*="guten-blog-pill-"] .guten-button {
	width: auto !important;
	display: inline-flex !important;
}
/* Brand the pills consistently (some render off-brand Gutenverse-default blue):
   Crimson outline, filled on hover. Uniform across the blog home and category
   archive templates. */
.guten-button-wrapper[class*="guten-blog-pill-"] .guten-button {
	background: transparent !important;
	color: var(--wp--preset--color--heritage-green) !important;
	border: 1px solid var(--wp--preset--color--heritage-green) !important;
	/* Carry the FULL pill shape here, not just colors: Gutenverse's generated
	   per-block CSS is keyed to the attr elementId, and the archive template's
	   saved-html classes historically diverged from its attrs, so padding/
	   radius/size silently failed to apply there. Deterministic in child CSS. */
	padding: 10px 20px !important;
	border-radius: 40px !important;
	font-size: 14px !important;
	line-height: 1 !important;
}
.guten-button-wrapper[class*="guten-blog-pill-"] .guten-button:hover {
	background: var(--wp--preset--color--heritage-green) !important;
	color: var(--wp--preset--color--parchment) !important;
}

/* Blog single category badge: compact crimson pill, not a full-width bar. */
.guten-cattax-blogsingle {
	display: inline-block !important;
	width: auto !important;
	padding: 4px 12px;
	border-radius: 6px;
	font-size: 0.8125rem;
}
.guten-cattax-blogsingle a {
	color: var(--wp--preset--color--parchment) !important;
	text-decoration: none;
}

/* =========================================================================
   Blog cards (gutenverse/post-block items): image-top / content-below.
   The default post-block card is a horizontal flex row (thumb left, content
   right); stack it vertically everywhere the feed/archives/related appear.
   ========================================================================= */
.guten-post {
	flex-direction: column !important;
}
/* The shared "Latest from the farm" feed (block 1684, .guten-blogfeed) is
   placed bare in the full-width content area on the home page; constrain it to
   the site content width and center it so it respects the page margins like
   the other boxed sections. */
.guten-blogfeed {
	max-width: 1140px;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}
@media (max-width: 1180px) {
	.guten-blogfeed {
		padding-left: 15px;
		padding-right: 15px;
	}
}
.guten-post > .guten-thumb,
.guten-post > .guten-postblock-content {
	width: 100% !important;
}

/* Blog single hero (core/cover with the post's featured image): sit flush at
   the top (remove the default block top-margin) so there is no gap between the
   header and the image, matching the other full-bleed heroes; center the
   category eyebrow above the title and style it light. */
.aacorn-blog-hero {
	margin-top: 0 !important;
}
.aacorn-blog-hero .guten-post-terms,
.aacorn-blog-hero .guten-post-terms .term-list {
	text-align: center !important;
	justify-content: center !important;
}
.aacorn-blog-hero .guten-post-terms,
.aacorn-blog-hero .guten-post-terms a {
	color: var(--wp--preset--color--parchment) !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8125rem;
	font-family: var(--wp--preset--font-family--mono) !important;
	text-decoration: none;
}

/* =========================================================================
   Gutenverse form submit button (contact / inquiry forms): brand Crimson.
   -------------------------------------------------------------------------
   The form-builder submit renders as `.guten-form-input-submit
   .gutenverse-button`. Gutenverse's per-block button-color CSS is scoped to
   `.guten-button-wrapper .guten-button` (the regular Button block markup),
   which does NOT match the form submit, so the submit falls back to the
   default grey. Brand it here to match the rest of the site, reusing the
   Oxblood (theme-4) hover used by the other brand buttons. Applies to every
   Gutenverse form submit site-wide (Get Involved #contact and Rec Center
   #book share this markup). Another instance of the documented pattern:
   Gutenverse block color attributes are unreliable, so we assert brand color
   via scoped CSS.
   ========================================================================= */
/* Match the site's brand CTA buttons (.guten-button): the form submit
   otherwise renders as a bare native button (square corners, 2px outset
   border, tiny padding) with only the colour applied. Replicate the brand
   button geometry/type so it reads as one of the site's buttons -- Crimson
   fill, white uppercase Nunito Sans 15/600 with 0.7px tracking, 8px radius,
   18x32 padding, Oxblood (theme-4) hover. appearance:none strips the native
   button chrome. */
.guten-form-input-submit .gutenverse-button {
	background-color: var(--wp--preset--color--crimson) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 18px 32px !important;
	font-family: var(--wp--preset--font-family--secondary) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 15px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.7px !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease;
}
.guten-form-input-submit .gutenverse-button:hover {
	background-color: var(--wp--preset--color--theme-4) !important;
	color: #ffffff !important;
}

/* =========================================================================
   External form embeds (core/html iframes): light card surface.
   -------------------------------------------------------------------------
   The embedded external forms (application, schedule-a-visit, volunteer,
   Qgiv) have transparent backgrounds; on the dark Heritage Green section
   bands their field labels become illegible. Give every embed a white card
   with padding + rounded corners so the form is always readable regardless
   of the section color behind it. The wrapper keeps its inline
   max-width:1140px / centered layout.
   ========================================================================= */
.aacorn-embed-card {
	background-color: #ffffff;
	padding: clamp(16px, 3vw, 32px);
	border-radius: 8px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}

/* Current production Qgiv embed (form 75195). The embed script supplies and
   resizes its own iframe; this wrapper keeps it centered and visually aligned
   with the site's other form cards. */
.aacorn-qgiv-widget {
	max-width: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: clamp(10px, 1.5vw, 18px);
}

.aacorn-qgiv-widget .qgiv-embed-container,
.aacorn-qgiv-widget iframe {
	width: 100% !important;
	max-width: 100% !important;
}

.aacorn-embed-fallback {
	margin: 16px auto 0;
	max-width: 760px;
	text-align: center;
}

/* PayPal + endowment column beside the primary donation form. */
.guten-donate-getinvolved > .guten-container {
	align-items: flex-start;
}

.guten-othergiving-col-getinvolved > .guten-column-wrapper {
	background-color: var(--wp--preset--color--cream) !important;
	border-radius: 12px;
	padding: clamp(24px, 3vw, 36px) !important;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}

.guten-othergiving-h2-getinvolved {
	font-size: 32px !important;
}

.aacorn-other-giving-grid {
	align-items: stretch !important;
	flex-direction: column;
	gap: 20px !important;
	margin-left: auto;
	margin-right: auto;
	margin-top: 28px;
	width: 100%;
}

.aacorn-other-giving-grid > .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
	flex-basis: auto !important;
	padding: clamp(22px, 3vw, 30px);
	text-align: center;
}

.aacorn-other-giving-grid h3 {
	color: var(--wp--preset--color--heritage-green);
	margin-top: 0;
	text-align: center;
}

.aacorn-other-giving-grid p {
	text-align: center;
}

.aacorn-other-giving-grid .wp-block-buttons {
	justify-content: center;
	width: 100%;
}

.aacorn-paypal-qr {
	margin-top: 26px !important;
	text-align: center;
}

.aacorn-paypal-qr img {
	width: 180px !important;
	height: 180px !important;
}

.aacorn-paypal-qr figcaption {
	font-size: 0.875rem;
	margin-top: 10px;
}

@media (max-width: 1024px) {
	.guten-othergiving-col-getinvolved {
		margin-top: 30px;
	}
}

/* Native gutenverse/form-builder contact / inquiry form (Get Involved
   #contact and Rec Center #book): give it the SAME white card surface as the
   external form embeds above, for visual consistency. The form-builder block
   renders as <form class="guten-form-builder ...">; card it and constrain to
   the content width, centered. */
.guten-form-builder {
	background-color: #ffffff;
	padding: clamp(20px, 3vw, 40px);
	border-radius: 8px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
	max-width: 1140px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* =========================================================================
   Header: solid WHITE nav bar with dark text (user decision 2026-07-08).
   The Gutenverse section's parchment background attribute never renders
   (known color-attr gotcha), which left the header transparent over dark
   hero photos and made the AACORN Community logo + nav illegible. Paint
   the header bar white, flip desktop nav links to near-black, and keep
   hover/active crimson. The mobile breakpoint keeps its deep-green
   slide-out panel with white links, so the dark-link override is scoped
   to desktop widths and the hamburger gets a dark color below it.
   ========================================================================= */
.guten-qYPkM7 {
	background-color: #ffffff !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.wp-block-site-logo img {
	min-width: 150px;
}

/* Use the white logo's alpha channel as a mask so the visible mark exactly
   matches the footer's parchment link color without creating another asset. */
footer .aacorn-footer-logo {
	margin: 0;
}

footer .aacorn-footer-logo a {
	background-color: var(--wp--preset--color--parchment);
	display: block;
	-webkit-mask: url("/wp-content/uploads/2026/08/aacorn-white-logo-2026.png") center / contain no-repeat;
	mask: url("/wp-content/uploads/2026/08/aacorn-white-logo-2026.png") center / contain no-repeat;
	max-width: 100%;
	width: 230px;
}

footer .aacorn-footer-logo img {
	display: block;
	height: auto;
	max-width: 100%;
	opacity: 0;
	width: 100%;
}

/* Breakpoint corrected 780/781 -> 1024/1025 on 2026-08-17. The original value
   assumed Gutenverse swapped this nav to its drawer at 780px. Measured in the
   browser it actually keeps the drawer all the way to 1024px and only renders
   a horizontal menu at 1025px. The off-by-244px band made 781-1024px (iPad
   portrait, most Android tablets) unusable: near-black drawer links on the
   deep-green panel, and a white hamburger icon on the white header bar, so
   there was no visible menu control at all. Found while fixing the mobile
   Donate button. */
@media (min-width: 1025px) {
	.guten-qYPkM7 .gutenverse-menu li a {
		color: #1a1a1a !important;
	}
	.guten-qYPkM7 .gutenverse-menu li a:hover,
	.guten-qYPkM7 .gutenverse-menu li.current-menu-item > a,
	.guten-qYPkM7 .gutenverse-menu li.current_page_item > a {
		color: var(--wp--preset--color--crimson) !important;
	}
}

/* Keep the desktop nav and the Donate button on one row (client review
   2026-08-17). The header column wraps by default, so once the menu grew to
   six top-level items with "Tour & Apply" the Donate button dropped onto a
   second line at every desktop width and the header went 75px -> 118px.
   nowrap lets the menu shrink into the space it has instead. Measured: this
   also repairs the same wrap at exactly 1025px, which the five-item menu
   already hit. Tightening the 18px item padding was tried first and does
   nothing here; Gutenverse emits that inline with !important. */
@media (min-width: 1025px) {
	.guten-qYPkM7 .guten-column-wrapper[data-id="85BUh2"] {
		flex-wrap: nowrap;
	}
}

/* Nav label "Our Farm" -> "About AACORN" (client review 2026-08-20). The
   longer label pushed the menu's intrinsic width from 674px to 711px. With
   nowrap above, the nav and Donate can no longer shrink, so the pair
   overflowed its 80% column to the LEFT and printed the menu on top of the
   AACORN Community logo. Measured overlap: 27px at 1025px, 12px at 1040px,
   clear from 1060px up, which is why this is scoped to a narrow band instead
   of restyling the nav at every desktop width. Tightening the item padding
   works here only because the selector matches Gutenverse's own generated
   one; a shorter selector loses to its inline !important.
   Band extended 1080px -> 1139px for "Blog" -> "Blog & Resources"
   (2026-08-20): the wider label plus its new dropdown chevron overlapped the
   logo again where full padding resumed. Measured with full padding: -30px at
   1081px, -11px at 1100px, +9px at 1120px, healthy from 1140px. One density
   across the whole band beats three different ones. */
@media (min-width: 1025px) and (max-width: 1139px) {
	.guten-qYPkM7 .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu > li > a {
		padding-left: 7px !important;
		padding-right: 7px !important;
		letter-spacing: 0.3px !important;
	}
}

/* Header section dropdowns. Gutenverse keeps this nav in its slide-out drawer
   treatment through 1024px, so the desktop dropdown rules begin at 1025px. */
@media (min-width: 1025px) {
	.guten-qYPkM7 .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu > li.menu-item-has-children > .sub-menu {
		min-width: 250px !important;
		padding: 8px 0 !important;
		background: #ffffff !important;
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-top: 3px solid var(--wp--preset--color--crimson);
		border-radius: 0 0 8px 8px !important;
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
	}

	/* The plugin opens submenus on hover only. focus-within keeps every child
	   link available to keyboard users as focus moves through the dropdown. */
	.guten-qYPkM7 .gutenverse-menu li.menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
	}

	.guten-qYPkM7 .gutenverse-menu .sub-menu li a {
		padding: 11px 16px !important;
		line-height: 1.35 !important;
		text-transform: none !important;
	}

	.guten-qYPkM7 .gutenverse-menu .sub-menu li a:hover,
	.guten-qYPkM7 .gutenverse-menu .sub-menu li a:focus-visible {
		background-color: rgba(145, 15, 32, 0.07) !important;
		outline: none;
	}
}

@media (max-width: 1024px) {
	.guten-qYPkM7 .gutenverse-menu .sub-menu li a {
		padding-left: 30px !important;
		color: #ffffff !important;
		text-transform: none !important;
		opacity: 0.9;
	}
}

@media (max-width: 1024px) {
	.guten-qYPkM7 .gutenverse-hamburger-wrapper,
	.guten-qYPkM7 .gutenverse-hamburger-wrapper i {
		color: #1a1a1a !important;
	}
}

/* Mobile Donate button (client review 2026-08-17). The header Donate block
   carried hideTablet/hideMobile, so the site's primary action disappeared
   below desktop. The block attributes now keep it visible with compact
   padding; these rules handle the two things the block editor cannot express.

   1. Source order in the column is nav-menu then button, which would put the
      hamburger LEFT of Donate. row-reverse restores the conventional
      Donate-then-hamburger reading order, and flex-start packs the pair
      against the right edge (main-start is the right edge under row-reverse).
   2. The trailing arrow icon costs ~24px that the 375px viewport does not
      have to spare, so it only survives at desktop widths.

   Breakpoint is 1024px, not the 780px used by the rules above: measured in
   the browser, this nav renders as a hamburger drawer all the way up to
   1024px and only becomes a horizontal menu at 1025px. */
@media (max-width: 1024px) {
	.guten-qYPkM7 .guten-column-wrapper[data-id="85BUh2"] {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		/* Gutenverse emits justify-content: space-between !important for this
		   column's mobile horizontalAlign, which would strand Donate against
		   the logo. flex-start under row-reverse packs the pair right. */
		justify-content: flex-start !important;
		gap: 8px;
	}

	.guten-qYPkM7 .guten-uMaH0I {
		flex: 0 0 auto;
	}

	.guten-qYPkM7 .guten-uMaH0I .guten-button {
		white-space: nowrap;
	}

	.guten-qYPkM7 .guten-uMaH0I .guten-button i {
		display: none;
	}
}

/* =========================================================================
   Sticky header (user decision 2026-07-08). Sticky must live on the
   .wp-block-template-part WRAPPER, not the inner .section-wrapper - the
   wrapper is only as tall as the header (~75px), so an inner sticky would
   have no room to travel. :has() scopes it to the header part only (the
   footer shares the same wrapper class). scroll-padding-top keeps in-page
   anchor targets (#donate, #annual-reports, #schedule-a-visit, #apply...)
   from landing hidden underneath the stuck bar.
   ========================================================================= */
.wp-block-template-part:has(.guten-qYPkM7) {
	position: sticky;
	top: 0;
	z-index: 999;
}

html {
	scroll-padding-top: calc(var(--aacorn-sticky-stack-height, 145px) + 16px);
}

/* Page-level section navigation for the site's three longest pages. It is
   rendered from the current page's primary-menu dropdown, inside the sticky
   header, so both navigation lists always share labels, order, and anchors. */
.aacorn-page-subnav {
	background: var(--wp--preset--color--cream);
	border-bottom: 1px solid rgba(22, 98, 45, 0.22);
	border-top: 1px solid rgba(22, 98, 45, 0.14);
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08);
	color: var(--wp--preset--color--heritage-green);
	margin-block: 0 !important;
	max-width: none !important;
	position: sticky;
	top: var(--aacorn-main-header-height, 75px);
	transition: none !important;
	width: 100%;
	z-index: 998;
}

.aacorn-page-subnav__inner {
	align-items: center;
	display: flex;
	margin: 0 auto;
	max-width: 1200px;
	padding: 0 24px;
}

.aacorn-page-subnav__scroller {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.aacorn-page-subnav ul {
	align-items: stretch;
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
}

.aacorn-page-subnav li {
	display: flex;
	margin: 0;
}

.aacorn-page-subnav a {
	align-items: center;
	border-bottom: 3px solid transparent;
	color: var(--wp--preset--color--heritage-green);
	display: flex;
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.25;
	padding: 15px 13px 12px;
	text-decoration: none;
	white-space: nowrap;
}

@media (min-width: 781px) {
	.aacorn-page-subnav__scroller {
		overflow-x: visible;
	}

	.aacorn-page-subnav ul {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
}

.aacorn-page-subnav a:hover,
.aacorn-page-subnav a:focus-visible,
.aacorn-page-subnav a.is-active {
	border-bottom-color: var(--wp--preset--color--crimson);
	color: var(--wp--preset--color--oxblood);
}

.aacorn-page-subnav a:focus-visible {
	outline: 2px solid var(--wp--preset--color--crimson);
	outline-offset: -4px;
}

@media (max-width: 780px) {
	.aacorn-page-subnav__inner {
		padding: 0 10px;
	}

	.aacorn-page-subnav a {
		font-size: 0.82rem;
		padding-left: 11px;
		padding-right: 11px;
	}
}

/* Keep the browser's native #donate jump deterministic while the Qgiv form is
   loading. The matching JavaScript shim also neutralizes Gutenverse's explicit
   smooth-scroll correction at window.load. Other anchors retain their normal
   transitions. */
html:has(#donate:target) {
	scroll-behavior: auto !important;
}

/* =========================================================================
   Paragraph spacing in Gutenverse text-editor blocks (user request
   2026-07-08). Gutenverse zeroes p margins inside .text-content-inner, so
   multi-paragraph body copy ran together as a single wall of text. Give
   every paragraph except the last a blank-line gap, site-wide. Core
   paragraphs outside text-editor blocks already get 16px from the theme.
   ========================================================================= */
.gutenverse-text-editor .text-content-inner p:not(:last-child) {
	margin-bottom: 1em;
}

/* =========================================================================
   Design enhancements phase A/B (2026-07-08): FAQ accordion, icon lists,
   image-box day cards on Programs.

   Accordion open/close is re-driven by CSS max-height instead of the
   plugin's anime.js height animation. The stock JS animates inline height
   via requestAnimationFrame and leaves the body stuck at height:0 whenever
   RAF is throttled (occluded window, some embeds); the click handler only
   needs to toggle .active, which always works. height:auto!important
   defeats the stuck inline style; max-height does the animating.
   ========================================================================= */
.guten-accordions .accordion-item .accordion-body {
	height: auto !important;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.45s ease;
}

.guten-accordions .accordion-item.active .accordion-body {
	max-height: 640px;
}

/* Accordion question titles are spans, not h1-h6, so the global Fraunces
   override misses them. */
.guten-accordions .accordion-text {
	font-family: var(--wp--preset--font-family--primary);
}

/* "A Day at AACORN" activity list: two columns on desktop. */
.guten-activities-list-programs {
	columns: 2;
	column-gap: 40px;
	max-width: 720px;
}

.guten-activities-list-programs .guten-icon-list-item {
	break-inside: avoid;
}

@media (max-width: 767px) {
	.guten-activities-list-programs {
		columns: 1;
	}
}

/* =========================================================================
   Advanced-heading treatment (design enhancement 2026-07-08). Eyebrow
   kicker uses the JetBrains Mono label font; the focus word gets the
   Fraunces italic accent. Both are spans, outside the h1-h6 font override.
   ========================================================================= */
.guten-advanced-heading .heading-subtitle {
	font-family: var(--wp--preset--font-family--mono);
	display: block;
}

.guten-advanced-heading .heading-focus {
	font-family: var(--wp--preset--font-family--primary);
	font-style: italic;
}

/* =========================================================================
   Farm photo gallery (Our Farm). Rounded tiles + consistent tile height so
   mixed portrait/landscape client photos read as an even grid.
   ========================================================================= */
.guten-farmgallery-ourfarm .gallery-item-wrap {
	border-radius: 10px;
	overflow: hidden;
}

.guten-farmgallery-ourfarm .gallery-item-wrap img {
	height: 240px;
	width: 100%;
	object-fit: cover;
}

/* Preserve both faces in the portrait-oriented Connecting photo when it is
   cropped into a landscape gallery tile. */
.guten-farmgallery-ourfarm img.main-image[src*="our-farm-gallery-connecting"] {
	object-position: center 25% !important;
}

/* =========================================================================
   Home campaign banner: the post-block queries Active Campaign (term 17).
   "Building the Future" is on hold (term removed 2026-07-08), so the query
   is empty and the band rendered a bare "No Content". Hide the whole band
   while empty; it comes back on its own when a campaign is re-activated.
   ========================================================================= */
.section-wrapper:has(.guten-CWMBKY-campbanner .guten-empty) {
	display: none;
}

/* =========================================================================
   Blog category pills, dynamic version (2026-07-08). The six category pills
   in the blog home + category archive templates are now ONE
   gutenverse/taxonomy-list block per template (guten-blog-cats /
   guten-blog-cats-arch) instead of hand-maintained buttons, so both listing
   pages always match. Style the term links exactly like the "All" pill
   button above (transparent, crimson outline, filled on hover). Spacing:
   pill buttons carry margin-right 8px + column gap 8px = 16px, so the term
   list uses a 16px gap to sit on the same rhythm.
   ========================================================================= */
/* Collapse the taxonomy-list wrappers so the term pills and the "All"
   button become siblings in the SAME wrapping flex row (the pills column),
   instead of the button sitting alone on its own line. */
.guten-taxonomy-list[class*="guten-blog-cats"],
.guten-taxonomy-list[class*="guten-blog-cats"] .taxonomy-list-wrapper {
	display: contents;
}

/* One spacing system for the whole row: the column gap. Kill the baked-in
   button margins so All doesn't get extra offset. */
.guten-column-wrapper:has(> [class*="guten-blog-pill-"]) {
	gap: 12px;
}

.guten-button-wrapper[class*="guten-blog-pill-"] {
	margin: 0 !important;
}

/* Gutenverse generates a direct span color (white) inside the All button
   that beats the anchor-level override via specificity on the span itself;
   force inheritance so the pill text is crimson like the term pills. */
.guten-button-wrapper[class*="guten-blog-pill-"] .guten-button span {
	color: inherit !important;
}

/* The column wrapper paints an absolutely-positioned ::before background
   layer over the whole row, which swallows clicks on static children.
   Button pills survive because .guten-button-wrapper is position:relative;
   give the term pills the same stacking so they are clickable too. */
.guten-taxonomy-list[class*="guten-blog-cats"] .taxonomy-list-item {
	position: relative;
}

.guten-taxonomy-list[class*="guten-blog-cats"] .taxonomy-list-item a {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	background: transparent;
	border: 1px solid var(--wp--preset--color--heritage-green);
	border-radius: 40px;
	color: var(--wp--preset--color--heritage-green);
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.guten-taxonomy-list[class*="guten-blog-cats"] .taxonomy-list-item a:hover {
	background: var(--wp--preset--color--heritage-green);
	color: var(--wp--preset--color--parchment);
}

/* The selected category is marked server-side because Gutenverse does not
   emit a current-item class. Keep its text light on the green fill at every
   nesting level; otherwise the generated taxonomy color leaves it crimson. */
.guten-taxonomy-list[class*="guten-blog-cats"] .taxonomy-list-item a[aria-current="page"] {
	background: var(--wp--preset--color--heritage-green) !important;
	color: var(--wp--preset--color--parchment) !important;
}

.guten-taxonomy-list[class*="guten-blog-cats"] .taxonomy-list-item a[aria-current="page"] .taxonomy-list-content {
	color: inherit !important;
}

.guten-taxonomy-list[class*="guten-blog-cats"] .taxonomy-list-content {
	color: inherit;
}

/* Year dividers span the complete three/two/one-column Blog grid. */
.guten-blog-postblock .guten-posts > .aacorn-blog-year,
.guten-blogarch-postblock .guten-posts > .aacorn-blog-year {
	grid-column: 1 / -1;
	margin: 4px 0 22px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--wp--preset--color--heritage-green);
	color: var(--wp--preset--color--heritage-green);
	font-family: var(--wp--preset--font-family--primary);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1;
}

/* Native, crawlable Blog pagination. */
.guten-blog-postblock .native-pagination,
.guten-blogarch-postblock .native-pagination {
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

.guten-blog-postblock .native-pagination .btn-pagination,
.guten-blogarch-postblock .native-pagination .btn-pagination {
	min-width: 42px;
	min-height: 42px;
	padding: 5px 12px;
	border: 1px solid var(--wp--preset--color--heritage-green);
	border-radius: 4px;
	color: var(--wp--preset--color--heritage-green);
	font-size: 15px;
	line-height: 30px;
	text-decoration: none;
}

.guten-blog-postblock .native-pagination a.btn-pagination:hover,
.guten-blog-postblock .native-pagination a.btn-pagination:focus-visible,
.guten-blogarch-postblock .native-pagination a.btn-pagination:hover,
.guten-blogarch-postblock .native-pagination a.btn-pagination:focus-visible,
.guten-blog-postblock .native-pagination .btn-pagination.current,
.guten-blogarch-postblock .native-pagination .btn-pagination.current {
	background: var(--wp--preset--color--heritage-green) !important;
	border-color: var(--wp--preset--color--heritage-green) !important;
	color: var(--wp--preset--color--parchment) !important;
}

.guten-blog-postblock .native-pagination a.btn-pagination:focus-visible,
.guten-blogarch-postblock .native-pagination a.btn-pagination:focus-visible {
	outline: 3px solid var(--wp--preset--color--theme-4);
	outline-offset: 3px;
}

/* Home v2: featured-campaign banner card (Gutenverse bg attrs unreliable -> assert via CSS) */
.guten-campbanner-card > .guten-column-wrapper {
	background: linear-gradient(135deg, #360009 0%, #195C22 100%);
	border-radius: 12px;
	padding: clamp(32px, 5vw, 56px);
}
.guten-campbanner-body .text-content-inner {
	max-width: 780px;
	margin: 0 auto;
}

/* Home v2: video popup sizing (Gutenverse generated per-block CSS sets fixed 450x500 -> assert via CSS) */
.guten-videopopup-home .guten-popup-content {
	width: min(960px, 92vw) !important;
	height: auto !important;
}
.guten-videopopup-home .guten-popup-video-container,
.guten-videopopup-home figure.guten-video,
.guten-videopopup-home .guten-video-wrapper {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	margin: 0;
}
.guten-videopopup-home .guten-video-wrapper > div {
	width: 100% !important;
	height: 100% !important;
}
.guten-videopopup-home .guten-video-wrapper video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: #000;
}

/* =========================================================================
   Footer flush with content (2026-07-29). WordPress's constrained-layout
   block gap (:root :where(.is-layout-constrained) > * { margin-block-start:
   1.2rem }) puts a 19.2px strip above the footer. It was invisible while
   the blog feed section sat there, but after removing that section from
   Our Farm / Programs / Get Involved / single-campaign the page background
   shows through between the final CTA section and the footer. Gutenverse
   sections already sit flush against each other; make the footer do the
   same everywhere (pages embed it via wp:pattern inside .entry-content,
   FSE templates via wp:template-part).
   ========================================================================= */
footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Same strip on Home: the hero video popup wrapper (guten-popup-builder) is
   a zero-height div before the footer, and its 1.2rem block-gap margin
   collapses into a visible 19.2px band above the footer. Popup wrappers are
   invisible placeholders; they should never contribute flow spacing. */
.entry-content > .guten-popup-builder,
.wp-site-blocks .guten-popup-builder {
	margin-block-start: 0;
}

/* =========================================================================
   Our Farm "Life Across the Farm" 4-photo strip (2026-07-29). The client's
   four photos mix portrait and landscape, so natural heights render ragged
   (367px next to 199px). Crop every tile to a square so the strip reads as
   one even row at any column width.
   ========================================================================= */
.guten-life-ourfarm-grid .guten-image .guten-image-wrapper img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* =========================================================================
   Get Involved donate restructure (2026-07-29). The PayPal/Venmo cards now
   live in the full-width donate flow instead of the old 42% sidebar, so the
   giving grid needs a side-by-side variant. Base .aacorn-other-giving-grid
   stays column-stacked (endowment + other-ways rows reuse it full-width);
   .aacorn-giving-row lays PayPal and Venmo side by side on desktop.
   ========================================================================= */
.aacorn-other-giving-grid.aacorn-giving-row {
	flex-direction: row;
}
@media (max-width: 781px) {
	.aacorn-other-giving-grid.aacorn-giving-row {
		flex-direction: column;
	}
}
.aacorn-other-giving-grid.aacorn-giving-row > .wp-block-column {
	flex: 1 1 0;
}


/* =========================================================================
   Blog listing tweaks per client comments (2026-07-29). Category pills went
   crimson -> heritage green above (client: red was easy to miss). Post-grid
   category labels get a modest size bump for readability.
   ========================================================================= */
.guten-blog-grid .guten-blog-postblock .guten-post-category,
.guten-blog-grid .guten-blog-postblock .guten-post-category a {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* =========================================================================
   UAT refinements (2026-08-10).
   ========================================================================= */

/* Home: pair the two Life at AACORN portraits so the photo column no longer
   makes the section substantially taller than its copy. */
.guten-life-home-imgcol > .guten-column-wrapper {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-content: center;
}

.guten-life-home-imgcol .guten-image {
	margin: 0 !important;
}

.guten-life-home-imgcol .guten-image-wrapper,
.guten-life-home-imgcol .guten-image-wrapper img {
	width: 100%;
	height: 100%;
}

.guten-life-home-imgcol .guten-image-wrapper img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Keep faces inside the square crop in the first Life Across the Farm tile. */
.guten-life-ourfarm-img1 .guten-image-wrapper img {
	object-position: center 22%;
}

/* The eighth gallery tile is portrait-oriented; raise the focal point so the
   participant's face remains visible in the landscape tile crop. */
.guten-farmgallery-ourfarm .gallery-item-wrap:nth-child(8) img {
	object-position: center 18%;
}

/* Programs: the family photos form one compact row, with the narrative and
   quotes returning to full width beneath them. */
.guten-families-col-programs > .guten-column-wrapper {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.guten-families-col-programs > .guten-column-wrapper > :not(.guten-families-photo-programs):not(.guten-families-photo2-programs) {
	grid-column: 1 / -1;
}

.guten-families-col-programs .guten-image {
	margin: 0 !important;
}

.guten-families-col-programs .guten-image-wrapper img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Programs: place the Start the Process photo beside the introductory copy. */
.guten-apply-intro-col-programs > .guten-column-wrapper {
	display: grid !important;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	column-gap: 40px;
	row-gap: 18px;
	align-items: start;
}

.guten-apply-intro-h2-programs {
	grid-column: 1 / -1;
}

.guten-apply-intro-photo-programs {
	grid-column: 1;
	grid-row: 2 / span 2;
	margin: 0 !important;
}

.guten-apply-intro-photo-programs .guten-image-wrapper img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.guten-apply-intro-body-programs {
	grid-column: 2;
	grid-row: 2;
	margin-bottom: 0 !important;
}

.guten-apply-intro-btns-programs {
	grid-column: 2;
	grid-row: 3;
	margin-top: 0 !important;
}

/* Preserve faces when the new garden photo is cropped to the activity-card
   height. */
.guten-activities-card2-programs .image-box-header img {
	object-position: center 12% !important;
}

.guten-activities-card3-programs .image-box-header img {
	object-position: center 10% !important;
}

/* Approved partner slider supports both logo and name-only acknowledgements. */
.aacorn-partner-slider {
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 10px 0 20px;
}

.aacorn-partner-slider__viewport {
	overflow: hidden;
	touch-action: pan-y;
}

.aacorn-partner-slider__track {
	display: flex;
	gap: 16px;
	padding: 2px;
	transition: transform 450ms ease;
	will-change: transform;
}

.aacorn-partner {
	display: flex;
	flex: 0 0 calc((100% - 48px) / 4);
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 132px;
	padding: 22px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--theme-6);
	border-radius: 8px;
	color: var(--wp--preset--color--heritage-green);
	text-align: center;
}

.aacorn-partner img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 76px;
	object-fit: contain;
}

.aacorn-partner--name {
	font-family: var(--wp--preset--font-family--primary);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}

.aacorn-partner-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}

.aacorn-partner-slider__button {
	display: inline-grid;
	width: 44px;
	height: 44px;
	padding: 0;
	place-items: center;
	background: var(--wp--preset--color--heritage-green);
	border: 1px solid var(--wp--preset--color--heritage-green);
	border-radius: 50%;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	font-family: Arial, sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
}

.aacorn-partner-slider__button:hover,
.aacorn-partner-slider__button:focus-visible {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--heritage-green);
}

.aacorn-partner-slider__toggle {
	display: inline-grid;
	width: 44px;
	height: 44px;
	padding: 0;
	place-items: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--heritage-green);
	border-radius: 50%;
	color: var(--wp--preset--color--heritage-green);
	cursor: pointer;
}

.aacorn-partner-slider__toggle svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.aacorn-partner-slider__toggle:hover,
.aacorn-partner-slider__toggle:focus-visible {
	background: var(--wp--preset--color--heritage-green);
	color: var(--wp--preset--color--white);
}

.aacorn-partner-slider__button:focus-visible,
.aacorn-partner-slider__viewport:focus-visible,
.aacorn-partner-slider__toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--theme-4);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.aacorn-partner-slider__track {
		transition: none;
	}
}

@media (max-width: 1023px) {
	.aacorn-partner {
		flex-basis: calc((100% - 16px) / 2);
	}
}

@media (max-width: 781px) {
	.guten-apply-intro-col-programs > .guten-column-wrapper {
		display: block !important;
	}

	.guten-apply-intro-photo-programs {
		margin: 10px 0 22px !important;
	}

	.guten-apply-intro-body-programs {
		margin-bottom: 20px !important;
	}
}

@media (max-width: 560px) {
	.guten-life-home-imgcol > .guten-column-wrapper,
	.guten-families-col-programs > .guten-column-wrapper {
		grid-template-columns: 1fr;
	}

	.aacorn-partner {
		flex-basis: 100%;
	}
}

/* Campaign posts use each campaign's featured image in the shared hero and
   keep long-form copy at a readable measure. */
.aacorn-campaign-hero .wp-block-cover__image-background {
	object-position: center center;
}

/* Keep the participant's full head in frame when the wide campaign hero
   crops the 4:3 featured image. */
.postid-1991 .aacorn-campaign-hero .wp-block-cover__image-background {
	object-position: center 20%;
}

.aacorn-campaign-hero .wp-block-cover__inner-container,
.aacorn-campaign-hero .guten-hero-campsingle-col,
.aacorn-campaign-hero .guten-hero-campsingle-col > .guten-column-wrapper {
	width: 100%;
}

.aacorn-campaign-hero .guten-post-title,
.aacorn-campaign-hero .guten-post-terms,
.aacorn-campaign-hero .guten-post-excerpt {
	text-align: center;
}

.aacorn-campaign-hero .guten-post-excerpt {
	width: min(900px, calc(100% - 20px));
	margin: 20px auto 0 !important;
	color: var(--wp--preset--color--white) !important;
}

.aacorn-campaign-hero .guten-post-excerpt p {
	width: min(820px, 100%);
	margin: 0 auto;
	font-size: 22px !important;
	line-height: 1.45;
	text-align: center !important;
}

.guten-bi8yUt-camp {
	max-width: 820px;
	margin-right: auto !important;
	margin-left: auto !important;
}

.guten-bi8yUt-camp p {
	font-size: 17px;
	line-height: 1.75;
	margin: 0 0 1.4em;
}

.guten-bi8yUt-camp h2,
.guten-bi8yUt-camp h3 {
	color: var(--wp--preset--color--heritage-green);
	line-height: 1.2;
	margin: 1.6em 0 0.6em;
}

.guten-bi8yUt-camp figure {
	margin: 2rem 0 0;
}

.guten-bi8yUt-camp img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.aacorn-campaign-cta__heading {
	width: 100%;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 40px;
	line-height: 1.1;
	margin: 0 0 16px;
	text-align: center;
}

.aacorn-campaign-cta__body {
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 24px;
}

.guten-MVSTxP-camp .wp-block-buttons {
	width: 100%;
	justify-content: center;
}

.aacorn-campaign-cta__button .wp-block-button__link {
	padding: 18px 28px;
	border-radius: 8px;
}

.guten-6ndNBo-camp .gutenverse-share-icon,
.guten-6ndNBo-camp .gutenverse-icon-svg,
.guten-6ndNBo-camp svg {
	width: 20px;
	height: 20px;
}

@media (min-width: 782px) {
	.guten-share-sect-camp .guten-container,
	.guten-share-lbl-camp > .guten-column-wrapper,
	.guten-yGXV2M-camp > .guten-column-wrapper {
		align-items: center !important;
	}

	.guten-share-lbl-camp > .guten-column-wrapper,
	.guten-yGXV2M-camp > .guten-column-wrapper {
		display: flex;
		height: 100%;
	}

	.guten-k0HKPg-camp {
		width: 100%;
		margin: 0 !important;
	}

	.guten-6ndNBo-camp {
		height: 100%;
		align-items: center !important;
		justify-content: center !important;
	}
}

@media (max-width: 560px) {
	.aacorn-campaign-hero {
		min-height: 380px !important;
	}

	.aacorn-campaign-cta__heading {
		font-size: 32px;
	}

	.aacorn-campaign-hero .guten-post-excerpt p {
		font-size: 18px !important;
	}
}

/* =========================================================================
   Single blog post content styling (2026-07-29). Post bodies were imported
   from the old BoldGrid site and arrive as legacy markup: bootstrap-style
   .row/.col-md-* grids, inline thumbnail <img>s dropped mid-paragraph,
   decorative hr.bg-hr, and orphaned color4-color accents. None of that CSS
   exists in this theme, so posts rendered as 1140px-wide walls of 15px text
   with images crammed against words. Scope everything to the post-content
   block so listing pages and other templates are untouched.
   ========================================================================= */

/* Readable measure: center the article body at a comfortable line length. */
.guten-postcontent-blogsingle {
	max-width: 820px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Type rhythm */
.guten-postcontent-blogsingle p {
	font-size: 17px;
	line-height: 1.75;
	margin: 0 0 1.4em;
}
.guten-postcontent-blogsingle h2,
.guten-postcontent-blogsingle h3,
.guten-postcontent-blogsingle h4,
.guten-postcontent-blogsingle h5 {
	color: var(--wp--preset--color--heritage-green);
	line-height: 1.25;
	margin: 1.6em 0 0.6em;
	clear: both;
}
.guten-postcontent-blogsingle > *:first-child,
.guten-postcontent-blogsingle .container > *:first-child {
	margin-top: 0;
}
.guten-postcontent-blogsingle ul,
.guten-postcontent-blogsingle ol {
	font-size: 17px;
	line-height: 1.75;
	margin: 0 0 1.4em;
	padding-left: 1.5em;
}
.guten-postcontent-blogsingle li {
	margin-bottom: 0.4em;
}
.guten-postcontent-blogsingle a {
	color: var(--wp--preset--color--crimson);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.guten-postcontent-blogsingle blockquote {
	border-left: 3px solid var(--wp--preset--color--honey);
	margin: 0 0 1.4em;
	padding: 0.5rem 0 0.5rem 1.25rem;
	font-style: italic;
	color: var(--wp--preset--color--oxblood);
}

/* Images: breathing room, rounded corners, never overflow. Legacy posts drop
   thumbnails inline MID-SENTENCE inside paragraphs; floating them right lets
   the sentence flow around the photo instead of breaking on a dangling word.
   Stacked floats clear each other; headings and the content end clear all. */
.guten-postcontent-blogsingle img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}
.guten-postcontent-blogsingle p img.alignnone,
.guten-postcontent-blogsingle p img:not([class*="align"]) {
	float: right;
	clear: right;
	max-width: min(46%, 300px);
	margin: 0.25em 0 1em 1.5em;
}
.guten-postcontent-blogsingle::after {
	content: "";
	display: block;
	clear: both;
}
.guten-postcontent-blogsingle img.alignleft {
	float: left;
	margin: 0.35em 1.5em 1em 0;
}
.guten-postcontent-blogsingle img.alignright {
	float: right;
	margin: 0.35em 0 1em 1.5em;
}
.guten-postcontent-blogsingle img.aligncenter {
	display: block;
	margin: 1.5em auto;
}
.guten-postcontent-blogsingle figure {
	margin: 1.5em 0;
}
.guten-postcontent-blogsingle figcaption {
	font-size: 0.85rem;
	color: var(--wp--preset--color--oxblood);
	opacity: 0.75;
	margin-top: 0.4em;
	text-align: center;
}

/* Legacy BoldGrid accents: color4 was the old theme's accent slot; map it to
   the brand green so section headings and divider rules pick up the brand. */
.guten-postcontent-blogsingle .color4-color {
	color: var(--wp--preset--color--heritage-green);
}
.guten-postcontent-blogsingle hr.bg-hr {
	border-color: var(--wp--preset--color--honey);
	margin: 0.25em 0 1.4em;
}

/* Legacy BoldGrid .row/.col-* wrappers: every imported post was audited
   (2026-07-29) and none has real two-column content; BoldGrid just emitted
   empty side columns. Let everything stack in the reading measure and hide
   the empty shells so they don't add phantom spacing. */
.guten-postcontent-blogsingle .boldgrid-section {
	margin-bottom: 1rem;
}
.guten-postcontent-blogsingle [class*="col-"]:not(:has(img)):not(:has(p)):not(:has(h1,h2,h3,h4,h5,ul,ol,blockquote,figure,iframe)) {
	display: none;
}

/* =========================================================================
   Constant Contact "Stay Connected" signup form (client review 2026-08-17).
   Blog Home only, inside the deep-green Stay Connected section.

   Constant Contact ships its own stylesheet built for a light background:
   dark grey body text, heritage-green labels. Dropped straight onto the
   section's green overlay that is green-on-green and unreadable, so rather
   than fighting their CSS rule by rule the form gets the light card it was
   designed for. The child theme's global Nunito Sans override already
   reaches their inputs, labels and button, and their submit button already
   lands on brand crimson, so only layout and the card are needed here.
   ========================================================================= */
.aacorn-ctct-wrap {
	background: var(--wp--preset--color--parchment);
	border-radius: 10px;
	margin: 0 auto 10px;
	max-width: 100%;
	padding: 26px 24px 18px;
	text-align: left;
}

/* The form carries its own H2 reading "Stay Connected with AACORN", which is
   word-for-word the section heading directly above it. Hide the form's copy
   and keep the brand-styled one. Scoped to .ctct-form-custom so the
   identically classed "Thanks for signing up!" heading inside
   .ctct-form-success still appears after a successful submit. */
.aacorn-ctct-wrap .ctct-form-custom .ctct-form-header {
	display: none;
}

.aacorn-ctct-wrap .ctct-form-lists {
	margin-top: 4px;
}

.aacorn-ctct-wrap .ctct-form-listitem {
	margin-bottom: 6px;
}

.aacorn-ctct-wrap .ctct-form-button {
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.aacorn-ctct-wrap .ctct-form-button:hover,
.aacorn-ctct-wrap .ctct-form-button:focus-visible {
	background-color: var(--wp--preset--color--oxblood) !important;
}

/* =========================================================================
   Minimum horizontal page gutter on desktop (fix 2026-08-20).
   -------------------------------------------------------------------------
   Pre-existing bug, visible in the 1025-1140px viewport band: every page's
   content sat flush against both viewport edges with no gutter at all.

   Why: a Gutenverse section constrains its content with
   `.guten-<id>.layout-boxed > .guten-container { max-width: <N>px }` plus
   auto side margins, where N is 1140px for most sections (1290px and 600px
   for a few). Above N the container centers and the leftover space reads as
   a gutter. Below 1025px the sections' Tablet padding (10px) supplies one.
   Between 1025px and N there is neither: the container is exactly viewport
   width with zero padding, so headings and columns start at x=0.

   Fix: give the container a 20px horizontal padding floor with
   `box-sizing: content-box`, so max-width applies to the CONTENT box. That
   makes the container's outer width `min(available, N + 40)`, which works
   out to a gutter of `max(20px, (available - N) / 2)`:

     - available <= N + 40  ->  container fills the width, gutter = 20px
     - available >  N + 40  ->  container is N wide and centers exactly where
                                it does today, gutter = (available - N) / 2

   So the rule is a no-op at every width that already had a >= 20px gutter -
   no media query upper bound needed, no per-section max-width to override,
   and no discontinuity to resize across. It also covers the same bug in the
   1140-1290px band for the handful of 1290px-wide sections.

   Scoping notes:
   - `min-width: 1025px` only. Below that the sections' own Tablet/Mobile
     padding already gutters the page, and adding to it would narrow phone
     and tablet content by 40px.
   - `.layout-boxed` only. Full-bleed (`.layout-fullwidth`) sections - the
     photo heroes, the partner logo ticker, the footer band - have no
     max-width and are meant to reach both edges; they are left alone.
   - `:not(.guten-container .guten-container)` keeps the padding on the
     OUTERMOST container. Nested sections (the Home routing-card row, the
     footer's inner sections) already sit inside their parent's padding, so
     padding them again would double the inset and would also narrow them at
     every desktop width, since their available width is below their
     max-width to begin with.
   - Section background images/colors paint on the section, not the
     container, so full-bleed backgrounds are unaffected either way.
   - The header section (.guten-qYPkM7) is EXCLUDED. Its nav has no width to
     spare at exactly these viewport widths: the 2026-08-20 "About AACORN"
     label already pushed the menu's intrinsic width to 711px, which is why
     the item padding is tightened at 1025-1080px. Taking 40px out of the
     header's 80% nav column re-creates that failure - measured with the
     header included, the menu overflowed its column to the LEFT by up to
     13.8px at 1081-1098px (the widths just above the tightening band) and
     closed to 4.5px of the AACORN Community logo. The header therefore keeps
     its current full-width behaviour and its logo stays flush in the band.
   ========================================================================= */
@media (min-width: 1025px) {
	section.guten-section.layout-boxed:not(.guten-qYPkM7) > .guten-container:not(.guten-container .guten-container) {
		box-sizing: content-box;
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* =========================================================================
   Resources archive (/resources/): grouped document list rendered by the
   aacorn/resource-list block (inc/resource-cpt.php). Simple card rows -
   deliberately lighter than the blog grid since items are just linked
   documents. Anchor offsets under the sticky header are already handled by
   the global html { scroll-padding-top } rule above.
   ========================================================================= */
.aacorn-resources {
	margin: 0 auto;
	max-width: 800px;
	width: 100%;
}

.aacorn-resource-group + .aacorn-resource-group {
	margin-top: 56px;
}

.aacorn-resource-group h2 {
	border-bottom: 1px solid var(--wp--preset--color--theme-6);
	color: var(--wp--preset--color--heritage-green);
	font-size: 1.75rem;
	margin: 0 0 20px;
	padding-bottom: 12px;
}

.aacorn-resource-list {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aacorn-resource-list a,
.aacorn-resource-list > li > .aacorn-resource-title {
	align-items: center;
	background: #fff;
	border: 1px solid var(--wp--preset--color--theme-6);
	border-radius: 10px;
	color: var(--wp--preset--color--oxblood);
	display: flex;
	justify-content: space-between;
	padding: 16px 20px;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.aacorn-resource-list .aacorn-resource-title {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
}

.aacorn-resource-icon {
	color: var(--wp--preset--color--crimson);
	flex: 0 0 auto;
	margin-left: 16px;
}

.aacorn-resource-list a:hover {
	border-color: var(--wp--preset--color--heritage-green);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	color: var(--wp--preset--color--crimson);
}

@media (max-width: 640px) {
	.aacorn-resource-list a,
	.aacorn-resource-list > li > .aacorn-resource-title {
		padding: 14px 16px;
	}
	.aacorn-resource-group h2 {
		font-size: 1.5rem;
	}
}

/* =========================================================================
   Footer Quick Links
   -------------------------------------------------------------------------
   Gutenverse 4.x inserts its default check icon when rendering the existing
   Quick Links block. The footer design intentionally uses text-only links;
   scope the override to this block so contact and social icons remain intact.
   ========================================================================= */
footer.wp-block-template-part .guten-icon-list.guten-0IXaB7 .guten-icon-list-item > a > i {
	display: none !important;
}