/*
Theme Name:     Kadence Child Theme
Theme URI:      n/a
Template:       kadence
Author:         Garrett Digital
Author URI:     n/a
Description:    Child Theme Description
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==========================================================================
   Park East — Fence Line design tokens
   Source of truth: Novamira saved design "park-east-noticeboard"
   ========================================================================== */
:root {
	/* Form-control boundary, 3.06:1 on the page ground. See SC 1.4.11. */
	--pe-form-line: #998661;
	--pe-bg: #F2EEE6;
	--pe-surface: #FAF8F3;
	--pe-ink: #2B2622;
	--pe-accent: #3F6E68;
	--pe-accent-deep: #2C4E49;
	--pe-accent-tint: #B9D2CE;
	--pe-muted: #6B655C;
	--pe-line: #DCD5C8;
	--pe-wash: #E4EDEC;
	--pe-error: #A13F30;
	--pe-success: #4C7A4A;
	--pe-warning: #8A5F22;
	--pe-info: #4A6B7A;
	--pe-disabled: #B7B2A6;
	--pe-soft-accent: #F1DCD3;
	--pe-soft-accent-ink: #7A3F33;
	--pe-core: #3E362D;

	--pe-font-heading: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--pe-font-body: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* fluid type scale — clamp(min, preferred, max), matching the mockup's
	   exact values (docs/park-east-mockup-202607.html) exactly, not
	   approximated — verified by direct numeric comparison 2026-07-25. */
	--pe-h1: clamp(30px, 2.6vw + 20px, 42px);
	--pe-h2: clamp(20px, 1.4vw + 15px, 24px);
	--pe-h3: 16px;
	--pe-body: 16px;
	--pe-caption: 13px;

	/* spacing / rhythm scale */
	--pe-space-sm: 8px;
	--pe-space-md: 16px;
	--pe-space-lg: 32px;
	--pe-space-xl: 64px;
	--pe-space-xl-mobile: 32px;

	--pe-radius: 3px;
}

/* ==========================================================================
   Rhythm — heading/paragraph/section spacing, held everywhere
   ========================================================================== */
body.kadence-content, .entry-content, .site-content, .page-content {
	font-family: var(--pe-font-body);
	color: var(--pe-ink);
}

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.single-content h1, .single-content h2, .single-content h3,
.single-content h4, .single-content h5, .single-content h6 {
	font-family: var(--pe-font-heading) !important;
	margin-top: var(--pe-space-lg) !important;
	margin-bottom: var(--pe-space-sm) !important;
}

/* Font size / line-height / letter-spacing / margin all match the mockup's
   own per-level values exactly (verified by direct numeric comparison),
   not one flat rule applied to every heading level. Only h1 gets the
   mockup's tighter -0.015em letter-spacing — h2/h3 are normal spacing
   there, so a blanket letter-spacing on every heading was a real
   deviation from spec. */
.entry-content h1, .single-content h1 { font-size: var(--pe-h1) !important; line-height: 1.08 !important; letter-spacing: -0.015em !important; }
.entry-content h2, .single-content h2 { font-size: var(--pe-h2) !important; line-height: 1.15 !important; margin-bottom: 8px !important; }
.entry-content h3, .single-content h3 { font-size: var(--pe-h3) !important; line-height: 1.3 !important; margin-top: 20px !important; margin-bottom: 6px !important; }

.entry-content p {
	margin-bottom: var(--pe-space-md);
	line-height: 1.6;
	max-width: 62ch;
}

/* Hero / page-title band — sit on the same surface as the content below it,
   no separate color block, tighter gap into the first paragraph.
   .entry-hero-container-inner is the element Kadence's own compiled CSS
   actually paints a background on (var(--global-palette7)) — overriding
   only the outer .entry-hero.page-hero-section section left that inner
   div's tint fully visible underneath, which is why a colored band kept
   showing up no matter what the outer rule said. Both need the override.
   The forced min-height:200px on .entry-header (also Kadence's own,
   unrelated to anything in this file) was the real source of the big
   empty gap between the H1 and the page content below it. */
.entry-hero.page-hero-section {
	background: var(--pe-surface) !important;
	padding-bottom: 0 !important;
}
.entry-hero-container-inner {
	background: var(--pe-surface) !important;
}
.entry-hero.page-hero-section .entry-header {
	min-height: 0 !important;
	/* Mockup spec is 40px top padding on .pe-hero — set explicitly here
	   rather than reusing --pe-space-lg (32px), which was 8px short. */
	padding-top: 40px !important;
	/* Mockup's .pe-hero has 32px bottom padding too, but Garrett explicitly
	   asked for the H1-to-content gap to be much tighter than that after
	   seeing it live ("feels like a different country") — 0 here is an
	   intentional, instructed deviation from the mockup, not an oversight. */
	padding-bottom: 0 !important;
	align-items: flex-start !important;
	text-align: left !important;
}
/* Kadence's own .content-bg (global.min.css) paints every entry white/
   the current global palette regardless of theme — that's the visible
   "box within a box" seam around all page content. Content sits directly
   on the page background instead; only .pe-tint sections get a color. */
.content-bg {
	background: transparent !important;
	box-shadow: none !important;
}
.entry-content-wrap {
	padding-top: 0 !important;
}
.entry-hero .entry-title {
	color: var(--pe-ink) !important;
	text-align: left !important;
	font-family: var(--pe-font-heading) !important;
	font-size: var(--pe-h1) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.015em !important;
	font-weight: 700 !important;
	position: relative;
	/* The accent bar prints as its own element after the standfirst now
	   (functions.php, pe_child_print_standfirst_and_bar), so the H1 no
	   longer reserves room for it. */
	padding-bottom: 0;
}

.entry-content hr,
hr.wp-block-separator {
	border: none;
	border-top: 1px solid var(--pe-line);
	margin: var(--pe-space-xl) 0;
}

@media (max-width: 768px) {
	.entry-content hr,
	hr.wp-block-separator {
		margin: var(--pe-space-xl-mobile) 0;
	}
}

/* Logo size is set in the Customizer (Site Identity > Logo Max Width), not here.
   The 36px !important override that used to live at this spot was added for the
   old three-ring mark and silently beat the Customizer, so changing the setting
   appeared to do nothing. Removed 2026-09-06 with the prickly pear. */

/* Header, rebuilt 2026-09-07. Hairline under the header; the current page
   gets a 3px accent rule that meets it. Nav items stretch to the header's
   height so the rule can sit on its bottom edge. Request Access and
   My Account are buttons, not links, and are centred instead. */
.site-header-main-section-right { align-self: stretch; }
.site-header-item-main-navigation,
.site-header-item-main-navigation .main-navigation,
.main-navigation .primary-menu-container,
.main-navigation .primary-menu-container > ul { height: 100%; }
.main-navigation .primary-menu-container > ul { display: flex; align-items: stretch; gap: 2px; }
.main-navigation .primary-menu-container > ul > li.menu-item { display: flex; align-items: stretch; font-size: 14.5px; }
.main-navigation .primary-menu-container > ul > li.menu-item > a {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 14px !important;
	font-weight: 600;
	color: var(--pe-core);
	text-decoration: none;
}
.main-navigation .primary-menu-container > ul > li.menu-item:not(.menu-item-has-children):not(.pe-cta) > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item:not(.menu-item-has-children):not(.pe-cta) > a:focus-visible {
	color: var(--pe-accent-deep);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--pe-accent-tint);
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:focus-visible {
	outline: 2px solid var(--pe-accent-deep);
	outline-offset: -6px;
	border-radius: 4px;
}
.main-navigation .primary-menu-container > ul > li.menu-item:not(.menu-item-has-children):not(.pe-cta).current-menu-item > a,
.main-navigation .primary-menu-container > ul > li.menu-item:not(.menu-item-has-children):not(.pe-cta).current_page_item > a,
.main-navigation .primary-menu-container > ul > li.menu-item:not(.menu-item-has-children):not(.pe-cta).current-menu-ancestor > a {
	color: var(--pe-accent-deep) !important;
}
/* 3.2:1 against the surface, clearing SC 1.4.11 for a non-text indicator.
   pointer-events:none so the pseudo-element never swallows the click.
   current_page_parent is deliberately excluded: WordPress adds it to the
   posts-page item on any non-page singular. */
.main-navigation .primary-menu-container > ul > li.menu-item:not(.menu-item-has-children):not(.pe-cta).current-menu-item > a::after,
.main-navigation .primary-menu-container > ul > li.menu-item:not(.menu-item-has-children):not(.pe-cta).current_page_item > a::after,
.main-navigation .primary-menu-container > ul > li.menu-item:not(.menu-item-has-children):not(.pe-cta).current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: -1px;
	height: 3px;
	background: var(--pe-accent);
	border-radius: 2px 2px 0 0;
	pointer-events: none;
}
/* My Account: a wash pill with a tint border, so it stops competing with
   Request Access for the strongest weight in the header. */
.main-navigation .primary-menu-container > ul > li.menu-item.menu-item-has-children { margin-left: var(--pe-space-sm); }
.main-navigation .primary-menu-container > ul > li.menu-item.menu-item-has-children > a {
	align-self: center;
	color: var(--pe-accent-deep) !important;
	background: var(--pe-wash);
	border: 1px solid var(--pe-accent-tint);
	padding: 7px 14px !important;
	border-radius: var(--pe-radius);
	font-weight: 600;
}
.main-navigation .primary-menu-container > ul > li.menu-item.menu-item-has-children > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.menu-item-has-children > a:focus-visible {
	background: var(--pe-accent-tint);
}
/* Request Access: the one button in the header. */
.main-navigation .primary-menu-container > ul > li.menu-item.pe-cta { margin-left: var(--pe-space-sm); }
.main-navigation .primary-menu-container > ul > li.menu-item.pe-cta > a {
	align-self: center;
	background: var(--pe-accent-deep);
	color: #F2EEE6 !important;
	padding: 9px 16px !important;
	border-radius: var(--pe-radius);
	font-weight: 600;
}
.main-navigation .primary-menu-container > ul > li.menu-item.pe-cta > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.pe-cta > a:focus-visible {
	background: var(--pe-accent);
	color: #fff !important;
}
.site-title, .site-title a {
	font-family: var(--pe-font-heading) !important;
	color: var(--pe-core) !important;
}

/* ==========================================================================
   Components — shape, elevation, states
   ========================================================================== */
.wp-block-button .wp-block-button__link,
.kt-blocks-button-link {
	background: var(--pe-accent-deep) !important;
	color: #F2EEE6 !important;
	border-radius: var(--pe-radius) !important;
	box-shadow: none !important;
	padding: 13px 22px !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	border: 0 !important;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible,
.kt-blocks-button-link:hover {
	background: var(--pe-accent) !important;
	color: #fff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--pe-accent-deep) !important;
	border: 1.5px solid var(--pe-accent-deep) !important;
	padding: 11.5px 20.5px !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: var(--pe-wash) !important;
	color: var(--pe-accent-deep) !important;
}

.pe-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 9px;
	border-radius: 10px;
	background: var(--pe-soft-accent);
	color: var(--pe-soft-accent-ink);
}

.pe-band {
	background: var(--pe-wash);
	border-radius: var(--pe-radius);
	padding: var(--pe-space-md);
	font-size: 13.5px;
}

/* Reusable section-tint utility — add the "pe-tint" class (Advanced >
   Additional CSS Class in the block editor) to a Group block wrapping a
   heading + its content to alternate that section's background for visual
   rhythm. One class, works on any current or future section — no
   per-section selector needed. (Originally built for Kadence's rowlayout
   block, but that block has a real rendering bug on this install: it emits
   CSS Grid rules for a wrapper div it never actually prints, silently
   collapsing every multi-column section to one stacked column. Multi-column
   content now uses WordPress's native core/columns instead, wrapped in a
   core/group for this tint when needed — both render reliably.) */
.pe-tint {
	background: var(--pe-wash) !important;
	border-radius: var(--pe-radius);
	padding: 24px var(--pe-space-lg) !important;
	margin-top: var(--pe-space-lg) !important;
	margin-bottom: var(--pe-space-lg) !important;
	margin-left: -32px !important;
	margin-right: -32px !important;
}
.pe-tint > :first-child {
	margin-top: 0 !important;
}
.pe-tint > :last-child {
	margin-bottom: 0 !important;
}
@media (max-width: 600px) {
	.pe-tint {
		padding: var(--pe-space-md) var(--pe-space-md) !important;
	}
}

.pe-error-text { color: var(--pe-error); font-size: 13px; }
.pe-success-text { color: var(--pe-success); font-size: 13px; }
.pe-warning-text { color: var(--pe-warning); font-size: 13px; }
.pe-info-text { color: var(--pe-info); font-size: 13px; }

/* No shadows or gradients anywhere — flat, per the saved design's Elevation rule. */
.kadence-card, .kt-blocks-info-box, .wp-block-kadence-infobox {
	box-shadow: none !important;
}

/* ==========================================================================
   Accessibility — visible keyboard focus (not covered by Kadence defaults
   for every custom element we add) and a WCAG AA contrast note.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
.wp-block-button .wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--pe-accent-deep);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   UsersWP directory + profile — CSS-only pass over the plugin's own default
   markup (no PHP template override; see park-east-directory Novamira skill
   for why the actual data/privacy layer lives in the plugin instead).
   ========================================================================== */
.uwp-banner-image {
	display: none; /* generic stock placeholder, not real content */
}
.uwp-users-list-user.card {
	border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius);
	box-shadow: none !important;
	background: var(--pe-surface);
}
.uwp-users-list-user .card-body {
	padding-top: var(--pe-space-lg);
}
.uwp-profile-header {
	min-height: 0 !important; /* was reserving space for the hidden banner */
}
.uwp-profile-header img.rounded-circle {
	width: 88px !important;
	height: 88px !important;
	margin-top: 0 !important;
	box-shadow: 0 0 0 3px var(--pe-accent-tint) !important;
	border-width: 0 !important;
}
.uwp-user-title, .uwp-user-title a {
	font-family: var(--pe-font-heading);
	color: var(--pe-ink) !important;
	font-weight: 700;
}
.uwp-users-list .row.row-cols-1 {
	row-gap: var(--pe-space-lg);
}

/* Account page (uwp_account) — Display Name and Bio are redundant with
   fields the plugin's own sharing form already covers (first/last name
   directly above; "My short note" further down, which is what neighbors
   actually see — display_name_for() never reads either of these), so both
   are hidden rather than left to confuse people about what they control.
   Notifications/Privacy are stock UsersWP tabs this site doesn't use (no
   email notifications; "privacy" duplicates the sharing model on the
   Account page below in a way that isn't wired together) — hidden from
   the sidebar nav rather than left as dead ends. The native avatar
   "camera" changer stays (bigger now) — the real privacy fix is in the
   plugin's monogram_avatar() (v0.2.1+), which now gates ANY photo source
   on the "My profile photo" sharing toggle, not just this one control. */
.uwp-account-class div[data-argument="display_name"],
.uwp-account-class div[data-argument="bio"] {
	display: none !important;
}
.uwp-account-class li:has(> a.uwp-account-notifications),
.uwp-account-class li:has(> a.uwp-account-privacy) {
	display: none !important;
}
.uwp-account-class .uwp-banner-change-icon {
	width: 44px !important;
	height: 44px !important;
	font-size: 18px !important;
}
.uwp-account-class .uwp-banner-change-icon .fa-camera {
	font-size: 18px !important;
}

/* Register + Account core fields (UsersWP's own form components) — the
   visible "label" was actually just placeholder text, with the real
   <label> hidden via .sr-only. NN Group has written specifically against
   this: a placeholder-as-label disappears the moment someone starts
   typing, so there's nothing left reminding them what field they're in,
   and it breaks reviewing a filled-in form before submitting. Un-hiding
   the real label (positioned above the field, like every other form on
   this site) fixes both forms at once since they share this component. */
.uwp-registration-form .form-group label.sr-only,
.uwp-account-class .form-group label.sr-only {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 0 6px !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
	display: block !important;
	font-family: var(--pe-font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--pe-ink);
}
.uwp-registration-form .form-group,
.uwp-account-class .form-group {
	margin-bottom: var(--pe-space-md);
}
.uwp-registration-form .form-control,
.uwp-account-class .form-control {
	font-family: var(--pe-font-body) !important;
	border: 1px solid var(--pe-line) !important;
	border-radius: var(--pe-radius) !important;
	padding: 10px 12px !important;
	box-shadow: none !important;
}
.form-control, .uwp-account-class .form-control, select, textarea {
	background-color: var(--pe-surface, #fff) !important;
}
/* Distinct from the editable-field fix above -- a genuinely disabled or
   readonly field (e.g. the invite-link display boxes, which use readonly +
   onclick="this.select()" specifically so it never looks like a normal
   editable empty field) needs a clearly different look, not the same white
   background. Muted fill + muted text + default cursor, added 2026-07-26. */
.form-control:disabled, .form-control[readonly], input:disabled, input[readonly], select:disabled, textarea:disabled {
	background-color: var(--pe-line, #DCD5C8) !important;
	color: var(--pe-muted, #6b655c) !important;
	cursor: default !important;
	opacity: 1 !important;
}
/* The placeholder attribute duplicates the now-visible label above each
   field ("First Name *" as both label and placeholder) — suppressing it
   removes the redundant text without touching UsersWP's own PHP markup. */
.uwp-registration-form .form-control::placeholder,
.uwp-account-class .form-control::placeholder {
	color: transparent !important;
}
.uwp-registration-form .form-text,
.uwp-account-class .form-text {
	font-family: var(--pe-font-body);
	color: var(--pe-muted);
	font-size: 13px;
	margin-top: 4px;
}
.uwp-registration-form button[type="submit"],
.uwp-registration-form input[type="submit"],
.uwp-account-class button[type="submit"],
.uwp-account-class input[type="submit"] {
	background: var(--pe-accent-deep) !important;
	border-color: var(--pe-accent-deep) !important;
	color: #F2EEE6 !important;
	border-radius: var(--pe-radius) !important;
	font-weight: 600;
	box-shadow: none !important;
}
.uwp-registration-form button[type="submit"]:hover,
.uwp-registration-form input[type="submit"]:hover,
.uwp-account-class button[type="submit"]:hover,
.uwp-account-class input[type="submit"]:hover {
	background: var(--pe-accent) !important;
	border-color: var(--pe-accent) !important;
	color: #fff !important;
}

/* ==========================================================================
   Native directory / profile ([pe_directory] / [pe_profile]) — replaces
   the UsersWP CSS overrides above once those shortcodes are swapped in.
   ========================================================================== */
.pe-directory, .pe-profile {
	font-family: var(--pe-font-body);
	color: var(--pe-ink);
}

.dir-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pe-space-sm);
	margin-bottom: 20px;
}
.dir-toolbar .count { font-size: 13px; color: var(--pe-muted); }
.dir-toolbar .views a { color: var(--pe-muted); text-decoration: none; margin-left: 12px; font-size: 13px; }
.dir-toolbar .views a.active { color: var(--pe-ink); font-weight: 600; border-bottom: 2px solid var(--pe-accent); }

.street-heading {
	font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--pe-accent-deep); margin: 28px 0 10px;
}
.street-heading:first-of-type { margin-top: 0; }

.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--pe-space-md); margin-bottom: var(--pe-space-lg); align-items: stretch; }
.dir-card {
	display: block; border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius); padding: var(--pe-space-md); background: var(--pe-surface);
	text-decoration: none; color: inherit; transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.dir-card:hover, .dir-card:focus-visible { border-color: var(--pe-accent-deep); }
.dir-card:focus-visible { outline: 2px solid var(--pe-accent-deep); outline-offset: 2px; }
.dir-card img.avatar { width: 88px; height: 88px; border-radius: var(--pe-radius); display: block; margin-bottom: var(--pe-space-sm); object-fit: cover; }
.dir-card .who { font-weight: 700; font-size: 16px; margin-bottom: 2px; font-family: var(--pe-font-heading); color: var(--pe-ink); }
.dir-card .where { font-size: 13.5px; color: var(--pe-muted); margin-bottom: var(--pe-space-sm); }
.dir-card .badges { display: flex; flex-wrap: wrap; gap: 5px; }

.dir-list { display: flex; flex-direction: column; margin-bottom: var(--pe-space-lg); }
.dir-row {
	display: flex; align-items: flex-start; gap: var(--pe-space-sm); padding: var(--pe-space-sm) 0;
	border-bottom: 1px solid var(--pe-line); text-decoration: none; color: inherit;
}
/* Avatar and content are two columns — badge rows indent under the name
   instead of spanning full-width from under the avatar, and the whole row
   stays compact (still "list", not mini-cards). */
.dir-row-content { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.dir-row-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--pe-space-sm); }
/* Same badge-row block used on the grid card (a plain block box, where this
   just stacks normally) and here inside .dir-row-content (a column flex,
   where it also just stacks normally) — no flex-basis trick needed in
   either context now that both are real multi-line layouts. */
.badge-row { display: flex; flex-wrap: wrap; gap: 5px; }
/* Separates the interest group from a following badge-row only, not before the first one (which already gets enough room from .where margin-bottom), so it does not double up with .dir-row-content gap in list view. */
.badge-row + .badge-row { margin-top: var(--pe-space-sm); }
.dir-row .pe-chip { padding-top: 3px; padding-bottom: 3px; }
.dir-row:last-child { border-bottom: none; }
.dir-row:hover .who, .dir-row:focus-visible .who { color: var(--pe-accent-deep); }
.dir-row:focus-visible { outline: 2px solid var(--pe-accent-deep); outline-offset: 2px; }
.dir-row-avatar { width: 44px; height: 44px; border-radius: var(--pe-radius); object-fit: cover; flex-shrink: 0; }
.dir-row .who { font-weight: 700; font-size: 16.5px; font-family: var(--pe-font-heading); }
.dir-row .where { font-size: 14.5px; color: var(--pe-muted); }

.pe-chip { font-size: 13px; font-weight: 400; padding: 5px 12px; border-radius: 12px; }
/* Interests/hobbies and "can help with" are visually distinct so the two
   kinds of connection point are easy to tell apart at a glance — both keep
   the same contrast ratio as the original single-color chip. */
.pe-chip-interest { background: var(--pe-accent-tint); color: var(--pe-accent-deep); }
.pe-chip-help { background: var(--pe-line); color: var(--pe-muted); }
.pe-chip-new { background: var(--pe-wash); color: var(--pe-info); }
.pe-chip-pet { background: var(--pe-soft-accent); color: var(--pe-core); }

/* One cohesive card for the whole profile (2026-07-26 polish pass) — the
   avatar/name header and the field groups used to be two visually separate
   blocks (a plain white header sitting on top of a hard-edged tan block),
   which read as an unfinished seam. Now .pe-profile itself is the single
   card, bleeding -32px each side same as .pe-tint elsewhere on this site. */
.pe-profile {
	padding: 28px 32px 32px;
	margin-left: -32px; margin-right: -32px;
	background: #E4DFD6;
	border-radius: var(--pe-radius);
}
.profile-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
.profile-head > div:last-child { flex: 1; min-width: 0; }
.profile-head img.avatar { width: 132px; height: 132px; border-radius: var(--pe-radius); object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 4px var(--pe-accent-tint); }
/* !important added 2026-07-26 — without it this lost to the sitewide
   .entry-content h2 rule's own margin-top:32px !important (same
   specificity, but !important always beats non-important regardless of
   source order), silently pushing the name 32px below the avatar's top. */
.profile-head h1, .profile-head h2 { font-size: var(--pe-h2) !important; margin: 0 0 2px !important; font-family: var(--pe-font-heading); }
.profile-head .loc { color: var(--pe-muted); font-size: 14.5px; margin-bottom: var(--pe-space-sm); }
.profile-edit-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--pe-accent-deep); text-decoration: underline; }
.profile-note { margin: 16px 0 0; font-style: italic; color: var(--pe-ink); border-left: 2px solid var(--pe-accent-tint); padding-left: 12px; }
/* Masonry, not a strict 2-col grid — a grid forces every row to the height
   of its tallest sibling, so a one-field group ("Your Home") sat in a row
   exactly as tall as "Helping Neighbors Connect" next to it, leaving a
   large dead gap under its own short content. CSS columns let each group
   take only the height its own content actually needs, packing the card
   tighter and cutting real scroll height, not just repositioning the gap. */
.profile-groups {
	margin-top: 0;
	columns: 2;
	column-gap: 20px;
}
.profile-group { break-inside: avoid; margin-bottom: 20px; }
.profile-group:last-child { margin-bottom: 0; }
.profile-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pe-accent-deep); margin: 0 0 10px; font-weight: 700; }
.profile-group dt { font-size: 12.5px; color: var(--pe-muted); margin-top: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.profile-group dt:first-of-type { margin-top: 0; }
.profile-group dd { margin: 3px 0 0; font-size: 15px; color: var(--pe-ink); }
@media (max-width: 600px) {
	.pe-profile { padding: var(--pe-space-md) var(--pe-space-md) !important; }
	.profile-groups { columns: 1; }
}
@media (max-width: 480px) {
	.profile-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.profile-head img.avatar { width: 96px; height: 96px; }
}

/* ==========================================================================
   Contact form (Ninja Forms [ninja_form id=2]) — server HTML only carries a
   loading placeholder; the real fields render client-side from a JS config
   blob, using Ninja Forms' own default (cramped, off-brand-font) styling
   unless overridden here. This is the "more padding" gap on the Contact
   page — the form sat flush against the paragraph above it with no
   breathing room and didn't match the site's type or button style.
   ========================================================================== */
.nf-form-cont {
	margin: var(--pe-space-lg) 0 var(--pe-space-md);
	font-family: var(--pe-font-body);
}
.nf-form-cont .nf-field-container {
	margin-bottom: var(--pe-space-md);
}
.nf-form-cont .nf-field-label label {
	display: block;
	font-family: var(--pe-font-body);
	font-weight: 600;
	color: var(--pe-ink);
	margin-bottom: 6px;
}
/* Ninja Forms shipped its own background and text colour, so the Message
   textarea rendered on #FAF8F3 while the text inputs sat on #F7F7F7, and every
   field typed in #6B6B6B, which reads as disabled rather than editable.
   Reported 2026-09-06. Background, text and placeholder are now set here so
   all five fields match.

   The border is --pe-form-line, not --pe-line. A form control boundary has to
   clear 3:1 per WCAG SC 1.4.11, and the decorative hairline measures 1.37:1
   against the surface. --pe-line stays correct for dividers, which carry no
   meaning and have no such requirement. */
.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont textarea {
	width: 100%;
	font-family: var(--pe-font-body) !important;
	background-color: var(--pe-surface, #FAF8F3) !important;
	color: var(--pe-ink, #2B2622) !important;
	border: 1px solid var(--pe-form-line, #998661) !important;
	border-radius: var(--pe-radius) !important;
	padding: 10px 12px !important;
}
.nf-form-cont input[type="text"]::placeholder,
.nf-form-cont input[type="email"]::placeholder,
.nf-form-cont input[type="tel"]::placeholder,
.nf-form-cont textarea::placeholder {
	color: var(--pe-muted, #6B655C) !important;
	opacity: 1;
}
.nf-form-cont textarea {
	min-height: 120px;
}
.nf-form-cont input:focus-visible,
.nf-form-cont textarea:focus-visible {
	outline: 2px solid var(--pe-accent-deep);
	outline-offset: 2px;
}
.nf-form-cont .nf-field-element input[type="submit"] {
	background: var(--pe-accent-deep) !important;
	color: #F2EEE6 !important;
	border: none !important;
	border-radius: var(--pe-radius) !important;
	padding: 10px 22px !important;
	font-weight: 600;
	cursor: pointer;
}
.nf-form-cont .nf-field-element input[type="submit"]:hover {
	background: var(--pe-accent) !important;
	color: #fff !important;
}
.nf-form-cont .nf-form-fields-required {
	margin-bottom: var(--pe-space-md);
	font-size: 13px;
	color: var(--pe-muted);
}

.pe-invite-link-cell { display: flex; gap: 8px; align-items: center; }
.pe-invite-link-input { flex: 1; min-width: 0; width: 100%; font-family: monospace; font-size: 12.5px; }
.pe-invite-table { width: 100%; border-collapse: collapse; }
.pe-invite-table td { padding: 8px 8px 8px 0; vertical-align: middle; border-bottom: 1px solid var(--pe-line); }

/* ==========================================================================
   Account page polish, 2026-07-26
   ========================================================================== */
/* UsersWP's own account template hard-codes Bootstrap's flex-lg-column
   utility on the avatar/nav block -- that class ONLY takes effect at
   Bootstrap's lg breakpoint (992px) and up, so mobile already got a
   compact horizontal row "for free" while desktop got a permanent
   full-height (h-100) vertical sidebar with a huge bg-light padded area
   below the 3 nav links. Forcing the same horizontal/compact treatment at
   all widths, not just mobile. !important needed to beat Bootstrap's own
   !important utility classes. */
.uwp_page .col-lg-3 {
	flex: 0 0 auto !important;
	max-width: 100% !important;
	height: auto !important;
}
.uwp_page .bg-light.pt-5 {
	padding-top: 0.75rem !important;
	padding-bottom: 0.75rem !important;
	height: auto !important;
	background: transparent !important;
	border-bottom: 1px solid var(--pe-line, #DCD5C8);
}
.uwp_page img.avatar {
	max-width: 110px !important;
	width: 110px !important;
	height: 110px !important;
}
@media (min-width: 992px) {
	.uwp_page .navbar-nav.flex-lg-column {
		flex-direction: row !important;
		flex-wrap: wrap;
		gap: 4px 20px;
	}
	.uwp_page .navbar-nav .nav-item {
		margin: 0 !important;
	}
}

/* Checklist bold-vs-heading fix: .pe-checklist label already had
   font-weight:400 (see the inline wp_head CSS in the plugin), but it was
   silently losing to something else on this page with equal or higher
   specificity -- same category of bug as the profile-page h2 margin fix
   earlier today. !important guarantees it wins regardless. Also trimmed
   row height/gaps per direct feedback ("too much padding"). */
.pe-checklist label, .pe-sub {
	font-weight: 400 !important;
	min-height: 26px !important;
}
.pe-checklist {
	gap: .4rem 1rem !important;
}
/* Sharing-form group rhythm: 2.25rem between groups read as an
   oversized gap next to the 1.6rem used between fields inside a group
   ("fix big bits of spacing like address and How to Reach You") --
   tightened the ratio, and closed the trailing helper-text margin the
   .pe-field:last-child rule didn't reach (it zeroes the FIELD's own
   box, not its child <small>'s own bottom margin). */
.pe-group {
	margin-bottom: 1.4rem !important;
	padding-top: 1.3rem !important;
	padding-bottom: 1.3rem !important;
}
.pe-field:last-child > small {
	margin-bottom: 0 !important;
}
.pe-since-badge { margin-left: auto; align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--pe-muted); background: var(--pe-surface); border: 1px solid var(--pe-line); padding: 5px 12px; border-radius: 14px; white-space: nowrap; }
@media (max-width: 480px) { .pe-since-badge { margin-left: 0; margin-top: 8px; } }

.pe-header-contact { font-size: 14px; color: var(--pe-ink); margin-top: 2px; }
.pe-header-contact a { color: var(--pe-accent-deep); font-weight: 600; text-decoration: underline; }
.pe-header-pets { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.pe-header-pets-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pe-muted); padding-top: 8px; flex-shrink: 0; }
.pe-header-pets .pe-pet-gallery { flex: 1; min-width: 0; }
@media (max-width: 480px) { .pe-header-pets { margin-top: 14px; width: 100%; } }

.profile-head--no-avatar .pe-header-pets { margin-top: 0; margin-left: auto; flex-shrink: 0; align-self: flex-start; }
.profile-head--no-avatar .pe-header-pets .pe-pet-item { max-width: 90px; }
.profile-head--no-avatar .pe-header-pets-label { padding-top: 0; }
@media (max-width: 480px) { .profile-head--no-avatar .pe-header-pets { margin-left: 0; margin-top: 12px; } }

.pe-header-pets .pe-pet-item { max-width: 90px; flex: 0 1 90px; }

.pe-sharing h2 { margin-top: 0 !important; margin-bottom: 8px !important; }

/* The logo is a lockup: the pear plus "Park East" set in Archivo. Kadence would
   print the site title next to it and say the name twice, so the text title is
   hidden here rather than removed from the header layout. blogname stays intact
   for page titles and email, and the logo's alt carries the full name. */
.site-branding .site-title { display: none; }

/* WordPress' admin bar sits inside the same .uwp_page body, so the rule above
   was inflating its 26px "Howdy" thumbnail to 110px and burying Profile and
   Log Out underneath it. Reported 2026-09-06 by a moderator who could not
   reach the menu at all. Only moderators and admins see the bar
   (hide_admin_bar_for_members()), so members never hit this. */
#wpadminbar img.avatar {
	width: 26px !important;
	height: 26px !important;
	max-width: 26px !important;
}
#wpadminbar #wp-admin-bar-user-actions img.avatar,
#wpadminbar #wp-admin-bar-user-info img.avatar {
	width: 64px !important;
	height: 64px !important;
	max-width: 64px !important;
}

/* A link that IS the whole paragraph is not covered by SC 2.5.8's Inline
   exception, because there is no surrounding non-target text constraining it.
   Three of these measured 19px tall against the 24px AA minimum. Vertical
   padding on an inline element grows the hit box without pushing lines apart,
   so this is safe on links inside a sentence too. Measured 2026-09-06. */
.entry-content p > a:only-child,
.uwp-footer-link a {
	padding-block: 4px;
}

/* Nothing inside a dropdown gets a current-page indicator. */
.primary-menu-container .sub-menu li > a::after,
.mobile-navigation .sub-menu li > a::after {
	content: none !important;
}

/* ==========================================================================
   Shell, 2026-09-07. Mobile drawer, page head, homepage hero, footer,
   callouts, rules. Plan: docs/shell-design-plan-202609.md
   ========================================================================== */

/* --- Mobile drawer. Kadence's default ground is #090C10, which is not a
   Park East value; the current page sat on it at 3.4:1. Every state below
   names its own colour. IDs in the selectors so this wins over Kadence's
   inline palette rules at equal source order. --- */
#mobile-drawer .drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	padding: 0 10px 0 22px;
}
#mobile-drawer .drawer-header::before {
	content: "";
	width: 36px;
	height: 36px;
	background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cellipse cx=%2214.82%22 cy=%2231.27%22 rx=%225.5%22 ry=%229%22 transform=%22rotate(-14 14.82 31.27)%22 fill=%22%23F2EEE6%22/%3E %3Cellipse cx=%2245.85%22 cy=%2220.7%22 rx=%228.5%22 ry=%2213.5%22 transform=%22rotate(33 45.85 20.7)%22 fill=%22%23F2EEE6%22/%3E %3Cellipse cx=%2230%22 cy=%2243%22 rx=%2214%22 ry=%2217.5%22 fill=%22%23F2EEE6%22/%3E %3Cg stroke=%22%232C4E49%22 stroke-width=%221.4%22 fill=%22none%22%3E %3Cpath d=%22M23 40l2.2-2.2M30 37l2.2-2.2M25 47l2.2-2.2M32 44l2.2-2.2M23 52l2.2-2.2M31 51l2.2-2.2M36 47l2.2-2.2M43.5 23l2.2-2.2M46.5 16.5l2.2-2.2M13 33l2.2-2.2%22/%3E %3C/g%3E %3Cg transform=%22rotate(33 53.6 6)%22 fill=%22%23B26B4E%22%3E %3Ccircle cx=%2251.6%22 cy=%223.5%22 r=%221.45%22/%3E%3Ccircle cx=%2253.6%22 cy=%222.75%22 r=%221.45%22/%3E%3Ccircle cx=%2255.6%22 cy=%223.5%22 r=%221.45%22/%3E %3Crect x=%2250.35%22 y=%223.2%22 width=%226.5%22 height=%227.55%22 rx=%223.25%22/%3E %3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
#mobile-drawer .drawer-header .drawer-toggle { color: #F2EEE6; padding: 0.6em 0.5em; }
#mobile-drawer .drawer-toggle:focus-visible { outline: 2px solid var(--pe-soft-accent); outline-offset: 2px; }
#mobile-drawer .drawer-content { display: flex; flex-direction: column; flex: 1 1 auto; }
#mobile-drawer .mobile-navigation ul li { font-size: 18px; }
#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
	color: #F2EEE6;
	font-weight: 500;
}
#mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
#mobile-drawer .mobile-navigation ul li:not(.menu-item-has-children) a {
	border-bottom: 1px solid rgba(242, 238, 230, 0.14);
}
#mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap button {
	border-left: 1px solid rgba(242, 238, 230, 0.14);
	color: #F2EEE6;
}
#mobile-drawer .mobile-navigation ul li > a:hover {
	color: #F2EEE6;
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--pe-accent-tint);
}
#mobile-drawer .mobile-navigation ul li > a:focus-visible,
#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap button:focus-visible {
	outline: 2px solid var(--pe-soft-accent);
	outline-offset: -3px;
}
/* Current page: bold with a 3px cream rule under the text. The same device
   as the desktop header, and a link, not a pill. */
#mobile-drawer .mobile-navigation ul li:not(.pe-cta):not(.menu-item-has-children).current-menu-item > a,
#mobile-drawer .mobile-navigation ul li:not(.pe-cta):not(.menu-item-has-children).current_page_item > a {
	color: #F2EEE6;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
	text-decoration-color: #F2EEE6;
}
#mobile-drawer .mobile-navigation ul li:not(.pe-cta):not(.menu-item-has-children).current-menu-item > a::before,
#mobile-drawer .mobile-navigation ul li:not(.pe-cta):not(.menu-item-has-children).current_page_item > a::before {
	content: none;
}
#mobile-drawer .mobile-navigation .sub-menu li > a { color: var(--pe-accent-tint); font-size: 16px; }
/* Request Access: the one button in the drawer. */
#mobile-drawer .mobile-navigation ul li.pe-cta { margin-top: 14px; }
#mobile-drawer .mobile-navigation ul li.pe-cta > a {
	display: block;
	background: transparent !important;
	border: 1.5px solid #F2EEE6 !important;
	border-radius: var(--pe-radius);
	padding: 13px 16px;
	text-align: center;
	font-weight: 600;
	color: #F2EEE6;
}
#mobile-drawer .mobile-navigation ul li.pe-cta > a:hover,
#mobile-drawer .mobile-navigation ul li.pe-cta > a:focus-visible {
	background: #F2EEE6;
	color: var(--pe-accent-deep);
	text-decoration: none;
}
.pe-drawer-note {
	margin: auto 0 0 !important;
	padding: 28px 0 8px;
	color: var(--pe-accent-tint);
	font-size: 13.5px;
	line-height: 1.5;
}

/* --- Page head. Eyebrow above the H1, standfirst below it, then the bar,
   then a real gap. Printed from functions.php. --- */
.pe-eyebrow {
	font-family: var(--pe-font-body);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pe-muted);
	margin: 0 0 10px;
}
.pe-standfirst {
	font-family: var(--pe-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: var(--pe-core);
	max-width: 62ch;
	margin: 14px 0 0;
}
.pe-bar {
	width: 44px !important;
	max-width: 44px;
	flex: 0 0 auto;
	align-self: flex-start;
	height: 4px;
	background: var(--pe-accent);
	border-radius: 2px;
	margin: 20px 0 32px;
}
/* The boxed content style insets the body 32px (8px on phones) beyond the
   container edge. The hero header gets the same inset so the eyebrow, H1,
   standfirst and bar sit on the body's left line on every page type. */
.entry-hero.page-hero-section .entry-header { padding-left: 32px !important; padding-right: 32px !important; }
@media (max-width: 767px) {
	.entry-hero.page-hero-section .entry-header { padding-left: 8px !important; padding-right: 8px !important; }
}
/* Kadence puts 80px above the content area at desktop. With a hero present
   the bar's own margin is the gap, so that spacing comes off, and a heading
   that opens the content does not add its section gap on top. */
.entry-hero + .content-area { margin-top: 0 !important; }
.entry-hero + .content-area .entry-content > h2:first-child,
.entry-hero + .content-area .entry-content > h3:first-child,
.entry-hero + .content-area .pe-directory > :first-child { margin-top: 0 !important; }
@media (max-width: 760px) {
	.pe-standfirst { font-size: 17px; }
	.pe-bar { margin-bottom: 28px; }
}

/* --- Homepage hero. A full-width group on the surface colour; the badge is
   the one bold element on the page. Under 760px the badge drops out rather
   than shrinking into a thumbnail. --- */
.entry-content .pe-hero {
	background: var(--pe-surface);
	border-bottom: 1px solid var(--pe-line);
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.entry-content .pe-hero .pe-hero-inner {
	max-width: var(--global-content-width, 1290px);
	margin: 0 auto !important;
	/* Boxed content adds its own inset on top of the container edge padding
	   (32px at tablet and up, 8px on phones). Matching it keeps the hero
	   copy on the same left line as the body text below. */
	padding: 56px calc(var(--global-content-edge-padding, 1.5rem) + 32px);
	gap: 40px;
}
.entry-content .pe-hero h1 {
	font-family: var(--pe-font-heading);
	font-size: clamp(36px, 3vw + 22px, 52px) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.02em !important;
	max-width: 14ch;
	margin: 0 !important;
	text-wrap: balance;
	color: var(--pe-ink);
}
.entry-content .pe-hero .pe-hero-stand {
	font-size: 18px;
	line-height: 1.55;
	color: var(--pe-core);
	max-width: 56ch;
	margin: 18px 0 0 !important;
}
.pe-hero .pe-cta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 22px;
	margin: 26px 0 0 !important;
}
.pe-hero .pe-cta-row .wp-block-buttons,
.pe-hero .pe-cta-row p { margin: 0 !important; }
.entry-content .pe-hero .pe-gate-note {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 22px 0 0 !important;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--pe-muted);
	max-width: 52ch;
}
.pe-hero .pe-gate-note::before {
	content: "";
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Crect x=%223%22 y=%2210%22 width=%228%22 height=%2246%22 rx=%223%22 fill=%22%233F6E68%22/%3E %3Crect x=%2253%22 y=%2210%22 width=%228%22 height=%2246%22 rx=%223%22 fill=%22%233F6E68%22/%3E %3Crect x=%2214%22 y=%2222%22 width=%2236%22 height=%226.5%22 rx=%223%22 fill=%22%233F6E68%22/%3E %3Crect x=%2214%22 y=%2238%22 width=%2236%22 height=%226.5%22 rx=%223%22 fill=%22%233F6E68%22/%3E %3Crect x=%2217%22 y=%2216%22 width=%227%22 height=%2234%22 rx=%223%22 fill=%22%233F6E68%22/%3E %3Crect x=%2228.5%22 y=%2216%22 width=%227%22 height=%2234%22 rx=%223%22 fill=%22%233F6E68%22/%3E %3Crect x=%2240%22 y=%2216%22 width=%227%22 height=%2234%22 rx=%223%22 fill=%22%233F6E68%22/%3E %3Crect x=%2242%22 y=%2227.5%22 width=%2217%22 height=%228%22 rx=%224%22 fill=%22%23B26B4E%22/%3E%3C/svg%3E") no-repeat center / contain;
}
.pe-hero .pe-hero-mark { margin: 0 !important; }
.pe-hero .pe-hero-mark img { width: 230px; height: 230px; display: block; }
@media (max-width: 760px) {
	.entry-content .pe-hero .pe-hero-inner { padding: 40px calc(var(--global-content-edge-padding, 1.5rem) + 8px); }
	.pe-hero .pe-hero-mark { display: none !important; }
}

/* What's Inside: the four things, two columns, Archivo lead-ins, no icons
   and no cards. The list block is unchanged; the group carries the class. */
.entry-content .pe-inside { padding: 48px 0 8px !important; margin: 0 !important; }
.entry-content .pe-inside h2 { margin: 0 0 22px !important; }
.pe-inside ul {
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 48px;
	max-width: 960px;
}
.pe-inside li { margin: 0; color: var(--pe-core); max-width: 44ch; }
.pe-inside li strong {
	display: block;
	font-family: var(--pe-font-heading);
	font-size: 17px;
	line-height: 1.3;
	margin-bottom: 4px;
	color: var(--pe-ink);
}
/* The three closing blocks share a tint rule instead of becoming cards. */
.entry-content .pe-trio { border-top: 1px solid var(--pe-line); padding-top: 36px !important; margin-top: 40px !important; gap: 40px; }
.pe-trio .wp-block-column { border-top: 3px solid var(--pe-accent-tint); padding-top: 14px; }
.entry-content .pe-trio h2 { font-size: 16px !important; margin: 0 0 6px !important; }
.entry-content .pe-trio p { font-size: 15px; color: var(--pe-core); margin-bottom: 8px; }
@media (max-width: 760px) {
	.pe-inside ul { grid-template-columns: 1fr; }
	.entry-content .pe-trio { gap: 24px; }
}

/* --- Footer. Three widget areas on the deep teal, the reversed mark, the
   privacy line, and the two lines that were already there. --- */
.site-footer { color: #F2EEE6; }
.site-middle-footer-inner-wrap { gap: 32px; }
.site-footer .widget { margin: 0; }
.pe-foot-brand img { width: 44px; height: 44px; display: block; }
.pe-foot-name {
	font-family: var(--pe-font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: #F2EEE6;
	margin: 12px 0 8px;
}
.pe-foot-privacy { color: var(--pe-accent-tint); font-size: 15px; line-height: 1.5; max-width: 32ch; margin: 0; }
.pe-foot-h {
	font-family: var(--pe-font-body);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pe-accent-tint);
	margin: 0 0 10px;
}
.pe-foot-links { list-style: none; margin: 0; padding: 0; }
.pe-foot-links li { margin: 0; }
.pe-foot-links a {
	display: inline-block;
	color: #F2EEE6;
	text-decoration: none;
	font-size: 15.5px;
	padding: 5px 0;
	min-height: 24px;
}
.pe-foot-links a:hover,
.pe-foot-links a:focus-visible { text-decoration: underline; text-underline-offset: 3px; color: #F2EEE6; }
.site-footer a:focus-visible { outline: 2px solid var(--pe-soft-accent); outline-offset: 2px; }
.site-bottom-footer-inner-wrap {
	border-top: 1px solid rgba(242, 238, 230, 0.18);
	margin-top: 28px;
}
.site-footer .footer-html-inner {
	display: flex;
	justify-content: space-between;
	gap: 8px 20px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: var(--pe-accent-tint);
}
.site-footer .footer-html-inner p { margin: 0; }
@media (max-width: 760px) {
	.site-middle-footer-inner-wrap { gap: 28px; }
	.pe-foot-links a { padding: 7px 0; }
}

/* --- Callouts. One component, three fills, three brand icons. Grid so the
   icon sits in its own column and every child of the group lands in the
   text column. --- */
.entry-content .pe-note {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 16px;
	padding: 20px 22px !important;
	border-radius: var(--pe-radius);
	margin: 32px 0 !important;
	max-width: 620px;
}
.pe-note::before {
	content: "";
	grid-row: 1 / span 10;
	width: 30px;
	height: 30px;
	background: no-repeat center / contain;
}
.pe-note > * { grid-column: 2; }
.entry-content .pe-note h3 { font-size: 17px !important; margin: 0 !important; }
.entry-content .pe-note p { font-size: 15px; line-height: 1.55; color: var(--pe-core); max-width: 46ch; margin: 0 !important; }
.pe-note p + p { margin-top: 8px !important; }
.pe-note a { font-weight: 600; }
.pe-note--privacy { background: var(--pe-wash); border: 1px solid var(--pe-accent-tint); }
.pe-note--privacy::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Crect x=%223%22 y=%2210%22 width=%228%22 height=%2246%22 rx=%223%22 fill=%22%232C4E49%22/%3E %3Crect x=%2253%22 y=%2210%22 width=%228%22 height=%2246%22 rx=%223%22 fill=%22%232C4E49%22/%3E %3Crect x=%2214%22 y=%2222%22 width=%2236%22 height=%226.5%22 rx=%223%22 fill=%22%232C4E49%22/%3E %3Crect x=%2214%22 y=%2238%22 width=%2236%22 height=%226.5%22 rx=%223%22 fill=%22%232C4E49%22/%3E %3Crect x=%2217%22 y=%2216%22 width=%227%22 height=%2234%22 rx=%223%22 fill=%22%232C4E49%22/%3E %3Crect x=%2228.5%22 y=%2216%22 width=%227%22 height=%2234%22 rx=%223%22 fill=%22%232C4E49%22/%3E %3Crect x=%2240%22 y=%2216%22 width=%227%22 height=%2234%22 rx=%223%22 fill=%22%232C4E49%22/%3E %3Crect x=%2242%22 y=%2227.5%22 width=%2217%22 height=%228%22 rx=%224%22 fill=%22%23B26B4E%22/%3E%3C/svg%3E"); }
.pe-note--mod { background: var(--pe-surface); border: 1px solid var(--pe-line); }
.pe-note--mod::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Crect x=%2227%22 y=%2234%22 width=%229%22 height=%2224%22 rx=%222%22 fill=%22%232C4E49%22/%3E %3Cpath d=%22M8 36V24C8 16.3 14.3 10 22 10H44V36Z%22 fill=%22%232C4E49%22/%3E %3Crect x=%2214%22 y=%2223.5%22 width=%2217%22 height=%224.5%22 rx=%222.25%22 fill=%22%23FAF8F3%22/%3E %3Crect x=%2244%22 y=%224%22 width=%224.5%22 height=%2222%22 rx=%222.25%22 fill=%22%23B26B4E%22/%3E %3Crect x=%2247%22 y=%224%22 width=%2211%22 height=%227.5%22 rx=%222%22 fill=%22%23B26B4E%22/%3E%3C/svg%3E"); }
.pe-note--first { background: var(--pe-soft-accent); border: 1px solid #E3C3B5; }
.pe-note--first::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Crect x=%224%22 y=%225%22 width=%226.5%22 height=%2253%22 rx=%222.5%22 fill=%22%232C4E49%22/%3E %3Crect x=%229%22 y=%2213%22 width=%2217%22 height=%225.5%22 rx=%222.75%22 fill=%22%232C4E49%22/%3E %3Cpath d=%22M17 18.5H35L33 24H19Z%22 fill=%22%232C4E49%22/%3E %3Cpath d=%22M19 24H33L35.5 42H16.5Z%22 fill=%22%232C4E49%22/%3E %3Crect x=%2215%22 y=%2242%22 width=%2222%22 height=%225.5%22 rx=%222.75%22 fill=%22%232C4E49%22/%3E %3Cg stroke=%22%23B26B4E%22 stroke-width=%223.4%22 fill=%22none%22%3E %3Cpath d=%22M20 52l-3 7M26 53v7M32 52l3 7%22/%3E %3C/g%3E%3C/svg%3E"); }

/* --- Rules. A separator block with the pe-rule-mark class gets the small
   pear where a page changes subject. --- */
hr.wp-block-separator.pe-rule-mark { position: relative; overflow: visible; }
hr.wp-block-separator.pe-rule-mark::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -11px;
	transform: translateX(-50%);
	width: 40px;
	height: 20px;
	background: var(--pe-bg) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cellipse cx=%2214.82%22 cy=%2231.27%22 rx=%225.5%22 ry=%229%22 transform=%22rotate(-14 14.82 31.27)%22 fill=%22%232C4E49%22/%3E %3Cellipse cx=%2245.85%22 cy=%2220.7%22 rx=%228.5%22 ry=%2213.5%22 transform=%22rotate(33 45.85 20.7)%22 fill=%22%232C4E49%22/%3E %3Cellipse cx=%2230%22 cy=%2243%22 rx=%2214%22 ry=%2217.5%22 fill=%22%232C4E49%22/%3E %3Cg transform=%22rotate(33 53.6 6)%22 fill=%22%23B26B4E%22%3E %3Ccircle cx=%2251.6%22 cy=%223.5%22 r=%221.45%22/%3E%3Ccircle cx=%2253.6%22 cy=%222.75%22 r=%221.45%22/%3E%3Ccircle cx=%2255.6%22 cy=%223.5%22 r=%221.45%22/%3E %3Crect x=%2250.35%22 y=%223.2%22 width=%226.5%22 height=%227.55%22 rx=%223.25%22/%3E %3C/g%3E%3C/svg%3E") no-repeat center / 18px 18px;
}

/* --- Rhythm on editorial pages. Section gaps from the scale; nothing here
   reaches the member pages. --- */
body:not(.pe-member-page) .entry-content > h2 { margin-top: 48px !important; }
body:not(.pe-member-page) .entry-content > .pe-tint { margin-top: 48px !important; margin-bottom: 48px !important; }
@media (max-width: 760px) {
	body:not(.pe-member-page) .entry-content > h2 { margin-top: 32px !important; }
	body:not(.pe-member-page) .entry-content > .pe-tint { margin-top: 32px !important; margin-bottom: 32px !important; }
}

/* --- 404. A Kadence Pro Element on the replace_404 hook (editable under
   Appearance > Kadence > Elements), so the page is blocks, not a template.
   The grackle is from the brand page's "Austin, used sparingly" set. --- */
/* replace_404 renders unboxed, so the same inset the boxed pages carry is
   added here to keep the H1 on the site's left line: 32px, 8px on phones. */
.pe-404 { max-width: 66ch; padding: 44px 32px 72px; }
.pe-404 .pe-404-mark { margin: 0 0 22px !important; }
.pe-404 .pe-404-mark img { width: 88px; height: 88px; display: block; }
.entry-content .pe-404 h1,
.pe-404 h1 {
	font-family: var(--pe-font-heading);
	font-size: var(--pe-h1) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.015em !important;
	margin: 0 !important;
	text-wrap: balance;
}
.pe-404 .pe-standfirst { margin: 14px 0 0 !important; }
.pe-404 hr.wp-block-separator.pe-bar {
	border: 0 !important;
	opacity: 1;
	width: 44px !important;
	height: 4px;
	background: var(--pe-accent);
	border-radius: 2px;
	margin: 20px 0 28px !important;
}
.pe-404 .pe-cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin: 0 !important; }
.pe-404 .pe-cta-row .wp-block-buttons,
.pe-404 .pe-cta-row p { margin: 0 !important; }
@media (max-width: 767px) { .pe-404 { padding: 40px 8px 48px; } }