/*
 * petpartners/category-nav — the hamburger and the off-canvas panel it opens.
 *
 * One presentation at every width, since the header rebuild. The panel used
 * to turn into a mega menu from 900px up, hanging off a text trigger named
 * "Shop"; the new header has no text trigger for it to hang off any more —
 * the category links it used to show beside the trigger now live only
 * inside this panel, so there is nothing left for a second presentation to
 * do. See render.php for the rest of that reasoning.
 *
 * Motion: a 250ms transform slide, inside the 150–400ms / transform-and-
 * opacity-only budget CLAUDE.md section 7 sets. This is the one place in the
 * project that animates ahead of P11 — the client asked for the slide by
 * name as part of this header, not as a general motion pass — so it is
 * scoped to exactly this panel and its backdrop, and nothing else in the
 * header gained a transition because of it.
 */

.wp-block-petpartners-category-nav {
	display: flex;
	align-items: center;
}

/* --- Trigger ---------------------------------------------------------- */

.wp-block-petpartners-category-nav__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var( --wp--custom--chrome--tap-target );
	block-size: var( --wp--custom--chrome--tap-target );
	padding: 0;
	border: 0;
	border-radius: var( --wp--preset--border-radius--md );
	background: none;
	color: var( --wp--preset--color--brown );
	cursor: pointer;
}

.wp-block-petpartners-category-nav__trigger svg {
	display: block;
	fill: currentColor;
}

/* --- Backdrop ----------------------------------------------------------- */

.wp-block-petpartners-category-nav__backdrop {
	position: fixed;
	inset: 0;
	z-index: 99;
	background-color: rgba( 0, 0, 0, 0.45 );
	opacity: 0;
	pointer-events: none;
	transition: opacity 250ms ease;
}

.wp-block-petpartners-category-nav__backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* --- Panel ------------------------------------------------------------ */

.wp-block-petpartners-category-nav__panel {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--md );
	inline-size: var( --wp--custom--chrome--menu-panel-w );
	max-inline-size: 85vw;
	padding: var( --wp--preset--spacing--md );
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var( --wp--preset--color--white );
	box-shadow: var( --wp--preset--shadow--md );
	transform: translateX( -100% );
	transition: transform 250ms ease;
}

.wp-block-petpartners-category-nav__panel.is-open {
	transform: translateX( 0 );
}

.wp-block-petpartners-category-nav__panel-head {
	display: flex;
	justify-content: flex-end;
}

.wp-block-petpartners-category-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var( --wp--custom--chrome--tap-target );
	min-height: var( --wp--custom--chrome--tap-target );
	border: 0;
	border-radius: var( --wp--preset--border-radius--md );
	background: none;
	color: var( --wp--preset--color--brown );
	cursor: pointer;
}

.wp-block-petpartners-category-nav__close svg {
	display: block;
	fill: currentColor;
}

/* Stops the page behind the panel from scrolling. Set on <html> by view.js. */
.petpartners-scroll-locked {
	overflow: hidden;
}

/* --- Menu links (About, Shop, Brands, Contact) ------------------------- */

.wp-block-petpartners-category-nav__panel-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-petpartners-category-nav__panel-links li {
	margin: 0;
	border-bottom: 1px solid var( --wp--preset--color--border );
}

.wp-block-petpartners-category-nav__panel-links a {
	display: flex;
	align-items: center;
	min-height: var( --wp--custom--chrome--tap-target );
	color: var( --wp--preset--color--brown );
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--base );
	font-weight: 600;
	text-decoration: none;
}

.wp-block-petpartners-category-nav__panel-links a:hover,
.wp-block-petpartners-category-nav__panel-links a:focus-visible {
	color: var( --wp--preset--color--purple-hover );
	text-decoration: underline;
}

/* --- Category groups ---------------------------------------------------- */

.wp-block-petpartners-category-nav__groups,
.wp-block-petpartners-category-nav__children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-petpartners-category-nav__group {
	padding-top: var( --wp--preset--spacing--xs );
}

/*
 * Navigation links are brown and not underlined, unlike links in prose.
 * DESIGN.md underlines links because colour alone may not carry meaning in a
 * block of text (WCAG 1.4.1) — a standalone navigation item is not that
 * case, and an underlined menu reads as broken. The underline comes back on
 * hover and focus, where it is doing work.
 */
.wp-block-petpartners-category-nav__group-link,
.wp-block-petpartners-category-nav__child a {
	display: flex;
	min-height: var( --wp--custom--chrome--tap-target );
	align-items: center;
	color: var( --wp--preset--color--brown );
	font-family: var( --wp--preset--font-family--sans );
	text-decoration: none;
}

.wp-block-petpartners-category-nav__group-link:hover,
.wp-block-petpartners-category-nav__group-link:focus-visible,
.wp-block-petpartners-category-nav__child a:hover,
.wp-block-petpartners-category-nav__child a:focus-visible {
	color: var( --wp--preset--color--purple-hover );
	text-decoration: underline;
}

.wp-block-petpartners-category-nav__group-link {
	font-size: var( --wp--preset--font-size--base );
	font-weight: 600;
	line-height: var( --wp--custom--typography--base--line-height );
}

.wp-block-petpartners-category-nav__children {
	padding-left: var( --wp--preset--spacing--md );
}

.wp-block-petpartners-category-nav__child a {
	font-size: var( --wp--preset--font-size--base );
	line-height: var( --wp--custom--typography--base--line-height );
}

/* --- Account (InnerBlocks: woocommerce/customer-account) --------------- */

.wp-block-petpartners-category-nav__panel-foot {
	margin-top: auto;
	padding-top: var( --wp--preset--spacing--md );
	border-top: 1px solid var( --wp--preset--color--border );
}

@media ( prefers-reduced-motion: reduce ) {

	.wp-block-petpartners-category-nav__backdrop,
	.wp-block-petpartners-category-nav__panel {
		transition: none;
	}
}