/*
 Theme Name:     ACRC 2.0
 Template:       Divi
 Version:        2.0.2
*/

/* =Theme customization starts here
------------------------------------------------------- */
body {
	max-width: 100vw;
	overflow-x: hidden;
}

/* @font-face {
font-family: Din2014;
src: url(/wp-content/themes/ACRC/fonts/DIN2014-Regular.ttf);
}
 */
/* Relative font URLs → work for ACRC and ACRC-2.0 (absolute /themes/ACRC/ 404s on live). */
@font-face {
	font-family: 'Din2014';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Din2014'),
		url('fonts/DIN2014-Regular.woff2') format('woff2'),
		url('fonts/DIN2014-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Din2014-Medium';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: local('Din2014-Medium'),
		url('fonts/DIN2014-DemiBold.woff2') format('woff2'),
		url('fonts/DIN2014-DemiBold.ttf') format('truetype');
}

/*
 * Headings: font-display:block + early preload (see performance.php) so we hold
 * briefly for Bebas instead of flashing a fallback then snapping late.
 */
@font-face {
	font-family: 'Bebas Neue';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: local('Bebas Neue'), local('BebasNeue-Regular'),
		url('fonts/BebasNeue-Regular.woff2') format('woff2');
}


/* @font-face {
font-family: Din2014-Medium;
src: url(/wp-content/themes/ACRC/fonts/DIN2014-DemiBold.ttf);
}
 */
#mobile_menu1 {
	margin-top: 30px;
}

.et_pb_menu__menu, .et-menu-nav, #menu-main-menu {
	width: 100%;
	margin: 0px;
}

.et_pb_menu__wrap {
	margin: 0;
}

/* Keep all top-level items on one row (About, News, Research, Connect, + Projects when live) */
@media (min-width: 981px) {
	#menu-main-menu {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	#menu-main-menu > li {
		width: auto !important;
		flex: 1 1 auto;
		min-width: max-content;
		text-align: center;
		position: relative;
	}

	#menu-main-menu > li > a {
		display: inline-block;
		position: relative;
		padding-left: 8px;
		padding-right: 8px;
		white-space: nowrap;
	}

	/* Room for Divi's absolute dropdown chevron (::after) */
	#menu-main-menu > li.menu-item-has-children > a {
		padding-right: 1.35em;
	}

	/*
	 * nowrap must NOT inherit into .sub-menu — that forced all dropdown
	 * items onto one horizontal row (only the first stayed visible).
	 */
	#menu-main-menu .sub-menu {
		white-space: normal;
		display: block;
	}

	#menu-main-menu .sub-menu > li {
		display: block !important;
		float: none !important;
		width: 100% !important;
		white-space: normal;
	}
}

/* Legacy equal-width only when not using the flex row above */
@media (max-width: 980px) {
	#menu-main-menu > li {
		width: 25%;
	}
}

#menu-item-78 a {
	text-align: left;
}
@media (min-width: 981px) {
	#menu-item-78 a {
		text-align: right;
		width: 100%;
	}
}

p {
	font-family: "Din2014" !important;
	font-size: 18px;
}

/* Body / blog lists match paragraph typography (not menus or special icon lists) */
body.et_divi_theme .et-l--body .et_pb_text ul,
body.et_divi_theme .et-l--body .et_pb_text ol,
body.et_divi_theme .et-l--body .et_pb_post_content ul,
body.et_divi_theme .et-l--body .et_pb_post_content ol,
body.et_divi_theme .et-l--body .et_pb_fullwidth_post_content ul,
body.et_divi_theme .et-l--body .et_pb_fullwidth_post_content ol,
body.et_divi_theme .entry-content ul,
body.et_divi_theme .entry-content ol,
.et_pb_text ul,
.et_pb_text ol,
.et_pb_post_content ul,
.et_pb_post_content ol,
.et_pb_fullwidth_post_content ul,
.et_pb_fullwidth_post_content ol,
.entry-content ul,
.entry-content ol {
	font-family: "Din2014", sans-serif !important;
	font-size: 18px !important;
	line-height: 1.7em !important;
}

body.et_divi_theme .et-l--body .et_pb_text li,
body.et_divi_theme .et-l--body .et_pb_text li a,
body.et_divi_theme .et-l--body .et_pb_post_content li,
body.et_divi_theme .et-l--body .et_pb_post_content li a,
body.et_divi_theme .et-l--body .et_pb_fullwidth_post_content li,
body.et_divi_theme .entry-content li,
body.et_divi_theme .entry-content li a,
.et_pb_text li,
.et_pb_text li a,
.et_pb_post_content li,
.et_pb_post_content li a,
.et_pb_fullwidth_post_content li,
.entry-content li,
.entry-content li a {
	font-family: "Din2014", sans-serif !important;
	font-size: 18px !important;
	line-height: 1.7em !important;
}

#menu-main-menu {
	font-family: "Din2014-Medium" !important;
	font-size: 20px;
}
@media only screen and (max-width: 1168px) {
	.et_pb_posts .et_pb_post img,
	.et_pb_posts .et_overlay {
		height: 300px !important;
		width: 100%;
		object-fit: cover !important;
	}
	.et_pb_posts .entry-title,
	.et_pb_posts .post-meta,
	.et_pb_posts .post-content { 
	    padding-left: 15px;
		padding-right: 15px;
	}
}

 /* @media (min-width: 768px) and (max-width: 1168px) {
	width: 150px !important;
	height: 200px !important;
	margin-left: 2% !important;
	float: right;
	object-fit: cover;
 }  */

.et_pb_posts .more-link::after{
	content: "  \276F";
}

.et_pb_posts .et_pb_post {
	padding-top: 0px;
	padding-bottom: 20px;
	background-color: white;
	box-shadow: 7px 7px 10px rgba(0,0,0,0.25);
}

@media only screen and (min-width: 1169px) { 
	.et_pb_posts .et_pb_post img,
	.et_pb_posts .et_overlay {
		width: 243px !important;
		height: 243px !important;
		margin-left: 2% !important;
		float: right;
		object-fit: cover;
	}
	.et_pb_posts .entry-title,
	.et_pb_posts .post-meta,
	.et_pb_posts .post-content { 
	    float: left; 
	    width: 68%; 
	}
	.et_pb_posts .et_pb_post img,
	.et_pb_posts .et_overlay {
		float: left;
		margin-right: 4%;
		margin-left: 0;
	}
	.et_pb_posts .entry-title,
	.et_pb_posts .post-meta,
	.et_pb_posts .post-content { 
	    float: left; 
	}
	.et_pb_posts .et_pb_post {
		padding-top: 20px !important;
	}
}

.et_pb_posts .et_pb_post h2, .et_pb_posts .et_pb_post .post-meta, .et_pb_posts .et_pb_post .post-content {
	padding-left: 20px;
}

.et_pb_contact_field_last, .et_pb_newsletter_button_wrap {
	display: inline-block;
	flex-basis: auto;
}

.et_pb_contact_field_last {
	width: calc(100% - 125px);
}

.et_pb_newsletter_button_wrap {
	width: 125px;
}

@media only screen and (max-width: 980px) {
	.et-l--header .et_pb_menu__wrap {
		float: right;
		margin-top: -75px;
	}
}

@media (max-width: 767px) {
	.lwp-hide-mobile-menu.et_pb_menu .et_pb_menu__menu, .lwp-hide-mobile-menu.et_pb_fullwidth_menu .et_pb_menu__menu {
		display: flex!important;
	}	
}

.lwp-hide-mobile-menu .et_mobile_nav_menu {
	display: none !important;
}


.et-l--footer a::after{
	content: "";
}

#menu-footer-menu {
	margin: 0 auto;
	margin-bottom: 150px;
}

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

	.et-l--footer nav li li{
		padding-left: 11px;
		width: auto;
	}

	.et-l--footer nav .menu-item-has-children {
		min-width: 130px;
		margin-bottom: 150px !important;
	}

	.et-l--footer .et_pb_menu{
		width: calc(100% - 78px);
	}

/* 	.et_pb_image_1_tb_footer {
		width: 75px;
		float: right;
	} */
	#menu-footer-menu {
		margin: 0 auto;
		margin-bottom: 0px;
	}
}

.lwp-toggle-icon.et_pb_toggle .et_pb_toggle_title:before,.lwp-toggle-icon .et_pb_toggle .et_pb_toggle_title:before {
    content: "";
	background-image: url('/wp-content/uploads/2021/03/downarrow.png');
	background-repeat: no-repeat;
	width: 25px;
	height: 25px;
}

#main-content .slick-slide img {
    display: block;
    height: 300px;
    object-fit: cover;
    padding: 15px;
}

#main-content .slick-prev {
	background-repeat: no-repeat !important;
	width: 85px !important;
	height: 73px !important;
	background: url('/wp-content/uploads/2021/03/Group-16-Copy.png');
	left: 20%;
    z-index: 100 !important;
}

.post-3340 .slick-prev {
	left: -35px !important;
	background-image: none !important;
	background: none !important;
}

.post-3340 .slick-prev:before, .post-3340 .slick-next:before {
	font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
}


#main-content .slick-prev:before {
    content: '';
}

#main-content .slick-next {
	background-repeat: no-repeat !important;
	width: 85px !important;
	height: 73px !important;
	background: url('/wp-content/uploads/2021/03/Group-16.png');
	right: -35px !important;
    z-index: 100 !important;
}

.post-3340 .slick-next {
	right: 35px !important;
	background: none !important;
	background-image: none !important;
}

#main-content .slick-next:before {
    content: '';
}

#main-content .slick-active + .slick-active + .slick-active + .slick-active, .slick-current {
	opacity: 0.5;
}

#main-content .slick-dots {
	display: none !important;
}

.post-3340 .slick-prev:before {
    content: '←' !important;
}

.post-3340 .slick-next:before {
    content: '→' !important;
}

@media only screen and (max-width: 767px) {
	.image-slider {
		display: none;
	}
}

@media only screen and (max-width: 980px) {
	#main-content .slick-slide img {
		display: block;
		height: 200px;
		object-fit: cover;
		padding: 7px;
	}
}

footer .slick-dots, .post-3340 .slick-dots {
	display: none !important;
}

footer .slick-slide img, .post-3340 .slick-slide img {
	max-height: 90px !important;
	object-fit: contain !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	margin: 0 auto !important;
}

footer .slick-active,  .post-3340 .slick-active {
	opacity: 1 !important;
}



.responsive-accordion {
	margin: 0;
	padding-bottom: 0;
	padding-right: 15px !important;
}

.responsive-accordion-head, .responsive-accordion-panel tbody h1 {
    color: #17213B !important;
    font-family: 'Bebas Neue' !important;
	padding-bottom: 2px;
}

.responsive-accordion-panel tr {
	margin-bottom: 5px;
	border-left: solid 5px #17213B;
	border-bottom: 0;
	border-top: 0;
	border-right: 0;
}

.responsive-accordion-panel td img{
	margin-top: 15px;
	float: right;
}
.tablepress{
	margin-top: 30px !important;
}

.tablepress td img{
	margin-top: 15px;
	float: right;
}

.tablepress tr {
	margin-bottom: 5px;
	border-left: solid 4px #17213B;
	border-bottom: 0;
	border-top: 0;
	border-right: 0;
}

.tablepress tbody h1 {
    color: #17213B !important;
    font-family: 'Din2014' !important;
    padding-bottom: 2px;
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
}

.tablepress a {
    color: #17213B !important;
}


@media(min-width: 768px) {
	.responsive-accordion-panel {
		width: calc(100% - 120px);
		margin: 0 auto;
	}	
}
/* @media(max-width: 980px) {
	.et_pb_menu_inner_container {
		width: 50%;
		float: right;
	}
} */

.tablepress br {
	display: none;
}

.tablepress span {
	font-weight: 300;
	color: #17213B;
	font-size: 16px;
}

.responsive-accordion-head {
    background-color: white !important;
}

.responsive-accordion-head .fa-chevron-down:before {
	background: url('/wp-content/uploads/2021/03/plus.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    content: "";
    display: block;
	height: 38px;
	width: 38px;
	top: 20px;
}

.responsive-accordion-head .fa-chevron-up:before {
	background: url('/wp-content/uploads/2021/03/minus.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    content: "";
    display: block;
	height: 38px;
	width: 38px;
}

.responsive-accordion-default.responsive-accordion li .responsive-accordion-head i {
    top: 25px !important;
}

.responsive-accordion-head, .responsive-accordion-panel {
	border: none !important;
}

.responsive-accordion-default.responsive-accordion li .responsive-accordion-head span{
	font-size: 60px !important;
}

.et_pb_code_inner .theme1 {
	padding-top: 0px !important;
}

.wpcf7 {
	color: #17213B;
	width: 100%;
}
.wpcf7 input, .wpcf7 textarea{
	border-bottom: solid, 4px, #17213B;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	padding: 10px;
	width: 100%;
}

.wpcf7-submit {
	width: 500px;
	color: #FFFFFF!important;
    border-width: 0px!important;
    border-radius: 0px;
    font-size: 25px;
    font-family: 'Bebas Neue',display!important;
    background-color: #17213B;
	box-shadow: 0px 12px 18px -6px rgb(0 0 0 / 30%);
}

.contact-form h2 {
    font-family: 'Din2014' !important;
	font-weight: 600;
	color: #17213B;
}

.search-results h2 a{
	font-family: 'Bebas Neue',display;
    font-size: 40px;
    color: #17213b!important;
    text-align: center;
}

.disable-lightbox a {
pointer-events: none;
}
 
.disable-lightbox .et_overlay {
display: none !important;
}

.et_pb_gallery_grid .et_pb_gallery_image,
.et_pb_gallery_grid .et_pb_gallery_image.landscape img
{
height: 90px;
}
.et_pb_gallery_grid .et_pb_gallery_image img
{
min-height: 90px;
}

.et_pb_column_3_tb_footer, .et_pb_column_1_tb_footer {
	background-size: 90px !important;
    background-position: top right !important;
}

.page-id-76 li {
	list-style-type: none;
}
.page-id-76 .entry-content li:before { content: "  \276F"; margin-left: -20px; margin-right: 10px; } 

.et-social-rss a.icon:before {
    content: url(https://www.african-cities.org/wp-content/uploads/2021/03/mail.png) !important;
}
.search-results h2 {
    line-height: 2em;
}

#menu-main-menu .sub-menu{
	margin-top: 0px !important;
	background-color: #17213b !important;
}

.et_pb_fullwidth_menu .et-menu>li, .et_pb_menu .et-menu>li {
    padding-left: 5px;
    padding-right: 5px;
}

#menu-main-menu .sub-menu li {
    width: 100%;
}

.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu a {
	color: white !important;
}

.nav li ul {
	width: 340px;
}

.et-menu li li a {
	width: 300px;
}


/* Sets map tooltip font to be smaller */
.imapsInnerTooltip {
    font-size: 25px !important;
} 

.imapsSprite-group foreignObject {
	font-size: 25px !important;

}


.map_wrapper .imapsTooltip-group {
	width: 500px;
	border: solid black 5px;
}

.slick-prev::before {
    content: "←";
}

.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.page-id-3340 .et_pb_section_0_tb_footer {
	display: none !important;
}

.li_left li, .li_right li {
	padding-bottom: 20px;
	line-height: 1.4em;
}

.li_left ::marker, .li_right ::marker{
	max-height: 20px !important;
}

.li_left li:nth-child(1) {
	list-style-image: url(/wp-content/uploads/2022/06/li1.png);
}

.li_left li:nth-child(2) {
	list-style-image: url(/wp-content/uploads/2022/06/li2.png);
}

.li_left li:nth-child(3) {
	list-style-image: url(/wp-content/uploads/2022/06/li3.png);
}

.li_left li:nth-child(4) {
	list-style-image: url(/wp-content/uploads/2022/06/li4.png);
}

.li_right li:nth-child(1) {
	list-style-image: url(/wp-content/uploads/2022/06/li5.png);
}

.li_right li:nth-child(2) {
	list-style-image: url(/wp-content/uploads/2022/06/li6.png);
}

.li_right li:nth-child(3) {
	list-style-image: url(/wp-content/uploads/2022/06/li7.png);
}

.li_right li:nth-child(4) {
	list-style-image: url(/wp-content/uploads/2022/06/li8.png);
}

/* -------------------------------------------------------------------------
   Mobile header: search visibility + navy dropdown (Other website tweaks)
   Brief: navy mobile menu across all pages; show search on mobile.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 980px) {
	/* Show search icon (Divi About/yellow headers hide it under 767px) */
	.et_pb_menu .et_pb_menu__icon.et_pb_menu__search-button,
	.et_pb_menu .et_pb_menu__icon.et_pb_menu__close-search-button,
	.et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__search-button,
	.et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__close-search-button {
		display: flex !important;
	}

	/* Match hamburger: navy icons on yellow/light headers */
	.et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__search-button,
	.et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__close-search-button {
		color: #17213B !important;
	}

	/*
	 * Consistent navy mobile dropdown + white text for ALL levels.
	 * Overrides Divi TB yellow submenu backgrounds on About-style headers.
	 */
	.et_pb_menu .et_mobile_menu,
	.et_pb_menu .et_mobile_menu ul,
	.et_pb_menu .et_mobile_menu .sub-menu,
	.et_pb_fullwidth_menu .et_mobile_menu,
	.et_pb_fullwidth_menu .et_mobile_menu ul,
	.et_pb_fullwidth_menu .et_mobile_menu .sub-menu,
	.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu,
	.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu ul,
	#mobile_menu1,
	#mobile_menu1 ul,
	#mobile_menu1 .sub-menu {
		background-color: #17213B !important;
		background-image: none !important;
	}

	.et_pb_menu .et_mobile_menu a,
	.et_pb_menu .et_mobile_menu li a,
	.et_pb_menu .et_mobile_menu li li a,
	.et_pb_menu .et_mobile_menu .sub-menu a,
	.et_pb_fullwidth_menu .et_mobile_menu a,
	.et_pb_fullwidth_menu .et_mobile_menu li a,
	.et_pb_fullwidth_menu .et_mobile_menu li li a,
	.et_pb_fullwidth_menu .et_mobile_menu .sub-menu a,
	.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu a,
	.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li a,
	.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li li a,
	#mobile_menu1 a,
	#mobile_menu1 li a,
	#mobile_menu1 li li a,
	#mobile_menu1 .sub-menu a {
		color: #FFFFFF !important;
		text-shadow: none !important;
		background-color: transparent !important;
	}

	.et_pb_menu .et_mobile_menu a:hover,
	.et_pb_menu .et_mobile_menu li a:hover,
	.et_pb_menu .et_mobile_menu li li a:hover,
	.et_pb_fullwidth_menu .et_mobile_menu a:hover,
	.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu a:hover,
	#mobile_menu1 a:hover,
	#mobile_menu1 li a:hover,
	#mobile_menu1 li li a:hover {
		color: #FFFFFF !important;
		opacity: 0.85;
	}
}

@media only screen and (max-width: 767px) {
	/* Beat Divi TB rule that hides search on phone for yellow headers */
	.et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__search-button,
	.et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__close-search-button {
		display: flex !important;
		color: #17213B !important;
	}
}

/* -------------------------------------------------------------------------
   Projects — summary box, filter grid, yellow listing hero helpers
   ------------------------------------------------------------------------- */
.acrc-project-summary {
	margin: 0 0 2em;
	padding: 1.25em 1.5em;
	background: #17213B;
	color: #fff;
	font-family: "Din2014", sans-serif;
}

.acrc-project-summary__list {
	margin: 0;
	padding: 0;
}

.acrc-project-summary__row {
	display: grid;
	grid-template-columns: minmax(140px, 32%) 1fr;
	gap: 0.5em 1.25em;
	padding: 0.45em 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.acrc-project-summary__row:last-child {
	border-bottom: 0;
}

.acrc-project-summary dt {
	margin: 0;
	font-family: "Din2014-Medium", "Din2014", sans-serif;
	font-size: 16px;
	opacity: 0.85;
}

.acrc-project-summary dd {
	margin: 0;
	font-size: 18px;
}

/* Projects listing page: seamless yellow header + hide duplicate page title */
body.acrc-page-projects .et-l--header .et_pb_section,
body.acrc-page-projects .et_pb_section_0_tb_header {
	background-color: #FFD600 !important;
	background-image: none !important;
}

body.acrc-page-projects .et-l--header .et_pb_menu a,
body.acrc-page-projects .et-l--header .et_pb_menu .mobile_menu_bar:before,
body.acrc-page-projects .et-l--header .et_pb_menu__search-button,
body.acrc-page-projects .et-l--header .et_pb_menu__close-search-button,
body.acrc-page-projects #menu-main-menu > li > a {
	color: #17213B !important;
}

body.acrc-page-projects .et-l--header .et_pb_search input.et_pb_s,
body.acrc-page-projects .et-l--header .et_pb_search input.et_pb_searchsubmit {
	color: #17213B !important;
	border-color: #17213B !important;
}

/* White logo → navy on yellow */
body.acrc-page-projects .et-l--header .et_pb_image img,
body.acrc-page-projects .et-l--header .et_pb_menu__logo img {
	filter: brightness(0) saturate(100%);
}

/*
 * Hide duplicate titles:
 * - Theme Builder header often includes a second section with the page H1
 * - Body hero (.acrc-projects-hero) already carries the yellow title
 */
body.acrc-page-projects .et-l--header .et_pb_section_1_tb_header,
body.acrc-page-projects .et-l--header .et_pb_section:not(.et_pb_section--with-menu) {
	display: none !important;
}

body.acrc-page-projects .et-l--body .et_pb_section:not(.acrc-projects-hero) h1,
body.acrc-page-projects .entry-title,
body.acrc-page-projects .et_pb_title_container {
	display: none !important;
}

body.acrc-page-projects .acrc-projects-hero h1 {
	display: block !important;
}

/* Menu sits on yellow — kill any white menu/row backgrounds Divi may add */
body.acrc-page-projects .et-l--header .et_pb_menu,
body.acrc-page-projects .et-l--header .et_pb_menu .et_pb_row,
body.acrc-page-projects .et-l--header .et_pb_menu .et_pb_menu__wrap,
body.acrc-page-projects .et-l--header .et_pb_with_border {
	background-color: transparent !important;
	background-image: none !important;
}

.acrc-projects {
	font-family: "Din2014", sans-serif;
	color: #17213B;
}

.acrc-projects__filters {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr) auto;
	gap: 1rem 1rem;
	margin: 0 0 1.75rem;
	align-items: end;
}

@media (max-width: 980px) {
	.acrc-projects__filters {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.acrc-projects__filters {
		grid-template-columns: 1fr;
	}
}

.acrc-projects__search input,
.acrc-projects__select select {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid #17213B;
	border-radius: 0;
	padding: 0.7em 0.85em;
	font-family: "Din2014", sans-serif;
	font-size: 16px;
	color: #17213B;
	background: #fff;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2317213B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 2.2em;
}

.acrc-projects__search input {
	background-image: none;
	padding-right: 0.85em;
}

.acrc-projects__select span {
	display: block;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 0.4em;
	font-family: "Din2014-Medium", "Din2014", sans-serif;
}

.acrc-projects__reset {
	border: 2px solid #17213B;
	background: transparent;
	color: #17213B;
	padding: 0.7em 1.2em;
	font-family: "Din2014-Medium", "Din2014", sans-serif;
	font-size: 16px;
	cursor: pointer;
	height: 46px;
}

.acrc-projects__reset:hover {
	background: #17213B;
	color: #fff;
}

.acrc-projects__count {
	margin: 0 0 1rem;
	font-size: 16px;
}

.acrc-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

@media (max-width: 980px) {
	.acrc-projects__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.acrc-project-summary__row {
		grid-template-columns: 1fr;
		gap: 0.15em;
	}
}

@media (max-width: 767px) {
	.acrc-projects__grid {
		grid-template-columns: 1fr;
	}
}

.acrc-projects__card {
	background: #fff;
	box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.acrc-projects__card[hidden] {
	display: none !important;
}

.acrc-projects__card-media img,
.acrc-projects__card-placeholder {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.acrc-projects__card-placeholder {
	background: #FFD600;
}

.acrc-projects__card-body {
	padding: 1.15rem 1.2rem 1.35rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.acrc-projects__card-title {
	margin: 0 0 0.55rem;
	font-family: "Din2014-Medium", "Din2014", sans-serif;
	font-size: 22px;
	line-height: 1.25;
}

.acrc-projects__card-title a {
	color: #17213B !important;
	text-decoration: none;
}

.acrc-projects__card-title a:hover {
	opacity: 0.8;
}

.acrc-projects__card-excerpt {
	margin: 0 0 1rem;
	font-size: 16px !important;
	line-height: 1.45;
	color: #17213B;
	flex: 1;
}

.acrc-projects__pills {
	list-style: none !important;
	margin: 0 0 1.1rem 0 !important;
	padding: 0 !important;
	padding-left: 0 !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

body.et_divi_theme .entry-content .acrc-projects__pill,
body.et_divi_theme .et-l--body .acrc-projects__pill,
.acrc-projects__pill {
	display: inline-block;
	list-style: none !important;
	margin: 0 !important;
	padding: 0.28em 0.65em !important;
	font-size: 13px !important;
	font-family: "Din2014", sans-serif !important;
	line-height: 1.3 !important;
	background: #E6E8EC !important;
	color: #17213B !important;
	border-radius: 2px;
}

.acrc-projects__pill::before,
.acrc-projects__pill::after {
	content: none !important;
	display: none !important;
	margin: 0 !important;
}

.acrc-projects__pill--status {
	background: #D5D8DE;
	color: #17213B;
}

.acrc-projects__read-more {
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	padding: 0.55em 1.1em;
	background: #17213B;
	color: #fff !important;
	font-family: "Din2014-Medium", "Din2014", sans-serif;
	font-size: 15px;
	text-decoration: none !important;
}

.acrc-projects__read-more:hover {
	opacity: 0.88;
	color: #fff !important;
}

.acrc-projects__none,
.acrc-projects__empty {
	font-size: 18px;
}

/*
 * Yellow Projects hero — match /news: large tilted square that sits
 * behind the nav. Header is transparent; hero pulls up under it so one
 * continuous yellow plane carries the shape (like news-header.png).
 */
body.acrc-page-projects .et-l--header {
	position: relative;
	z-index: 10;
	margin-bottom: 0 !important;
}

body.acrc-page-projects .et-l--header .et_pb_section,
body.acrc-page-projects .et_pb_section_0_tb_header {
	background-color: transparent !important;
	background-image: none !important;
	margin-bottom: 0 !important;
}

.acrc-projects-hero.et_pb_section,
.et_pb_section.acrc-projects-hero,
body.acrc-page-projects .acrc-projects-hero {
	background-color: #FFD600 !important;
	position: relative;
	overflow: visible !important;
	/* Sit under the TB header (~153px) so the square can pass behind the nav */
	margin-top: -153px !important;
	padding-top: 200px !important;
	padding-bottom: 100px !important; /* room for downward point divider */
}

.acrc-projects-hero .et_pb_text_inner,
.acrc-projects-hero h2,
.acrc-projects-hero p {
	color: #17213B !important;
	font-family: "Din2014", sans-serif;
}

/* Match /research and other landing page titles */
body.acrc-page-projects .acrc-projects-hero h1,
.acrc-projects-hero h1 {
	color: #17213B !important;
	font-family: "Bebas Neue", display !important;
	font-size: 80px !important;
	font-weight: 500 !important;
	line-height: 95px !important;
	text-transform: uppercase !important;
}

/*
 * Downward point like /research (Divi bottom divider):
 * white chevron overlay so yellow appears to point into the content below.
 */
.acrc-projects-hero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNGRkZGRkYiPjxwYXRoIGQ9Ik02NDAgMTM5TDAgMHYxNDBoMTI4MFYwTDY0MCAxMzl6Ii8+PC9nPjwvc3ZnPg==");
	background-size: 100% 100px;
	background-repeat: no-repeat;
	background-position: bottom center;
	pointer-events: none;
	z-index: 3;
}

.acrc-projects-hero::after {
	content: "";
	position: absolute;
	right: -10vw;
	/* Large diamond whose left tip sits under the nav, matching /news */
	top: -200px;
	width: min(58vw, 640px);
	height: min(58vw, 640px);
	border: 72px solid #fff;
	transform: rotate(45deg);
	pointer-events: none;
	z-index: 1;
}

.acrc-projects-hero .et_pb_row {
	position: relative;
	z-index: 2;
}

/*
 * Pull filters/content up so they sit over the white tip of the
 * yellow chevron (same idea as content meeting the /research point).
 */
body.acrc-page-projects .acrc-projects-hero + .et_pb_section {
	margin-top: -70px !important;
	padding-top: 0 !important;
	position: relative;
	z-index: 4;
	background-color: transparent !important;
}

body.acrc-page-projects .acrc-projects-hero + .et_pb_section .et_pb_row {
	position: relative;
	z-index: 5;
	padding-top: 0 !important;
}

@media (max-width: 980px) {
	body.acrc-page-projects .acrc-projects-hero {
		margin-top: -120px !important;
		padding-top: 160px !important;
	}

	.acrc-projects-hero::after {
		width: min(55vw, 360px);
		height: min(55vw, 360px);
		border-width: 48px;
		top: -20px;
		right: -8vw;
	}
}

@media (max-width: 767px) {
	body.acrc-page-projects .acrc-projects-hero {
		margin-top: -90px !important;
		padding-top: 130px !important;
	}

	.acrc-projects-hero::after {
		width: 200px;
		height: 200px;
		border-width: 28px;
		top: 10px;
		right: -40px;
	}
}
