/* Design B, "Blue Sky": the menu is a bar across the top that stays in place; each group opens a list under it.
   Its colors, type faces, header and footer are in blue_sky.css (shared with Design C); the shared rules in ui_base.css. */
:root {
	--page-max: 1240px;                 /* SETTING: the widest the page gets */
	/* the menu: Design B's first colors again (11 Nov 2026, Will: "For the menus in design B, please restore to the previous
	   color scheme"): a white bar, dark blue-grey text, pale blue under the mouse, pale yellow with a sunflower-yellow line
	   for what is chosen. (Design C keeps the old look's yellow menu: blue_sky.css.) */
	--nav-ink: #2c3e50; --nav-ink-strong: #1f2d3d; --nav-soft: #6b7f92; --nav-hover: #eaf4fb; --nav-hover-ink: #1f2d3d; --nav-count-bg: #eaf1f6;
	--nav-active-bg: #fff3c4; --nav-active-ink: #12507b; --group-ico: #2f8fcf; --drawer-bg: #ffffff;
	--nav-bg: #ffffff; --nav-line: #d9e6f0;
}
.ui-group.has-active > .ui-group-btn { color: var(--nav-active-ink); }
.ui-group-btn:hover .ui-group-count { background: var(--nav-count-bg); }
.ui-nav-find { border-color: var(--line); }

/* a wide window: the menu is a bar across the top; each group opens a list under it */
@media screen and (min-width: 901px) {
	.ui-brand-tag { font-size: 14.5px; }
	#wrapper { display: block; }
	#wrapper > .dontprint { position: sticky; top: 0; z-index: 60; background: var(--nav-bg); border-bottom: 1px solid var(--nav-line); box-shadow: 0 2px 10px rgba(18,63,94,.07); }
	#body #navigation.ui-nav #mainNav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; max-width: var(--page-max); margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
	#body #navigation.ui-nav #mainNav > li { position: relative; }
	#body #navigation.ui-nav #mainNav > li.mainNav > a { padding: 14px 12px; font-weight: 600; border-radius: 0; }
	#body #navigation.ui-nav #mainNav > li.mainNav.active > a { background: none; box-shadow: inset 0 -3px 0 #ffb703; }
	.ui-group-btn { padding: 14px 10px; border-radius: 0; font-size: 15px; font-weight: 600; white-space: nowrap; gap: 6px; border-bottom: 3px solid transparent; }
	.ui-group-btn .ui-ico:first-child, .ui-group-count { display: none; }
	/* the group the page is in: a sunflower-yellow line under it; the group that is open: pale blue */
	.ui-group.has-active > .ui-group-btn { border-bottom-color: #ffb703; color: var(--nav-active-ink); }
	.ui-group.is-drop > .ui-group-btn { background: var(--nav-hover); }
	.ui-nav-tools { order: 99; margin-left: auto; flex: 0 1 190px; min-width: 130px; }
	.ui-nav-find input { padding: 6px 0; }
	/* a long menu (the Admin's): no arrows, so the groups fit in one line on a wide window */
	#body #navigation.ui-nav #mainNav:has(> li:nth-child(10)) .ui-group-btn .ui-ico:last-child { display: none; }
	#body #navigation.ui-nav .ui-nav-results { position: absolute; right: 0; top: 100%; width: 300px; max-height: 70vh; overflow-y: auto; z-index: 70; }
	#bd { max-width: var(--page-max); margin: 24px auto 32px; padding: 28px 32px 32px; }
	#navigation.ui-searching .ui-group { display: block; }
	.ui-group.is-open > .ui-group-items { display: none; }
	#body #navigation.ui-nav .ui-group.is-drop > .ui-group-items { display: block; position: absolute; left: 0; top: 100%; z-index: 70; min-width: 250px; max-height: calc(100vh - 220px); overflow-y: auto;
		padding: 8px; background: #ffffff; border: 1px solid var(--line); border-top: 3px solid #ffb703; border-radius: 0 0 10px 10px; box-shadow: 0 14px 34px rgba(18,63,94,.18); }
	#body #navigation.ui-nav .ui-group.is-drop.ui-wide > .ui-group-items { column-count: 2; column-gap: 8px; width: 560px; max-width: 92vw; }
	#body #navigation.ui-nav .ui-group.ui-wide > .ui-group-items > li { break-inside: avoid; }
	#body #navigation.ui-nav .ui-group.ui-right > .ui-group-items { left: auto; right: 0; }
}
@media screen and (max-width: 900px) {
	.ui-group { border-top: 0; }
}