/*
 * 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 {
	display: block;
	width: auto;
	max-height: 64px;
	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

   "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);
}

#brx-header .nav-first-button,
#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 .nav-first-button:hover,
#brx-header .uwp-register-link:hover {
	color: var(--gcn-brand-strong);
}

/*
 * Icon and label on one centre line.
 *
 * The icons are icon-font glyphs: the <i> stretches to the row's height while
 * its own 13px line box sits at the top of it, so the pin floated above "Set
 * Location" and the map above "Places" even though the two boxes matched. A
 * flex centre on the row, and a line-height of 1 on the glyph, put them on the
 * same axis whatever the label's size.
 */
#brx-header .nav-first-button,
#brx-header .nav-first-button > .brxe-div,
#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 .nav-first-button .brxe-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 {
	color: var(--gcn-text-inverse);
	background: var(--gcn-surface-inverse);
}

#brx-footer > .brxe-section {
	position: relative;
	padding-block: var(--gcn-space-16) var(--gcn-space-8);
	/* The template paints its own grey gradient; the token colour is the ground. */
	background-image: none;
	background-color: var(--gcn-surface-inverse);
}

/* A hairline of brand colour along the top edge, so the footer reads as part of
   the site rather than a black box the page falls into. */
#brx-footer > .brxe-section::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--gcn-brand-rule);
}

/* The brand column sets the measure for the copy under the logo. */
#brx-footer .brxe-logo img {
	max-height: 60px;
	width: auto;
}

#brx-footer .brxe-heading {
	margin: 0 0 var(--gcn-space-2);
	font-size: var(--gcn-text-2xs);
	font-weight: var(--gcn-weight-bold);
	letter-spacing: var(--gcn-tracking-wide);
	text-transform: uppercase;
	/* Dimmed rather than grey: on a black ground a mid grey reads as disabled,
	   while white at reduced opacity still reads as the same ink. */
	color: rgba(255, 255, 255, 0.55);
}

/* Link columns: a little more air between rows than the template's 8px, and a
   hover that moves rather than only changing colour. */
#brx-footer .brxe-block .brxe-text-basic[class*="hyvfna"],
#brx-footer .brxe-block > .brxe-text-basic {
	display: block;
	line-height: var(--gcn-leading-snug);
	transition:
		color var(--gcn-duration) var(--gcn-ease),
		transform var(--gcn-duration) var(--gcn-ease);
}

#brx-footer .brxe-block > .brxe-text-basic:hover {
	transform: translateX(2px);
}

#brx-footer .brxe-text-basic,
#brx-footer .brxe-text-link,
#brx-footer a {
	font-size: var(--gcn-text-base);
	line-height: var(--gcn-leading-normal);
	color: var(--gcn-text-inverse);
	text-decoration: none;
	transition: color var(--gcn-duration) var(--gcn-ease);
}

#brx-footer a:hover,
#brx-footer .brxe-text-basic:hover {
	color: var(--gcn-brand-border);
}

/* The line under the logo is supporting copy, so it steps back a little while
   staying white. */
#brx-footer .brxe-block > .brxe-text-basic:not([class*="hyvfna"]) {
	color: rgba(255, 255, 255, 0.72);
}

#brx-footer address {
	font-style: normal;
}

/* Social row. */
#brx-footer .brxe-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 15px;
	color: var(--gcn-text-inverse);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--gcn-radius-pill);
	transition:
		color var(--gcn-duration) var(--gcn-ease),
		border-color var(--gcn-duration) var(--gcn-ease),
		background-color var(--gcn-duration) var(--gcn-ease);
}

#brx-footer .brxe-icon:hover {
	color: var(--gcn-text-inverse);
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.32);
}

/* Bottom bar.

   Scoped to the section's own last block. A bare .brxe-block:last-child also
   matched the link list at the foot of every column, which drew a rule under
   each heading. */
#brx-footer .brxe-section > .brxe-block:last-child:not(:only-child) {
	margin-top: var(--gcn-space-10);
	padding-top: var(--gcn-space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* The footer on ordinary pages is a single bar, not columns above a bar. It
   needs no divider and none of the tall padding a stacked footer wants. */
#brx-footer .brxe-section:has(> .brxe-block:only-child) {
	padding-block: var(--gcn-space-8);
}

#brx-footer .brxe-section > .brxe-block:last-child .brxe-text-basic {
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-faint);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {

	#brx-header .nav-links-wrapper {
		gap: var(--gcn-space-3);
	}

	#brx-header .nav-last-btn {
		padding: 9px var(--gcn-space-4);
	}

	#brx-footer > .brxe-section {
		padding-block: var(--gcn-space-12) var(--gcn-space-6);
	}
}

/* --------------------------------------------------------------------------
   Directory header: utility bar

   The directory header carries a location switcher and a Places link that the
   ordinary header has no use for, and the template stacks them above the main
   nav. Keeping two rows is right — a visitor browsing listings needs to see and
   change the location they are browsing — but it read as an accident: the
   utility row was the same weight as the nav and the logo sat above the middle
   of the stack rather than centred against it.

   Styled here as a deliberate slim bar: smaller, muted, right-aligned, with the
   logo centred against the whole header.
   -------------------------------------------------------------------------- */

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

#brx-header .brxe-nav-nested > .brxe-div {
	row-gap: var(--gcn-space-2);
}

/* The utility row is the nav list that holds the location switcher. */
#brx-header .brx-nav-nested-items > li > .nav-links-wrapper {
	justify-content: flex-end;
	width: 100%;
}

#brx-header .brx-nav-nested-items > li > .nav-links-wrapper .brxe-text-basic,
#brx-header .brx-nav-nested-items > li > .nav-links-wrapper .brxe-text-link {
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
}

#brx-header .brx-nav-nested-items > li > .nav-links-wrapper .nav-link:hover,
#brx-header .brx-nav-nested-items > li > .nav-links-wrapper .brxe-text-link:hover {
	color: var(--gcn-brand-strong);
}

/* The selected location is the one piece of state here, so it carries weight. */
#brx-header .nav-first-button > .brxe-text-basic {
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-text-soft);
	text-transform: none;
}

/*
 * Add listing: only for somebody who can.
 *
 * The button is in the Bricks header template, which renders for everybody, so
 * a signed-out reader was invited to a form that would send them to a login
 * page — and a signed-in Restricted user to one that would refuse the
 * submission. inc/auth-modal.php puts gcn-can-add on the body when the reader
 * passes the same test the chooser uses, and this hides the button otherwise.
 */
body:not(.gcn-can-add) #brx-header .nav-last-btn,
body:not(.gcn-can-add) #brx-header a[href*="/add-a-listing"] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Footer columns

   The Directory column lists nine post types against About's five, and the
   footer grid had a fourth cell standing empty beside them. Directory takes
   two of the four cells and flows its links in two columns; About moves into
   the cell that was empty. The blocks are named in the template (see
   bin/build-footer-directory.php) rather than addressed by child index, so
   reordering the footer in Bricks cannot silently point these at the wrong
   column.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

	/*
	 * One row, whatever the template's own grid says.
	 *
	 * Spanning two of the template's cells worked only while that grid had
	 * four of them; where it computes three, the span pushed About onto a
	 * second row under the logo. The three columns are stated here instead —
	 * brand, Directory, About — so the footer is one row at every desktop
	 * width.
	 */
	#brx-footer .brx-grid:has( > .gcn-footer-directory ) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr);
	}

	#brx-footer .gcn-footer-directory {
		grid-column: auto;
		/* Multi-column needs a block container; the template's own flex column
		   would keep the links in one stack. */
		display: block;
		columns: 2;
		column-gap: var(--gcn-space-10);
	}

	/* The same gap under the heading the untouched About column has, so the
	   two columns' first links sit on one line. */
	#brx-footer .gcn-footer-directory > .brxe-heading {
		column-span: all;
		margin-bottom: var(--gcn-space-6);
	}

	#brx-footer .gcn-footer-directory > .brxe-text-basic {
		display: block;
		break-inside: avoid;
		margin-bottom: var(--gcn-space-2);
	}
}

/* ==========================================================================
   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 {
		max-height: 44px;
	}

	/* The utility row ("Set Location", "Places") sits closer to the nav. */
	#brx-header .brxe-nav-nested > .brxe-div {
		gap: 2px 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;
	}

	/* "Set Location" and "Places" are secondary; they do not need a 42px row. */
	#brx-header .nav-first-button,
	#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);
	}
}