/**
 * Kawah Buku Press — mobile navigation.
 *
 * The drill-down drawer and the mobile arrangement of the header bar, ported
 * from the main site. Sizes are carried across as they are (21px icons, 8px
 * icon padding, 13px bar padding, 26px root rows, 22px second tier), because
 * matching the store means matching its measurements, not approximating them.
 *
 * ROW PADDING IS THE STORE'S AGAIN. It went up to 13px for one round, when the
 * Books panel was still printing eleven subjects under two headings and read
 * as dense beside the store's five. That was never a padding problem — a row
 * here is the same height as a row there, to the pixel — and now that each
 * shelf drills into a panel of its own and no panel carries more than six
 * rows, the store's 9px is right for the same reason it was always right.
 *
 * The space that does the separating is around the section label, not inside
 * the rows. See .kb-mnav__eyebrow below.
 *
 * With the subjects gone from the Books panel there is no second tier left in
 * the drawer, so .kb-mnav__list--sub has gone with them, along with
 * .kb-mnav__seeall, which was styled for a truncation this theme never
 * rendered. Every row is one size now, which is what a drill-down is for.
 *
 * The section label stays, because the Books panel still has two kinds of row
 * in it: four destinations and two doors.
 *
 * Colours are NOT carried across. The store hard-codes #202124, #5f6368,
 * #b3956a; this theme has tokens for all three, and using them means a change
 * to the palette reaches here too.
 *
 * One concern per file, so nothing here belongs in kb-ui.css: that file is the
 * search overlay and the Subjects panel, which are desktop-and-mobile both.
 */

/* ==========================================================================
   The bar

   Below the breakpoint the primary menu and the Subjects control leave the
   bar — both are in the drawer — and the hamburger joins search in the
   right-hand cluster. That cluster is the whole difference from core's
   overlay menu, which puts its toggle beside the wordmark.
   ========================================================================== */

/* The drawer is positioned against the header, so the header has to be a
   positioning context. It is not sticky, so this costs nothing. */
.kb-header { position: relative; }

.kb-menu-trigger {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kb-ink);
	line-height: 0;
	cursor: pointer;
}

.kb-menu-trigger__x { display: none; }
.kb-menu-trigger[aria-expanded="true"] .kb-menu-trigger__bars { display: none; }
.kb-menu-trigger[aria-expanded="true"] .kb-menu-trigger__x { display: block; }

@media (max-width: 781px) {

	/* Both are in the drawer now. The Subjects control in particular has no
	   room to say its name at this width, and an icon alone would be a
	   second hamburger. */
	.kb-header__brand .wp-block-navigation,
	.kb-header__tools .kb-subjects-trigger { display: none; }

	.kb-menu-trigger { display: inline-flex; }

	/* One set: same box, same spacing, same optical centre. */
	.kb-header__tools { gap: 0; }
	.kb-header__tools .custom-search-trigger,
	.kb-header__tools .kb-menu-trigger { padding: 13px 8px; }
	.kb-header__tools > *:last-child .kb-menu-trigger,
	.kb-header__tools .kb-menu-trigger:last-child { padding-right: 0; }
	.kb-header__tools .kb-header-icon { width: 21px; height: 21px; }

	/* The utility strip goes entirely. A second band of chrome above a 56px
	   header is most of a phone's first screen, and its two links plus the
	   bookstore CTA reappear at the foot of the drawer. */
	.kb-header__utility { display: none; }
}


/* ==========================================================================
   The drawer

   A panel under the header, not a full-screen cover: the wordmark and the
   close control stay where they were, so the way out is where the way in
   was. Its own scroll, so a long menu on a short screen moves the panel and
   not the page behind it.
   ========================================================================== */

.kb-mnav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	max-height: 80vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--kb-card);
	border-top: 1px solid var(--kb-border);
	box-shadow: 0 12px 24px rgba( 23, 20, 15, 0.10 );
}

.kb-mnav[hidden] { display: none; }

.kb-mnav__panel { padding: 20px var(--kb-gutter) 26px; }
.kb-mnav__panel[hidden] { display: none; }

/* Panels enter from the side they conceptually came from. */
@keyframes kbMnavIn   { from { opacity: 0; transform: translateX(18px); }  to { opacity: 1; transform: none; } }
@keyframes kbMnavBack { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

.kb-mnav__panel.is-in   { animation: kbMnavIn .22s ease both; }
.kb-mnav__panel.is-back { animation: kbMnavBack .22s ease both; }


/* --- Rows ---------------------------------------------------------------- */

.kb-mnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kb-mnav__list li { margin: 0; width: 100%; }

/* One row, one destination. Large and quiet — the type does the work, so
   there are no rules, no chips and no boxes. */
.kb-mnav__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 9px 0;
	border: 0;
	background: none;
	font-family: var(--kb-font-heading);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.28;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	color: var(--kb-ink);
	cursor: pointer;
}

.kb-mnav__item:hover,
.kb-mnav__item:focus { color: var(--kb-ink); text-decoration: none; }
.kb-mnav__item:active { color: var(--kb-primary-deep); }

.kb-mnav__chev { color: var(--kb-primary); flex: none; }


/* --- Section label -------------------------------------------------------

   The store's type: 11px, 700, 1.2px of letter-spacing, uppercase. Its colour
   is #b3956a, a muted gold that comes out at 2.6:1 on white; primary-deep is
   used instead for the same reason the bookstore link at the foot of this
   drawer does. Swap the one declaration if the tan is wanted more than the
   contrast.

   The space above it is doing the work the row padding was asked to do two
   rounds ago. The rows are close now because they are one list; the gap that
   says "a different kind of thing starts here" is this one, and it has to be
   obviously larger than the gaps inside either list or it says nothing.

   THAT SPACE IS PADDING, NOT MARGIN, AND THE SELECTOR IS TWO CLASSES DEEP.
   Written as a 42px margin on a single class it did not survive to the page:
   the rendered gap above the label came out smaller than the gap below it,
   where the rule asks for one 32px larger. A top margin has two ways to lose
   — it collapses against whatever sits above it, and a one-class selector
   ties with anything else of the same weight that loads later. Padding does
   neither, and .kb-mnav__panel in front of it settles the second.

   The label belongs to the list under it, so the gap below stays small: 44
   above and 8 below is what makes it a heading for the shelves rather than a
   line floating between two groups.
   ------------------------------------------------------------------------ */

.kb-mnav__panel .kb-mnav__eyebrow {
	margin: 0 0 8px;
	padding-top: 44px;
	font-family: var(--kb-font-heading);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--kb-primary-deep);
}


/* --- Back ---------------------------------------------------------------- */

.kb-mnav__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	padding: 2px 0;
	border: 0;
	background: none;
	font-family: var(--kb-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--kb-body);
	cursor: pointer;
}

.kb-mnav__back .kb-mnav__chev { color: var(--kb-body); }


/* --- Utility row --------------------------------------------------------- */

/* No rule above it: the gap is the separator. */
.kb-mnav__utility {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 48px 0 0;
	padding: 0;
}

.kb-mnav__utility li { margin: 0; width: auto; }

.kb-mnav__utility a {
	font-family: var(--kb-font-body);
	font-size: 13px;
	font-weight: 400;
	color: var(--kb-muted);
	text-decoration: none;
}

.kb-mnav__utility a:hover,
.kb-mnav__utility a:focus-visible { color: var(--kb-primary-deep); }

/* The bookstore link keeps the weight it had in the bar it came from — it is
   the catalogue's only outbound conversion, and a move should not demote it.
   primary-deep, not primary: this is text on white, where the brand gold
   fails at 2.0:1. */
.kb-mnav__utility-cta a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
	color: var(--kb-primary-deep);
}

.kb-mnav__utility-cta svg { flex: none; }


/* --- Desktop ------------------------------------------------------------- */

/* Nothing here exists above the breakpoint. The drawer is rendered into the
   page either way — one markup, one set of links — and simply never shown. */
@media (min-width: 782px) {
	.kb-mnav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.kb-mnav__panel.is-in,
	.kb-mnav__panel.is-back { animation: none; }
}