/* ============================================================
   Mobile navigation fix — mockit.ai
   Scope: max-width 767px (the measured hamburger breakpoint).

   Load AFTER the Greenshift navigation CSS. Every override below
   also out-specifies Greenshift's own !important rules, so the fix
   holds even if the stylesheet order changes.

   Targets:
     1. All submenus rendering expanded on open
     2. Submenu chevrons not toggling
     3. The "View All" button layout
   ============================================================ */

@media (max-width: 767px) {

	/* --- 1. Submenus must start collapsed --------------------
	   WP core's navigation view resolves state.isSubmenuOpen to
	   "true" for every submenu while the overlay is open, so each
	   .wp-block-navigation__submenu-icon carries aria-expanded="true".
	   Greenshift then hard-opens all six submenus at once via
	     .wp-block-navigation__submenu-icon[aria-expanded="true"]
	       + .wp-block-navigation__submenu-container{display:flex!important}
	   which also beats Greenshift's own collapse rule.

	   Fix: gate on our own state class. The two rules below are
	   mutually exclusive via :not(), so neither has to out-specify
	   the other; both only need to beat Greenshift's (0,3,0) !important.
	   .gs-sub-open is written by mobile-nav-fix.js onto the <li> AND
	   its <ul>, which is why the class is required on both. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		ul.wp-block-navigation__submenu-container:not(.gs-sub-open) {
		display: none !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		ul.wp-block-navigation__submenu-container.gs-sub-open {
		display: flex !important;
	}

	/* --- 2. Stop the overlay panning sideways ---------------
	   left:50.33% on the last mega-menu column pushed it 176px
	   past the right edge: overlay scrollWidth 546px in a 390px
	   viewport, so the last column sat off-screen. */
	.wp-block-navigation__responsive-container.is-menu-open {
		overflow-x: hidden;
	}

	/* --- 3a. The 600-767px band is doubly broken ---------------
	   The hamburger is still the active nav below 768px, but
	   Greenshift's mega-menu rules sit inside @media(min-width:600px)
	   and the nav block emits
	     @media(min-width:600px){.gs-<uuid> > .wp-block-navigation__submenu-container{min-width:800px!important}}
	   So between 600px and 767px the overlay hosts an 800px-wide,
	   flex-direction:row mega menu. Force it back to a vertical stack.
	   (the .gs-<uuid> class is generated, hence the structural selector) */
	.wp-block-navigation__responsive-container.is-menu-open
		.is-style-mega-menu-right > .wp-block-navigation__submenu-container {
		flex-direction: column !important;
		flex-wrap: wrap !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.is-style-mega-menu-right > .wp-block-navigation__submenu-container > li {
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	/* --- 3b. Undo the desktop mega-menu hacks inside the overlay --- */

	/* "View All" column is absolutely positioned for the 800px desktop menu */
	.wp-block-navigation__responsive-container.is-menu-open
		.tools-menu > .wp-block-navigation__submenu-container > li:last-child {
		position: static !important;
		bottom: auto !important;
		left: auto !important;
		width: 100% !important;
		justify-content: flex-start !important;
		align-items: center !important;
	}

	/* Col-1 carries a fixed 350px height + grey fill on desktop */
	.wp-block-navigation__responsive-container.is-menu-open
		.tools-menu .wp-block-navigation__submenu-container > li:first-child
		.wp-block-navigation__submenu-container {
		height: auto !important;
		background: none !important;
		padding-right: 0 !important;
	}

	/* --- 3c. Flatten the Tools mega menu ---------------------
	   The Col-1/Col-2/Col-3/View All wrappers are Greenshift column
	   placeholders (their anchors are href="#"). On mobile their only
	   text is hidden by .mit-heading-col-header{display:none!important},
	   so once submenus start collapsed they collapse to a 0px,
	   un-tappable stub and tapping "Tools" reveals nothing.
	   Flatten instead: opening Tools shows every real tool link, and the
	   placeholder column toggles are removed. */
	.wp-block-navigation__responsive-container.is-menu-open
		li.gs-sub-open.is-style-mega-menu-right > .wp-block-navigation__submenu-container
		> li > .wp-block-navigation__submenu-container {
		display: flex !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.tools-menu > .wp-block-navigation__submenu-container
		> li > .wp-block-navigation__submenu-icon {
		display: none !important;
	}

	/* flatten the indentation so the links stay readable */
	.wp-block-navigation__responsive-container.is-menu-open
		.tools-menu .wp-block-navigation__submenu-container
		.wp-block-navigation__submenu-container {
		padding-left: 16px !important;
		padding-right: 0 !important;
		padding-bottom: 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.tools-menu .wp-block-navigation__submenu-container
		.wp-block-navigation__submenu-container
		.wp-block-navigation__submenu-container {
		padding-left: 28px !important;
	}

	/* --- 4. Restore the 20px+ gutter greenshift reserves for the
	   absolutely-positioned chevron. .header-menu-items a{padding:8px 12px!important}
	   overrode it, so long labels ran under the chevron button. --- */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.wp-block-navigation-item__content {
		padding: 8px 40px 8px 4px !important;
	}

	/* --- 4b. The two button rows get the wider left gutter ---
	   "View All" (inside the Tools mega menu) and "Login" are the only
	   real buttons in the overlay. Rule 4 above gives every row a 4px
	   left gutter, which is too tight for these two. Placed after rule 4
	   so it wins over it where the selectors tie on specificity. */
	.wp-block-navigation__responsive-container.is-menu-open
		.login-link > .wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container.is-menu-open
		.tools-menu > .wp-block-navigation__submenu-container
		> li:last-child > .wp-block-navigation__submenu-container
		> li.wp-block-navigation-link > .wp-block-navigation-item__content {
		padding: 8px 40px 8px 30px !important;
	}

	/* --- 5. Repair the "Login" row ---------------------------
	   The li has both .login-link (display:block!important, mobile) and
	   .header-btn-login (visibility:hidden!important, base). display won,
	   visibility did not, so the row rendered as 44px of invisible dead
	   space. Make it visible instead of hiding it. */
	.wp-block-navigation__responsive-container.is-menu-open .login-link {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.login-link > .wp-block-navigation-item__content {
		color: #9810fa !important;
		font-weight: 500 !important;
		border: 1px solid #9810fa !important;
		border-radius: 6px !important;
		display: inline-flex !important;
		justify-content: center !important;
	}
}

/* ============================================================
   Desktop: stop the "View All" button expanding on hover.

   WP core's nav-core.css contains, inside @media (hover:hover):

     .wp-block-navigation .has-child:not(.open-on-click):hover
       > .wp-block-navigation__submenu-container
         { min-width: 200px; height: auto; width: auto; ... }

   The "View All" column is <li class="has-child open-on-hover-click">,
   so it matches :not(.open-on-click). Hovering the button therefore
   hovers that <li>, which gives its submenu container min-width:200px.
   The nested <li> then stretches to 200px (column flex + align-items:
   normal) and the anchor stretches with it, because core also sets
   flex-grow:1 on it:

     .wp-block-navigation .has-child .wp-block-navigation__submenu-container
       > .wp-block-navigation-item > .wp-block-navigation-item__content
         { display: flex; flex-grow: 1; padding: .5em 1em }

   Measured: button 73.1px at rest -> 198px on hover -> 73.1px on leave,
   animated by `transition: all`.

   That container holds exactly one link, so the 200px minimum is
   meaningless here. Cancel it and keep the colour change from
   `.header-menu-items a:hover`.
   ============================================================ */

@media (min-width: 768px) {

	.tools-menu > .wp-block-navigation__submenu-container > li:last-child:hover
		> .wp-block-navigation__submenu-container,
	.tools-menu > .wp-block-navigation__submenu-container > li:last-child
		> .wp-block-navigation__submenu-container:hover {
		min-width: 0 !important;
	}

	/* Belt and braces: only ever animate the colours, never the box.
	   The colour change itself comes from `.header-menu-items a:hover`
	   (color #fff on background #9810fa) and is left untouched. */
	.tools-menu > .wp-block-navigation__submenu-container > li:last-child a {
		transition: color .2s ease, background-color .2s ease;
	}
}