/*
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 {
	--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;
}
.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;
	/* Mockup: h1::after has margin-top:16px (space between text and the
	   accent bar) — 20px here was 4px off from spec. */
	padding-bottom: 16px;
}
.entry-hero .entry-title::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 4px;
	background: var(--pe-accent);
	border-radius: 2px;
}

.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 — Kadence's custom_logo defaults to 64px; the mark reads better small. */
.custom-logo {
	width: 36px !important;
	height: 36px !important;
}

/* Header — the mockup's bottom border + filled-pill current nav item,
   applied to Kadence's real header/nav markup (not our own mockup markup). */
.site-main-header-wrap.site-header-row-container {
	border-bottom: 3px solid var(--pe-core) !important;
}
.main-navigation .primary-menu-container > ul > li.menu-item {
	font-size: 13.5px;
}
/* "My Account" is a dropdown (menu-item-has-children) and always keeps its
   filled pill — it isn't "the current page" the way a single link is, it's
   the container for several account-related pages. Plain nav items get a
   lighter active-state indicator (underline) instead, only when actually
   viewed, using WordPress's own current-page classes. */
.main-navigation .primary-menu-container > ul > li.menu-item.menu-item-has-children > a {
	color: #fff !important;
	background: var(--pe-accent);
	padding: 5px 12px !important;
	border-radius: var(--pe-radius);
	font-weight: 700;
}
.main-navigation .primary-menu-container > ul > li.menu-item.menu-item-has-children {
	margin-left: var(--pe-space-sm);
}
/* .pe-cta (the "Request Access" button) keeps its own white-on-teal
   styling always, the same way .menu-item-has-children ("My Account")
   does — it's a call-to-action button, not a plain nav link, so it should
   never pick up the active-page styling meant for plain links. Landing on
   /register/ was making its own text unreadable against its own button
   background before this exclusion was added. Bold + color only for the
   active plain nav item otherwise — no underline. */
.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 {
	color: var(--pe-accent-deep) !important;
	font-weight: 700;
}
.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) !important;
	color: #fff !important;
	border-radius: var(--pe-radius) !important;
	box-shadow: none !important;
	/* Mockup's .pe-btn spec exactly — was previously unset and relying on
	   Kadence's own default button padding/size, never actually verified
	   against spec until this numeric comparison pass. */
	padding: 9px 16px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
}
.wp-block-button .wp-block-button__link:hover,
.kt-blocks-button-link:hover {
	background: 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) !important;
	border-color: var(--pe-accent) !important;
	color: #fff !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-deep) !important;
	border-color: var(--pe-accent-deep) !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;
}
.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;
	border: 1px solid var(--pe-line) !important;
	border-radius: var(--pe-radius) !important;
	padding: 10px 12px !important;
}
.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) !important;
	color: #fff !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-deep) !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; }