/* Root variables
--------------------------------------------- */

:root {
	/* Brand colors */
	--cuny-orange: #F58C52;
	--cuny-green: #79BC6E;
	--cuny-green-dark: #45833B;
	--cuny-blue: #6FBCE9;

	/* Site colors */
	--true-black: #000;
	--black: #222;
	--dark-grey: #737373;
	--ally-grey: #8B8B8B;
	--deep-blue: #367BA3;
	--med-dark-grey: #cecece;
	--med-grey: #EDEDED;
	--lt-grey: #F5F5F5;
	--xlt-grey: #FAFAFA;
	--off-white: #FEF6E7;
	--lt-brown: #F9E2B9;
	--navbar-thumb-color: #bebebe;
	--navbar-track-color: #e8e8e8;
	--message-error-bgcolor: #FCEAE6;
	--message-updated-bgcolor: #FEF6E7;
	--message-error-border-color: #EEC8BE;
	--message-updated-border-color: #F9E2B9;

	/* Fonts */
	--sans-serif: Poppins, Arial, sans-serif;
	--serif: Merriweather, Georgia, 'Times New Roman', serif;

	--size-h1: 32px;
	--size-h2: 30px;
	--size-h3: 26px;
	--size-h4: 24px;
	--size-h5: 20px;
	--size-h6: 16px;
	--size-large-text: 16px;
	--size-text: 14px;
	--size-small-text: 12px;

	--size-h1-desktop: 50px;
	--size-h2-desktop: 45px;
	--size-h3-desktop: 32px;
	--size-h4-desktop: 26px;
	--size-h5-desktop: 23px;
	--size-large-text-desktop: 18px;
	--size-text-desktop: 16px;
	--size-small-text-desktop: 15px;
	--size-tiny-text-desktop: 14px;

	/* Width and vertical spacing */

	/* this value is also used in the cac-bp-admin-bar-mods plugin */
	--container-width: 1316px;

	--container-width-constrained: 995px;
	--content-width-wide: 891px;
	--content-width: 582px;
	--spacing-large: 66px;
	--spacing-med: 45px;
	--spacing-small: 28px;
	--spacing-x-small: 14px;
}

/* Layout
--------------------------------------------- */

body {
	margin: 0;
}

body.admin-bar {
	margin-top: 45px;
}

.entry > .wp-block-group > .wp-block-group__inner-container,
.entry > .wp-block-cover {
	margin-left: 20px;
	margin-right: 20px;
}

.cac-container {
	margin: 0 20px;
}

@media screen and (min-width: 600px) {
	.entry > .wp-block-group > .wp-block-group__inner-container,
	.entry > .wp-block-cover,
	.cac-container {
		max-width: var(--container-width);
		margin-left: auto; /* Allow non-centering margins to specified elsewhere. */
		margin-right: auto;
		padding: 0 var(--spacing-small);
	}

	.cac-container {
		margin: 0 auto;
	}

	.entry > .block-group-constrained > .wp-block-group__inner-container {
		max-width: var(--container-width-constrained);
	}
}

/* Header
--------------------------------------------- */
.cac-top {
	display: flex;
	justify-content: space-between;
	padding: 19px 0 16px;
}

.cac-site-title {
	flex: 0 0 240px;
}

.cac-site-title a {
	display: block;
}

.cac-site-title .cac-logo {
	max-width: 100%;
	height: auto;
}

@media screen and (min-width: 860px) {
	.cac-top {
		padding-top: var(--spacing-small);
	}

	.cac-site-title {
		flex: 0 1 410px;
		width: 411px;
		height: 56px;
	}
}

/* Navigation
--------------------------------------------- */
.main-navigation {
	font-family: var(--sans-serif);
}

.main-navigation.main-navigation-desktop {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.main-navigation.main-navigation-desktop ul {
	display: none;
}

.main-navigation.main-navigation-mobile {
	display: none;
}

.main-navigation a,
.main-navigation a:visited,
.main-navigation a:link {
	color: var(--black);
}

.main-navigation a:hover {
	text-decoration: underline;
}

.main-navigation #cac-main-nav > .menu-item > a:hover {
	text-decoration: none;
}

.main-navigation .current-menu-item {
	position: relative;
}

#cac-main-nav > .menu-item:hover:after,
.main-navigation .current-menu-item:after {
	content: '';
	display: block;
	background: var(--cuny-blue);
	height: 2px;
	width: calc(100% - 60px);
	position: absolute;
	bottom: 12px;
}

.main-navigation ul {
	font-size: var(--size-text);
	font-weight: 700;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul li {
	line-height: 56px;
}

.main-navigation-mobile ul li {
	border-top: 1px solid #CECECE;
	padding: 0 30px;
}

.main-navigation ul ul {
	background: #fff;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

button.nav-search {
	background: none;
	border: none;
	display: none;
}

.search-mobile {
	border-top: 1px solid #CECECE;
	border-bottom: 1px solid #CECECE;
	padding: 22px 30px;
}

.main-nav-search {
	display: none;
}

.search-input {
	display: flex;
	flex: 1;
	position: relative;
}

.search-input input.search-input-text {
	border: 1px solid #cecece;
	border-right: none;
	border-radius: 0;
	font-size: var(--size-text);
	margin-bottom: 0;
	padding: 0px 5px 0px 20px;
	outline: none;
	height: 50px;
	line-height: 50px;
	width: 100%;
}

.search-input input.search-input-text:focus,
.search-input input.search-input-text:focus + button {
	border-color: var(--cuny-blue);
}

.search-input .search-submit {
	background: #fff;
	width: 40px;
	border: 1px solid #cecece;
	border-left: 0;
	border-radius: 0;
	cursor: pointer;
	padding: 0 16px 0 0;
}

.search-input .search-submit img {
	height: 20px;
	width: 20px;
}

@media screen and (min-width: 600px) {
	.main-navigation ul {
		font-size: var(--size-text-desktop);
	}

	button.nav-search {
		cursor: pointer;
	}

	button.nav-search:hover {
		background: none;
		border: none;
	}

	.main-navigation-mobile .main-nav-search {
		display: flex;
		margin-top: 16px;
	}

	.cac-top.open-search .main-nav-search {
		display: block;
		flex: 1 1 100%;
		margin-left: 50px;
		padding: 0;
	}

	.main-nav-search form {
		align-items: center;
		display: flex;
		gap: 16px;
		height: 100%;
	}

	#cac-main-nav > .menu-item:hover:after,
	.main-navigation .current-menu-item:after {
		width: 100%;
	}

	.main-navigation-mobile .main-nav-search form {
		flex: 1;
	}

	.cac-top.open-search .main-navigation-desktop {
		display: none;
	}

	input.search-input-text {
		font-size: var(--size-text);
	}

	.main-nav-search input[type="submit"] {
		line-height: 24px;
		padding: 0 8px;
	}

	.search-input input.search-input-text {
		padding-left: 12px;
	}

	.search-input .search-submit {
		padding: 0;
	}
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled {
	display: block;
}

button.menu-toggle {
	background: url( '../img/nav-icon.png' ) no-repeat top center;
	border: none;
	height: 20px;
	width: 20px;
}

button.menu-toggle[aria-expanded="true"] {
	background: url( '../img/icon-close.png' ) no-repeat top center;
}

@media screen and (min-width: 1056px) {
	.menu-toggle {
		display: none;
	}

	.main-navigation.main-navigation-mobile {
		display: none;
	}

	.main-navigation.main-navigation-desktop {
		gap: 50px;
	}

	.main-navigation.main-navigation-desktop ul {
		display: flex;
	}

	.main-navigation ul {
		align-items: flex-end;
		display: flex;
		gap: 32px;
		height: 56px;
	}

	.main-navigation ul ul {
		border: 1px solid var(--xlt-grey);
		border-radius: 2px;
		box-shadow: none;
		flex-direction: column;
		gap: 14px;
		height: auto;
		padding-top: 12px;
	}

	.main-navigation ul ul li {
		line-height: 1.8em;
		padding-left: 12px;
		padding-bottom: 8px;
	}

	button.nav-search {
		display: inline-block;
	}
}