/*
		Theme Name: Page UNT
		Text Domain: page-unt
		Version: 2.2.3
		(major.minor.patch)
		Description: A theme made for UNT
		Tags: college, education, responsive
		Author: Julia Arrington
		Author URI: www.page-thinks.com
		*/

:root {
	--unt-green: #276436;
	--unt-green-dark: #005326;
	--unt-yellow: #bbd236;
	--unt-gray-dark: #333333;
	--unt-gray-medium: #595959;
	--unt-gray-light: #efefef;
}

body{
	/*background-image: url("https://www.pagethink-pi.com/juliaSandbox/UNT_assets/bg-30.png");*/
	background-size: 400px;
}

/* default wordpress style*/
@media screen {
	html {
		margin-top: 0px !important;
	}
}

h2 {
	margin-top: 5rem;
	color: #007A33;
	scroll-margin-top: 190px;
}

.container {
	max-width: 1041px;
	margin: 0 auto;
	padding: 0 40px;
	background-color: white;
	padding-top: 1px;

	h1,
	h2 {
		text-align: center;
	}
}

header {
	position: sticky;
	top: 0;
	z-index: 1000;
}

.header-distro {
	background-color: white;
}

#masthead {
	background-color: var(--unt-gray-light);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-left: 20px;

	div {
		max-width: 594px;
	}

	h1 {
		font-size: 20px;
	}

	h2 {
		font-size: 30px;
		text-align: left;
		margin-top: 1rem;
	}
}

.masthead{
	height: 50vh;
  object-fit: cover;
  width: 100%;
  max-width: unset;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
	cursor: pointer;
	padding: 18px;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
	transition: 0.4s;
	background-color: white;
	padding: 0;
	border-top: solid 1px black;

	h3::after {
		content: '\F4FA';
		/* Unicode character for plus sign */
		color: var(--unt-green);
		font-weight: bold;
		float: right;
		margin-left: 5px;
		font-family: "bootstrap-icons";
	}

	&.active h3::after {
		content: '\F2E6';
		/* Unicode character for minus sign */
		color: var(--unt-green);
		font-weight: bold;
		float: right;
		margin-left: 5px;
		font-family: "bootstrap-icons";
	}
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion:hover {
	background-color: var(--unt-gray-light);
}

/* Style the accordion panel. Note: hidden by default */
.panel {
	padding: 0 18px;
	background-color: white;
	display: none;
	overflow: hidden;
}

button {
	h3 {
		font-size: 25px;
	}
}

hr {
	height: 2px;
	border-top-width: 1px;
	background-color: black;
}

.shadow {
	box-shadow: rgba(0, 0, 0, 0.15) 9px 9px 11px 3px;
	/* height: 100%; */
	background-color: #E9F0EB;

	h3 {
		background-color: var(--unt-green-dark);
		color: white;
		text-align: center;
		font-size: 25px;
		padding: 12px 0;
	}

	p {
		padding: 0 25px;
		margin: 10px 0;
	}

	
}

.shadow p{
  font-family:Source Sans Pro,Roboto,Helvetica,sans-serif;
  font-size:18px
}
@media(min-width:900px) {
  .shadow p{
    font-size:calc(.33333vw + 13px)
  }
}
@media(min-width:1200px) {
  .shadow p{
    font-size:calc(.41667vw + 12px)
  }
}
@media(min-width:1440px) {
  .shadow p{
    font-size:calc(.55556vw + 10px)
  }
}
@media(min-width:1800px) {
  .shadow p{
    font-size:20px
  }
}

.post {
	h1 {
		margin-top: 2rem;
	}

	img {
		max-height: 50vh;
		object-fit: cover;
		width: auto;
		height: auto;
		margin: 0 auto;
		margin-bottom: 24px;
		;
	}
}

.posts {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
}

.blog-card {
	width: calc(100% / 3);
	padding: 0 15px;

	&:first-child {
		padding-left: 0;
	}

	&:last-child {
		padding-right: 0;
	}

	img {
		height: 169px;
		object-fit: cover;
		width: 100%;
	}

	a {
		text-decoration: none;
	}
}
.q-card {
	width: calc(100% / 3);
	padding: 0 15px;
	margin: 15px 0;

	&.first {
		padding-left: 0;
	}

	&.last {
		padding-right: 0;
	}

	img {
		height: 169px;
		object-fit: cover;
		width: 100%;
	}

	a {
		text-decoration: none;
	}
	p a{
		text-decoration: underline;
	}
	.panel{
		/* display: block; */
  		position: absolute;
  		top: 15px;
		z-index: 4;
		left: 0;
		height: 100%;
    	overflow: scroll;
	}
}
#about{
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
.question{
	color: white;
	background-color: var(--unt-green);
  	width: 100%;
  	height: 150px;
	background-size: cover;
}
@media (max-width: 690px) {
	.q-card, .blog-card {
		width: 100%;
		padding: 0;
		&.first{
			padding-left: unset;
		}
		&.last{
			padding-right: unset;
		}
	}
	#about, .posts {
	display: grid;
	position: relative;
	grid-template-columns: auto auto;
	column-gap: 30px;
	}	
}
@media (max-width: 467px) {
	#about, .posts {
	display: block;
	position: relative;
	}	
	#featPost{
		width: 100% !important;
	}
}
#answer-modal{
	position: absolute;
  background-color: white;
  border: 1px solid black;
  height: 100%;
  width: 100%;
  bottom: 0;
  z-index: 3;
  display: none;
}
iframe {
	margin: 0 auto;
}

/* The Modal (background) */
.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 1;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	/* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 100%;
	margin-top: 231px;
	overflow: scroll;

	img {
		max-width: unset;
		width: unset;
	}
}

/* The Close Button */
.close, #close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus,
#close:hover,
#close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
#survey{
	background-color: #E9F0EB;
}
#phases{
	display: flex;
	h3{
		margin: 0;
		padding: 12px 17px;
		color: white;
	}
	.accordion{
		border-top: none;
		h3::after {
		content: '\2B9D';
		/*arrow up*/
		color: white;
		}
		&.active h3::after {
		content: '\2B9F';
		/*arrow down*/
		color: white;
		}
	}
}
@media(max-width: 768px){
	#phases{
		flex-direction: column;
		.phase{
			width: 100%;
			padding: 0;
		}
	}
	.featured-post a{
		display: flex !important;
		flex-direction: column;
	}
}
#mobile-menu-toggle{
	display: none;;
}
.featured-post a{
	display: grid;
	grid-template-columns: auto auto;
}
#featPost{
	width:40vw;
	height:auto;
	object-fit:cover;
}
.button-link{
	background-color: var(--unt-green);
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	display: inline-block;
	margin-bottom: 10px;
	&:hover{
		background-color: var(--unt-green-dark);
		color: white;
	}
}