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

	#header .r3423-nav-menu a, #header .r3423-nav-menu {
		padding-left: 0.5em;
	}

	#header .r3423-nav-menu a, #header .r3423-nav-menu a:visited {
		padding: 0.25em 2em 0 2em;
	}

}

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

	#header > .wp-block-group.is-layout-flex { align-items: flex-end; }

	#header .r3423-nav-menu a, #header .r3423-nav-menu a:visited {
		padding-bottom: 0 !important;
	}

	.wp-block-search.wp-block-search__button-inside input[type=search],
	.wp-block-search.wp-block-search__button-inside input[type=search][value=""]:focus {
		transition: all 0s ease !important;
	}
		
	#footer > .wp-block-group:first-child > * {
		max-width: none !important;
	}
	
	#footer p, #footer li {
		margin-top: 0.25rem !important;
	}
	
}

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

	#header .wp-block-group.is-layout-flex.is-vertical { gap: 0.25rem; }
	
	#header .r3423-nav-menu#primary_navigation ul.menu {
		margin-top: 1.5rem !important;
		margin-left: 0 !important;
	}
	
	#header .r3423-nav-menu a, #header .r3423-nav-menu a:visited { padding-bottom: 3px; }
	
	body.nav-open #header {
		background: var(--wp--preset--color--neutral-light) url('data:image/svg+xml;utf8,<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 1024 80" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="1024" height="80" style="fill:white;"/></svg>') center top no-repeat !important;
		background-size: 1024px 80px !important;
	}

	/**
	 * Override theme behavior of hiding page content when nav is open...
	 * Note: This only works if there's no auxiliary menu or header widgets!
	 */
	body.nav-open #header { min-height: 1px !important; }
	body.nav-open main, body.nav-open footer.site-footer { display: block !important; }
	
	body.nav-open #header .wp-block-search {
		margin-left: -20px !important;
		padding-left: 0 !important;
	}

	body.nav-open #header .r3423-nav-menu ul.menu {
		padding-bottom: 0 !important;
	}

	body.nav-open #header .nav-menu-handle svg.r3423-menu-handle path.bar1 {
		transform: translateX(22%) translateY(-22%) rotate(45deg);
		transform-origin: 50% 50%;
	}
	body.nav-open #header .nav-menu-handle svg.r3423-menu-handle path.bar3 {
		transform: translateX(22%) translateY(22%) rotate(-45deg);
		transform-origin: 50% 50%;
	}

	body.nav-open:not(.search-open) .wp-block-search__inside-wrapper input[type="search"] { display: none !important; }
	
	body.single-project .wp-block-group.is-layout-flex { flex-direction: column !important; }
	
	.wp-site-blocks {
		margin-top: 1rem;
	}

	.wp-site-blocks:has(main > .entry-content > .cb-carousel-block:first-child, main > .entry-content > .wp-block-cover:first-child) {
		margin-top: 0;
	}
	
	.mobile_toggle_wrapper > ul { display: none; }
	.mobile_toggle_wrapper.open > ul { display: block; }
	
	.project_view_nav h2 {
		margin-top: 0;
		margin-bottom: 0.5em;
	}
	
	.mobile_toggle_handle {
		cursor: pointer;
	}
	
	.mobile_toggle_handle::before {
		content: '+';
		display: inline-block;
		/*font-size: 75%;*/
		height: 1em;
		line-height: 1em;
		margin-right: 0.5em;
		text-align: center;
		/*transition: transform 0.25s ease;
		transform: rotate(0deg);
		transform-origin: 50% 50%;*/
		width: 1em;
	}

	.project_view_nav ul {
		margin-top: 1em !important;
	}
	
	.mobile_toggle_wrapper.open .mobile_toggle_handle::before {
		content: '–';
		/*transform: rotate(90deg);*/
	}

	.project_view_toggle > div {
		height: 24px;
		width: 24px;
	}

	.project_view_nav ul {
		margin: 0;
	}

	/*#projects-sidebar .project_view_nav li li, #projects-sidebar hr + .project_view_nav li {*/
	#projects-sidebar .project_view_nav li {
		display: inline-block;
		margin-right: 1rem;
	}


	body #footer.is-layout-constrained > * {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	body #footer .is-layout-flex > :is(*, div) {
		padding-bottom: 0.75rem;
	}
	
	#footer .r3423-nav-menu {
		margin: 1.5rem 0;
	}
	
	#footer .r3423-nav-menu ul.menu {
		display: grid;
		gap: 0.5rem 1.5rem;
		grid-template-columns: calc(50% - 0.75rem) calc(50% - 0.75rem);
	}
	
	#footer .r3423-nav-menu ul.menu > li > a {
		border-bottom: 1px solid var(--wp--preset--color--neutral) !important;
		display: block;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: normal;
		padding: 0;
	}
	
	#footer .r3423-nav-menu ul.menu > li.current-menu-item > a {
		font-weight: bold;
	}
			
}


/* Things that need to match the smaller breakpoint */
@media screen and (max-width: 782px) {

	/* Gutenberg is still NOT really made for mobile! */
	#header #header-inner { display: block !important; }
	.wp-site-blocks *[style*="padding-right"] { padding-right: 0 !important; }	
	.wp-site-blocks *[style*="padding-left"] { padding-left: 0 !important; }
	
	/* Override default column gap on Projects main page and taxonomy archives */
	body:is(.page-id-71, .archive) .entry-content > .wp-block-columns {
		gap: 0.5em !important;
	}

}


/* Columns don't drop to single until 580px */
@media screen and (max-width: 580px) {

	/**
	 * PROJECT PAGES (mostly)
	 * Try to force a consistent amount of space between images and between images and paragraphs
	 */
	figure.wp-block-image:first-child {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	figure.wp-block-image:not(:first-child) {
		margin-top: calc(var(--wp--style--block-gap) * 2) !important;
		margin-bottom: 0 !important;
	}
	.project_view_grid figure.wp-block-image:not(:first-child) {
		margin-top: calc(var(--wp--style--block-gap) / 2) !important;
	}
	.wp-block-column > p {
		margin: 0 !important;
		padding: 0 !important;
	}
	.wp-block-column > p + p, .wp-block-column div.has-medium-font-size details + p {
		margin-top: var(--wp--style--block-gap) !important;
	}
	
	/* Make space between images and text full-width match collapsed columns */
	.wp-block-image + p {
		margin-top: calc(var(--wp--style--block-gap) * 2) !important;
	}

}


/* This is stupidly fiddly to avoid a weird jumps in the number of columns at specific breakpoints */
@media screen and (max-width: 560px) {
	#wka-person-grid {
		gap: calc(var(--wp--style--block-gap) / 2) !important;
		grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr)) !important;
	}
	#wka-person-grid * {
		font-size: var(--wp--preset--font-size--small) !important;
	}
	#wka-person-grid > .wp-block-group > .wp-block-group > div[style*="margin-bottom"] {
		margin-bottom: calc(var(--wp--style--block-gap) / 2) !important;
	}
}
@media screen and (min-width: 561px) and (max-width: 1060px) {
	#wka-person-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)) !important;
	}
}