/*
Theme Name: Phoenix Homesteads
Theme URI: https://phoenixhomesteads.com
Description: Custom block theme for the Phoenix Homesteads neighborhood association. Warm, earthy heritage design — pine green, clay, sage, and cream.
Version: 0.21.18
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Author: Phoenix Homesteads
Text Domain: phoenix-homesteads
*/

/* Most styling lives in theme.json. A few extras below. */

.wp-block-button__link { font-weight: 500; letter-spacing: .01em; }

/* Soft cards for the document library so member areas feel cohesive */
.document-library-table {
  border-radius: 12px;
}

/* Quick-access cards on the homepage */
.ph-cards .wp-block-column {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--sand);
  border-radius: 12px;
  padding: 1.1rem 1rem;
}
.ph-cards .wp-block-column h3 { margin-top: .4rem; }

/* Nav dropdown (submenu) — readable dark text on a light panel.
   Desktop only: below 600px the nav collapses into the dark pine hamburger
   overlay, where submenu items must stay cream (handled by the block's
   overlayTextColor). Scoping these to ≥600px keeps dark text out of it. */
@media (min-width: 1024px) {
	/* The menu markup tags the dropdown panel with has-pine-dark-background-color
	   + has-cream-color (both !important from WP's preset classes), which renders
	   dark-on-dark. Force a light panel with dark text, beating those classes. */
	.wp-block-navigation .wp-block-navigation__submenu-container {
		background-color: #ffffff !important;
		border: 1px solid var(--wp--preset--color--sand);
		border-radius: 10px;
		padding: 4px 0;
		box-shadow: 0 8px 24px rgba(35, 58, 46, 0.14);
	}
	.wp-block-navigation__submenu-container,
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.wp-block-navigation__submenu-container a,
	.wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		color: var(--wp--preset--color--ink) !important;
	}
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.wp-block-navigation__submenu-container a:hover {
		color: var(--wp--preset--color--clay-dark) !important;
	}
}

/* Home page: even vertical rhythm between the stacked sections. The constrained
   <main> applies a 24px block-gap and the hero Cover adds trailing space, which
   made the hero→chat gap read larger than the gaps below it. Force one uniform
   top margin on every section after the hero (overriding inline margins, the
   block-gap, and any cover trailing space) so all sections sit 2.5rem apart. */
body.home main.is-layout-constrained > * + * {
	margin-top: 2.5rem !important;
	margin-bottom: 0 !important;
}
body.home main.is-layout-constrained > .wp-block-cover {
	margin-bottom: 0 !important;
}

/* Mobile hamburger overlay spacing. The theme sets no root padding, so core's
   overlay gutter (clamp referencing --wp--style--root--padding-left) collapses
   to 0 and items hug the screen edge. Give comfortable gutters, tap-friendly
   rows, a tighter inter-item rhythm, and a modest sub-item indent. */
@media (max-width: 1023.98px) {
	/* Keep the wordmark and hamburger on one compact row. The 300px desktop
	   logo plus the flex gap previously pushed the menu button below it. */
	header .wp-block-group.alignwide {
		flex-wrap: nowrap;
	}
	header .wp-block-site-logo {
		flex: 0 1 240px;
		min-width: 0;
	}
	header .wp-block-site-logo img {
		width: 240px;
		max-width: 100%;
		height: auto;
	}
	header .wp-block-navigation {
		flex: 0 0 auto;
	}
	/* Core switches `overlayMenu: mobile` at 600px, which is too early for
	   this logo plus six-item navigation. Keep the accessible modal menu until
	   the full row actually fits. */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-left: 1.75rem;
		padding-right: 1.75rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 0 !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		margin: 0 !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding-top: 0.35rem !important;
		padding-bottom: 0.35rem !important;
		line-height: 1.3;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		padding-top: 0 !important;
		padding-left: 1.25rem !important;
		padding-right: 0 !important;
	}
}

@media (min-width: 600px) and (max-width: 1023.98px) {
	/* Restore the fixed modal presentation that core limits to phone widths. */
	.wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		position: fixed;
	}
}

/* Board Members photo — crop ~25% off the top, non-destructively. The image is
   2000x1500; a 2000x1125 box (object-fit cover, anchored bottom) trims the top. */
.board-photo img {
	width: 100%;
	aspect-ratio: 2000 / 1125;
	object-fit: cover;
	object-position: bottom;
}

/* ============================================================
   PHA Forum (beta) — the native Reddit-style forum ([ph_forum]).
   Our own markup, so no fighting: everything below is ours.
   ============================================================ */
.phf {
	max-width: 760px;
	margin: 0 auto;
}
.phf-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	border-radius: 12px;
	margin: 0 0 0.7rem;
}
/* Composer */
.phf-composer {
	padding: 1rem 1.1rem;
}
.phf-composer-title,
.phf-composer-body {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	border-radius: 8px;
	padding: 0.6rem 0.8rem;
	font: inherit;
	font-size: 0.95rem;
	background: var(--wp--preset--color--cream, #f6f1e7);
}
.phf-composer-title {
	font-weight: 600;
	margin-bottom: 0.5rem;
}
.phf-composer-title:focus,
.phf-composer-body:focus {
	outline: 2px solid rgba(188, 103, 67, 0.35);
	background: #fff;
}
.phf-composer-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: 0.6rem;
}
.phf-pin-label {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #6b6358);
}
.phf-btn {
	background: var(--wp--preset--color--clay, #bc6743);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.45rem 1.3rem;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}
.phf-btn:hover {
	background: var(--wp--preset--color--clay-dark, #9a5233);
}
/* Topic rows + full topic */
.phf-topic-row,
.phf-topic-full {
	display: flex;
	gap: 0.9rem;
	padding: 0.9rem 1.1rem 0.9rem 0.6rem;
	transition: border-color 0.15s ease;
}
.phf-topic-row {
	cursor: pointer;
}
.phf-topic-row:hover {
	border-color: var(--wp--preset--color--clay, #bc6743);
}
.phf-topic-row.is-pinned {
	border-left: 4px solid var(--wp--preset--color--pine, #2d4a3e);
}
.phf-vote {
	flex: 0 0 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: 0.15rem;
	line-height: 1;
}
.phf-vote button {
	background: none;
	border: 0;
	padding: 3px 8px;
	cursor: pointer;
	color: var(--wp--preset--color--muted, #6b6358);
	font-size: 0.8rem;
	line-height: 1;
}
.phf-vote button:hover,
.phf-vote .phf-vote-up.is-active {
	color: var(--wp--preset--color--clay, #bc6743);
}
.phf-vote .phf-vote-down.is-active {
	color: var(--wp--preset--color--pine, #2d4a3e);
}
.phf-score {
	font-weight: 700;
	font-size: 0.92rem;
	padding: 2px 0;
}
.phf-topic-main {
	flex: 1 1 auto;
	min-width: 0;
}
.phf-topic-title {
	margin: 0 0 0.2rem;
	font-size: 1.15rem;
	line-height: 1.35;
}
.phf-topic-title a {
	color: var(--wp--preset--color--ink, #1a1a18);
	text-decoration: none;
}
.phf-topic-title a:hover {
	color: var(--wp--preset--color--clay-dark, #9a5233);
}
.phf-meta {
	margin: 0 0 0.35rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted, #6b6358);
}
.phf-meta strong {
	font-weight: 600;
}
.phf-badge {
	display: inline-block;
	background: var(--wp--preset--color--clay, #bc6743);
	color: #fff;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 4px;
	padding: 0.1rem 0.4rem;
	vertical-align: 1px;
}
.phf-snippet {
	margin: 0 0 0.45rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink, #1a1a18);
}
.phf-actions {
	margin: 0;
}
.phf-comments-link {
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted, #6b6358);
	text-decoration: none;
	font-weight: 600;
}
.phf-comments-link:hover {
	color: var(--wp--preset--color--clay-dark, #9a5233);
}
.phf-empty {
	color: var(--wp--preset--color--muted, #6b6358);
	text-align: center;
	padding: 1.5rem 0;
}
.phf-back {
	margin: 0 0 0.8rem;
	font-size: 0.88rem;
}
.phf-body {
	font-size: 0.95rem;
	line-height: 1.65;
}
.phf-body p {
	text-align: left !important; /* opt out of the site-wide justify */
}
/* Comments */
.phf-comments-head {
	margin: 1.4rem 0 0.6rem;
	font-size: 1.05rem;
}
.phf-comment-form {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin: 0 0 1rem;
}
.phf-comment-form textarea {
	flex: 1 1 auto;
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	border-radius: 8px;
	padding: 0.55rem 0.75rem;
	font: inherit;
	font-size: 0.9rem;
	background: #fff;
}
.phf-comment {
	position: relative;
	padding: 0.5rem 0 0.2rem 0;
	margin: 0 0 0.2rem;
}
.phf-comment-nested {
	margin-left: 1.1rem;
	padding-left: 1rem;
	border-left: 2px solid var(--wp--preset--color--sand, #c8c0b0);
}
.phf-comment-head {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 0.25rem;
}
.phf-comment-head .avatar {
	border-radius: 50%;
	width: 28px;
	height: 28px;
}
.phf-comment-author {
	font-weight: 600;
	font-size: 0.88rem;
}
.phf-comment-time {
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted, #6b6358);
}
.phf-comment-body {
	font-size: 0.92rem;
	line-height: 1.6;
}
.phf-comment-body p {
	margin: 0 0 0.4rem;
	text-align: left !important;
}
.phf-reply-toggle {
	background: none;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--muted, #6b6358);
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
}
.phf-reply-toggle:hover {
	color: var(--wp--preset--color--clay-dark, #9a5233);
}
.phf-reply-slot {
	margin-top: 0.4rem;
}
/* Inline (horizontal) vote pill for comments */
.phf-vote-inline {
	position: static;
	transform: none;
	display: inline-flex !important;
	flex-direction: row;
	align-items: center;
	gap: 2px;
	padding: 0;
}
.phf-vote-inline .phf-score {
	font-size: 0.8rem;
	padding: 0 2px;
}
.phf-vote-inline button {
	padding: 2px 4px;
	font-size: 0.7rem;
}

/* Polls */
.phf-poll {
	margin-top: 0.9rem;
	max-width: 480px;
}
.phf-poll-opt {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	border-radius: 8px;
	background: #fff;
	padding: 0.5rem 0.8rem;
	margin: 0 0 0.4rem;
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
	overflow: hidden;
}
.phf-poll-opt:hover {
	border-color: var(--wp--preset--color--clay, #bc6743);
}
.phf-poll-opt.is-mine {
	border-color: var(--wp--preset--color--clay, #bc6743);
	box-shadow: 0 0 0 1px var(--wp--preset--color--clay, #bc6743);
}
.phf-poll-bar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: var(--wp--preset--color--sage-soft, #dde6d7);
	z-index: 0;
	transition: width 0.3s ease;
}
.phf-poll-label,
.phf-poll-count {
	position: relative;
	z-index: 1;
}
.phf-poll-count {
	font-weight: 700;
	color: var(--wp--preset--color--muted, #6b6358);
}
.phf-poll-total {
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted, #6b6358);
	margin: 0.2rem 0 0;
}
.phf-poll-chip {
	font-size: 0.78rem;
	color: var(--wp--preset--color--pine, #2d4a3e);
	font-weight: 600;
	margin-left: 0.7rem;
}
.phf-poll-details {
	margin-top: 0.5rem;
}
.phf-poll-details summary {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #6b6358);
	cursor: pointer;
	margin-bottom: 0.4rem;
}
/* Street flair */
.phf-flair {
	display: inline-block;
	margin-left: 0.4rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--wp--preset--color--pine, #2d4a3e);
	background: var(--wp--preset--color--sage-soft, #dde6d7);
	border-radius: 999px;
	padding: 0.06rem 0.5rem;
	vertical-align: 1px;
}
/* Edit / delete own content */
.phf-edit-toggle,
.phf-comment-delete {
	background: none;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--muted, #6b6358);
	font-size: 0.78rem;
	cursor: pointer;
}
.phf-edit-toggle:hover,
.phf-comment-delete:hover,
a.phf-delete:hover {
	color: #9a3520;
}
a.phf-delete {
	color: var(--wp--preset--color--muted, #6b6358);
	font-size: 0.8rem;
	text-decoration: none;
}
.phf-edit-form {
	margin: 0.8rem 0;
}
.phf-edit-form .phf-composer-title,
.phf-edit-form .phf-composer-body {
	margin-bottom: 0.5rem;
}

/* Forum toolbar: search + sort tabs */
.phf-toolbar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.9rem;
	flex-wrap: wrap;
}
.phf-search {
	flex: 1 1 220px;
}
.phf-search input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	font: inherit;
	font-size: 0.9rem;
	background: #fff;
}
.phf-sorts {
	display: flex;
	gap: 0.25rem;
}
.phf-sort {
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted, #6b6358);
	text-decoration: none;
}
.phf-sort:hover {
	color: var(--wp--preset--color--clay-dark, #9a5233);
}
.phf-sort.is-active {
	background: var(--wp--preset--color--pine, #2d4a3e);
	color: #fff;
}
/* Create post: button under the feed, composer expands above it */
.phf-create-wrap {
	margin-top: 0.9rem;
	text-align: center;
}
.phf-create-wrap .phf-composer {
	text-align: left;
	margin-top: 0.8rem;
}
/* Feed thumbnails */
.phf-topic-row.has-thumb .phf-thumb {
	flex: 0 0 84px;
	align-self: center;
}
.phf-thumb img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
/* Attachments in topics */
.phf-attachments {
	margin-top: 0.8rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.phf-image img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}
.phf-file-chip {
	display: inline-block;
	background: var(--wp--preset--color--cream, #f6f1e7);
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink, #1a1a18);
	text-decoration: none;
}
.phf-attach-label {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #6b6358);
	cursor: pointer;
	margin-right: auto;
}
.phf-attach-label:hover {
	color: var(--wp--preset--color--clay-dark, #9a5233);
}
.phf-attach-names {
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted, #6b6358);
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Mentions */
.phf-mention {
	color: var(--wp--preset--color--clay-dark, #9a5233);
	font-weight: 600;
	background: rgba(188, 103, 67, 0.08);
	border-radius: 4px;
	padding: 0 3px;
}
.phf-ac {
	position: absolute;
	z-index: 50;
	background: #fff;
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}
.phf-ac-opt {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 0.45rem 0.8rem;
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
}
.phf-ac-opt:hover {
	background: var(--wp--preset--color--sage-soft, #dde6d7);
}
/* Report + comment action row */
.phf-comment-actions {
	display: flex;
	gap: 0.8rem;
	align-items: center;
}
.phf-report {
	background: none;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--muted, #6b6358);
	font-size: 0.78rem;
	cursor: pointer;
}
.phf-report:hover {
	color: #9a3520;
}
.phf-report:disabled {
	color: var(--wp--preset--color--muted, #6b6358);
	cursor: default;
}

@media (max-width: 599.98px) {
	.phf-topic-row,
	.phf-topic-full {
		padding-left: 0.25rem;
	}
}

/* Member account views (/join/subscriptions/, /join/profile/): constrain and
   centre every block to the same 520px measure used by the forms elsewhere, so
   the nav buttons, subscription table, and profile fields share one edge. */
nav.pms-account-navigation,
.pms-account-message,
.pms-account-subscription-details-table,
.pms-account-subscription-details,
form.pms-edit-profile-form,
.pms-edit-profile-form,
.pha-avatar-picker,
.pha-avatar-current,
.phf-flair-optin {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}
.pms-account-subscription-details-table {
	width: 100%;
}

/* Member account tabs (Subscriptions, Edit Profile, Logout) as buttons.
   PMS's own block-theme CSS sets `.pms-account-navigation ul {justify-content:
   space-between}`, which the 1140px content width stretched into a too-wide row.
   This selector (nav.pms-account-navigation ul) is more specific, so it packs the
   buttons to the left with a tight gap — no !important needed. */
nav.pms-account-navigation ul,
ul:has( > .pms-account-navigation-link ) {
	list-style: none;
	padding: 0;
	margin: 0 0 1.75rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: .5rem;
}
.pms-account-navigation-link {
	display: inline-block;
	list-style: none;
	margin: 0;
}
/* Member dues/card history. Reimbursements and Zelle remain on Expenses. */
.pms-account-navigation-link--payments {
	display: inline-block;
}
/* Analytics is reached from the Members dropdown, not the account tab row. */
.pms-account-navigation-link--analytics {
	display: none;
}
.pha-analytics-view nav.pms-account-navigation {
	display: none;
}
.pha-analytics-view .pha-member-analytics {
	margin-top: 1.25rem;
}
.pha-analytics-view .pha-analytics-note {
	margin-top: 0;
}
.pms-account-navigation-link a {
	display: inline-block;
	background: var(--wp--preset--color--pine);
	color: var(--wp--preset--color--cream) !important;
	padding: .55rem 1.15rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 500;
	line-height: 1.2;
}
.pms-account-navigation-link a.pms-account-navigation-link--active {
	background: var(--wp--preset--color--clay);
}
.pms-account-navigation-link a:hover {
	background: var(--wp--preset--color--pine-dark);
	color: var(--wp--preset--color--cream) !important;
}

/* Member payment history and the Jake/Penny-only analytics tab. */
#pms-payment-history,
.pms-no-payments,
.pha-member-analytics {
	width: min(100%, 920px);
	margin-left: auto;
	margin-right: auto;
}
#pms-payment-history {
	border-collapse: collapse;
}
#pms-payment-history th,
#pms-payment-history td {
	padding: .65rem .75rem;
	border-bottom: 1px solid var(--wp--preset--color--sand, #eae0cd);
	text-align: left;
}
.pha-member-analytics h2,
.pha-member-analytics h3 {
	color: var(--wp--preset--color--pine, #2c4a3b);
}
.pha-analytics-note {
	color: var(--wp--preset--color--muted, #6b6358);
}
.pha-analytics-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .75rem;
	margin: 1.25rem 0 2rem;
}
.pha-analytics-card {
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--sand, #eae0cd);
	border-radius: 10px;
	background: #fff;
}
.pha-analytics-card strong,
.pha-analytics-card span {
	display: block;
}
.pha-analytics-card strong {
	font-family: Fraunces, Georgia, serif;
	font-size: 1.65rem;
	color: var(--wp--preset--color--clay-dark, #8f4d31);
}
.pha-analytics-card span {
	margin-top: .2rem;
	font-size: .85rem;
	color: var(--wp--preset--color--muted, #6b6358);
}
.pha-analytics-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}
.pha-analytics-table-wrap {
	overflow-x: auto;
}
.pha-analytics-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}
.pha-analytics-table th,
.pha-analytics-table td {
	padding: .65rem .75rem;
	border-bottom: 1px solid var(--wp--preset--color--sand, #eae0cd);
	text-align: left;
}
.pha-analytics-table thead th,
.pha-analytics-table tfoot th {
	background: var(--wp--preset--color--sage-soft, #dde6d7);
}
.pha-payment-status {
	display: inline-block;
	padding: .15rem .5rem;
	border-radius: 999px;
	background: #eee;
	font-size: .8rem;
	font-weight: 600;
}
.pha-payment-status--completed {
	background: #e7f3ec;
	color: #13603b;
}
@media (max-width: 700px) {
	.pha-analytics-cards,
	.pha-analytics-grid {
		grid-template-columns: 1fr 1fr;
	}
	#pms-payment-history {
		display: block;
		overflow-x: auto;
	}
}
@media (max-width: 460px) {
	.pha-analytics-cards,
	.pha-analytics-grid {
		grid-template-columns: 1fr;
	}
}

/* "Log in with WordPress.com" SSO button (injected above the [pms-login] form). */
.pha-sso {
	max-width: none;
	width: 100%;
	margin: 0 0 1.5rem;
	align-self: stretch;
}
.pha-sso__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 1rem;
	background: #3858e9;
	color: #ffffff;
	border-radius: 8px;
	font-weight: 500;
	text-decoration: none;
}
.pha-sso__btn:hover {
	background: #2c45c4;
	color: #ffffff;
	text-decoration: none;
}
.pha-sso__logo {
	flex: 0 0 auto;
}
.pha-sso__or {
	display: flex;
	align-items: center;
	margin: 1rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
}
.pha-sso__or::before,
.pha-sso__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--sand);
}
.pha-sso__or span {
	padding: 0 0.75rem;
}

/* Member-only nav cluster. The member features (Forum, Document Archive,
   Membership) sit last in the nav markup; on desktop they're pushed to the far
   right, set off by a thin divider, and their link text uses the clay accent
   (the same orange as the post titles) so the members area reads as a distinct,
   tasteful group. Scoped to >=600px so the dark pine mobile overlay (where they
   simply appear at the bottom of the list) stays clean. */
@media (min-width: 600px) {
	/* Push the cluster to the far right and divide it from the public links. */
	.wp-block-navigation .nav-member-start {
		margin-left: auto;
		padding-left: 1.2rem;
		border-left: 1px solid rgba(246, 241, 231, 0.25);
	}

	/* Clay accent + bold on the member link text (label + submenu chevron inherit
	   currentColor). !important beats the navigation block's cream textColor. */
	.wp-block-navigation .nav-member > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--clay) !important;
		font-weight: 700;
	}
	.wp-block-navigation .nav-member > .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--cream) !important;
	}
}

/* Members is the last item in the bar: open its dropdown toward the left so it
   never runs off the right edge of the window. */
@media (min-width: 600px) {
	.wp-block-navigation .nav-member > .wp-block-navigation__submenu-container {
		left: auto !important;
		right: 0 !important;
	}
}

/* Board shortcut: MyPHNA first inside Members, set apart by clay text only. */
.wp-block-navigation__submenu-container .phm-nav > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--clay) !important;
	font-weight: 700;
}
.wp-block-navigation__submenu-container .phm-nav > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--clay-dark) !important;
}

/* Forum activity badge: small red counter above the Members link (logged-in
   users, injected by pha-forum.php when there are posts in the last 7 days). */
.wp-block-navigation .nav-member > .wp-block-navigation-item__content {
	position: relative;
}
.wp-block-navigation .phf-badge {
	position: absolute;
	top: -0.7em;
	right: -1em;
	box-sizing: border-box;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: #c62828;
	color: #ffffff;
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: 0;
	pointer-events: none;
}
/* Inline variant: the same red count sitting after the Forum item in the dropdown. */
.wp-block-navigation .phf-badge--inline {
	position: static;
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.4em;
	top: auto;
	right: auto;
}

/* Login form: drop wpForo/PMS's built-in "Register |" link (and its separator) —
   the branded login page provides its own "Register here" toggle below. */
.pms-form a.register,
.pms-form a.register + .separator {
	display: none;
}

/* ---- v0.7.0: footer (email + map + signup), Keep-in-touch form, home
   events cards ---- */

/* Footer columns stack on mobile; the map fills its column. */
.ph-footer-map iframe {
	width: 100%;
	height: 220px;
	border: 0;
	border-radius: 10px;
	display: block;
}
.ph-footer-mail a {
	color: #fff;
	text-decoration: underline;
}
/* Bottom legal row: one full-width divider on the flex ROW (per-paragraph
   borders would render as two short lines with a gap between). */
.ph-footer-bottom {
	border-top: 1px solid rgba(246, 241, 231, 0.18);
	padding-top: 1rem;
}
.ph-footer-legal {
	opacity: 0.75;
}
/* Credit line: small white mark beside "Built by Gigacore". */
.ph-footer-credit {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}
.ph-footer-credit img {
	width: 22px;
	height: auto;
	opacity: 0.75;
}
.ph-footer-credit p {
	margin: 0;
}
/* All footer links: white, bold, underlined. */
footer .ph-footer-legal a,
footer .ph-footer-mail a {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
}

/* Keep-in-touch signup ([ph_newsletter]). Neutral by default (works on the
   dark footer); .ph-nl-onlight scopes a boxed variant for light pages. */
.ph-nl h3 {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 1.15rem;
	color: inherit;
}
.ph-nl-sub {
	font-size: 0.85rem;
	margin: 0 0 0.75rem;
	opacity: 0.85;
}
.ph-nl-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.ph-nl-form input[type="text"],
.ph-nl-form input[type="email"] {
	flex: 1 1 140px;
	min-width: 0;
	padding: 0.55rem 0.75rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	font: inherit;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink, #1a1a18);
	background: #fff;
}
.ph-nl-form button {
	background: var(--wp--preset--color--clay, #bc6743);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 0.55rem 1.1rem;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}
.ph-nl-form button:hover {
	background: var(--wp--preset--color--clay-dark, #9a5233);
}
.ph-nl-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 0;
	height: 0;
	opacity: 0;
}
.ph-nl-notice {
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	font-size: 0.9rem;
	margin: 0 0 0.75rem;
}
.ph-nl-notice--ok {
	background: var(--wp--preset--color--sage-soft, #dde6d7);
	color: var(--wp--preset--color--ink, #1a1a18);
}
.ph-nl-notice--err {
	background: #f3d9cf;
	color: #7a3520;
}
.ph-nl-onlight .ph-nl {
	background: var(--wp--preset--color--sage-soft, #dde6d7);
	border-radius: 12px;
	padding: 1.5rem 1.75rem;
	max-width: 680px;
}

/* "Continue with Google" (Nextend) — sized and shaped to match the
   WordPress.com button above it (.pha-sso__btn). */
.ph-google-login {
	max-width: 520px;
	margin: 0 auto 0.75rem;
}
.ph-google-login .nsl-container .nsl-container-buttons {
	display: block !important; /* beats Nextend's inline-grid, which shrink-wraps */
	width: 100%;
	padding: 0;
}
.ph-google-login .nsl-container .nsl-container-buttons a {
	display: block;
	width: 100%;
}
.ph-google-login .nsl-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	min-height: 46px;
	border-radius: 8px;
	box-shadow: none;
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	cursor: pointer;
}
.ph-google-login .nsl-button:hover {
	background: var(--wp--preset--color--cream, #f6f1e7) !important;
}
.ph-google-login .nsl-button-label-container {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a18);
	margin: 0;
	padding: 0 12px 0 0;
}

/* "One last step" address-completion card (Google sign-ups without an address) */
.ph-addr-card {
	max-width: 520px;
	margin: 0 auto 1.75rem;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--sage-soft, #dde6d7);
	border-radius: 12px;
}
.ph-addr-card h3 {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--serif, serif);
}
.ph-addr-card p {
	margin: 0 0 0.75rem;
	font-size: 0.92rem;
}
.ph-addr-card .pms-field-address input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.55rem 0.75rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	font: inherit;
}
.ph-addr-card__btn {
	background: var(--wp--preset--color--clay, #bc6743);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 0.55rem 1.2rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	margin-top: 0.5rem;
}
.ph-addr-card__btn:hover {
	background: var(--wp--preset--color--clay-dark, #9a5233);
}

/* PMS forms sit in one centered 460px column — fields, plan, payment card,
   and the finish-registration banner all share the same axis as the Payment
   Details card. (The login form keeps its own tighter 360px cap further down.) */
.pms-form {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}
.pms-form .pms-field {
	max-width: 520px;
}
.pms-form .pms-field input[type="text"],
.pms-form .pms-field input[type="email"],
.pms-form .pms-field input[type="password"],
.pms-form .pms-field input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
}

/* Payment section (PMS register + subscriptions forms) — themed card around
   the Stripe Payment Element; the element's own colors come from the
   pms_stripe_connect_elements_styling filter. */
#pms-stripe-connect {
	background: #fff;
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	border-radius: 12px;
	padding: 1.1rem 1.25rem 1.25rem;
	list-style: none;
	margin: 1.25rem 0;
	max-width: 460px;
	box-sizing: border-box; /* outer edge flush with the 460px field column */
}
#pms-stripe-connect .pms-field-type-heading h3 {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--serif, serif);
	color: var(--wp--preset--color--pine, #2d4a3e);
	font-size: 1.2rem;
}
.pms-form .pms-form-submit,
.pms-form input[type="submit"],
.pms-form button[type="submit"] {
	display: inline-block;
	background: var(--wp--preset--color--clay, #bc6743);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 0.65rem 1.5rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.pms-form .pms-form-submit:hover,
.pms-form input[type="submit"]:hover,
.pms-form button[type="submit"]:hover {
	background: var(--wp--preset--color--clay-dark, #9a5233);
}
/* Cancel registration — quiet secondary button beside the submit */
.ph-cancel-btn {
	display: inline-block;
	margin-left: 0.6rem;
	padding: 0.6rem 1.3rem;
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	border-radius: 8px;
	color: var(--wp--preset--color--muted, #6b6358);
	text-decoration: none;
	font-weight: 500;
	vertical-align: middle;
}
.ph-cancel-btn:hover {
	background: #fff;
	color: var(--wp--preset--color--ink, #1a1a18);
}

/* Centered page titles, site-wide. Scoped to the H1 title block (pages and
   single posts) — H2 titles inside query loops stay left-aligned. */
main h1.wp-block-post-title {
	text-align: center;
}
body.single main .wp-block-post-date {
	text-align: center;
}

/* Register form: address type-ahead dropdown (assets/register.js) */
.pms-field-address {
	position: relative;
}
.ph-addr-suggest {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 40;
	background: #fff;
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.ph-addr-suggest:empty {
	display: none;
}
.ph-addr-opt {
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink, #1a1a18);
}
.ph-addr-opt:hover {
	background: var(--wp--preset--color--sage-soft, #dde6d7);
}

/* Home page: next-three-events cards ([ph_home_events]) */
.ph-events3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 1.25rem;
}
@media (max-width: 700px) {
	.ph-events3 {
		grid-template-columns: 1fr;
	}
}
.ph-events3-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--sand, #c8c0b0);
	border-radius: 12px;
	padding: 1.1rem 1.25rem;
}
.ph-events3-when {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--clay, #bc6743);
	margin: 0 0 0.3rem;
	font-weight: 600;
}
.ph-events3-card h3 {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
}
.ph-events3-loc {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #6b6358);
	margin: 0 0 0.3rem;
}
.ph-events3-desc {
	font-size: 0.85rem;
	margin: 0;
}
.ph-events3-more {
	margin-top: 0.9rem;
	font-size: 0.9rem;
}

/* Login page: make the "Log in with WordPress.com" button the same width as the
   username/email + password fields. The PMS login form ships narrow size="20"
   inputs; constrain the form and the SSO button to one width and let the fields
   fill it, so the button and inputs line up. */
.pha-sso,
.pha-sso__btn,
#pms_login {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}
#pms_login input[type="text"],
#pms_login input[type="email"],
#pms_login input[type="password"] {
	width: 100%;
	box-sizing: border-box;
}

/* Sign-in gates and single-line notices (forum, expenses, welcome) render as a
   lone paragraph under the centered page title — center them to match. Pages
   with real content have more than one block, so this never touches articles. */
.entry-content > p:first-of-type:last-child:not(.ph-auth-switch) {
	text-align: center;
}
/* The login/register toggle under the auth forms hugs the form's left edge,
   matching "Lost your password?". */
.ph-auth-switch {
	text-align: left;
}

/* Contact form: hold it to the same 520px centered measure as every other
   form on the site (join, donations, account views). */
main .wp-block-jetpack-contact-form {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   Gallery timeline — vertical rail, newest at top, oldest at the bottom.
   ============================================================ */
.ph-timeline {
	position: relative;
	padding-left: 2.25rem;
}
.ph-timeline::before {
	content: "";
	position: absolute;
	left: 0.55rem;
	top: 0.4rem;
	bottom: 0.4rem;
	width: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--sand);
}
.ph-tl-item {
	position: relative;
	margin-bottom: 3.5rem;
}
.ph-tl-item h2,
.ph-tl-label {
	margin-bottom: 1.4rem;
}
/* Uniform photo grids inside timeline entries. A lone image on the last row
   keeps its column width instead of stretching across the whole grid. */
.ph-timeline .ph-tl-grid figure.wp-block-image:not(#individual-image) {
	flex-grow: 0; /* the :not(#…) mirrors core's specificity hack so this wins */
}
.ph-timeline .ph-tl-grid .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	width: 100%;
	height: auto;
}
.ph-tl-item--submissions {
	display: block;
}
.ph-tl-item--submissions .ph-tl-photo {
	display: inline-block;
	width: calc(50% - 0.5rem);
	vertical-align: top;
}
.ph-tl-item--submissions .ph-tl-photo img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}
.ph-tl-item h2,
.ph-tl-label {
	position: relative;
	margin-top: 0;
}
.ph-tl-item h2::before,
.ph-tl-label::before {
	content: "";
	position: absolute;
	left: -2.25rem;
	top: 0.45em;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--wp--preset--color--clay);
	border: 3px solid var(--wp--preset--color--cream);
	margin-left: 0.05rem;
}
.ph-tl-photo {
	margin: 0 0 1.25rem;
}
.ph-tl-photo img {
	border-radius: 12px;
}
.ph-tl-credit {
	color: var(--wp--preset--color--muted);
	font-size: 0.85em;
}
/* Gallery call-to-action row: "Want to see more history?" and "Share your
   photos" share one columns block (.ph-gallery-row), equal height, both
   centred. Below 782px the columns stack. */
.ph-gallery-row .wp-block-column { display: flex; }
.ph-gallery-row .ph-gallery-cta,
.ph-gallery-row .ph-gal-submit {
	flex: 1 1 auto;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 0;
}
.ph-gal-submit {
	background: #fff;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 12px;
	padding: 2.5rem 1.5rem;
	margin: 2.5rem 0 0;
	text-align: center;
}
.ph-gal-submit h2 { margin-top: 0; }
/* Same :not() chain as the column justify rule above, later in source: wins. */
main .wp-block-column .ph-gal-submit p:not(.has-text-align-right),
.ph-gal-submit > p,
.ph-gal-submit label { text-align: center; }
.ph-gal-submit form { max-width: 420px; margin: 0 auto; }
.ph-gal-submit form p { margin: 0.5rem 0; }
.ph-gal-submit form input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	font: inherit;
	text-align: center;
}
.ph-gal-submit form input[type="file"] { max-width: 100%; font: inherit; font-size: 0.9em; }

/* Newsletters page: the latest issue embedded above the archive list. */
.ph-nl-latest__meta { margin: 0 0 0.75rem; }
.ph-nl-embed {
	display: block;
	width: 100%;
	min-height: 80vh;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 12px;
	background: #fff;
}
/* Same shape as the theme's block buttons (.wp-element-button supplies colour,
   radius, padding); this only resets the <button> chrome. */
.ph-gal-btn { border: 0; cursor: pointer; font: inherit; font-weight: 500; }
.ph-gal-btn:hover { background: var(--wp--preset--color--clay-dark); }
.ph-gal-notice {
	background: var(--wp--preset--color--sage-soft);
	border-radius: 8px;
	padding: 0.6rem 0.9rem;
}
.ph-gal-notice--error { background: #f6dcd3; }

/* Home hero: left-to-right scrim — solid pine on the text side fading to
   clear over the sign on the right, so nothing blocks the sign. */
.ph-hero-right .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(90deg,
		rgba(35, 58, 46, 0.92) 0%,
		rgba(35, 58, 46, 0.78) 28%,
		rgba(35, 58, 46, 0.35) 48%,
		rgba(35, 58, 46, 0.05) 66%,
		rgba(35, 58, 46, 0) 100%) !important;
}
/* Keep the hero text in the scrim's dark half so it never overlaps the sign.
   The cover centers its inner container with flex, so pin it left explicitly. */
.ph-hero-right {
	justify-content: flex-start;
}
.ph-hero-right .wp-block-cover__inner-container {
	max-width: 40%;
	margin-left: 0 !important;
	margin-right: auto !important;
}
@media (max-width: 781px) {
	.ph-hero-right .wp-block-cover__inner-container { max-width: 70%; }
}

@media (max-width: 599.98px) {
	/* Give the mobile headline enough measure to read as a phrase instead of
	   four isolated lines; the darker scrim keeps it legible over the sign. */
	.ph-hero-right .wp-block-cover__inner-container {
		max-width: 100%;
	}
	.ph-hero-right h1 {
		font-size: clamp(2rem, 10vw, 2.4rem) !important;
	}

	/* Core preserves desktop gallery column counts at narrow widths. Inside
	   the timeline that made the lone Movie Night image and archive photos
	   unnecessarily tiny. Use one readable photo per row on phones. */
	.ph-timeline .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image),
	.ph-tl-item--submissions .ph-tl-photo {
		width: 100% !important;
	}
	.ph-tl-item h2,
	.ph-tl-label {
		font-size: 1.8rem;
		line-height: 1.2;
	}
}

/* Event links: home cards + calendar chips link to /events/… pages */
.ph-events3-card h3 a {
	color: inherit;
	text-decoration: none;
}
.ph-events3-card h3 a:hover {
	color: var(--wp--preset--color--clay-dark);
	text-decoration: underline;
}
a.ph-cal-chip {
	text-decoration: none;
}
a.ph-cal-chip:hover {
	filter: brightness(1.12);
}

/* News archive: thumbnail beside text, text wraps in remaining space */
.ph-news-item > .wp-block-group {
	flex: 1 1 320px;
	min-width: 0;
}