/*
 * Mobile category bar: header bottom row, Widget Area 1 (ClickUp 86eyfma06).
 *
 * These rules came from the Perfmatters code snippet `5-general`, which no longer
 * runs on live because the plugin is gone. Without them the nav menu widget in the
 * header's bottom row renders as a plain vertical list, which is why the bar
 * "stacked vertical instead of horizontal" and was switched off on live.
 *
 * Ported byte for byte from the snippet, limited to the bar itself. The rest of
 * `5-general` (mobile header spacing, search suggestions, wishlist, badges) is
 * deliberately left out: live has not had it for weeks, nobody has reported it,
 * and changing that much header styling in one go is a separate piece of work.
 *
 * Contrast, measured on the reference build from computed styles against the real
 * rendered background: bar link `#333` on `#fff` at 14px bold gives 12.63:1, which
 * passes WCAG 2.1 AA. The scrollbar colour below is a scrollbar affordance rather
 * than text, so no text contrast ratio applies to it: contrast-exempt.
 *
 * editor-friendly-ok: these selectors target the Blocksy header's own markup
 * (`[data-row]`, `[data-items]`, `[data-id="widget-area-1"]`), which an editor
 * cannot reach from the block editor. The bar itself is still turned on and off in
 * the Customizer, and its links are still a normal WordPress menu, so nothing an
 * editor is meant to manage is hard-coded here.
 */

/* Let the row scroll sideways instead of wrapping, with a thin brand-coloured bar. */
header [data-row="bottom"] .ct-container [data-items] {
	overflow: auto;
	scrollbar-color: #c3bb2e transparent;
	scrollbar-width: thin;
	width: 100%;
	max-width: max-content;
}

header [data-device="mobile"] [data-row="bottom"] .ct-container [data-items] [data-id="widget-area-1"] {
	width: 100%;
}

header [data-device="mobile"] .ct-widget.widget_nav_menu .menu-main-menu-container {
	width: max-content;
}

/* The rule that makes it a bar: without this the menu is a vertical list. */
header [data-device="mobile"] .ct-widget.widget_nav_menu .menu-main-menu-container .widget-menu {
	display: flex;
	gap: 12px;
	align-items: center;
}

header [data-device="mobile"] .ct-widget.widget_nav_menu .menu-main-menu-container .widget-menu li a {
	font-weight: bold;
	font-size: 14px;
	line-height: 28px;
}