/* Non-critical general CSS for 1024px mobile breakpoint */

@media screen and (max-width: 1024px) {

	#header {
		width: 100vw;
	}

	#header .r3423-nav-menu#primary_navigation ul.menu {
		margin-left: 24px;
	}

	#header .r3423-nav-menu ul.menu a {
		font-size: var(--wp--preset--font-size--medium-plus);
		line-height: var(--wp--custom--typography--line-height--medium-plus);
	}

	#header .r3423-nav-menu a:is(:focus, :hover), #header .r3423-nav-menu .menu > li:is(:hover, :focus-within) {
		background-color: transparent !important;
		color: var(--wp--preset--color--primary) !important;
	}

}


@media screen and (min-width: 1025px) {

	#header > .wp-block-group > .wp-block-site-logo {
		width: var(--wp--custom--header--logo-width);
	}
	
	#header > .wp-block-group > .wp-block-site-logo + .wp-block-group {
		align-items: end;
		display: inline-flex;
		justify-content: flex-end;
		width: calc(100% - calc(var(--wp--style--block-gap) * 2) - var(--wp--custom--header--logo-width));
	}
	
	#header .r3423-nav-menu ul.menu {
		align-items: stretch;
		display: inline-flex;
		justify-content: flex-end;
	}
	
	#header .r3423-nav-menu ul.menu a {
		line-height: 1.3 !important;
	}
	
	#header .r3423-nav-menu ul.menu > li {
		align-items: center;
		border: 1px solid transparent !important;
		border-radius: 4px;
		display: flex;
		justify-content: center;
	}
	
	#header .r3423-nav-menu ul.menu > li:is(:hover, :focus, :focus-within, .open) {
		border-color: var(--wp--preset--color--primary) !important;
	}
	
	#header .r3423-nav-menu ul.menu > li, #header .r3423-nav-menu ul.menu > li > a {
		border-radius: 8px;
	}
	
	#header .r3423-nav-menu ul.menu > li.menu-item-has-children, #header .r3423-nav-menu ul.menu > li.menu-item-has-children > a {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	
	#header .r3423-nav-menu ul.menu > li:is(:hover, :focus, :focus-within, .open):not(:has(> a:hover, > a:focus)), /* This took a while to figure out */
	#header .r3423-nav-menu ul.menu > li:is(:hover, :focus, :focus-within, .open) > a:not(:hover, :focus)
	{
		background-color: var(--wp--preset--color--tertiary) !important;
	}
	
	#header .r3423-nav-menu ul.menu > li.menu-item-has-children > a {
		padding-right: 0.25em;
	}
	
	#header .r3423-nav-menu ul.menu .submenu-indicator {
		position: relative; top: 3px;
		flex-shrink: 0;
	}
		
	#header .r3423-nav-menu ul.menu a {
		text-align: center;
		white-space: initial !important;
	}
	
	#header .r3423-nav-menu ul.menu ul.sub-menu {
		margin-left: -1px;
		margin-right: -1px;
		min-width: calc(100% + 2px) !important;
		overflow: clip;
		transition: all 0s !important;
	}

	#header .r3423-nav-menu ul.menu > li > ul.sub-menu {
		border: 1px solid var(--wp--preset--color--primary);
		border-top: 4px solid var(--wp--preset--color--primary);
	}

	#header .r3423-nav-menu .menu > li:not(:has(> a:is(:focus, :hover))) /* For dropdown toggle carets */
	{
		color: var(--wp--preset--color--primary) !important;
	}
		
	#header .r3423-nav-menu ul.menu ul.sub-menu a {
		display: block;
		text-align: left;
		max-width: 100%;
		min-width: 200px;
		width: 100%;
	}
	
}


@media screen and (max-width: 1200px) and (min-width: 1025px) {

	#header {
		min-height: var(--wp--custom--header--height-tablet) !important;
		padding: var(--wp--custom--header--padding-tablet) !important;
	}

		#header .wp-block-site-logo {
			height: auto;
			width: var(--wp--custom--header--logo-width-tablet) !important;
		}
		
}