/*
Theme Name: sjiph
Version: 0.0.1
Requires PHP: 7.4
*/

/* CSS Reset --------------------------------------------------------------- */

/* [1] tl;dr; All elements inherit some properties from their parent (recursive step) */
* {
	font-weight: normal;
	font-family: inherit;
	color: inherit;
	background: inherit;
	box-sizing: inherit;
}

/* [2] tl;dr; Provide inheritable defaults (base case) */
html {
	box-sizing: border-box;
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	color: var(--wp--preset--color--black);
	background: transparent;
	line-height: 1.5;
	/* provide defaults for properties in [1] */
}

strong, b {
	font-weight: bold;
}

dfn, cite, em, i {
	font-style: italic;
}

/* Custom CSS -------------------------------------------------------------- */

/**
 * WP adds an !important margin to move content down for the admin bar
 * Not only does this undo that, it also is kinda part of the CSS reset above.
 * Gray area haha
 */
html {
	margin: 0 !important;
}

/**
 * Admin Bar Fixes
 */

#wpadminbar {
	position: sticky !important;
}

/**
 * Page-specific margin reset
 * This is done to preserve margins from Gutenberg in post content
 */

body, main, header, footer,
body > header *,
footer > footer * {
	margin: 0;
	padding: 0;
}

/**
 * Core Page Structure
 */

body {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	min-height: 100vh;
}

main {
	flex-grow: 1;
	display: flex;
	flex-flow: column nowrap;
	align-items: center !important;
	width: 100vw;
	
	padding: 0 20px;
	position: relative;
	width: 100vw;
	align-items: center !important;
}

body:not(.single) main {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

/* Gutenberg Group block max width of 768px */
main section {
	max-width: 768px;
	width: 100%;
}

header#masthead {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	background: var(--wp--preset--color--primary-blue);
	color: var(--wp--preset--color--white);
}

/**
 * Footer
 */

footer {
	background: var(--wp--preset--color--dark-gray);
	width: 100%;
	color: var(--wp--preset--color--white);
	padding: 10px;
	box-sizing: border-box;
}

footer .copyright {
	width: 100%;
	display: block;
	text-align: center;
}

/**
 * Header Nav Bar
 */

header#masthead nav#sitenav {
	z-index: 1000;
	padding: 15px;
	box-sizing: border-box;
	height: 125px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	border-bottom: 1px solid var(--wp--preset--color--gray);
}

/**
 * Header Nav Bar - Logo
 */

header#masthead nav#sitenav figure#branding {
	height: 100%;
	max-width: 50%;
	padding-right: 15px;
	box-sizing: border-box;
}

header#masthead nav#sitenav figure#branding img {
	height: 100%;
	width: 100%;
}

/**
 * Header Nav Bar - Navigation
 */

header#masthead nav#sitenav ul {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	list-style: none;
}

header#masthead nav#sitenav ul li a {
	display: block;
	height: 100%;
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	text-decoration: none;
	color: var(--wp--preset--color--gray);
	background: var(--wp--prset--color--white);
}

/* TODO: highlight the parent page*/
header#masthead nav#sitenav ul li.current-menu-item > a {
	color: var(--wp--preset--color--primary-blue);
}

header#masthead nav#sitenav ul li > a:hover {
	background: var(--wp--preset--color--primary-blue);
}

header#masthead nav#sitenav ul li > a:hover {
	color: var(--wp--preset--color--white);
}

/* Submenus */
header#masthead nav#sitenav ul ul {
	flex-flow: column nowrap;
	align-items: flex-start;
	display: none;
	position: absolute;
}

header#masthead nav#sitenav ul ul li {
	width: 100%;
}

header#masthead nav#sitenav ul li:hover > ul {
	display: flex;
}

header#masthead .mobile-menu-button {
	display: none;
}

@media (max-width: 768px) {
	body.mobile-menu-open {
		overflow: hidden;
		max-height: 100vh;
	}

	header#masthead .mobile-menu-button {
		cursor: pointer;
		display: flex;
		height: 44px;
		width: 33px;
		z-index: 10001;
		background-color: var(--wp--preset--color--black);
		--mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 44px; height: 44px" fill="black"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>');
		mask-image: var(--mask-image);
		-webkit-mask-image: var(--mask-image);
		mask-repeat: no-repeat;
		-webkit-mask-repeat: no-repeat;
		transition: all 0.5s;
	}

	body.mobile-menu-open header#masthead .mobile-menu-button {
		--mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="black"><path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"/></svg>');
	}

	header#masthead .mobile-menu-button:hover {
		background: var(--wp--preset--color--gray);
	}

	header#masthead .mobile-menu-button:active {
		background: var(--wp--preset--color--dark-gray);
	}

	body.mobile-menu-open header#masthead .mobile-menu-button {

	}

	body:not(.mobile-menu-open) header#masthead nav#sitenav > ul {
		display: none;
	}


	body.mobile-menu-open header#masthead nav#sitenav li {
		width: 100%;
		display: flex;
		flex-flow: column nowrap;
	}

	body.mobile-menu-open header#masthead nav#sitenav li a {
		font-size: 2rem;
		text-align: center;
	}

	body.mobile-menu-open header#masthead nav#sitenav li ul a {
		font-size: 1rem;
	}

	body.mobile-menu-open header#masthead nav#sitenav ul {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	body.mobile-menu-open header#masthead nav#sitenav ul ul {
		position: unset;
	}

	body.mobile-menu-open header#masthead nav#sitenav > ul {
		position: absolute;
		height: 100vh;
		width: 100vw;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10000;
	}
}

/* TODO: */

/**
 * Header Splash
 */

header#masthead .header-splash {
	width: 100%;
}

header#masthead .header-splash img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-height: 500px;
}


/* TODO: splash image/slider max height & letterboxing */

/**
 * Header Title Area
 */

header#masthead .title-area {
	padding: 65px 15px;
	text-align: center;
	align-self: center;
	max-width: 768px;
	width: 100%;
}

header#masthead .title-area .header-title {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 42px;
}

header#masthead .title-area .header-title:not(:last-child) {
	margin-bottom: 0.5rem;
}

/**
 * Staff Plural
 */

article.staff.plural:not(:last-child) {
	margin-bottom: 20px;
}

article.staff.plural details.staff__biography summary {
	font-size: 1.5em;
	cursor: pointer;
	margin-top: 10px;
	box-sizing: border-box;
	display: block;
	list-style-type: none;
	user-select: none;
}

article.staff.plural details.staff__biography summary::before {
	content: '+\00A0\00A0';
	fill: var(--wp--preset--color--black);
	display: inline-block;
	width: 20px;
}


article.staff.plural details[open].staff__biography summary::before {
	content: '-\00A0\00A0';
}

article.staff.plural details.staff__biography section.post-content {
	margin-bottom: 20px;
}

article.staff.plural .staff__info-container {
	display: flex;
	flex-flow: row wrap;
}

article.staff.plural .staff__headshot-container {
	width: 250px;
	height: 250px;
	background: var(--wp--preset--color--gray);
	border-radius: 10px;
}

article.staff.plural .staff__headshot-container img {
	height: 250px;
	width: 250px;
	object-fit: cover;
	border-radius: 10px;
}

article.staff.plural .staff__info {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
}

article.staff.plural .staff__info .post-title {
	margin-top: 0;
	text-transform: uppercase;
	font-weight: bold;
}

article.staff.plural .staff__info__job_title {
	font-style: italic;
}

article.staff.plural .staff__info__employer {
	font-weight: 600;
}

@media (min-width: 768px) {
	article.staff.plural .staff__headshot-container {
		margin-right: 20px;
	}

	article.staff.plural .staff__info-container {
		flex-wrap: nowrap;
	}
}

h2.staff-type {
	text-transform: uppercase;
	font-size: 2rem;
	font-weight: 600;
	font-style: italic;
}

h2.staff-type:not(:first-of-type) {
	margin-top: 40px;
}

p.staff-type-description {
	margin-bottom: 2rem;
	margin-top: 1.5rem;
}

/**
 * Projects Singular
 */

article.project.single .post-content {
	display: flex;
	flex-flow: row nowrap;
	margin-bottom: 20px;
}

article.project.single h3.section-title {
	margin-bottom: 15px;
	font-size: 1.5rem;
	line-height: 1em;
}

article.project.single h3.section-title:not(:first-of-type) {
	margin-top: 30px;
}

article.project.single .entry-title {
	font-size: 2rem;
	margin-top: 50px;
}

article.project.single .entry-meta {
	flex-grow: 1;
	min-width: 200px;
	margin-left: 50px;
}

@media (max-width: 768px) {
	article.project.single .post-content {
		flex-flow: column nowrap;
	}

	article.project.single .entry-content {
		margin-bottom: 40px;
	}

	article.project.single .entry-meta {
		margin-left: 0;
	}
}

article.project.single .entry-meta .meta-field h3 {
	font-size: 1.25rem;
}

article.project.single .entry-meta .meta-field span {
	line-height: 1.25;
	display: block;
	line-break: anywhere;
}

article.project.single .entry-meta .meta-field:not(:last-child) {
	margin-bottom: 20px;
}

/**
 * Projects (plural)
 */

main article.project.plural {
	display: flex;
	flex-flow: column nowrap;
	color: var(--wp--preset--color--black);
	padding: 20px 10px;
	box-sizing: border-box;
}

main article.project.plural:nth-child(odd) {
	background: var(--wp--preset--color--light-gray);
}

/**
 * Shared: Projects Archive Header & Projects (plural)
 */

main article.project.plural > * {
	width: calc(100%);
	padding: 5px;
	box-sizing: border-box;
	margin: 0;
}

main article.project.plural .project-title {
	margin-bottom: 15px;
}

/**
 * Projects Archive Filter
 */

.filter-projects-control {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	margin: 0 0 20px;
}

.filter-projects-control.hidden {
	display: none;
}

.filter-projects-control input[type=submit] {
	display: block;
	width: fit-content;
	appearance: none;
	border: none;
	background: var(--wp--preset--color--light-gray);
	color: var(--wp--preset--color--black);
	border-radius: 11px;
	cursor: pointer;
	padding: 5px 20px;
	margin: 20px 0;
	margin-top: 10px;
}

.filter-projects-control input[name=s] {
	box-sizing: border-box;
	padding: 1rem 0.5rem;
	flex-grow: 1;
	height: 100%;
	border: none;
	background: transparent !important;
}

.filter-projects-control .full-text-search-wrapper {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	background: var(--wp--preset--color--light-gray);
	color: var(--wp--preset--color--black);
	width: 100%;
	margin: 0 0 15px;
	padding: 0 20px;
}

.filter-projects-control .full-text-search-wrapper label {
	flex: 0 0 auto;
}

.filter-projects-control .filter-projects-control-inner {
	display: flex;
	width: 100%;
	justify-content: space-between;
	flex-flow: row wrap;
}

.filter-projects-control .terms-dropdown .terms-dropdown__termswrapper {
	overflow: scroll;
}

.filter-projects-control .terms-dropdown .terms-dropdown-row {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.filter-projects-control .terms-dropdown .terms-dropdown-row input {
	appearance: none;
	height: 1rem;
	width: 1rem;
	border: 2px solid var(--wp--preset--color--black);
	cursor: pointer;
	margin: 0 5px 0 0;
	outline: none;
}

.filter-projects-control .terms-dropdown .terms-dropdown-row input:checked {
	background: var(--wp--preset--color--black);
}

.filter-projects-control .terms-dropdown h3 {
	font-size: 1.25rem;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}

.filter-projects-control .terms-dropdown-row {
	padding: 10px;
	cursor: pointer;
}

.filter-projects-control .terms-dropdown.closed {
	height: 40px;
}

.filter-projects-control .terms-dropdown.closed .terms-dropdown-row {
	display: none;
}

.filter-projects-switcher {
	text-align: right;
	cursor: pointer;
	margin-bottom: 10px;
}

/**
 * Terms Dropdown control (used in project archive)
 */

.terms-dropdown {
	display: flex;
	flex-flow: column nowrap;
	min-width: 200px;
	max-height: 300px;
	margin-bottom: 20px;
	border: 1px solid var(--wp--preset--color--light-gray);
}

.terms-dropdown .terms-dropdown-header-row {
	height: 40px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	cursor: pointer;
	padding: 10px;
	box-sizing: border-box;
	background: var(--wp--preset--color--light-gray);
	color: var(--wp--preset--color--black);
}

.terms-dropdown .terms-dropdown-header-row svg {
	display: block;
	height: 1rem;
	transform: rotate(0deg);
	transition: 0.25s transform;
	margin-right: 5px;
}

.terms-dropdown:not(.closed) .terms-dropdown-header-row svg {
	transform: rotate(180deg);
}

/**
 * Projects Archive Filter: NJ Map
 */

@media (min-width: 1024px) {
	.nj-map {
		height: 550px;
	}
}

.nj-map .county {
	cursor: pointer;
	fill: var(--wp--preset--color--primary-purple);
	stroke: var(--wp--preset--color--white);
	stroke-width: 6;
}

.nj-map .county-name-text {
	fill: var(--wp--preset--color--white);
}

.nj-map .county.selected,
.nj-map .county:hover {
	fill: var(--wp--preset--color--primary-green);
}

.nj-map .county-name-text {
	pointer-events: none;
}

/**
 * Archive Navigation
 */

ul.archive-navigation {
	list-style: none;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	user-select: none;
	padding: 0;
}

ul.archive-navigation li {
	display: block;
	padding: 10px;
	box-sizing: border-box;
}

ul.archive-navigation li.active {
	color: var(--wp--preset--color--primary-blue);
	font-weight: bold;
}

ul.archive-navigation li.active a {
	font-weight: bold;
	pointer-events: none;
}

ul.archive-navigation li.active:has(a.arrow-button) {
	color: var(--wp--preset--color--light-gray);
}

ul.archive-navigation li a {
	width: 100%;
	height: 100%;
	display: block;
	font-size: 1.5em;
	text-decoration: none;
	line-height: 100%;
}

ul.archive-navigation li a svg {
	width: 100%;
	height: 2rem;
	display: block;
}


/**
 * WordPress Align-Full
 */

.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

.alignwide {
	margin-left: calc(50% - calc(75vw / 2));
	margin-right: calc(50% - calc(75vw / 2));
	width: 75vw;
}

.alignwide,
.alignfull {
	max-width: 100vw;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}

.alignwide > *,
.alignfull > * {
	max-width: 768px !important;
	width: 100%;
}

@media (max-width: 768px) {
	.alignwide {
		margin-left: 0;
		margin-right: 0;
		max-width: 768px;
		width: 768px;
	}
}

/**
 * Editor styles fixes
 */

.wp-block-embed iframe {
	width: 100%;
}

.wp-block-details {
	margin: 10px 0;
}

.wp-block-details summary {
	font-size: 1.5rem;
}

.wp-block-details p {
	font-size: 1.25rem;
	font-style: italic;
}


/**
 * WuFoo Forms
 */

.wufoo-form {
	display: flex;
	padding: 20px;
	flex-flow: column nowrap;
	box-sizing: border-box;
	align-items: center;
}

.wufoo-form input {
	border: 1px solid var(--wp--preset--color--black);
	color: var(--wp--preset--color--black);
	background: var(--wp--preset--color--white);
	padding: 10px 15px;
	box-sizing: border-box;
	border-radius: 3px;
}

.wufoo-form input[type=submit] {
	cursor: pointer;
}

.wufoo-form.mailing-list {
	flex-flow: row wrap;
	justify-content: center;
}

.wufoo-form.mailing-list input[type=email] {
	margin-right: 10px;
}