/*
Site header navigation (Fix 06)
Utility row, main row, Devices / Training mega nav panels and the mobile drawer.
Loaded after style.css.
*/

.site-header {
	--nav-line: rgba(255, 255, 255, 0.16);
	--nav-muted: #5c5c5c;

	.header-utility {
		border-bottom: 1px solid var(--nav-line);

		.menu {
			li {
				padding-top: calc(var(--default-gutter-y) / 2);
				padding-bottom: calc(var(--default-gutter-y) / 2);
				font-size: var(--text-size-sm);
				color: var(--color-white);
			}
		}
	}

	.header-main > .container > .row {
		min-height: 64px;
	}

	/* A <button> centres its content, so the bars no longer need nudging down. */
	.menu-trigger .nav-toggle span {
		top: 0;
	}

	.logo img {
		max-height: 32px;
		width: auto;
	}

	/* Icons: search is a button now, so it needs the same look as the links. */
	.menu-right {
		padding-top: 0;
		padding-bottom: 0;

		button.icon {
			display: inline-flex;
			color: var(--color-white);
			font-size: 24px;
		}

		.icon i {
			display: block;
			line-height: 1;
		}
	}

	.search-bar.collapse:not(.show) {
		display: none;
	}

	.search-bar.collapse.show,
	.search-bar.collapsing {
		display: block;
	}

	/* Mega toggle: a menu item that opens a panel */
	.mega-toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: inherit;
		font: inherit;
		cursor: pointer;

		&:after {
			content: '';
			width: 6px;
			height: 6px;
			margin-top: -3px;
			border-right: 1.5px solid currentColor;
			border-bottom: 1.5px solid currentColor;
			transform: rotate(45deg);
			transition: transform 0.25s ease-in-out;
		}

		&[aria-expanded="true"]:after {
			margin-top: 3px;
			transform: rotate(-135deg);
		}
	}

	.mega-panel[hidden] {
		display: none;
	}

	/* Panel content (shared by desktop and drawer) */
	.mega-cards {
		display: grid;
		gap: var(--default-gutter-y);
	}

	.mega-card {
		display: flex;
		flex-direction: column;
		background-color: var(--color-white);
	}

	.mega-card-media {
		display: block;
		aspect-ratio: 16 / 9;
		background-color: var(--color-grey);
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.5s ease-in-out;
		}
	}

	.mega-card:hover .mega-card-media img {
		transform: scale(1.03);
	}

	.mega-card-body {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		padding: var(--default-gutter-y) var(--default-gutter-x);
	}

	.mega-card-title,
	.mega-events-title,
	.mega-panel-heading {
		margin: 0;
		font-family: 'Lexend Deca', sans-serif;
		font-size: var(--text-size);
		font-weight: 500;
		line-height: 1.25;
		color: var(--color-primary);
	}

	.mega-card-blurb {
		margin: 6px 0 0;
		font-size: var(--text-size-sm);
		line-height: 1.45;
		color: var(--nav-muted);
	}

	.mega-card-price {
		margin: calc(var(--default-gutter-y) / 2) 0 0;
		font-size: var(--text-size-sm);
		font-weight: 500;
		color: var(--color-primary);

		.woocommerce-Price-amount {
			font-weight: 500;
		}
	}

	.mega-card-actions {
		display: flex;
		flex-wrap: wrap;
		gap: calc(var(--default-gutter-x) / 2);
		margin-top: auto;
		padding-top: var(--default-gutter-y);
	}

	.mega-eyebrow {
		margin: 0 0 4px;
		font-size: var(--text-size-xs);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--nav-muted);
	}

	/* Events */
	.mega-events-list {
		margin: var(--default-gutter-y) 0;
		padding: 0;
		list-style: none;

		li + li {
			margin-top: calc(var(--default-gutter-y) * 0.75);
		}
	}

	.mega-event {
		display: flex;
		align-items: center;
		gap: calc(var(--default-gutter-x) * 0.75);
		min-width: 0;

		&:hover strong {
			text-decoration: underline;
		}
	}

	.mega-event-date {
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 42px;
		background-color: var(--color-white);
		border: 1px solid var(--color-grey-darker);
		border-radius: 6px;
		font-size: var(--text-size-xs);
		line-height: 1.1;
		color: var(--color-primary);

		strong {
			font-size: var(--text-size);
		}
	}

	.mega-event-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
		font-size: var(--text-size-sm);
		line-height: 1.3;
		color: var(--color-primary);

		> span {
			overflow: hidden;
			font-size: var(--text-size-xs);
			color: var(--nav-muted);
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.mega-events .button {
		align-self: flex-start;
	}

	/* Promo (drawer only) */
	.mega-promo {
		padding: var(--default-gutter-y) var(--default-gutter-x);
		background-color: var(--color-white);

		.button {
			width: 100%;
			margin-top: var(--default-gutter-y);
		}
	}

	.mega-promo-points {
		margin: calc(var(--default-gutter-y) / 2) 0 0;
		padding: 0;
		list-style: none;
		font-size: var(--text-size-sm);
		color: var(--color-primary);

		li {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-top: 4px;
		}

		i {
			font-size: var(--text-size-xs);
			color: #007f4e;
		}
	}

	/* Footer row */
	.mega-panel-foot {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: calc(var(--default-gutter-y) / 2) var(--default-gutter-x);
		font-size: var(--text-size-sm);
		color: var(--color-primary);

		p {
			margin: 0;
		}

		a {
			font-weight: 500;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	.mega-panel-more {
		display: inline-flex;
		align-items: center;
		gap: 8px;

		i {
			font-size: var(--text-size-xs);
		}
	}
}

/* -------------------------------------------------------------------------
 * Desktop: one row, panels drop under the header
 * ---------------------------------------------------------------------- */

@media (min-width: 992px) {
	.header.site-header {
		padding-top: 0;
	}

	.site-header {
		.site-nav-menu {
			display: flex;
			align-items: stretch;
			gap: calc(var(--default-gutter-x) * 2);
			height: 100%;

			> li {
				display: flex;
				align-items: stretch;
				font-size: var(--text-size);
				font-weight: 500;
				color: var(--color-white);

				> a,
				> .mega-toggle {
					position: relative;
					display: inline-flex;
					align-items: center;
					color: var(--color-white);

					&:before {
						content: '';
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						height: 3px;
						background-color: var(--color-white);
						opacity: 0;
						transition: opacity 0.3s ease-in-out;
					}

					&:hover:before {
						opacity: 1;
					}
				}

				&.is-open > .mega-toggle:before,
				&.current-menu-item > a:before,
				&.current-menu-ancestor > a:before {
					opacity: 1;
				}
			}
		}

		/* Drops below the trust bar (--pp-mega-offset is its height, set in
		   nav.js) and sits over the hero rather than pushing the page down. */
		.mega-panel {
			position: absolute;
			top: calc(100% + var(--pp-mega-offset, 0px));
			left: 0;
			right: 0;
			z-index: 5;
			background-color: var(--color-white);
			border-top: 1px solid var(--color-grey-darker);
			box-shadow: 0 24px 40px rgba(0, 0, 0, 0.2);
			font-weight: 300;
			text-align: left;

			/* Rolls down from under the trust bar when nav.js adds .is-shown,
			   and back up on close. The open inset leaves room for the shadow. */
			clip-path: inset(0 -100px 100% -100px);
			transition: clip-path 0.3s ease-in-out;

			&.is-shown {
				clip-path: inset(0 -100px -100px -100px);
			}
		}

		/* Dims the page under an open panel; clicking it closes the panel. */
		&:after {
			content: '';
			position: fixed;
			top: var(--pp-mega-top, 0px);
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 4;
			background: rgba(0, 0, 0, 0.5);
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition: opacity 0.3s ease-in-out, visibility 0.3s;
		}

		&.mega-open:after {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		.mega-panel-body {
			display: flex;
		}

		.mega-cards {
			flex: 1 1 auto;
			gap: 0;
			grid-auto-flow: column;
			grid-auto-columns: 1fr;

			.mega-card + .mega-card {
				border-left: 1px solid var(--color-grey-darker);
			}
		}

		.mega-card {
			padding: calc(var(--default-gutter-y) * 2) calc(var(--default-gutter-x) * 1.5);
		}

		.mega-card-media {
			border-radius: 12px;
		}

		.mega-card-body {
			padding: calc(var(--default-gutter-y) * 1.5) 0 0;
		}

		.mega-card-title {
			font-size: var(--text-size-md);
		}

		.mega-card-blurb {
			max-width: 46ch;
			margin-top: calc(var(--default-gutter-y) / 2);
		}

		.mega-card-price {
			margin-top: var(--default-gutter-y);
			font-size: var(--text-size);
		}

		.mega-card-actions {
			gap: calc(var(--default-gutter-x) * 0.75);
			padding-top: calc(var(--default-gutter-y) * 1.5);
		}

		.mega-events {
			display: flex;
			flex: 0 0 26%;
			flex-direction: column;
			padding: calc(var(--default-gutter-y) * 2) calc(var(--default-gutter-x) * 1.5);
			background-color: var(--color-grey);
		}

		.mega-events-title {
			font-size: var(--text-size-md);
		}

		.mega-events-list {
			margin: calc(var(--default-gutter-y) * 1.5) 0;
		}

		.mega-panel-foot {
			padding: calc(var(--default-gutter-y) * 1.25) calc(var(--default-gutter-x) * 1.5);
			border-top: 1px solid var(--color-grey-darker);
		}
	}
}

/* Small desktops: logo, six items and four icons only just fit in one row. */
@media (min-width: 992px) and (max-width: 1199px) {
	.site-header .site-nav-menu {
		gap: var(--default-gutter-x);
	}
}

/* -------------------------------------------------------------------------
 * Mobile: the main menu is a drawer under the header
 * ---------------------------------------------------------------------- */

@media (max-width: 991px) {
	body.nav-open {
		overflow: hidden;
	}

	.site-header {
		.header-main > .container > .row {
			min-height: 56px;
		}

		.logo img {
			max-height: 26px;
		}

		.menu-right .row {
			column-gap: var(--default-gutter-x);
		}

		.menu-right button.icon,
		.menu-right .icon {
			font-size: 22px;
		}

		.site-nav {
			display: none;
			position: fixed;
			top: var(--pp-nav-top, 56px);
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1030;
			width: auto;
			max-width: none;
			padding: 0 0 calc(var(--default-gutter-y) * 2);
			background-color: var(--color-grey);
			overflow-y: auto;
			overscroll-behavior: contain;
		}

		/* The row's .col-gap-sm-1 gutters are !important (style.css), so the
		   drawer has to be too to run edge to edge. */
		.header-main .row > .site-nav {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

		.site-nav-menu {
			background-color: var(--color-white);

			> li {
				border-bottom: 1px solid var(--color-grey-darker);
				font-family: 'Lexend Deca', sans-serif;
				font-size: var(--text-size-md);
				font-weight: 500;
				color: var(--color-primary);

				> a,
				> .mega-toggle {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					padding: var(--default-gutter-y) var(--default-gutter-x);
					color: var(--color-primary);
				}

				> .mega-toggle:after {
					width: 8px;
					height: 8px;
					margin-right: 4px;
				}
			}
		}

		.mega-panel {
			padding: var(--default-gutter-y) 0 calc(var(--default-gutter-y) * 1.5);
			background-color: var(--color-grey);
			font-family: 'Inter', sans-serif;
			font-size: var(--text-size);
			font-weight: 300;
		}

		.mega-panel-heading {
			margin-bottom: var(--default-gutter-y);
			font-size: var(--text-size-md);
		}

		.mega-card,
		.mega-promo,
		.mega-events {
			border-radius: 12px;
			overflow: hidden;
		}

		.mega-card-actions .button {
			flex: 1 1 100%;
		}

		.mega-events {
			display: flex;
			flex-direction: column;
			margin-top: var(--default-gutter-y);
			padding: var(--default-gutter-y) var(--default-gutter-x);
			background-color: var(--color-white);

			.button {
				align-self: stretch;
			}
		}

		.mega-events-title {
			font-size: var(--text-size-md);
		}

		.mega-panel-foot {
			flex-direction: column;
			align-items: flex-start;
			margin-top: calc(var(--default-gutter-y) * 1.5);
		}

		.site-nav-extra {
			padding: var(--default-gutter-y) var(--default-gutter-x) 0;
		}

		.site-nav-utility li a {
			display: block;
			padding: calc(var(--default-gutter-y) / 2) 0;
			font-size: var(--text-size);
			color: var(--color-primary);
		}

		.site-nav-currency {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-top: var(--default-gutter-y);
			font-size: var(--text-size-sm);
			color: var(--color-primary);
		}
	}

	body.nav-open .site-header .site-nav {
		display: block;
	}
}

@media (max-width: 991px) and (min-width: 576px) {
	.site-header .mega-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header .mega-panel,
	.site-header:after {
		transition: none;
	}
}