/*
 * Kabsa — navigation bar.
 *
 * Every value a site owner would reasonably want to change is a custom property, emitted
 * from the settings. Token names mirror the schema with a --kbs- prefix, so a setting and
 * the rule it drives can be matched by name.
 *
 * Structural properties — display, position, flex — are deliberately not settings. A
 * setting that can break the layout is not a setting, it is a trap.
 */

/* ------------------------------------------------------------------------------ The bar */

.kabsa-bar {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	z-index: 999;
	/* The colour runs the full width of the screen while the links stay within the content
	   width — which is why the background is on the bar and the width limit is on the
	   element inside it. */
	background: var(--kbs-bar-bg, #ffffff);
}

/* Bar Clear takes it away again. */
.kabsa-bar.kabsa-clear { background: transparent; }

.kabsa-bar:not(.kabsa-no-line) { border-bottom: 1px solid var(--kbs-bar-line-color, #eaeaea); }
.kabsa-bar-bottom:not(.kabsa-no-line) { border-bottom: 0; border-top: 1px solid var(--kbs-bar-line-color, #eaeaea); }

/* Sticky rather than fixed: it keeps the bar in the flow, so the page below is not left
   sitting underneath it and needing a compensating margin that has to be kept in step with
   the bar's height. */
.kabsa-bar.kabsa-sticky { position: sticky; top: 0; }
.kabsa-bar.kabsa-sticky.kabsa-bar-bottom { top: auto; bottom: 0; }

.kabsa-bar-inner {
	max-width: var(--kbs-max-width, 1200px);
	margin: 0 auto;
	padding: var(--kbs-bar-padding, 10px) var(--kbs-bar-side-padding, 20px);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: var(--kbs-bar-height, 0px);
}

/* The mount holds the burger and the menu together, so the panel can be positioned against
   the button and the pair can be moved as one on a phone. */
.kabsa-mount {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

/* ---------------------------------------------------------------------------- The links */

.kabsa-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--kbs-link-gap, 22px);
	/* Alignment. With the logo centred this places the links within their own column, so
	   Right sits them beside the logo rather than at the far edge of the bar. */
	justify-content: var(--kbs-align, center);
	width: 100%;
	/* Without this a flex container refuses to shrink past its content, which is the other
	   half of the same overflow. */
	min-width: 0;
}

.kabsa-item { position: relative; display: flex; align-items: center; }

.kabsa-link {
	display: inline-block;
	/* Wider at the sides than top and bottom. Text needs more room beside it than above it
	   to read as a target rather than as words, and one setting doing both would have to be
	   wrong for one of them.

	   Proportional rather than a fixed five more. Adding a constant meant the sides could
	   never reach nothing: a bar with every padding set to zero still held its links thirteen
	   pixels in, which looks like a side padding the settings refuse to remove. A multiplier
	   keeps the shape at every size and lets zero mean zero. */
	padding: var(--kbs-link-padding, 8px) calc(var(--kbs-link-padding, 8px) * 1.6);
	border-radius: var(--kbs-link-radius, 4px);
	font-size: var(--kbs-link-font-size, 14px);
	line-height: var(--kbs-link-line-height, normal);
	font-weight: var(--kbs-link-weight, 500);
	text-transform: var(--kbs-link-transform, none);
	letter-spacing: var(--kbs-link-spacing, 0px);
	color: var(--kbs-link-color, inherit);
	background: var(--kbs-link-bg, transparent);
	text-decoration: none;
	white-space: nowrap;
}
.kabsa-link:hover,
.kabsa-link:focus-visible {
	color: var(--kbs-link-color-hover, var(--kbs-link-color));
	background: var(--kbs-link-bg-hover, transparent);
}

.kabsa-current > .kabsa-link { color: var(--kbs-current-color, var(--kbs-link-color)); }
/* An underline as well as a colour. Colour alone is invisible to anyone who cannot
   distinguish it, which is a good part of why this is a setting and defaults to on. */
.kabsa-current-underline .kabsa-current > .kabsa-link {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ------------------------------------------------------------------------- The submenus */

.kabsa-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	flex: 0 0 auto;
}
.kabsa-toggle .kabsa-icon { width: 12px; height: 12px; transition: transform .15s ease; }
.kabsa-item.kabsa-open > .kabsa-toggle .kabsa-icon { transform: rotate(180deg); }

.kabsa-submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: var(--kbs-submenu-width, 200px);
	margin: 0;
	padding: var(--kbs-submenu-padding, 8px);
	list-style: none;
	background: var(--kbs-submenu-bg, #ffffff);
	color: var(--kbs-submenu-color, inherit);
	border: var(--kbs-submenu-border-size, 1px) solid var(--kbs-submenu-border-color, #eaeaea);
	border-radius: var(--kbs-submenu-radius, 6px);
}
.kabsa-submenu-shadow .kabsa-submenu { box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.kabsa-bar-bottom .kabsa-submenu { top: auto; bottom: 100%; }

/* Opened by the script, which sets a class. Hover alone does not work on a touch screen —
   there is no hover — so the arrow is the control and hover is an extra on top. */
.kabsa-item.kabsa-open > .kabsa-submenu { display: block; }
@media (hover: hover) {
	.kabsa-item.kabsa-has-children:hover > .kabsa-submenu { display: block; }
}

.kabsa-submenu .kabsa-item { display: block; }
.kabsa-submenu .kabsa-link {
	display: block;
	white-space: normal;
	color: var(--kbs-submenu-color, inherit);
}

/* --------------------------------------------------------------------------- The burger */

.kabsa-burger {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--kbs-burger-size, 40px);
	height: var(--kbs-burger-size, 40px);
	padding: 0;
	background: var(--kbs-burger-bg, transparent);
	color: var(--kbs-burger-color, inherit);
	border: var(--kbs-burger-border-size, 1px) solid var(--kbs-burger-border-color, transparent);
	border-radius: var(--kbs-burger-radius, 4px);
	cursor: pointer;
}
.kabsa-burger .kabsa-icon { width: var(--kbs-burger-icon-size, 20px); height: var(--kbs-burger-icon-size, 20px); }
.kabsa-burger .kabsa-burger-close { display: none; }
.kabsa-burger[aria-expanded="true"] .kabsa-burger-open { display: none; }
.kabsa-burger[aria-expanded="true"] .kabsa-burger-close { display: block; }

/* Collapsed: the menu becomes the panel the burger opens. Everything below is shared by
   the desktop and mobile collapse, so the two cannot drift apart. */
.kabsa-collapsed .kabsa-burger { display: inline-flex; }

.kabsa-collapsed .kabsa-menu {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	z-index: 20;
	width: var(--kbs-panel-width, 240px);
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 2px;
	padding: var(--kbs-panel-padding, 12px);
	background: var(--kbs-panel-bg, #ffffff);
	color: var(--kbs-panel-color, inherit);
	border: var(--kbs-panel-border-size, 1px) solid var(--kbs-panel-border-color, #eaeaea);
	border-radius: var(--kbs-panel-radius, 8px);
}
.kabsa-panel-shadow.kabsa-collapsed .kabsa-menu { box-shadow: 0 14px 40px rgba(0,0,0,.16); }
.kabsa-collapsed.kabsa-open .kabsa-menu { display: flex; }

/* Anchored to the button's end of the bar rather than to the bar, which is what the mount
   is for. */
.kabsa-collapsed.kabsa-burger-right .kabsa-menu { right: 0; }
.kabsa-collapsed.kabsa-burger-left  .kabsa-menu { left: 0; }
.kabsa-collapsed.kabsa-burger-right .kabsa-mount { justify-content: flex-end; }
.kabsa-collapsed.kabsa-burger-left  .kabsa-mount { justify-content: flex-start; }

.kabsa-bar-bottom.kabsa-collapsed .kabsa-menu { top: auto; bottom: calc(100% + 8px); }

/* Inside the panel a submenu is not a dropdown — there is nowhere for it to drop to. It
   opens in place, indented, and only when its arrow is used. */
.kabsa-collapsed .kabsa-item { display: flex; flex-wrap: wrap; }
.kabsa-collapsed .kabsa-link { flex: 0 1 auto; text-align: inherit; }
.kabsa-collapsed .kabsa-submenu {
	position: static;
	width: 100%;
	min-width: 0;
	border: 0;
	padding: 0 0 0 14px;
	background: none;
	box-shadow: none;
}
@media (hover: hover) {
	/* Hover must not open a submenu inside the panel: the pointer crosses items on its way
	   down the list and would open each one in turn. */
	.kabsa-collapsed .kabsa-item.kabsa-has-children:hover > .kabsa-submenu { display: none; }
	.kabsa-collapsed .kabsa-item.kabsa-open > .kabsa-submenu { display: block; }
}

/* --------------------------------------------------------------------------- Full screen */

/* Full screen wins over every dropdown position. The centre rule sits later in this file
   and sets left: 50% with a translate, so at equal specificity it was overriding inset and
   the panel began at the burger instead of filling the screen. Resetting them here rather
   than reordering, because the dropdown rules have to keep working when this one is off. */
.kabsa-panel-full.kabsa-collapsed.kabsa-open .kabsa-menu {
	position: fixed;
	inset: 0;
	left: 0;
	right: 0;
	transform: none;
	width: auto;
	border: 0;
	border-radius: 0;
	overflow-y: auto;
	/* Room for the burger, plus Top Space on top of it. The bar is taller than the burger
	   alone once its own padding and height are counted, so a fixed 24px was not always
	   enough and the first link ended up against the bar. */
	padding: calc(var(--kbs-burger-size, 40px) + var(--kbs-panel-top-space, 24px))
		var(--kbs-mobile-side-padding, 16px) var(--kbs-mobile-side-padding, 16px);
}

/* ------------------------------------------------------------- Hiding the theme's own nav */

/* Only when asked. A plugin that hides part of someone's theme without being told to is a
   plugin that gets deactivated. */
.kabsa-hide-theme-nav .wp-block-navigation,
.kabsa-hide-theme-nav .wp-block-navigation__responsive-container-open { display: none !important; }

/* ------------------------------------------------------------------------------- Mobile */

@media (max-width: 780px) {
	.kabsa-bar-inner {
		padding-left: var(--kbs-mobile-side-padding, 16px);
		padding-right: var(--kbs-mobile-side-padding, 16px);
		max-width: 100%;
	}
	.kabsa-menu { gap: 6px; }

	/* Falls back to the desktop value, which is what an empty box means here. The
	   property is only printed at all when a number was entered, so this reads the
	   desktop one whenever it was not.

	   The account controls switch over at the same width and by the same rule. They are
	   links in this mode, and a link that does not change size with the others is the one
	   thing in the row that looks wrong. */
	.kabsa-link {
		padding: var(--kbs-link-padding-mobile, var(--kbs-link-padding, 8px))
			calc(var(--kbs-link-padding-mobile, var(--kbs-link-padding, 8px)) * 1.6);
	}
}

/* ---------------------------------------------------------------------------------- RTL */

.kabsa-rtl { direction: rtl; }
.kabsa-rtl .kabsa-submenu { left: auto; right: 0; }
.kabsa-rtl.kabsa-collapsed .kabsa-submenu { padding: 0 14px 0 0; }

/* ----------------------------------------------------------------------------- The logo */

.kabsa-logo { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; }
.kabsa-logo img { height: var(--kbs-logo-height, 36px); width: auto; display: block; }

/* The bar becomes a row of three when a logo is present, so the logo and the menu are laid
   out against each other rather than the menu filling the bar on its own. */

/* The centred-logo grid that used to live here is gone. It was a layout built for one
   arrangement, and the components system covers it properly: a centred logo is the logo in
   the middle slot with Distribution doing the spacing, which is the same mechanism every
   other arrangement uses. */

/* ------------------------------------------------------------ Burger centre, and an image */

.kabsa-collapsed.kabsa-burger-center .kabsa-mount { justify-content: center; }
.kabsa-collapsed.kabsa-burger-center .kabsa-menu { left: 50%; transform: translateX(-50%); right: auto; }

/* A picture takes Icon Size, like the three lines it replaces — the button keeps its own
   Size, its background and its border. Two settings, so a small mark can sit on a large
   target, which is what a burger usually wants. */
.kabsa-burger-image {
	width: var(--kbs-burger-icon-size, 20px);
	height: var(--kbs-burger-icon-size, 20px);
	object-fit: contain;
	display: block;
}
.kabsa-burger[aria-expanded="true"] .kabsa-burger-image { display: none; }

/* --------------------------------------------------- The close button, over the full panel */

/* The full-screen panel is fixed and covers everything under it, including the button that
   closes it. Raising the burger above the panel is what makes the X reachable — without
   this the only way out of an open menu on a phone is the browser's back button. */
.kabsa-panel-full.kabsa-collapsed.kabsa-open .kabsa-burger {
	position: relative;
	z-index: 21;
}

@media (max-width: 780px) {
	.kabsa-logo img { height: var(--kbs-logo-height-mobile, 28px); }
}


/* -------------------------------------------------------------------------- Dividers */

/* A rule between links. On a wide bar the links sit in a row, so the divider is an upright
   mark between them; in the panel they are stacked, so it is a line above each one. Same
   setting, two shapes, because a vertical bar between stacked items would sit in mid-air. */
/* The divider sits inside the gap the menu already has, rather than adding one of its own.
   The menu separates items with a flex gap; a full gap on this as well meant a bar with
   dividers was spaced twice as far apart as the same bar without them, which reads as the
   dividers pushing the links apart. Half a gap each side, and the negative pull puts the
   mark in the middle of the space that was already there — so switching dividers on changes
   what you see and not the spacing. */
/* The upright mark is for a row, so it is scoped to one. Collapsed, the menu is a stack and
   this form has nothing to stand between — which is why the panel has its own rule and, now,
   its own setting. */
.kabsa-dividers:not(.kabsa-collapsed) .kabsa-menu > .kabsa-item + .kabsa-item:before {
	content: "|";
	color: var(--kbs-divider-color, #eaeaea);
	margin-left: calc(var(--kbs-link-gap, 22px) / -2);
	margin-right: calc(var(--kbs-link-gap, 22px) / 2);
	pointer-events: none;
}

/* Stacked, a divider is a line above the item. Answering to its own setting now, so a bar
   with marks between its links can have a plain panel and the other way round. */
.kabsa-collapsed .kabsa-menu > .kabsa-item + .kabsa-item:before { content: none; }
.kabsa-collapsed.kabsa-dividers-panel .kabsa-menu > .kabsa-item + .kabsa-item {
	border-top: 1px solid var(--kbs-divider-color, #eaeaea);
	padding-top: 2px;
	margin-top: 2px;
}

.kabsa-rtl.kabsa-dividers:not(.kabsa-collapsed) .kabsa-menu > .kabsa-item + .kabsa-item:before {
	margin-right: calc(var(--kbs-link-gap, 22px) / -2);
	margin-left: calc(var(--kbs-link-gap, 22px) / 2);
}


/* ------------------------------------------------------------------- Panel alignment */

/* Where the links sit inside the burger panel. Separate from the bar's own Alignment: a
   dropdown reads best left-aligned even when the bar above it is centred, and a full-screen
   panel often wants the opposite. */
/* The items stay full width so a link's own background spans the panel; the alignment is
   applied inside each one. Aligning the items themselves instead would shrink each to its
   text, and a hover background would then be a ragged column of different widths. */
.kabsa-collapsed .kabsa-menu > .kabsa-item { justify-content: var(--kbs-panel-align-items, flex-start); }
.kabsa-collapsed .kabsa-submenu > .kabsa-item { justify-content: var(--kbs-panel-align-items, flex-start); }

/* ------------------------------------------------------------------------- Components */

/* The logo takes a side; everything else shares what is left.
   Distribution applies inside that group rather than to the bar as a whole, so it arranges
   the menu, icons, button and account without having to place the logo at the same time.
   Spread with a logo among the components used to put the logo in the middle, which is
   nowhere anybody wants it. */
.kabsa-bar-inner { justify-content: space-between; gap: 16px; }

.kabsa-rest {
	display: flex;
	align-items: center;
	gap: 16px;
	/* Takes the room the logo does not, so Distribution has space to work in. Without
	   this the group shrinks to its contents and every option looks the same. */
	flex: 1 1 auto;
	min-width: 0;
	justify-content: var(--kbs-distribution, space-between);
}

/* With no logo the group is the whole bar, and a flex child with nothing beside it needs
   no growth rule to fill it — but it does need the bar to stop spacing it. */
.kabsa-bar-inner > .kabsa-rest:only-child { flex: 1 1 100%; }



/* Spread reaches across the logo too.
   display: contents dissolves the group without removing it: its children become items of
   the bar itself, so all five space evenly along the whole width and the logo keeps the
   side it was given. The alternative — rendering the markup two different ways — would mean
   the layout depending on a setting read in PHP as well as in CSS, and those drift. */
.kabsa-dist-spread .kabsa-rest { display: contents; }

.kabsa-button {
	flex: 0 0 auto;
	display: inline-block;
	/* Five more at the sides, matching the links. */
	/* Proportional, for the same reason as the links: a fixed addition means the sides can
	   never reach nothing, and a button set to no padding at all should have none. */
	padding: var(--kbs-button-padding, 10px) calc(var(--kbs-button-padding, 10px) * 1.6);
	border-radius: var(--kbs-button-radius, 4px);
	border: var(--kbs-button-border-size, 0) solid var(--kbs-button-border-color, transparent);
	background: var(--kbs-button-bg, #2271b1);
	color: var(--kbs-button-color, #ffffff);
	font-size: var(--kbs-button-font-size, 14px);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.2;
}
.kabsa-button:hover,
.kabsa-button:focus-visible {
	background: var(--kbs-button-bg-hover, var(--kbs-button-bg, #2271b1));
	color: var(--kbs-button-color-hover, var(--kbs-button-color, #ffffff));
}

.kabsa-icons { display: flex; align-items: center; gap: var(--kbs-icons-gap, 12px); flex: 0 0 auto; }

/* The account controls, which another plugin draws.
   Layout only — no colours, no borders, no sizes. Those belong to the plugin that owns the
   controls, and setting them here would mean its own appearance settings quietly stopped
   working inside this bar. All Kabsa does is give them a place to stand. */
.kabsa-account { display: flex; align-items: center; flex: 0 0 auto; }

/* One copy is written into the bar and one into the panel; this shows whichever belongs at
   the current width. Two copies rather than one moved, because the bar and the panel are
   different parents and no CSS moves an element between two of those. */
/* Which copy shows follows the burger, not the screen width.
   A panel only exists while the menu is collapsed, and that is decided by the Burger
   settings — which can put a burger on a desktop. Keyed to a width instead, a desktop
   burger got its panel but the account stayed out in the bar, pushing the burger off
   centre with nowhere sensible to go.

   Three classes on each, because the panel's own rule for an item carries two and sets
   display: flex. Hiding has to outrank showing, or both copies draw at once. */
.kabsa-bar .kabsa-menu .kabsa-account-panel-only { display: none; }

.kabsa-bar.kabsa-collapsed .kabsa-account-bar-only { display: none; }

.kabsa-icon-link { display: inline-flex; color: var(--kbs-icons-color, inherit); line-height: 0; }
.kabsa-icon-link:hover { color: var(--kbs-icons-color-hover, var(--kbs-icons-color, inherit)); }
.kabsa-icon-link .kabsa-icon { width: var(--kbs-icons-size, 18px); height: var(--kbs-icons-size, 18px); }

/* The menu no longer takes every spare pixel: it is one component among four, and letting
   it grow would push the others to the edges whatever Distribution says. */
.kabsa-mount { flex: 0 1 auto; width: auto; }
.kabsa-collapsed .kabsa-mount { flex: 0 0 auto; }