/**
 * Mobile nav visual organization — pure CSS, no JavaScript at all.
 *
 * After three attempts at making submenus genuinely collapse/expand via
 * JS each failed in a different way against this specific theme, this
 * takes a deliberately much simpler approach: it doesn't try to change
 * behavior at all. The menu stays exactly as expanded as it already is
 * — nothing to break, since nothing is being toggled, hidden, or
 * JS-controlled. This only adds visual organization: clearer
 * indentation per nesting level, a left border showing hierarchy, and
 * smaller text for deeper levels, so the long list reads as an
 * organized outline instead of a flat wall of same-sized text.
 */

/* Right-alignment now comes primarily from the theme's own real
   is-content-justification-space-between class, reused directly in
   site-logo-home-link.php's rebuilt markup — these rules are a
   defensive backup in case that doesn't fully reach the nav/toggle
   button in every context, not the primary mechanism anymore. */
.wp-block-navigation__container {
	justify-content: flex-end;
}

/* Direct fix for the hamburger toggle button specifically — margin-left:
   auto pushes it to the right edge of its flex container regardless of
   where exactly it sits in the DOM relative to sibling elements, more
   robust than relying on justify-content alone reaching it. */
.wp-block-navigation__responsive-container-open {
	margin-left: auto;
}

/* Hide the theme's own site title/tagline text specifically within its
   real header wrapper (header.wp-block-template-part, confirmed via
   the site's actual live page source) — keeping that header's logo and
   working nav, while avoiding a duplicate of the title/tagline text
   that the custom smaller header (site-logo-home-link.php) already
   shows. Scoped to .bernal-listing-page specifically (added via a
   body_class filter in MobileNavFix.php) — WITHOUT this scoping, this
   rule would hide the site title/tagline on every page of the site,
   not just these two, since this stylesheet loads everywhere. */
body.bernal-listing-page header.wp-block-template-part .wp-block-site-title,
body.bernal-listing-page header.wp-block-template-part .wp-block-site-tagline {
	display: none !important;
}

@media (max-width: 782px) {
	.wp-block-navigation__submenu-container {
		padding-left: 1.25rem !important;
		border-left: 2px solid rgba(0, 0, 0, 0.08);
		margin-left: 0.5rem;
	}

	.wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		font-size: 0.9rem;
		opacity: 0.85;
	}

	/* A second level of nesting (e.g. Red Deer's neighbourhood list
	   inside Explore Communities) gets slightly more indent and a
	   slightly smaller size again, so depth is visually obvious. */
	.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		padding-left: 1rem !important;
	}

	.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		font-size: 0.85rem;
		opacity: 0.75;
	}

	/* Space between top-level items so the whole list is easier to
	   visually parse while scrolling. */
	.wp-block-navigation__container > .wp-block-navigation-item {
		margin-bottom: 0.35rem;
	}
}

/* Ensures the custom header (site-logo-home-link.php) always spans its
   full available width — a defensive safety net alongside the
   structural fix (adding the missing outer wrapper + alignfull class
   that match the theme's real header structure), in case a shrink-to-fit
   flex sizing issue was contributing to the header appearing shifted
   away from the left edge instead of spanning naturally. */
.bernal-listing-archive .site-header,
.bernal-single-listing .site-header {
	width: 100%;
}

/* Logo size on listing pages specifically — confirmed via real page
   inspection that the logo was rendering at its full native size
   (340x124) here, roughly double what's wanted. Targets .custom-logo
   directly (WordPress's own standard class for any custom logo image,
   confirmed present on this exact element) rather than a wrapper class
   that may not apply in this context. Scoped to .bernal-listing-page
   specifically, not site-wide, so this doesn't affect the logo
   anywhere else it might already be sized correctly. */
body.bernal-listing-page .custom-logo {
	width: 170px !important;
	height: auto !important;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Site title link — bold, no underline, per request. Targets the
   confirmed real link specifically (rel="home", inside the
   .wp-block-site-title wrapper this plugin's own custom header uses). */
body.bernal-listing-page .wp-block-site-title a {
	font-weight: 700;
	text-decoration: none;
}

/* Header layout restructure, per request: logo/title centered across
   the FULL page width, with a light cream background behind it. The
   hamburger menu is positioned INSIDE this same box, top-right, in
   line with the logo — via position:absolute relative to .site-header
   (the common ancestor of both .site-brand and the nav), since the nav
   isn't a DOM child of .site-brand itself, so absolute positioning
   relative to their shared parent is what actually places it visually
   "in the box" without needing to move it in the DOM. Also made the
   whole header sticky, staying at the top of the page while scrolling. */
body.bernal-listing-page .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background-color: #faf6ee;
}

body.bernal-listing-page .site-brand {
	width: 100%;
	justify-content: center;
	background-color: #faf6ee;
	padding: 1.25rem 1rem;
	border-radius: 8px;
}

/* Title/tagline text specifically left-aligned within its own group,
   per request — the group as a whole still sits centered as part of
   the centered .site-brand block above, but the text within it reads
   left-aligned rather than centered. */
body.bernal-listing-page .site-brand .wp-block-site-title,
body.bernal-listing-page .site-brand .wp-block-site-tagline {
	text-align: left;
}

body.bernal-listing-page .site-brand .wp-block-site-tagline {
	font-size: 0.7rem;
}

/* Nav positioned inside the logo/title box, top-right, in line with
   the logo — but ONLY on mobile/narrow screens, where the nav has
   actually collapsed into a small hamburger icon. On wider screens,
   the nav is its full expanded list of links (not a small icon), and
   forcing that into this same corner space caused it to overlap
   badly with the logo/title — this was a real bug, confirmed via a
   live screenshot, not just a mobile-only styling choice. */
@media (max-width: 782px) {
	body.bernal-listing-page .site-header > .wp-block-navigation {
		position: absolute;
		top: 1.25rem;
		right: 1rem;
	}
}

/* Hamburger icon changed from 2 lines to 3, per request — the original
   is an inline SVG (can't add a third line to it via CSS alone), so
   the SVG is hidden and replaced with a background-image containing a
   hand-authored 3-line icon instead, matching the same simple style. */
body.bernal-listing-page .wp-block-navigation__responsive-container-open svg {
	display: none;
}

body.bernal-listing-page .wp-block-navigation__responsive-container-open {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v1.5H4zM4 11.25h16v1.5H4zM4 16.5h16v1.5H4z' fill='%23000'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	width: 24px;
	height: 24px;
}

/* Section navigation sticky at the bottom of the page while scrolling.
   Its existing smooth-scroll click handlers (single-listing.js) are
   entirely unaffected by this — those work off click events on the
   links, not the element's CSS position, so jumping to each section
   on click still works exactly as before. */
.bernal-single-listing__section-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9998;
	background-color: #fff;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}