/**
 * assets/css/explorer.css — Genre Dive (genredive-child)
 * --------------------------------------------------------------------------
 * Explorer page overrides. Scoped to .gd-explorer-page so nothing leaks into
 * other templates. Enqueued by page-explorer.php only.
 *
 * BUI-42 step 1; BUI-137 (exit button, navburger, links full-bleed);
 * BUI-138 (mobile search icon clearing the floating menu button). Owner: Claude.
 * --------------------------------------------------------------------------
 */

/* Collapse the masthead; reveal as an overlay on toggle.
 * Direct-child selector (>) is load-bearing: the footer also wraps its
 * content in a .shell, nested inside .toned.fullbleed. Only the header's
 * .shell is a direct child of <body>. */
.gd-explorer-page > .shell {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 40;
	transform: translateY(-100%);
	transition: transform 0.25s ease;
}
/* Full-bleed paper ground behind the capped nav. The .shell keeps its
 * max-width and auto margins so the nav aligns with every other page;
 * this pseudo-element extends the background to the viewport edges. */
.gd-explorer-page > .shell::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--paper, #F5F3EF);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	z-index: -1;
}
.gd-explorer-page.gd-nav-open > .shell {
	transform: translateY(0);
}
.gd-explorer-page.gd-nav-open > .shell::before {
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

/* BUI-137 §2: the theme's own mobile hamburger (.navburger, a label for the
 * #gd-navtoggle checkbox) is redundant inside the overlay — explorer.js
 * checks the box when the overlay opens, so the links are already showing.
 * Hiding the label stops the "second hamburger" appearing under the X. */
.gd-explorer-page.gd-nav-open .navburger {
	display: none;
}

/* BUI-137 §3: full-bleed the .links dropdown so its background matches the
 * header bar's edge-to-edge ::before. The theme's .shell has horizontal
 * padding that indents .links (absolutely-positioned inside .nav) a few
 * pixels from the viewport edges. The 100vw centering trick extends it to
 * match. !important overrides site.css (which loads earlier). Verify text
 * alignment on 390px if site.css padding on .links ever changes. */
@media (max-width: 760px) {
	.gd-explorer-page.gd-nav-open .links {
		width: 100vw !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		box-sizing: border-box !important;
	}
}

/* BUI-138: the floating menu button (.gd-menu-btn, 40px wide at right:14px,
 * z-index 50) sits directly over the Explorer's mobile search icon
 * (#searchbtn, inside #top at z-index 30). The prototype avoids this because
 * its mobile escape is #exitbtn at the LEFT of the bar, leaving the right
 * edge clear. On this template #exitbtn is hidden (BUI-137 §1 below) and
 * the menu button takes the top-right corner, so #top needs right padding
 * to keep its flex content clear of the overlap.
 *
 * 62px = 40px button + 14px gap + 8px breathing room.
 *
 * The padding-right applies at ALL widths (no media query): on this template
 * the masthead is always collapsed and the floating menu button is always
 * present, including at landscape/tablet widths above 760px where the full
 * search input (not the icon) is shown. The expanded-field and methodbtn
 * rules remain inside ≤760px because those behaviours are mobile-only.
 *
 * The methodology button (#methodbtn, added at v1.55/BUI-118) also needs
 * hiding when search is expanded: the prototype hides #edgetogs with
 * #top.searching but does not hide #methodbtn because it was added later.
 * The search input background is semi-transparent (rgba 55% white), so the
 * button bleeds through the expanded field. */
.gd-explorer-page #top {
	padding-right: 62px;
}
@media (max-width: 760px) {
	.gd-explorer-page #searchwrap.open {
		right: 62px;
	}
	.gd-explorer-page #top.searching #methodbtn {
		visibility: hidden;
	}
}

/* BUI-137 §1: the Explorer's mobile close control (#exitbtn, Design Record
 * §5y.7) scrolls the page back to a site header sitting above the Explorer.
 * On this template the masthead is collapsed (above) and the floating menu
 * button is the way out, so there is nothing for #exitbtn to scroll to.
 * Hidden here rather than removed from the build. !important is needed:
 * explorer-app.css loads after this file and sets display:flex at ≤760px. */
.gd-explorer-page #exitbtn {
	display: none !important;
}

/* Floating menu button (top-right corner, above the explorer bar) */
.gd-menu-btn {
	position: fixed;
	top: 10px; right: 14px;
	z-index: 50;
	width: 40px; height: 40px;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 5px;
	background: rgba(245,243,239,0.85);
	border: 1px solid rgba(14,14,18,0.2);
	border-radius: 8px;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 0;
}
.gd-menu-btn:focus-visible {
	outline: 2px solid var(--ink, #0E0E12);
	outline-offset: 2px;
}
.gd-menu-btn__line {
	display: block; width: 18px; height: 2px;
	background: var(--ink, #0E0E12);
	border-radius: 1px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Animate to x when open */
.gd-nav-open .gd-menu-btn__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gd-nav-open .gd-menu-btn__line:nth-child(2) { opacity: 0; }
.gd-nav-open .gd-menu-btn__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Backdrop scrim behind the nav overlay */
.gd-nav-backdrop {
	display: none;
	position: fixed; inset: 0;
	z-index: 39;
	background: rgba(14,14,18,0.2);
}
.gd-nav-open .gd-nav-backdrop { display: block; }

/* Explorer stage fills the viewport */
#gd-explorer-stage {
	height: 100vh;
	height: 100dvh;
	position: relative;
}

/* Screen-reader-only: in the DOM for crawlers and assistive tech */
.gd-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}