/*
 * Main menu (inc/menu.php, assets/js/menu.js). Blocksy draws it and opens it; this shapes it:
 * on desktop each heading opens a panel as wide as the page, on phones each heading is one 48px row that
 * opens its list in the side menu.
 */

/* Desktop panel ------------------------------------------------------------------------------------------ */

@media (min-width: 1000px) {
	/* The panel hangs from the menu row, not from its heading, so it can span the page width. */
	[data-device='desktop'] [data-row='bottom'] > .ct-container {
		position: relative;
	}

	/* Blocksy's "More" item, for headings that don't fit narrower screens, keeps its plain dropdown. */
	.header-menu-1 > .menu > li:not(.more-items-container) {
		position: static;
	}

	.header-menu-1 > .menu > li:not(.more-items-container) > .sub-menu {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0 var(--ca-space-6);
		inset-inline: 0;
		top: 100%;
		width: auto;
		margin-block-start: 0;
		padding: var(--ca-space-6) var(--ca-space-8) var(--ca-space-8);
		border-block-start: var(--ca-border-width-thin) solid var(--ca-border-default);
		border-radius: 0 0 var(--ca-radius-lg) var(--ca-radius-lg);
		box-shadow: var(--ca-shadow-3);
	}

	.header-menu-1 > .menu > li:not(.more-items-container) > .sub-menu > li {
		max-width: none; /* Blocksy caps dropdown items at its dropdown width */
		border: 0;
	}

	.header-menu-1 > .menu > li:not(.more-items-container) > .sub-menu > li > a {
		align-items: center;
		min-height: var(--ca-size-control);
		padding: var(--ca-space-2) var(--ca-space-3);
		border-radius: var(--ca-radius-sm);
		font-size: var(--ca-text-body);
	}

	.header-menu-1 > .menu > li:not(.more-items-container) > .sub-menu > li > a:hover {
		background: var(--ca-bg-subtle);
		text-decoration-line: underline;
	}

	/* "Shop all <heading>" heads the panel. */
	.header-menu-1 > .menu > li:not(.more-items-container) > .sub-menu > .ca-menu-shop-all {
		grid-column: 1 / -1;
		margin-block-end: var(--ca-space-3);
		padding-block-end: var(--ca-space-3);
		border-block-end: var(--ca-border-width-thin) solid var(--ca-border-default);
	}

	.header-menu-1 > .menu > li:not(.more-items-container) > .sub-menu > .ca-menu-shop-all > a {
		width: fit-content;
		gap: var(--ca-space-2);
		color: var(--ca-text-link);
		font-family: var(--ca-font-heading);
		font-size: var(--ca-text-h4);
		font-weight: 600;
		text-decoration-line: underline;
		text-underline-offset: 0.15em;
	}
}

/* "Shop all" ends with an arrow, on desktop and phones. */
.ca-menu-shop-all > a::after {
	width: var(--ca-size-icon-sm);
	height: var(--ca-size-icon-sm);
	background: currentColor;
	content: '';
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Phone side menu ---------------------------------------------------------------------------------------- */

.mobile-menu > ul > li {
	border-block-end: var(--ca-border-width-thin) solid color-mix(in srgb, var(--ca-text-on-brand) 20%, transparent);
}

.mobile-menu .ct-menu-link {
	min-height: var(--ca-size-control);
	align-items: center;
}

/* A heading's whole row is its open/close button (menu.js takes the heading's link out of the way). */
.mobile-menu .ct-sub-menu-parent {
	position: relative;
}

.mobile-menu .ct-sub-menu-parent > .ct-toggle-dropdown-mobile {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: auto;
	height: auto;
	margin: 0;
	padding-inline-end: var(--ca-space-2);
}

.mobile-menu .ct-sub-menu-parent > .ct-toggle-dropdown-mobile svg {
	width: var(--ca-size-icon);
	height: var(--ca-size-icon);
}

.mobile-menu .sub-menu {
	padding-block-end: var(--ca-space-2);
}

.mobile-menu .sub-menu .ct-menu-link {
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-body);
	font-weight: 400;
}

.mobile-menu .ca-menu-shop-all > .ct-menu-link {
	gap: var(--ca-space-2);
	font-weight: 600;
	text-decoration-line: underline;
	text-underline-offset: 0.15em;
}