/* ============================================================
   Dev Mega Menu — Stylesheet
   Mobile-first. CSS custom properties allow easy theming —
   override any variable on .dev-mega-menu or a parent element.
   ============================================================ */

/* ---- Custom Properties ------------------------------------ */
.dev-mega-menu {
	/* Colours */
	--dmm-bg:                   #ffffff;
	--dmm-bg-dropdown:          #ffffff;
	--dmm-bg-mobile:            #f8f8f8;
	--dmm-link-color:           var(--primary-page-colour);
	--dmm-link-color-hover:     #0073aa;
	--dmm-border-color:         #e5e5e5;
	--dmm-toggle-hover-bg:      rgba(0, 0, 0, 0.06);
	--dmm-focus-outline:        2px solid #0073aa;

	/* Typography */
	--dmm-font-size:            1rem;

	/* Spacing */
	--dmm-item-gap:             30px;
	--dmm-link-padding-x:       1rem;
	--dmm-link-padding-y:       0.625rem;
	--dmm-toggle-padding-x:     0.5rem;
	--dmm-dropdown-padding:     1.5rem;
	--dmm-dropdown-gap:         30px;

	/* Dropdown */
	--dmm-dropdown-shadow:      0 8px 32px rgba(0, 0, 0, 0.12);
	--dmm-dropdown-radius:      4px;
	--dmm-dropdown-border:      1px solid var(--dmm-border-color);

	/* Columns */
	--dmm-column-min-width:     180px;

	/* Toggle icon */
	--dmm-toggle-icon-size:     1em;

	/* Transitions */
	--dmm-transition-speed:     0.2s;
	--dmm-transition-easing:    ease;

	/* Hamburger */
	--dmm-hamburger-size:       2.75rem;
	--dmm-hamburger-bar-width:  22px;
	--dmm-hamburger-bar-height: 2px;
	--dmm-hamburger-bar-gap:    6px;
}

/* ---- Reset ------------------------------------------------ */
.dev-mega-menu *,
.dev-mega-menu *::before,
.dev-mega-menu *::after {
	box-sizing: border-box;
}

.dev-mega-menu ul {
	list-style: none;
	margin:     0;
	padding:    0;
}

.dev-mega-menu {
	position:   relative;
	background: var(--dmm-bg);
	font-size:  var(--dmm-font-size);
}

/* ---- Screen-Reader Text ----------------------------------- */
.dev-mega-menu .screen-reader-text {
	position:    absolute !important;
	width:       1px      !important;
	height:      1px      !important;
	padding:     0        !important;
	margin:      -1px     !important;
	overflow:    hidden   !important;
	clip:        rect(0, 0, 0, 0) !important;
	white-space: nowrap   !important;
	border:      0        !important;
}

/* ============================================================
   Mobile: Hamburger Toggle
   ============================================================ */
.dev-mega-menu__mobile-toggle {
	display:         flex;
	align-items:     center;
	width:           100%;
	height:          var(--dmm-hamburger-size);
	padding:         0 1rem;
	background:      transparent;
	border:          none;
	cursor:          pointer;
	color:           var(--dmm-link-color);
	border-radius:   4px;
	transition:      background var(--dmm-transition-speed) var(--dmm-transition-easing);
}

.dev-mega-menu__mobile-toggle:hover {
	background: var(--dmm-toggle-hover-bg);
}

.dev-mega-menu__mobile-toggle:focus-visible {
	outline:        var(--dmm-focus-outline);
	outline-offset: 2px;
}

/* Centred "Menu" label — the spacer below balances the hamburger's width
   so the label sits in the middle of the button, not the middle of the
   remaining space next to the icon */
.dev-mega-menu__mobile-toggle-label {
	flex:      1;
	text-align: center;
	font-size:  1.25rem;
	font-weight: 400;
}

.dev-mega-menu__mobile-toggle-spacer {
	flex:  0 0 var(--dmm-hamburger-bar-width);
	width: var(--dmm-hamburger-bar-width);
}

/* Hamburger bars */
.dev-mega-menu__hamburger {
	position:      relative;
	flex:          0 0 var(--dmm-hamburger-bar-width);
	display:       block;
	width:         var(--dmm-hamburger-bar-width);
	height:        var(--dmm-hamburger-bar-height);
	background:    currentColor;
	border-radius: 2px;
	transition:    background var(--dmm-transition-speed) var(--dmm-transition-easing);
}

.dev-mega-menu__hamburger::before,
.dev-mega-menu__hamburger::after {
	content:       '';
	position:      absolute;
	left:          0;
	width:         var(--dmm-hamburger-bar-width);
	height:        var(--dmm-hamburger-bar-height);
	background:    currentColor;
	border-radius: 2px;
	transition:
		transform var(--dmm-transition-speed) var(--dmm-transition-easing),
		opacity   var(--dmm-transition-speed) var(--dmm-transition-easing);
}

.dev-mega-menu__hamburger::before {
	top: calc(-1 * var(--dmm-hamburger-bar-gap) - var(--dmm-hamburger-bar-height));
}

.dev-mega-menu__hamburger::after {
	top: calc(var(--dmm-hamburger-bar-gap) + var(--dmm-hamburger-bar-height));
}

/* Animate to × when open */
.dev-mega-menu__mobile-toggle[aria-expanded="true"] .dev-mega-menu__hamburger {
	background: transparent;
}

.dev-mega-menu__mobile-toggle[aria-expanded="true"] .dev-mega-menu__hamburger::before {
	transform: translateY(calc(var(--dmm-hamburger-bar-gap) + var(--dmm-hamburger-bar-height))) rotate(45deg);
}

.dev-mega-menu__mobile-toggle[aria-expanded="true"] .dev-mega-menu__hamburger::after {
	transform: translateY(calc(-1 * (var(--dmm-hamburger-bar-gap) + var(--dmm-hamburger-bar-height)))) rotate(-45deg);
}

/* ============================================================
   Mobile: Menu List (hidden until .is-open)
   ============================================================ */
.dev-mega-menu__list {
	display:        none;
	flex-direction: column;
	align-items:    stretch;
	gap:            0;
	background:     var(--dmm-bg-mobile);
}

.dev-mega-menu__list.is-open {
	display: flex;
}

/* ============================================================
   Mobile: Menu Items
   ============================================================ */
.dev-mega-menu__item {
	display:       flex;
	flex-wrap:     wrap;
	align-items:   stretch;
	border-bottom: 1px solid var(--dmm-border-color);
	margin-left: 0;
	margin-bottom: 0;
}

.dev-mega-menu__item:last-child {
	border-bottom: none;
}

/* ============================================================
   Links
   ============================================================ */
   
.dev-mega-menu__link {
	display:         flex;
	align-items:     center;
	flex:            1;
	padding:         var(--dmm-link-padding-y) var(--dmm-link-padding-x);
	color:           var(--dmm-link-color);
	text-decoration: none;
	white-space:     nowrap;
	transition:      color var(--dmm-transition-speed) var(--dmm-transition-easing);
}

.dev-mega-menu__link:hover,
.dev-mega-menu__link:focus-visible {
	color: var(--dmm-link-color-hover);
}

.dev-mega-menu__link:focus-visible {
	outline:        var(--dmm-focus-outline);
	outline-offset: -2px;
}

/* ============================================================
   Toggle Button (chevron)
   ============================================================ */
.dev-mega-menu__toggle {
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         var(--dmm-link-padding-y) var(--dmm-toggle-padding-x);
	background:      transparent;
	border:          none;
	border-left:     1px solid var(--dmm-border-color);
	cursor:          pointer;
	color:           var(--dmm-link-color);
	border-radius:   0;
	transition:
		background var(--dmm-transition-speed) var(--dmm-transition-easing),
		color      var(--dmm-transition-speed) var(--dmm-transition-easing);
}

.dev-mega-menu__toggle:hover,
.dev-mega-menu__toggle:focus-visible {
	background: var(--dmm-toggle-hover-bg);
	color:      var(--dmm-link-color-hover);
}

.dev-mega-menu__toggle:focus-visible {
	outline:        var(--dmm-focus-outline);
	outline-offset: 2px;
}

.dev-mega-menu__toggle-icon {
	width:       var(--dmm-toggle-icon-size);
	height:      var(--dmm-toggle-icon-size);
	flex-shrink: 0;
	transition:  transform var(--dmm-transition-speed) var(--dmm-transition-easing);
}

.dev-mega-menu__item.is-open > .dev-mega-menu__toggle .dev-mega-menu__toggle-icon {
	transform: rotate(180deg);
}

/* ============================================================
   Mobile: Dropdown (inline, shown/hidden via display)
   ============================================================ */
.dev-mega-menu__dropdown {
	display:    none;
	width:      100%;
	background: var(--dmm-bg-dropdown);
	border-top: var(--dmm-dropdown-border);
	padding:    var(--dmm-dropdown-padding);
}

.dev-mega-menu__item.is-open > .dev-mega-menu__dropdown {
	display: block;
}

.dev-mega-menu__dropdown p:has(> a:only-child) {
  	margin-bottom: 5px;
}

/* ============================================================
   Columns (mobile: stacked)
   ============================================================ */
.dev-mega-menu__columns {
	display:        flex;
	flex-direction: column;
	gap:            var(--dmm-dropdown-gap);
}

.dev-mega-menu__column {
	min-width: 0;
}

/* ============================================================
   Inner wp_nav_menu output
   ============================================================ */
.dev-mega-menu .mega-menu__list {
	margin:  0;
	padding: 0;
	list-style-type: none;
}

.dev-mega-menu .mega-menu__list li {
	list-style-type: none;
	margin-bottom: 0;
	margin-left: 0;
	line-height: 1;
}

.dev-mega-menu .mega-menu__list li:first-of-type {
	font-weight: bold;
}

.dev-mega-menu .mega-menu__list a {
	display:         block;
	padding:         0.3em 0;
	color:           var(--dmm-link-color);
	text-decoration: none;
	transition:      color var(--dmm-transition-speed) var(--dmm-transition-easing);
}

.dev-mega-menu .mega-menu__list a:hover,
.dev-mega-menu .mega-menu__list a:focus-visible {
	color: var(--dmm-link-color-hover);
}

.dev-mega-menu .mega-menu__list .sub-menu {
	padding-left: 1rem;
	margin-top:   0.25rem;
}

.dev-mega-menu__column p, ul, ol {
	color: #313131;
	font-size: 18px;
}

.dev-mega-menu__column a {
	font-size:       22px;
	color:           var(--primary-page-colour);
	font-weight:     600;
	text-decoration: none;
}

.dev-mega-menu__column a:hover {
	text-decoration: underline;
}


.dev-mega-menu__column ol, .dev-mega-menu__column ul {
	list-style-type: none;
	margin-bottom: 20px;
	margin-left: 0;
	color: #313131;
}

.dev-mega-menu__column ol li,
.dev-mega-menu__column ul li {
	list-style-type: none;
	margin-bottom: 0;
	margin-left: 0;
}

.dev-mega-menu__column ol li a,
.dev-mega-menu__column ul li a {
	display:         flex;
	align-items:     center;
	gap:             0.5em;
	color:           #313131;
	font-size:       18px;
	text-decoration: none;
	transition:      color var(--dmm-transition-speed) var(--dmm-transition-easing);
	font-weight: 400;
}

.dev-mega-menu__column ol li a:hover,
.dev-mega-menu__column ul li a:hover {
	color:           var(--dmm-link-color-hover);
	text-decoration: none;
}

.dev-mega-menu__column ol li a::after,
.dev-mega-menu__column ul li a::after {
	content:         "";
	flex:            0 0 auto;
	width:           0.5em;
	height:          0.5em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'%3E%3C/polyline%3E%3C/svg%3E");
	mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'%3E%3C/polyline%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat:         no-repeat;
	-webkit-mask-position: center;
	mask-position:         center;
	-webkit-mask-size:   contain;
	mask-size:           contain;
	transform:           translateX(0);
	transition:          transform var(--dmm-transition-speed) var(--dmm-transition-easing);
}

.dev-mega-menu__column ol li a:hover::after,
.dev-mega-menu__column ul li a:hover::after {
	transform: translateX(0.25em);
}

/* Mobile: column links (including those not inside a list) get the
   same chevron as list links, so they read as clickable. */
@media ( max-width: 810px ) {
	.dev-mega-menu__column a {
		display:     flex;
		align-items: center;
		gap:         0.5em;
	}

	.dev-mega-menu__column a:hover {
		text-decoration: none;
	}

	.dev-mega-menu__column a::after {
		content:          "";
		flex:             0 0 auto;
		width:            0.5em;
		height:           0.5em;
		background-color: currentColor;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'%3E%3C/polyline%3E%3C/svg%3E");
		mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'%3E%3C/polyline%3E%3C/svg%3E");
		-webkit-mask-repeat: no-repeat;
		mask-repeat:         no-repeat;
		-webkit-mask-position: center;
		mask-position:         center;
		-webkit-mask-size:   contain;
		mask-size:           contain;
		transform:           translateX(0);
		transition:          transform var(--dmm-transition-speed) var(--dmm-transition-easing);
	}

	.dev-mega-menu__column a:hover::after {
		transform: translateX(0.25em);
	}
}

/* ============================================================
   Desktop overrides (min-width: 811px)
   ============================================================ */
@media ( min-width: 811px ) {

	/* Hide hamburger */
	.dev-mega-menu__mobile-toggle {
		display: none;
	}

	/* List: horizontal, always visible */
	.dev-mega-menu__list {
		display:        flex;
		flex-direction: row;
		flex-wrap:      wrap;
		align-items:    stretch;
		gap:            var(--dmm-item-gap);
		background:     var(--dmm-bg);
	}

	/* Items: no mobile border, no wrapping */
	.dev-mega-menu__item {
		flex-wrap:     nowrap;
		border-bottom: none;
	}

	/* Remove mobile separator — toggle blends into the nav bar */
	.dev-mega-menu__toggle {
		border-left:   none;
		border-radius: 4px;
	}

	/* Links: natural (shrink-to-fit) width on desktop */
	.dev-mega-menu__link {
		flex: 0 0 auto;
	}

	/* Dropdown: absolute, spans full nav width, animated */
	.dev-mega-menu__dropdown {
		position:    absolute;
		/* Positioned relative to .dev-mega-menu (position:relative).
		   left:0/right:0 makes it span the full nav width — classic mega menu. */
		top:         100%;
		left:        0;
		right:       0;
		z-index:     100;
		display:     block; /* override mobile display:none */
		background:  var(--dmm-bg-dropdown);
		border:      var(--dmm-dropdown-border);
		border-top:  none;
		border-radius: 0 0 var(--dmm-dropdown-radius) var(--dmm-dropdown-radius);
		box-shadow:  var(--dmm-dropdown-shadow);
		padding:     var(--dmm-dropdown-padding);
		border-radius: 20px;

		/* Hidden state — visibility+opacity allows CSS transitions */
		visibility:     hidden;
		opacity:        0;
		transform:      translateY( -6px );
		pointer-events: none;
		transition:
			opacity    var(--dmm-transition-speed) var(--dmm-transition-easing),
			transform  var(--dmm-transition-speed) var(--dmm-transition-easing),
			visibility 0s var(--dmm-transition-speed);
	}

	/* Open state */
	.dev-mega-menu__item.is-open > .dev-mega-menu__dropdown {
		visibility:     visible;
		opacity:        1;
		transform:      translateY( 0 );
		pointer-events: auto;
		transition:
			opacity   var(--dmm-transition-speed) var(--dmm-transition-easing),
			transform var(--dmm-transition-speed) var(--dmm-transition-easing),
			visibility 0s 0s;
	}


	/* Columns: horizontal, up to 5 across */
	.dev-mega-menu__columns {
		flex-direction: row;
		flex-wrap:      wrap;
	}

	.dev-mega-menu__column {
		flex: 1 1 var(--dmm-column-min-width);
	}
}