/*
 * Toga primary navigation — role-aware clusters.
 *
 * Toga_Navigation (inc/class-toga-navigation.php) tags every rendered
 * navigation-link with a "toga-nav-shop" or "toga-nav-account" className,
 * which WordPress places on the <li class="wp-block-navigation-item ...">
 * wrapper. This file only draws the visual separation between those two
 * clusters and the CTA button (Sell on Toga / Seller Dashboard) — link
 * targets and role logic live entirely in PHP.
 */

.wp-block-navigation .toga-nav-account:first-of-type {
	margin-left: var(--wp--preset--spacing--30, 1.5rem);
	padding-left: var(--wp--preset--spacing--30, 1.5rem);
	border-left: 1px solid var(--toga-border-strong);
}

/* Category links (Toga_Navigation::get_category_nav_items()) sit right
   after "Shop" in the same nav block — real, populated categories only, so
   there is nothing to style when a marketplace has none yet. */
.wp-block-navigation .toga-nav-categories {
	font-weight: 400;
}

/* Minimum 44px tap target for every nav link inside the open mobile
   overlay (core/navigation's own responsive container). Desktop rows stay
   compact; only the touch-driven overlay list needs the larger target. */
@media (max-width: 899px) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content {
		display: block;
		padding-top: 0.85em;
		padding-bottom: 0.85em;
	}
}

.wp-block-navigation .toga-nav-cta {
	margin-left: var(--wp--preset--spacing--20, 1rem);
}

.wp-block-navigation .toga-nav-cta .wp-block-button__link {
	background-color: var(--toga-terracotta);
	color: var(--toga-paper);
	border-radius: 999px;
	padding: 0.5em 1.25em;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
	transition: var(--toga-transition);
}

.wp-block-navigation .toga-nav-cta .wp-block-button__link:hover,
.wp-block-navigation .toga-nav-cta .wp-block-button__link:focus {
	background-color: var(--toga-terracotta-hover);
	color: var(--toga-paper);
}

/* -------------------------------------------------------------------- */
/* Keyboard focus — brand.css has no focus-visible rules anywhere today  */
/* -------------------------------------------------------------------- */

.wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .toga-nav-cta .wp-block-button__link:focus-visible {
	outline: var(--toga-focus-ring-width) solid var(--toga-focus-ring-color);
	outline-offset: var(--toga-focus-ring-offset);
}

/* -------------------------------------------------------------------- */
/* Product search                                                        */
/*                                                                       */
/* A toggled icon below --toga-bp-lg (storefront.js adds/removes         */
/* .is-open and aria-expanded on click, closes on outside click/Escape), */
/* permanently open and inline at/above it. Originally built as a        */
/* <details>/<summary> disclosure with no JavaScript at all — reverted   */
/* after testing showed current Chromium ties non-open <details> content */
/* to a native zero-intrinsic-size layout behavior that survives a CSS   */
/* `display` override, so "always open at desktop" could not be done     */
/* reliably without JavaScript. This plain button+class toggle has no    */
/* such native quirk to fight.                                           */
/* -------------------------------------------------------------------- */

.toga-search {
	position: relative;
	display: flex;
	align-items: center;
}

.toga-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: var(--toga-tap-target);
	height: var(--toga-tap-target);
	border: 0;
	border-radius: var(--toga-radius-pill);
	background: none;
	color: var(--toga-ink);
	cursor: pointer;
	transition: var(--toga-transition);
}

.toga-search__toggle:hover {
	background-color: var(--toga-border);
}

.toga-search__toggle:focus-visible {
	outline: var(--toga-focus-ring-width) solid var(--toga-focus-ring-color);
	outline-offset: var(--toga-focus-ring-offset);
}

.toga-search__toggle-label {
	/* Icon-only toggle below --toga-bp-lg; the label exists for the
	   inline desktop state below, where the toggle itself is hidden. */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.toga-search__form {
	display: none;
	position: absolute;
	top: calc(100% + var(--toga-space-2));
	right: 0;
	gap: var(--toga-space-2);
	width: min(88vw, 320px);
	padding: var(--toga-space-3);
	background-color: var(--toga-surface);
	border: 1px solid var(--toga-border);
	border-radius: var(--toga-radius-md);
	box-shadow: var(--toga-shadow-md);
	z-index: var(--toga-z-dropdown);
}

.toga-search.is-open .toga-search__form {
	display: flex;
}

.toga-search__input {
	flex: 1 1 auto;
	min-width: 0;
}

.toga-search__submit {
	flex: 0 0 auto;
}

/*
 * "Compact search access" (Stage 3): a 13rem/38px pill, not a full-height
 * black-button field spanning a third of the header — the previous
 * always-inline treatment was flagged as visually dominating the header
 * relative to the primary shopping navigation next to it.
 */
@media (min-width: 900px) {
	.toga-search {
		position: static;
		flex: 0 1 13rem;
		margin: 0 var(--wp--preset--spacing--30, 1.5rem);
	}

	.toga-search__toggle {
		display: none;
	}

	.toga-search__form {
		display: flex;
		position: static;
		width: 100%;
		padding: 0;
		border: 1px solid var(--toga-border);
		border-radius: var(--toga-radius-pill);
		box-shadow: none;
		overflow: hidden;
	}

	.toga-search__input {
		height: 38px;
		border: 0;
		border-radius: 0;
		padding-left: var(--toga-space-3);
		font-size: 0.875rem;
	}

	.toga-search__input:focus-visible {
		outline-offset: -2px;
	}

	/* Icon-only at this width — the visible "Search" label stays for the
	   mobile dropdown form, where the button has room to spare. */
	.toga-search__submit {
		width: 38px;
		height: 38px;
		padding: 0;
		border-radius: 0;
	}

	.toga-search__submit-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

.toga-search__submit-icon {
	display: none;
}

@media (min-width: 900px) {
	.toga-search__submit-icon {
		display: block;
	}
}

/* -------------------------------------------------------------------- */
/* Account / cart hierarchy — consistent weight, not raw default text    */
/* -------------------------------------------------------------------- */

.wp-block-navigation .toga-nav-account .wp-block-navigation-item__content,
.wp-block-navigation .toga-nav-shop .wp-block-navigation-item__content {
	font-weight: 500;
}