/**
 * The project side menu.
 *
 * Figma 523:5093 — a 232-wide panel against the reading edge, holding the
 * project's logo and one line per section, with a bar in the project's colour
 * marking where the reader is.
 *
 * It is fixed and centred rather than sticky inside a section: it outlives
 * every section on the page and has to survive all of them.
 */

.kata-pmenu {
	/*
	 * THE TRAVEL IS HELD IN A CUSTOM PROPERTY so it cannot be mirrored.
	 *
	 * rtlcss rewrites the X term of a literal translate and the flipped sheet
	 * is the one this site loads. The menu enters from beyond the reading edge,
	 * which is the physical right here — written literally, the rewrite would
	 * send it in from the left, across the page it is supposed to sit beside.
	 */
	--kata-pmenu-out: 120%;
	--kata-pmenu-ms: 620ms;
	--kata-pmenu-ease: cubic-bezier( 0.22, 1, 0.36, 1 );

	position: fixed;
	z-index: 20;
	/* Logical, so it is the reading edge in either direction. */
	inset-inline-start: 0;
	inset-block-start: 50%;
	/*
	 * A panel, not a proportion. 232 on the 1600 frame, which is 14.5rem — so
	 * it holds its size against the type beside it instead of becoming a
	 * 557-pixel slab on a 4K screen.
	 *
	 * EVERY LENGTH INSIDE IT IS rem FOR THE SAME REASON, and they were not.
	 * At exactly 1600 one vw is one rem, so a panel measured in rem and filled
	 * with vw looks perfect on the drawn width and comes apart either side of
	 * it: the logo was `8.856vw`, the right number in the wrong unit, so it
	 * held 141.69 at 1600 and grew to 227 of the same 232 panel on a 2560
	 * screen. That is the logo the review saw as too big. Converting the unit
	 * changes nothing at 1600 and fixes every width above and below it.
	 */
	inline-size: 14.5rem;
	min-inline-size: 200px;
	padding-block: 0.688rem;
	/*
	 * GLASS, AND THE SAME GLASS THE NARROW PANEL ALREADY USES.
	 *
	 * This is one component in two arrangements, and only the drop-down had the
	 * treatment: the panel down the side was an opaque slab with a border so
	 * faint it read as an edge of nothing. The page now reads through it, which
	 * is what the review asked for, and the two arrangements finally match.
	 *
	 * `backdrop-filter` IS the whole effect, so the background has to stay
	 * part-transparent — an opaque surface blurs nothing. The border is the
	 * narrow panel's white rather than the old quarter-strength white: against
	 * a blurred page an edge has to be legible or the panel has no shape.
	 */
	border: 1px solid rgba( 255, 255, 255, 0.6 );
	background-color: rgba( 0, 0, 0, 0.3 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	box-shadow: 0 0 20px 0 rgba( 0, 0, 0, 0.15 );

	/*
	 * Out of the way until the page asks for it, and out of the way for the
	 * keyboard too — `visibility` is what takes it out of the tab order, and it
	 * is the one property here that can still be transitioned.
	 */
	visibility: hidden;
	transform: translateY( -50% ) translateX( var( --kata-pmenu-out ) );
	transition: transform var( --kata-pmenu-ms ) var( --kata-pmenu-ease ),
		visibility 0s linear var( --kata-pmenu-ms );
}

.kata-pmenu.is-shown {
	visibility: visible;
	transform: translateY( -50% ) translateX( 0 );
	transition: transform var( --kata-pmenu-ms ) var( --kata-pmenu-ease ),
		visibility 0s;
}

/*
 * THE LOGO IS NOT CENTRED IN THE FRAME, and centring it was 20 out.
 *
 * 2130:1395 inks it on 41.6..150.7 of the 232 panel — 81.3 clear on the reading
 * edge and 41.6 on the far one. Its centre therefore sits about 20 toward the
 * far edge of the panel's, which reads as optical centring against a wordmark
 * whose sparkle hangs off the right.
 *
 * Stated as the two measured insets rather than as a nudge off centre, so the
 * numbers in the rule are the numbers in the frame. They leave exactly 109.1
 * between them, which is the logo's own width.
 */
.kata-pmenu__logo {
	display: flex;
	justify-content: center;
	padding-inline: 5.081rem 2.6rem; /* 81.3 / 41.6 of the 232 panel */
	padding-block-end: 1.438rem;
}

.kata-pmenu__logo-img {
	/*
	 * 109.1 OF THE 232 PANEL — the logo's INK, not its placement box.
	 *
	 * 2130:1395 gives the logo a 141.69 x 71 frame, but the artwork inside it
	 * only inks 109.1 x 55.5 — measured off the rendered frame, because the box
	 * carries padding the image does not fill. Sized to the box, the mark came
	 * out a third too large.
	 *
	 * The uploaded asset is trimmed to its own ink, so width alone places it and
	 * the height follows the artwork's true proportion rather than being forced
	 * into a box of a different shape.
	 */
	inline-size: 6.819rem; /* 109.1 of 232 */
	min-inline-size: 110px;
	block-size: auto;
}

/*
 * The marker is one bar that moves, not one per row.
 *
 * Seven bars switching on and off can only appear and disappear; a single bar
 * that travels carries the reader's eye from where they were to where they now
 * are, and it is a transform, so it costs nothing to move.
 */
/*
 * A ONE-PIXEL BAR THAT IS SCALED, not a bar that is resized.
 *
 * Height is scaled from a single pixel rather than set, which is what lets the
 * bar STRETCH between two rows instead of merely growing into place: one
 * transform carries both where it is and how long it is, so the script can send
 * it out to span the row it is leaving and the one it is arriving at, then let
 * it gather into the new one. Animating `block-size` could never do that — it
 * only ever interpolates between two lengths, and it costs a layout on every
 * frame besides.
 *
 * No transition here on purpose: the script owns the movement, because a
 * transition cannot pass through a third state on its way between two.
 */
.kata-pmenu__marker {
	position: absolute;
	inset-inline-start: auto;
	inset-inline-end: -1px;
	inset-block-start: 0;
	inline-size: 0.438rem;
	min-inline-size: 5px;
	block-size: 1px;
	background-color: var( --kata-accent, var( --wp--preset--color--magenta ) );
	transform-origin: 50% 0;
	transform: translateY( var( --kata-pmenu-marker-y, 0px ) )
		scaleY( var( --kata-pmenu-marker-h, 56 ) );
	will-change: transform;
}

/*
 * THE LIST IS INSET FROM THE READING EDGE, and by more than looks obvious.
 *
 * 2130:1395 holds its rows against x=186 of the 232 panel and each row keeps a
 * 10 inset of its own, so the marks stop 56 short of the panel's edge. Measured
 * twice — off the node, and off the rendered frame, where every row's ink ends
 * at 174.5 without exception. It is a wide margin for a narrow panel, which is
 * why it is stated here rather than left to look like a mistake.
 */
.kata-pmenu__list {
	margin: 0;
	padding: 0;
	padding-inline-start: 2.875rem; /* 46 — 232 - 186 */
	list-style: none;
}

.kata-pmenu__link {
	display: flex;
	align-items: center;
	/*
	 * HELD AGAINST THE READING EDGE — and `flex-end` is the wrong end of it.
	 *
	 * The main axis runs right-to-left in this document, so `flex-end` is the
	 * physical LEFT: every row was pushed away from the reading edge and each
	 * one stopped wherever its own name ran out. 2130:1395 ends all seven on
	 * one line at x=174.5, measured off the rendered frame. `flex-start` is the
	 * reading edge in either direction, which is what puts them back on it.
	 */
	justify-content: flex-start;
	gap: 0.625rem; /* 10 — 2130:1395 sets it between name and mark */
	min-block-size: 3.563rem; /* 57 — the drawn row height */
	padding-inline: 0.625rem; /* 10 — the row's own inset, 2130:1395 */
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--sm );
	text-decoration: none;
	opacity: 0.65;
	transition: opacity 220ms ease;
}

.kata-pmenu__link:hover,
.kata-pmenu__link:focus-visible {
	opacity: 1;
}

.kata-pmenu__link.is-current {
	font-weight: 700;
	opacity: 1;
}

/*
 * The name reads toward the mark, not away from it. `justify-content: flex-end`
 * on the row already holds the pair against the reading edge; this keeps a name
 * that wraps to two lines aligned with the one above it rather than centred
 * under it.
 */
.kata-pmenu__label {
	text-align: start;
}

/* Only the mark takes the accent — every name stays white in the frame. */
.kata-pmenu__link.is-current .kata-pmenu__icon {
	color: var( --kata-accent, var( --wp--preset--color--magenta ) );
}

/* The trigger has no work to do while the whole list is on screen. */
.kata-pmenu__trigger {
	display: none;
}

/*
 * THE MARKS ARE DRAWN IN BOTH ARRANGEMENTS. They used to be off here.
 *
 * The note that replaced this said "the frame draws no icons there", and that
 * was simply a misreading: 2130:1395 — the 232-wide panel down the side — gives
 * every one of its seven rows a 16 x 16 `Icon` frame on the reading edge, the
 * same closed set `Support\MenuIcon` already draws (compass, leaf, map, image,
 * grid, envelope, info). They were rendered by the template and then hidden by
 * this rule, which is why the review asked for icons that were already there.
 */
.kata-pmenu__icon {
	display: block;
	flex: none;
	inline-size: 1rem; /* 16 */
	block-size: 1rem;
}

/* The trigger's own mark still belongs to the collapsed panel alone. */
.kata-pmenu__trigger-icon {
	display: none;
}

/*
 * NARROW: A DROP-DOWN FROM THE TOP, NOT A PANEL DOWN THE SIDE.
 *
 * There is no room beside the page at this width, and the list is seven items
 * deep — shown open it would cover most of what a reader came for. So it
 * collapses to one line naming the section they are in, and opens on a tap.
 *
 * Not simply hidden, which is what it did before: a reader on a phone had no
 * way to reach a section except by scrolling past all the others.
 */
@media ( max-width: 1099px ) {
	/*
	 * A PANEL, NOT A STRIP.
	 *
	 * Figma 2130:3153 — 192 wide on a 395 screen, held 20 in from the reading
	 * edge and hung under the header, translucent over the page with the
	 * building showing through it. What was here before was a full-width opaque
	 * bar: structurally a menu, visually nothing like the design.
	 */
	.kata-pmenu {
		inset-block-start: calc( var( --kata-header-visible, 0px ) + 3.42vw );
		inset-block-end: auto;
		/* 20 of 395 from the reading edge; 192 of 395 wide. */
		inset-inline-start: 5.06vw;
		inset-inline-end: auto;
		/*
		 * 55, NOT THE FRAME'S 48.61 — widened on purpose.
		 *
		 * Collapsed, this panel shows the section the reader is in, and at
		 * 48.61vw the longest of them — "צאו לסיור °360" — had 110 to sit in and
		 * broke across two lines, which made the closed menu two rows deep on
		 * that section alone. 55vw gives the label 135 and it fits on one; it is
		 * the smallest step that does, and still well inside the 260 ceiling.
		 */
		inline-size: 55vw;
		min-inline-size: 0;
		max-inline-size: 260px;
		padding-block: 0;
		border: 1px solid var( --wp--preset--color--white );
		/*
		 * The page reads through it. `backdrop-filter` is the whole effect, so
		 * the background must stay part-transparent — an opaque surface would
		 * blur nothing.
		 */
		background-color: rgba( 0, 0, 0, 0.3 );
		-webkit-backdrop-filter: blur( 10px );
		backdrop-filter: blur( 10px );
		box-shadow: 0 0 20px 0 rgba( 0, 0, 0, 0.15 );
		/* It comes down from above, the edge it belongs to. */
		transform: translateY( -130% );
	}

	.kata-pmenu.is-shown {
		transform: translateY( 0 );
	}

	.kata-pmenu__logo {
		display: none;
	}

	/*
	 * THE BAR STAYS — it is in the frame, on the panel's far edge, in the
	 * project's colour. Hidden before because the collapsed menu had no room
	 * for it; it has room now.
	 */
	.kata-pmenu__marker {
		display: block;
		inset-inline-start: auto;
		inset-inline-end: -1px;
		inline-size: 7px;
		min-inline-size: 0;
	}

	/*
	 * BUT ONLY WHILE THERE IS A LIST FOR IT TO MARK.
	 *
	 * "It has room now" is true of the menu OPEN. Shut, the panel is a single
	 * pill and the bar keeps the geometry of the open list — it is placed
	 * against a row that is not on the page — so it came adrift and stood on
	 * its own down the middle of whatever was underneath, which on this page is
	 * the map. Choosing a section closes the list, which is exactly when a
	 * reader saw it.
	 *
	 * The marker is the element immediately before the list, so its state can
	 * be read directly off the `hidden` attribute the script already maintains
	 * — no second flag to keep in step with the first.
	 */
	.kata-pmenu__marker:has( + .kata-pmenu__list[ hidden ] ) {
		display: none;
	}

	.kata-pmenu__trigger {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		inline-size: 100%;
		min-block-size: 42px;
		padding-block: 0.313rem;
		padding-inline: 0.625rem;
		border: 0;
		background: transparent;
		color: var( --wp--preset--color--white );
		font-family: inherit;
		font-size: 1.247rem;
		font-weight: 700;
		letter-spacing: -0.025rem;
		line-height: 1.828;
		text-align: start;
		cursor: pointer;
	}

	/* The name takes the room, which pushes the chevron out to the far edge. */
	.kata-pmenu__trigger-label {
		flex: 1 1 auto;
		text-align: start;
	}

	/*
	 * The current section's own mark, in the project's colour — the frame draws
	 * it beside the name on the trigger exactly as it appears in the list. It is
	 * kept in step by the script, which copies whichever row is current.
	 */
	.kata-pmenu__trigger-icon {
		display: block;
		flex: none;
		order: -1;
		inline-size: 16px;
		block-size: 16px;
		color: var( --kata-accent, var( --wp--preset--color--magenta ) );
	}

	.kata-pmenu__trigger-mark {
		flex: none;
		inline-size: 24px;
		block-size: 24px;
		color: var( --wp--preset--color--white );
		transition: rotate 240ms ease;
	}

	.kata-pmenu__trigger[ aria-expanded='true' ] .kata-pmenu__trigger-mark {
		rotate: 180deg;
	}

	/*
	 * `hidden` rather than a height of nothing: shut, these are not on the page
	 * at all, so nothing reads them out and nothing takes a tab stop.
	 */
	.kata-pmenu__list[ hidden ] {
		display: none;
	}

	.kata-pmenu__list {
		max-block-size: 70vh;
		overflow-y: auto;
	}

	/* 10 of padding around a 36.483 line — 56.5 a row, as the frame sets it. */
	.kata-pmenu__link {
		gap: 0.625rem;
		min-block-size: 0;
		padding-block: 0.625rem;
		padding-inline: 0.625rem;
		font-size: 1.247rem;
		font-weight: 400;
		letter-spacing: -0.025rem;
		line-height: 1.828;
		opacity: 0.9;
	}

	/*
	 * The mark leads the row, which in this direction is the reading edge — the
	 * frame lines all seven up against the panel's outer edge with their names
	 * running inward.
	 */
	/*
	 * The drop-down is its own width and holds its rows against its own edge,
	 * so the side panel's 46 inset — which exists to place the marks 56 short
	 * of a 232 panel — has no meaning here and is taken back off.
	 */
	.kata-pmenu__list {
		padding-inline-start: 0;
	}

	/* Shown in both arrangements now — see the rule above. */
	.kata-pmenu__label {
		flex: 1 1 auto;
	}

	.kata-pmenu__link.is-current {
		font-weight: 700;
		opacity: 1;
	}

	/* Only the mark takes the accent — every name stays white in the frame. */
	.kata-pmenu__link.is-current .kata-pmenu__icon {
		color: var( --kata-accent, var( --wp--preset--color--magenta ) );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.kata-pmenu {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Out of the way at the footer
 *
 * The panel is fixed, so it otherwise rides over the footer and covers the
 * form and the marks. `visibility` as well as opacity, so it is out of the tab
 * order once it is gone rather than an invisible set of links a keyboard still
 * walks through.
 * ------------------------------------------------------------------------ */

.kata-pmenu.is-past {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var( --kata-duration-fast, 200ms ) var( --kata-ease-out, ease-out ),
		visibility 0s linear var( --kata-duration-fast, 200ms );
}