/* ==========================================================================
   VIKAND — the phone navigation, as live has it.

   Live (UberMenu's responsive mode, measured on vikand.com at 390/600/768):
   the header is 93px tall with the logo at x10 y9 (200x73); at its right a
   "Menu" toggle — a bars icon (23x18) then the word at 18px #333 — on 35px
   20px of padding, 119px wide. Tapping it unfolds the menu IN THE FLOW under
   the header, white, pushing the page down: 46px rows of 12px uppercase #333
   on 15px 20px padding, an angle-down (8x12) at the right of each parent that
   opens its children in place on 5px 20px rows. The toggle shows up to 768px;
   from 769 the desktop nav is back.

   The framework's own off-canvas drawer is not loaded on this site (see
   inc/setup.php); this stylesheet and assets/js/vikand-mobile-nav.js replace it.
   ========================================================================== */

/* The chevron controls are added by the script at every width; they exist
   only for the phone list. Unstyled above 768 they drew as grey buttons in
   the desktop nav and pushed its items out of line. */
.vk-sub-toggle { display: none; }

@media (max-width: 768px) {
	.fw-header__inner {
		flex-wrap: wrap;
		min-height: 93px;
		align-items: flex-start;
	}
	.fw-logo { margin-top: 9px; }
	.fw-logo img { height: 73px; max-height: 73px; width: auto; }

	/* The toggle: bars, then the word. */
	.fw-menu-btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 11px;
		width: auto;
		height: 93px;
		padding: 35px 20px;
		margin: 0 -10px 0 auto;   /* live's toggle runs to the container's edge */
		color: #333;
		font-family: "Maven Pro", maven, sans-serif;
		font-size: 18px;
		font-weight: 400;
		line-height: 1;
		background: none;
		border: 0;
		cursor: pointer;
	}
	.fw-menu-btn::after { content: "Menu"; }
	/* The three bars as one 23x18 icon (fa-bars at 18px). */
	.fw-menu-btn__bar {
		width: 23px;
		height: 3px;
		margin: 0;
		background: currentColor;
	}
	.fw-menu-btn__bar + .fw-menu-btn__bar { margin-top: 4.5px; }
	.fw-menu-btn__bars {
		display: flex;
		flex-direction: column;
	}

	/* The list, under the header, in the flow. */
	.fw-header__inner > .fw-header__nav {
		display: none;
		order: 3;
		flex: 0 0 100%;
		width: 100%;
		margin: 0;
		align-self: auto;
	}
	.fw-header__inner > .fw-header__nav.is-open { display: block; }
	.fw-header__nav .fw-nav {
		display: block;
		margin: 0;
		padding: 0;
	}
	.fw-header__nav .fw-nav > li { display: block; position: relative; }
	.fw-header__nav .fw-nav > li > a,
	.fw-header__nav .fw-nav > li.menu-item-has-children > a {
		display: block;
		padding: 15px 20px;
		font-size: 12px;
		line-height: 16px;
		white-space: normal;
	}
	/* The desktop arrow is drawn on the link; on the phone it is a control of
	   its own (live's is a separate element), so the link stays a link. */
	.fw-header__nav .fw-nav > li.menu-item-has-children > a::after { content: none; }
	.vk-sub-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 46px;
		height: 46px;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
		color: #333;
	}
	.vk-sub-toggle::before {
		content: "";
		position: absolute;
		right: 17px;
		top: 50%;
		width: 6px;
		height: 6px;
		margin-top: -5px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s;
	}
	li.is-open > .vk-sub-toggle::before { transform: rotate(225deg); margin-top: -1px; }

	/* Children unfold in place: no card, no shadow, no hover reveal. */
	.fw-header__nav .fw-nav .sub-menu {
		display: none;
		position: static;
		min-width: 0;
		padding: 0 0 10px;
		background: #fff;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		margin: 0;
		transition: none;
	}
	.fw-header__nav .fw-nav li.is-open > .sub-menu { display: block; }
	.fw-header__nav .fw-nav li:hover > .sub-menu,
	.fw-header__nav .fw-nav li:focus-within > .sub-menu { display: none; }
	.fw-header__nav .fw-nav li.is-open:hover > .sub-menu,
	.fw-header__nav .fw-nav li.is-open:focus-within > .sub-menu { display: block; }
	.fw-header__nav .fw-nav .sub-menu a {
		padding: 5px 20px;
		font-size: 12px;
		line-height: 16px;
		color: #333;
		text-decoration: none;
	}
}