/*
 * GCN Directory — site chrome (header and footer).
 *
 * The site runs two headers and two footers: templates 19 and 317 on ordinary
 * pages, and 9080 and 9050 on every GeoDirectory page. They were built at
 * different times and drifted — different heights, different nav alignment, a
 * hard black rule under one of them, and a CTA teal that predates the palette.
 *
 * This makes all four read as one system by styling the shared Bricks chrome
 * ids (#brx-header, #brx-footer) and the nav classes both headers use, so a
 * visitor moving between the blog and the directory sees one site. Colour comes
 * from the tokens, which resolve to the GCN palette in the Bricks Style Manager.
 *
 * Structural differences are kept on purpose: the directory header carries a
 * location switcher and an "Add listing" button that mean nothing on an About
 * page. Only their presentation is unified.
 */

/* ==========================================================================
   Header
   ========================================================================== */

#brx-header {
	position: relative;
	background: var(--gcn-surface);
	/* The template drew a hard near-black rule. A hairline plus a soft drop
	   shadow lifts the header off the page instead of fencing it in, and gives
	   the white header an edge against a white page below it. */
	box-shadow: 0 1px 2px rgba(23, 43, 77, 0.04), 0 4px 16px rgba(23, 43, 77, 0.06);
	z-index: 100;
}

/*
 * The admin bar's 32px, counted once.
 *
 * Bricks positions its sticky header with `position: fixed` and clears the
 * admin bar with
 *   body.bricks-is-frontend.admin-bar #brx-header.brx-sticky { top: var(--wp-admin--admin-bar--height) }
 * which is right for a fixed element. The rule above makes this header static
 * instead, and on a relatively positioned element `top` shifts it down while
 * leaving its original space behind — so the bar was cleared twice: once by
 * WordPress's own html { margin-top: 32px }, once again here. The result was a
 * 32px empty strip between the admin bar and the header, visible only to
 * logged-in users.
 *
 * The selector carries one more element than Bricks' own so it wins on
 * specificity rather than on load order, which enqueue priority does not
 * guarantee.
 */
html body.bricks-is-frontend.admin-bar #brx-header.brx-sticky {
	top: 0;
}

/* The same brand rule that edges the footer, on the header's bottom edge — the
   two boundaries between the chrome and the page. It replaces the grey hairline
   rather than sitting under it, so the edge stays a single line. */
#brx-header::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--gcn-brand-rule);
	pointer-events: none;
}

#brx-header > .brxe-section {
	padding-block: var(--gcn-space-4);
	background: transparent;
}


/* Deeper once the page is scrolled under it. */
#brx-header.brx-sticky.scrolling:not(.slide-up) {
	box-shadow: 0 1px 2px rgba(23, 43, 77, 0.06), 0 10px 28px rgba(23, 43, 77, 0.12);
}

#brx-header.brx-sticky.scrolling:not(.slide-up) > .brxe-section {
	box-shadow: none;
}

/*
 * Hold the header's height while Bricks plays its sticky animation.
 *
 * THE SYMPTOM
 * "When we open some fields the page is shaking, and when I scroll the page
 * keeps going back to the top." Worst on the long add-listing forms, but the
 * header does it on every page: the document's height flickered between 2562
 * and 2653 pixels several times a second, and the scroll position rode up and
 * down with it.
 *
 * THE CAUSE
 * The header is marked sticky in Bricks, and Bricks animates a sticky header
 * by hiding it above the viewport: `.brx-sticky.sliding { overflow: hidden }`
 * while it moves, `.slide-up { transform: translateY(-101%) }` once it is
 * away. Both are harmless on the `position: fixed` element Bricks intends,
 * because a fixed element is out of the document's flow.
 *
 * This header is `position: relative` (see the admin-bar note above), so it is
 * IN the flow — and `overflow: hidden` collapses it to nothing. Every time
 * Bricks added `sliding` the page lost the header's 90 pixels; the browser
 * moved the scroll to compensate; the new scroll position made Bricks take the
 * class off again; the page grew back. That loop is the shake, and the drift
 * towards the top is where it leaves the reader.
 *
 * THE FIX
 * Leave the header its box. The slide-away animation is meaningless for a
 * header that scrolls off with the page anyway, so neither the collapse nor
 * the transform is wanted here.
 */
#brx-header.brx-sticky.sliding,
#brx-header.brx-sticky.slide-up {
	overflow: visible;
	transform: none;
}

.header-logo img,
#brx-header .bricks-site-logo,
#brx-header .brxe-logo img,
#brx-header .custom-logo {
	display: block;
	width: auto;
	height: 55px;
	max-height: 55px;
	object-fit: contain;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition: opacity var(--gcn-duration) var(--gcn-ease);
}

.header-logo:hover img {
	opacity: 0.82;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

#brx-header .brx-nav-nested-items > li > a,
#brx-header .brxe-text-link,
#brx-header .nav-link {
	font-size: var(--gcn-text-base);
	font-weight: var(--gcn-weight-medium);
	color: var(--gcn-text-soft);
	text-decoration: none;
	transition: color var(--gcn-duration) var(--gcn-ease);
}

#brx-header .brx-nav-nested-items > li > a:hover,
#brx-header .brx-submenu-toggle > a:hover,
#brx-header .nav-link:hover {
	color: var(--gcn-brand-strong);
}

#brx-header .brx-submenu-toggle > a {
	font-size: var(--gcn-text-base);
	font-weight: var(--gcn-weight-medium);
	color: var(--gcn-text-soft);
	text-decoration: none;
}

/* Hover and current page both draw the same underline, so the nav has one
   visual language rather than a colour change on one and nothing on the other. */
#brx-header .brx-nav-nested-items > li > a,
#brx-header .brx-submenu-toggle > a {
	position: relative;
	padding-block: 6px;
}

#brx-header .brx-nav-nested-items > li > a::after,
#brx-header .brx-submenu-toggle > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--gcn-brand);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--gcn-duration) var(--gcn-ease);
}

#brx-header .brx-nav-nested-items > li > a:hover::after,
#brx-header .brx-submenu-toggle:hover > a::after {
	transform: scaleX(1);
}

/* Current page. Bricks marks it on the <li>. */
#brx-header .brx-nav-nested-items > li.current-menu-item > a,
#brx-header .brx-nav-nested-items > li.current_page_item > a {
	color: var(--gcn-brand-strong);
	font-weight: var(--gcn-weight-semibold);
}

#brx-header .brx-nav-nested-items > li.current-menu-item > a::after,
#brx-header .brx-nav-nested-items > li.current_page_item > a::after {
	transform: scaleX(1);
}

/* Dropdown panels. */
#brx-header .brx-dropdown-content {
	padding: var(--gcn-space-2);
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-md);
	box-shadow: var(--gcn-shadow-lg);
}

#brx-header .brx-dropdown-content a {
	display: block;
	padding: var(--gcn-space-2) var(--gcn-space-3);
	font-size: var(--gcn-text-base);
	color: var(--gcn-text-soft);
	border-radius: var(--gcn-radius-xs);
	text-decoration: none;
}

#brx-header .brx-dropdown-content a:hover {
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
}

/* --------------------------------------------------------------------------
   Header actions & Location / Places utility bar

   "Set Location", "Places", "Sign in" are secondary; "Add listing" is the one
   primary action and the only thing in the header wearing the brand colour.
   -------------------------------------------------------------------------- */

#brx-header .nav-links-wrapper {
	display: flex;
	align-items: center;
	gap: var(--gcn-space-4);
}

/* Location and Places Pill / Utility container */
#brx-header #brxe-70f5d2,
#brx-header .nav-links-wrapper > #brxe-70f5d2 {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 0 !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: var(--gcn-radius-pill, 9999px) !important;
	background-color: #ffffff !important;
	padding: 2px 4px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
	line-height: 1 !important;
	vertical-align: middle !important;
}

/* Set Location item */
#brx-header #brxe-64886d,
#brx-header .nav-first-button {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 4px 12px !important;
	border: none !important;
	border-inline-end: 1px solid #e2e8f0 !important;
	border-radius: 0 !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	color: var(--gcn-text-muted, #64748b) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	margin: 0 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	transition: color var(--gcn-duration) var(--gcn-ease) !important;
}

#brx-header #brxe-64886d:hover,
#brx-header .nav-first-button:hover {
	color: var(--gcn-brand-strong, #00878b) !important;
}

#brx-header #brxe-8ee725 {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
}

#brx-header #brxe-0d065a,
#brx-header #brxe-64886d .brxe-icon,
#brx-header .nav-first-button .nav-link-icon,
#brx-header .nav-first-button .brxe-icon {
	font-size: 14px !important;
	line-height: 1 !important;
	color: var(--gcn-brand, #00b2b7) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
}

#brx-header #brxe-fbd3bb,
#brx-header #brxe-64886d p {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	color: inherit !important;
}

#brx-header #brxe-d83f38 {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--gcn-brand-strong, #00878b) !important;
	text-transform: uppercase !important;
	margin: 0 0 0 4px !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

#brx-header #brxe-d83f38:empty {
	display: none !important;
}

/* Places item */
#brx-header #brxe-905c9d,
#brx-header #brxe-70f5d2 > .brxe-text-link {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 4px 12px !important;
	border: none !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	color: var(--gcn-text-muted, #64748b) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	margin: 0 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	transition: color var(--gcn-duration) var(--gcn-ease) !important;
}

#brx-header #brxe-905c9d:hover,
#brx-header #brxe-70f5d2 > .brxe-text-link:hover {
	color: var(--gcn-brand-strong, #00878b) !important;
}

#brx-header #brxe-905c9d .icon,
#brx-header #brxe-905c9d .icon > i,
#brx-header #brxe-905c9d i.ion-md-map {
	font-size: 14px !important;
	line-height: 1 !important;
	color: var(--gcn-brand, #00b2b7) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
}

#brx-header #brxe-905c9d .text {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	color: inherit !important;
}

/* Utility row container */
#brx-header #brxe-88844e {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	list-style: none !important;
	margin: 0 0 4px 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

#brx-header #brxe-8bcf81 {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

#brx-header .uwp-register-link {
	display: inline-flex;
	align-items: center;
	gap: var(--gcn-space-2);
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
	text-decoration: none;
}

#brx-header .uwp-register-link:hover {
	color: var(--gcn-brand-strong);
}

#brx-header .uwp-register-link,
#brx-header a.nav-link:has( .brxe-icon ) {
	display: flex;
	align-items: center;
	gap: var(--gcn-space-2);
}

#brx-header .nav-link-icon,
#brx-header a.nav-link > .brxe-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

#brx-header .nav-link-icon {
	font-size: 15px;
	color: var(--gcn-text-faint);
}

#brx-header .nav-last-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--gcn-space-2);
	padding: 10px var(--gcn-space-5);
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand);
	border-radius: var(--gcn-radius-pill);
	text-decoration: none;
	transition: background-color var(--gcn-duration) var(--gcn-ease);
}

#brx-header .nav-last-btn:hover {
	background: var(--gcn-brand-strong);
	color: var(--gcn-brand-contrast);
}

#brx-header .nav-last-btn .nav-link-icon {
	color: currentColor;
}

/* ==========================================================================
   Footer
   ========================================================================== */

#brx-footer {
	flex-shrink: 0 !important;
	margin-top: auto !important;
	position: relative;
	z-index: 10;
	color: var(--gcn-text-inverse, #ffffff);
	background: var(--gcn-surface-inverse, #0a0a0b);
	width: 100%;
	max-width: 100% !important;
	box-sizing: border-box;
	overflow: hidden;
}

/* Hairline brand rule along top edge - Full 100% Viewport Width */
#brx-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	width: 100%;
	background: var(--gcn-brand-rule);
	z-index: 5;
	pointer-events: none;
}

#brx-footer > .brxe-section {
	position: relative;
	padding-block: clamp(40px, 6vw, 68px) clamp(28px, 4vw, 40px);
	padding-inline: clamp(20px, 5vw, 44px) !important;
	background-image: none;
	background-color: transparent;
	max-width: 100% !important;
	width: 100% !important;
	margin-inline: auto;
	box-sizing: border-box;
}

#brx-footer > .brxe-section::before {
	display: none !important;
}

#brx-footer .brxe-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 0 !important;
}

/* Main 3-Column Footer Grid (Desktop >= 992px) */
#brx-footer #brxe-gcnf01,
#brx-footer #brxe-eb9329,
#brx-footer .brxe-container.brx-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.85fr) minmax(0, 1fr);
	gap: clamp(24px, 3.5vw, 48px);
	align-items: start;
	width: 100%;
}

/* Brand Column */
#brx-footer #brxe-gcnf02,
#brx-footer #brxe-3cd80b,
#brx-footer .brxe-container.brx-grid > .brxe-block:first-child {
	max-width: 100%;
}

#brx-footer .brxe-logo img,
#brx-footer .bricks-site-logo {
	max-height: 48px;
	width: auto;
	margin-bottom: 14px;
	display: block;
}

#brx-footer #brxe-gcnf03,
#brx-footer #brxe-gcnftd {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	max-width: 320px;
	margin: 0;
}

/* Headings */
#brx-footer .brxe-heading,
#brx-footer .footer-title,
#brx-footer h4 {
	margin: 0 0 14px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.52);
}

/* Multi-column Directory Links on Desktop */
#brx-footer .gcn-footer-directory .footer-links-wrap,
#brx-footer #brxe-gcnf06,
#brx-footer #brxe-1bb3ba {
	display: block;
	columns: 2;
	column-gap: 20px;
}

/* Links */
#brx-footer .footer-links-wrap a,
#brx-footer .footer-links,
#brx-footer .brxe-text-basic,
#brx-footer .brxe-text-link,
#brx-footer a {
	display: block;
	padding: 4px 0;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color var(--gcn-duration, 0.2s) var(--gcn-ease, ease), transform var(--gcn-duration, 0.2s) var(--gcn-ease, ease);
}

#brx-footer .footer-links-wrap a:hover,
#brx-footer .footer-links:hover,
#brx-footer .brxe-text-basic a:hover,
#brx-footer a:hover {
	color: var(--gcn-brand, #0e8b72);
	transform: translateX(2px);
}

/* Bottom Bar (Copyright, Small Links & Social Icons) */
#brx-footer #brxe-1d97f8,
#brx-footer #brxe-e3e151,
#brx-footer .brxe-section > .brxe-block:last-child:not(:only-child) {
	margin-top: clamp(28px, 5vw, 48px);
	padding-top: clamp(16px, 3vw, 24px);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	width: 100%;
}

#brx-footer #brxe-130a3a,
#brx-footer #brxe-d7dd30 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
}

#brx-footer #brxe-zuczes,
#brx-footer #brxe-f8e75d,
#brx-footer .footer-links--small {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
	margin: 0;
	line-height: 1.4;
}

#brx-footer .footer-links--small-wrap,
#brx-footer #brxe-597bfb {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

#brx-footer .footer-links--small-wrap a,
#brx-footer #brxe-597bfb a {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	padding: 0;
	display: inline-block;
}

#brx-footer .footer-links--small-wrap a:hover,
#brx-footer #brxe-597bfb a:hover {
	color: var(--gcn-brand, #0e8b72);
	transform: none;
}

#brx-footer #brxe-67b16a,
#brx-footer #brxe-14a03d,
#brx-footer .footer-social-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

#brx-footer .footer-social-icon,
#brx-footer .brxe-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

#brx-footer .footer-social-icon:hover,
#brx-footer .brxe-icon:hover {
	background: var(--gcn-brand, #0e8b72);
	border-color: var(--gcn-brand, #0e8b72);
	color: #ffffff;
	transform: translateY(-2px);
}

/* ===== Footer Responsive Rules ===== */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
	#brx-footer #brxe-gcnf01,
	#brx-footer #brxe-eb9329,
	#brx-footer .brxe-container.brx-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px 28px;
	}

	#brx-footer #brxe-gcnf02,
	#brx-footer #brxe-3cd80b {
		grid-column: 1 / -1;
		max-width: 520px;
	}

	#brx-footer .gcn-footer-directory,
	#brx-footer #brxe-gcnf04,
	#brx-footer #brxe-65698a {
		grid-column: 1 / 2;
	}

	#brx-footer .gcn-footer-about,
	#brx-footer #brxe-gcnf12,
	#brx-footer #brxe-560d17 {
		grid-column: 2 / 3;
	}

	#brx-footer .gcn-footer-directory .footer-links-wrap,
	#brx-footer #brxe-gcnf06,
	#brx-footer #brxe-1bb3ba {
		columns: 1;
	}
}

/* Mobile & Phablet (<= 767px) */
@media (max-width: 767px) {
	#brx-footer > .brxe-section {
		padding-block: 40px 28px;
		padding-inline: clamp(18px, 5vw, 28px) !important;
	}

	#brx-footer #brxe-gcnf01,
	#brx-footer #brxe-eb9329,
	#brx-footer .brxe-container.brx-grid {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	#brx-footer #brxe-gcnf02,
	#brx-footer #brxe-3cd80b {
		width: 100%;
		max-width: 100%;
	}

	#brx-footer .brxe-logo img,
	#brx-footer .bricks-site-logo {
		max-height: 42px;
	}

	#brx-footer #brxe-gcnf03,
	#brx-footer #brxe-gcnftd {
		max-width: 100%;
		font-size: 13.5px;
	}

	#brx-footer .gcn-footer-directory,
	#brx-footer #brxe-gcnf04,
	#brx-footer #brxe-65698a {
		width: 100%;
	}

	#brx-footer .gcn-footer-directory .footer-links-wrap,
	#brx-footer #brxe-gcnf06,
	#brx-footer #brxe-1bb3ba {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px 16px;
		columns: auto;
	}

	#brx-footer .gcn-footer-about,
	#brx-footer #brxe-gcnf12,
	#brx-footer #brxe-560d17 {
		width: 100%;
	}

	#brx-footer .gcn-footer-about .footer-links-wrap,
	#brx-footer #brxe-gcnf14,
	#brx-footer #brxe-4daa07 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px 16px;
		columns: auto;
	}

	#brx-footer #brxe-130a3a,
	#brx-footer #brxe-d7dd30 {
		flex-direction: column-reverse;
		align-items: center;
		text-align: center;
		gap: 16px;
	}

	#brx-footer #brxe-67b16a,
	#brx-footer #brxe-14a03d {
		justify-content: center;
	}

	#brx-footer .footer-links--small-wrap,
	#brx-footer #brxe-597bfb {
		justify-content: center;
		gap: 8px 14px;
	}
}

/* Extra Small Phones (< 350px) */
@media (max-width: 349px) {
	#brx-footer .gcn-footer-directory .footer-links-wrap,
	#brx-footer #brxe-gcnf06,
	#brx-footer #brxe-1bb3ba,
	#brx-footer .gcn-footer-about .footer-links-wrap,
	#brx-footer #brxe-gcnf14,
	#brx-footer #brxe-4daa07 {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* ==========================================================================
   Desktop header height

   Last in the file on purpose: these trim rules the sections above set, and a
   media query carries no specificity of its own to do it with.
   ========================================================================== */

/*
 * A slimmer header on a desktop and a tablet: 76px, as asked for.
 *
 * The height is stated on the section rather than left to add up out of the
 * parts, and everything inside is trimmed to fit inside it — the template
 * stacked a 64px logo against a two-row column of links inside 16px of
 * padding, which came to 126px of chrome above every page.
 */
@media (min-width: 768px) {

	#brx-header > .brxe-section {
		/*
		 * 76px is the floor, not a ceiling. Pinning it to exactly 76px left
		 * the directory header — which stacks a row of location links over the
		 * navigation — pressed against both edges with the logo overhanging,
		 * so the height follows the content and only refuses to go under 76.
		 */
		min-height: 76px;
		padding-block: var(--gcn-space-2);
		/*
		 * The section is a column, so its cross axis is horizontal: without
		 * this the row sat at the top of the 76px with the space left under
		 * it, which is what "it should be center" was pointing at.
		 */
		justify-content: center;
	}

	#brx-header > .brxe-section > .brxe-container {
		align-items: center;
	}

	.header-logo img,
	#brx-header .bricks-site-logo,
	#brx-header .brxe-logo img,
	#brx-header .custom-logo {
		height: 55px;
		max-height: 55px;
	}

	/* The utility row ("Set Location", "Places") sits closer to the nav. */
	#brx-header .brxe-nav-nested > .brxe-div {
		gap: 4px var(--gcn-space-3);
	}

	#brx-header .brx-nav-nested-items {
		min-height: 0;
	}

	#brx-header .brx-nav-nested-items > li > a,
	#brx-header .brx-submenu-toggle > a {
		padding-block: 2px;
	}

	#brx-header .uwp-register-link {
		padding-block: 0;
		font-size: var(--gcn-text-xs);
	}

	#brx-header .nav-link-icon {
		font-size: 13px;
	}

	/* The corner controls, sized as one set so the row reads level. */
	#brx-header .nav-last-btn {
		padding-block: 7px;
	}

	#brx-header .gcn-search__button {
		width: 32px;
		height: 32px;
	}

	#brx-header .gcn-account__img,
	#brx-header .gcn-account__avatar {
		width: 32px;
		height: 32px;
	}
}

/*
 * On a tablet the menu is behind the button (assets/gcn-mobile-nav.css), so
 * the column beside the logo holds only two short rows — the location links
 * and the header's controls. Side by side they fit the same 76px.
 */
@media (min-width: 768px) and (max-width: 991px) {

	#brx-header .brxe-nav-nested > .brxe-div {
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		gap: var(--gcn-space-4);
	}
}

/* ==========================================================================
   Universal Page Layout & Mobile Content Padding Protection
   ========================================================================== */

#brx-content,
main#brx-content,
article#brx-content,
#brx-content.wordpress,
article#brx-content.wordpress {
	flex: 1 0 auto !important;
	width: 100% !important;
	max-width: 1280px !important;
	margin-inline: auto !important;
	box-sizing: border-box !important;
	height: auto !important;
	min-height: 0 !important;
	padding-bottom: clamp(48px, 8vw, 96px);
}

#brx-content img {
	max-width: 100%;
	height: auto;
}

#brx-content h1,
#brx-content h2,
#brx-content h3,
#brx-content h4,
#brx-content h5,
#brx-content h6,
#brx-content p,
#brx-content .brxe-heading,
#brx-content .brxe-text-basic {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Universal section horizontal padding */
#brx-content > .brxe-section:not(#brx-header):not(.brx-header):not(.gcn-no-pad),
#brx-content > section:not(#brx-header):not(.brx-header):not(.gcn-no-pad) {
	padding-inline: clamp(16px, 4vw, 36px);
	box-sizing: border-box;
}

#brx-content > .brxe-section:last-child:not(#brx-header),
#brx-content > section:last-child:not(#brx-header),
#brx-content > article:last-child:not(#brx-header) {
	padding-bottom: clamp(48px, 8vw, 96px);
}

#brx-content > .brxe-section:first-child:not(#brx-header):not(.gcn-front):not(.gcn-home__hero):not(.gcn-faith__hero),
#brx-content > section:first-child:not(#brx-header):not(.gcn-front):not(.gcn-home__hero):not(.gcn-faith__hero) {
	padding-top: clamp(24px, 4vw, 44px);
}

@media (max-width: 991px) {
	#brx-content .brxe-container {
		box-sizing: border-box !important;
	}

	#brx-content > .brxe-section:not(#brx-header):not(.gcn-no-pad),
	#brx-content > section:not(#brx-header):not(.gcn-no-pad),
	#brx-content > article:not(#brx-header):not(.gcn-no-pad) {
		padding-inline: clamp(14px, 4vw, 24px) !important;
		box-sizing: border-box !important;
	}
}

@media (max-width: 575px) {
	#brx-content > .brxe-section:not(#brx-header):not(.gcn-no-pad),
	#brx-content > section:not(#brx-header):not(.gcn-no-pad),
	#brx-content > article:not(#brx-header):not(.gcn-no-pad) {
		padding-inline: clamp(12px, 3.5vw, 18px) !important;
	}
}

/* ==========================================================================
   Ninja Forms — GCN Theme Integration
   ========================================================================== */

.nf-form-layout,
.nf-form-cont {
	max-width: 100%;
	font-family: inherit;
	color: var(--gcn-text, #1b2028);
}

.nf-form-fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nf-field-container {
	margin-bottom: 16px;
}

.nf-field-label label {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--gcn-text, #1b2028);
	margin-bottom: 6px;
	line-height: 1.4;
}

.ninja-forms-req-symbol {
	color: var(--gcn-critical, #ba2b26);
	font-weight: 700;
	margin-left: 3px;
}

.ninja-forms-field[type="text"],
.ninja-forms-field[type="email"],
.ninja-forms-field[type="tel"],
.ninja-forms-field[type="url"],
.ninja-forms-field[type="password"],
.ninja-forms-field[type="number"],
textarea.ninja-forms-field,
select.ninja-forms-field {
	width: 100% !important;
	padding: 12px 16px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: var(--gcn-text, #1b2028) !important;
	background-color: var(--gcn-surface, #ffffff) !important;
	border: 1.5px solid var(--gcn-rule-strong, #cdd5df) !important;
	border-radius: 8px !important;
	box-sizing: border-box !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	line-height: 1.5 !important;
}

textarea.ninja-forms-field {
	min-height: 130px !important;
	resize: vertical !important;
}

.ninja-forms-field[type="text"]:focus,
.ninja-forms-field[type="email"]:focus,
.ninja-forms-field[type="tel"]:focus,
.ninja-forms-field[type="url"]:focus,
.ninja-forms-field[type="password"]:focus,
.ninja-forms-field[type="number"]:focus,
textarea.ninja-forms-field:focus,
select.ninja-forms-field:focus {
	border-color: var(--gcn-brand, #0e8b72) !important;
	box-shadow: 0 0 0 3px rgba(14, 139, 114, 0.15) !important;
	outline: none !important;
}

/* Checkbox and Consent styling */
.nf-field-container.checkbox-container .nf-field-element {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.nf-field-container.checkbox-container input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	margin-top: 3px !important;
	accent-color: var(--gcn-brand, #0e8b72) !important;
	cursor: pointer;
	flex-shrink: 0;
}

.nf-field-container.checkbox-container label {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--gcn-text-soft, #49535f);
	cursor: pointer;
	margin: 0;
}

.nf-field-container.checkbox-container label a {
	color: var(--gcn-brand, #0e8b72);
	text-decoration: underline;
	font-weight: 500;
}

.nf-field-container.checkbox-container label a:hover {
	color: var(--gcn-brand-strong, #0a715c);
}

/* Submit Button */
.nf-field-container.submit-container .ninja-forms-field,
.nf-field-container.submit-container input[type="button"],
.nf-field-container.submit-container input[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 12px 28px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	color: #ffffff !important;
	background-color: var(--gcn-brand, #0e8b72) !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	box-shadow: 0 2px 6px rgba(14, 139, 114, 0.25) !important;
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.nf-field-container.submit-container .ninja-forms-field:hover,
.nf-field-container.submit-container input[type="button"]:hover,
.nf-field-container.submit-container input[type="submit"]:hover {
	background-color: var(--gcn-brand-strong, #0a715c) !important;
	box-shadow: 0 4px 12px rgba(14, 139, 114, 0.35) !important;
	transform: translateY(-1px) !important;
}

/* Response & Error Messages */
.nf-response-msg {
	background-color: var(--gcn-brand-soft, #e9f7f4) !important;
	border: 1px solid var(--gcn-brand-border, #bfe3dc) !important;
	border-radius: 8px !important;
	padding: 16px 20px !important;
	color: var(--gcn-brand-strong, #0a715c) !important;
	font-size: 14.5px !important;
	line-height: 1.5 !important;
	margin-bottom: 20px !important;
}

.nf-error-msg,
.nf-error .ninja-forms-field-error {
	color: var(--gcn-critical, #ba2b26) !important;
	font-size: 13px !important;
	margin-top: 4px !important;
}