/* Mobile header + hamburger overlay menu. Only active <=767px; the desktop
   .site-header (hidden at <=767px in header.css) is left untouched. */

.mobile-header {
	display: none;
}

.mobile-menu {
	display: none;
}

@media (max-width: 767px) {
	.mobile-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 10px 20px;
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.mobile-header__logo img,
	.mobile-header__logo a {
		display: block;
	}

	.mobile-header__logo img {
		height: 36px;
		width: auto;
	}

	.mobile-header__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		/* Icon already has built-in whitespace; no extra margin — it sits within
		   the header's 20px right gutter, vertically centered with the logo. */
		margin: 0;
		border: 0;
		background: none;
		color: var(--action-dark);
		cursor: pointer;
	}

	.mobile-header__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.mobile-header__icon svg {
		display: block;
		width: 32px;
		height: 32px;
	}

	/* Icon swap: hamburger by default, X when open */
	.mobile-header__icon--close {
		display: none;
	}

	body.mobile-menu-open .mobile-header__icon--open {
		display: none;
	}

	body.mobile-menu-open .mobile-header__icon--close {
		display: inline-flex;
	}

	/* Scroll-lock the page behind the overlay. JS pins the body with
	   position:fixed + top:-scrollY to preserve the scroll position; here we
	   just complete the lock. The bar is re-pinned to the viewport below so the
	   close (X) stays reachable even when the page was scrolled. */
	body.mobile-menu-open {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		overflow: hidden;
	}

	body.mobile-menu-open .mobile-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	/* Full-screen overlay panel. The sticky bar (z-index 100) stays above the
	   panel (z-index 90), so the logo + X remain visible and tappable; the
	   panel's top padding keeps the first item clear of the bar. */
	body.mobile-menu-open .mobile-menu {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		z-index: 90;
		background-color: var(--dark-bg);
		overflow-y: auto;
		padding: 56px 0 21px;
	}

	.mobile-menu__nav {
		display: flex;
		flex-direction: column;
	}

	.mobile-menu__list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.mobile-menu__list a {
		/* Flex so the menu icon and label are vertically centred relative to
		   each other. No `gap` here: the account name is a text node + a span,
		   which flex would treat as two items and space apart — the icon
		   spacing lives on .menu-item-icon instead. */
		display: flex;
		align-items: center;
		box-sizing: border-box;
		min-height: 57px;
		/* Horizontal padding lives on the link (not the list) so the hover
		   highlight spans the full row edge-to-edge. */
		padding: 0 19px;
		color: #fff;
		font-size: 16px;
		line-height: 1;
		font-weight: bold;
		letter-spacing: 0.8px;
		text-decoration: none;
		border-bottom: 1px solid var(--surface-action);
		transition: color 0.3s ease, background-color 0.3s ease;
	}

	.mobile-menu__list .menu-item-icon {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
		margin-right: 19px;
	}

	/* Restore the single space between first and last name that flex's
	   item-splitting collapses (name is "Jaap" + <span> Huisman</span>). */
	.mobile-menu__list .claryss-account-name-rest {
		margin-left: 0.28em;
	}

	.mobile-menu__list .menu-item-icon svg {
		display: block;
		width: 24px;
		height: 24px;
	}

	.mobile-menu__list .current-menu-item > a,
	.mobile-menu__list a:hover {
		color: var(--primary-400);
		background-color: var(--surface-action);
	}

	/* Account submenu: collapsed by default; the disclosure arrow (injected by
	   mobile-menu.js) expands it. Clicking the name itself navigates to the
	   account page. The desktop hover-dropdown CSS is scoped under
	   header.site-header, so it doesn't apply here. */
	.mobile-menu .sub-menu {
		display: none;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.mobile-menu .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	.mobile-menu .sub-menu a {
		padding-left: 45px;
		font-size: 16px;
		font-weight: 500;
	}

	/* Sign out submenu item: logout arrow on the right, 24px from the edge,
	   vertically centered. */
	.mobile-menu .claryss-account-endpoint-customer-logout a {
		position: relative;
		padding-right: 58px;
	}

	.mobile-menu .claryss-account-endpoint-customer-logout a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 24px;
		transform: translateY(-50%);
		width: 24px;
		height: 24px;
		/* Masked so the icon follows the link's text color (currentColor),
		   turning primary-400 on hover like the label. */
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.0043 4.7998H9.1543C9.3793 4.7998 9.6043 5.0248 9.6043 5.2498V6.1498C9.6043 6.4123 9.3793 6.5998 9.1543 6.5998H6.0043C4.9918 6.5998 4.2043 7.42481 4.2043 8.39981V15.5998C4.2043 16.6123 4.9918 17.3998 6.0043 17.3998H9.1543C9.3793 17.3998 9.6043 17.6248 9.6043 17.8498V18.7498C9.6043 19.0123 9.3793 19.1998 9.1543 19.1998H6.0043C4.0168 19.1998 2.4043 17.5873 2.4043 15.5998V8.39981C2.4043 6.4123 4.0168 4.7998 6.0043 4.7998ZM14.6668 5.5498C14.8168 5.3623 15.1168 5.3623 15.3043 5.5498L21.4543 11.6998C21.6418 11.8873 21.6418 12.1498 21.4543 12.3373L15.3043 18.4873C15.1168 18.6748 14.8168 18.6748 14.6668 18.4873L13.9168 17.7373C13.7293 17.5873 13.7293 17.2873 13.9168 17.0998L18.1543 12.9748H8.8543C8.5918 12.9748 8.4043 12.7873 8.4043 12.5248V11.4748C8.4043 11.2498 8.5918 11.0248 8.8543 11.0248H18.1543L13.9168 6.9373C13.7293 6.7498 13.7293 6.4498 13.9168 6.2998L14.6668 5.5498Z' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.0043 4.7998H9.1543C9.3793 4.7998 9.6043 5.0248 9.6043 5.2498V6.1498C9.6043 6.4123 9.3793 6.5998 9.1543 6.5998H6.0043C4.9918 6.5998 4.2043 7.42481 4.2043 8.39981V15.5998C4.2043 16.6123 4.9918 17.3998 6.0043 17.3998H9.1543C9.3793 17.3998 9.6043 17.6248 9.6043 17.8498V18.7498C9.6043 19.0123 9.3793 19.1998 9.1543 19.1998H6.0043C4.0168 19.1998 2.4043 17.5873 2.4043 15.5998V8.39981C2.4043 6.4123 4.0168 4.7998 6.0043 4.7998ZM14.6668 5.5498C14.8168 5.3623 15.1168 5.3623 15.3043 5.5498L21.4543 11.6998C21.6418 11.8873 21.6418 12.1498 21.4543 12.3373L15.3043 18.4873C15.1168 18.6748 14.8168 18.6748 14.6668 18.4873L13.9168 17.7373C13.7293 17.5873 13.7293 17.2873 13.9168 17.0998L18.1543 12.9748H8.8543C8.5918 12.9748 8.4043 12.7873 8.4043 12.5248V11.4748C8.4043 11.2498 8.5918 11.0248 8.8543 11.0248H18.1543L13.9168 6.9373C13.7293 6.7498 13.7293 6.4498 13.9168 6.2998L14.6668 5.5498Z' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	/* Disclosure arrow for items with a submenu (e.g. the account item). */
	.mobile-menu .menu-item-has-children {
		position: relative;
	}

	.mobile-menu .menu-item-has-children > a {
		padding-right: 60px;
	}

	/* Disclosure toggle: plus when collapsed, minus when open. Sits 24px from
	   the right edge, vertically centered on the link row. The icons carry
	   their own whitespace, so no padding/radius, and no hover/active styling. */
	.mobile-menu__disclosure {
		position: absolute;
		top: 0;
		right: 24px;
		height: 57px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: #fff;
		cursor: pointer;
	}

	/* It's a <button>, so neutralise the global button:hover (white bg). Keep
	   the background transparent, but tint the +/- to the primary color when
	   the item (or the button) is hovered/focused. */
	.mobile-menu__disclosure:hover,
	.mobile-menu__disclosure:focus,
	.mobile-menu__disclosure:active,
	.mobile-menu .menu-item-has-children:hover .mobile-menu__disclosure {
		background: none;
		border-color: transparent;
		color: var(--primary-400);
	}

	.mobile-menu__disclosure svg {
		display: block;
	}

	/* Higher specificity than `.mobile-menu__disclosure svg { display: block }`
	   so the minus stays hidden until the item is open. */
	.mobile-menu__disclosure .mobile-menu__disclosure-minus {
		display: none;
	}

	.mobile-menu .menu-item-has-children.is-open > .mobile-menu__disclosure .mobile-menu__disclosure-plus {
		display: none;
	}

	.mobile-menu .menu-item-has-children.is-open > .mobile-menu__disclosure .mobile-menu__disclosure-minus {
		display: block;
	}

	/* Icon-only top-level logout would show without a label and duplicates the
	   account submenu's "Log out" link — hide it in the panel. */
	.mobile-menu .log_out_btn {
		display: none;
	}

	/* Account name: the last-name span is hidden only at <=991px in the desktop
	   header scope; here we want the full name, which is the default. */

	/* Support button pinned to the bottom of the menu, 19px side gutters; the
	   panel's 21px bottom padding provides the bottom whitespace. A 2px gradient
	   line sits above it with a 20px gap. */
	.mobile-menu__support {
		margin-top: auto;
		padding: 0 19px;
	}

	.mobile-menu__support::before {
		content: "";
		display: block;
		height: 2px;
		margin-bottom: 20px;
		background: linear-gradient(89deg, #090F75 -19.85%, #0D1581 -7.47%, #141E91 2.42%, #1C2BA8 12.32%, #1F2EAE 14.8%, #2252B2 24.69%, #2AAFBE 49.44%, #2EDAC4 59.34%, #2BC3BF 64.29%, #1D51A6 91.5%, #18249C 103.88%, #080E73 145.94%, #070D71 200.38%);
	}

	.mobile-menu__support .support_btn.button {
		width: 100%;
		justify-content: center;
		/* The <=991px forced-collapse rules in sidebar.css zero out
		   .support_btn text/gap globally; restore them here so the label
		   stays visible in the mobile menu. */
		font-size: 16px;
		gap: 10px;
		line-height: 1;
	}
}