/* ==========================================================================
   Section sub-navigation bar (14 Oct 2026, second outside review).
   Loads after components.css (see inc/assets.php), so a rule here wins a tie.
   Colours, sizes and radii are theme.json tokens; nothing is hard-coded.

   The review found two things on /yofi/book/ at phone width:
   1. The seven links sat in a horizontally scrolling strip with its scrollbar
      hidden, so the last link ("Drinks menu") ran off the edge with no sign
      that there was more.
   2. YOFI's bar (terracotta, dark ink) looked unlike the other sections'.

   Fix: below 1100px the link row becomes an "In this section" menu built from
   details/summary (no JavaScript); from 1100px up the links sit in one row
   that wraps rather than scrolls. The structure, height, type size and
   spacing are now one set of rules for every section; only the colour pair
   (--bnjc-section / --bnjc-section-ink, from the Section term) differs.
   ========================================================================== */

/* ---- One structure for every section ------------------------------------------------- */
.bnjc-section-bar__inner {
	position: static;
	min-block-size: 56px;
	gap: 8px 28px;
	padding-block: 0;
}

.bnjc-section-bar__name {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	flex: none;
}

/* Wide screens: one row of links that wraps instead of scrolling. */
.bnjc-section-bar__links {
	flex-wrap: wrap;
	gap: 0 22px;
	overflow: visible;
	min-inline-size: 0;
}

.bnjc-section-bar__links a,
.bnjc-section-bar__menu-list a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-block: 0;
	/* Full strength: the old 0.82 opacity put dark ink on terracotta under 4.5:1. */
	opacity: 1;
}

.bnjc-section-bar__links a {
	text-decoration: none;
}

/* Readable, not a decorative strip: 15px (it was 12px), the link and the button alike.
   Capitals stay for the section name only; the links are sentence case at this size. */
.bnjc-section-bar__links a,
.bnjc-section-bar__menu-list a,
.bnjc-section-bar__menu summary,
.bnjc-section-bar__cta {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.01em;
	text-transform: none;
	font-weight: 700;
}

.bnjc-section-bar__links a:hover,
.bnjc-section-bar__links a[aria-current="page"],
.bnjc-section-bar__menu-list a:hover,
.bnjc-section-bar__menu-list a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Focus: the section's own ink reads on its ground in every section (the site's
   Ink Blue ring does not on a dark section). Same 2px weight as the site's ring. */
.bnjc-section-bar a:focus-visible,
.bnjc-section-bar summary:focus-visible {
	outline: 2px solid var(--bnjc-section-ink, var(--white));
	outline-offset: 2px;
}

.bnjc-section-bar__cta {
	min-block-size: 44px;
}

.bnjc-section-bar__cta:focus-visible {
	outline: 2px solid var(--bnjc-section-ink, var(--white));
	outline-offset: 3px;
}

/* The compact menu is hidden on wide screens. */
.bnjc-section-bar__menu {
	display: none;
}

/* ---- Narrow screens: "In this section" ----------------------------------------------- */
@media (max-width: 1099px) {

	.bnjc-section-bar__links {
		display: none;
	}

	.bnjc-section-bar__inner {
		gap: 0 14px;
		min-block-size: 56px;
	}

	.bnjc-section-bar__menu {
		display: block;
		margin-inline-start: auto;
	}

	.bnjc-section-bar__menu > summary {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-block-size: 44px;
		padding-inline: 4px;
		cursor: pointer;
		list-style: none;
		font-size: var(--wp--preset--font-size--overline);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: inherit;
	}

	.bnjc-section-bar__menu > summary::-webkit-details-marker {
		display: none;
	}

	/* A chevron drawn in CSS, so it follows the ink colour and flips in RTL. */
	.bnjc-section-bar__menu > summary::after {
		content: "";
		inline-size: 8px;
		block-size: 8px;
		border-inline-end: 2px solid currentColor;
		border-block-end: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform var(--dur-fast) var(--ease-out);
	}

	.bnjc-section-bar__menu[open] > summary::after {
		transform: translateY(2px) rotate(-135deg);
	}

	/* The open list drops over the page under the bar, in the section's colours,
	   rather than pushing the page down (the bar is sticky). */
	.bnjc-section-bar__menu-list {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		z-index: 21;
		margin: 0;
		padding-block: 6px 12px;
		padding-inline: var(--wp--style--root--padding-left, var(--gutter));
		list-style: none;
		background: var(--bnjc-section, var(--navy));
		color: var(--bnjc-section-ink, var(--white));
		box-shadow: var(--wp--preset--shadow--raised);
		max-block-size: calc(100vh - var(--header-h) - 56px);
		overflow-y: auto;
	}

	.bnjc-section-bar__menu-list li {
		border-block-end: 1px solid currentColor;
		border-block-end-color: color-mix(in srgb, currentColor 22%, transparent);
	}

	.bnjc-section-bar__menu-list li:last-child {
		border-block-end: 0;
	}

	.bnjc-section-bar__menu-list a {
		display: flex;
		inline-size: 100%;
		min-block-size: 48px;
		color: inherit;
		font-size: var(--wp--preset--font-size--overline);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.bnjc-section-bar__menu-list a[aria-current="page"] {
		text-decoration: underline;
	}

	/* The action sits on its own row under the name and menu, as before. */
	.bnjc-section-bar__cta {
		order: 3;
		inline-size: 100%;
		justify-content: center;
		margin-block: 0 10px;
	}
}

/* ---- Sticking (UX review 22 Oct, item 1) --------------------------------------------- */
/* Tablets: the bar sticks under the 76px header, so keep it to one row (name, menu and
   the action side by side) rather than the 98px two-row phone bar. */
@media (min-width: 768px) and (max-width: 1099px) {

	.bnjc-section-bar__cta {
		order: 0;
		inline-size: auto;
		margin-block: 0;
	}
}

/* Phones: header 64 + a 98px two-row bar + the fixed bottom bar would take a third of the
   screen, so the bar scrolls away with the page. It stays positioned (relative, not
   static) because the open "In this section" list is placed against it. */
@media (max-width: 767px) {

	.bnjc-section-bar {
		position: relative;
		inset-block-start: auto;
	}
}