/*
Theme Name: SoP Theme
Theme URI: https://uwtheme.wordpress.wisc.edu/
Author: Eric Robinson, UW-Madison School of Pharmacy
Author URI: 
Description: This theme is a child theme of the UW-Theme created by UW-Madison to fit the needs of the School of Pharmacy.
Template: uw-theme
Version: 1.0
License:
License URI:
Text Domain: sop-theme
Tags: uwmadison
*/

:root {
	--primary_color: #c5050c;
	--header_background_color: #efefef;
}
.uw-global-bar.uw-global-bar-inverse{
	background-color: #282728;
	a.uw-global-name-link, a.uw-global-name-link:hover, a.uw-global-name-link:visited {
		color: #fff;
	}

}
.before-icon{
	&.menu-give a::before{
		content: '';
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 749" fill="rgb(100,101,105)"><path d="M624 204h-93l2-3a70 70 0 00-105-89l-64 54 26-72a70 70 0 00-122-64 70 70 0 00-8 64l26 72-64-54a70 70 0 00-105 89l2 3H26c-14 0-26 12-26 26v94c0 14 12 26 26 26v373c0 14 11 26 26 26h546c15 0 26-12 26-26V350c14 0 26-12 26-26v-94c0-14-11-26-26-26zm-5 115H399v-84h220v84zm-251-84v483h-85V235h85zm80-99c10-9 23-11 35-8s22 12 26 24c4 11 3 23-3 33s-16 17-27 18l-2 1H367l81-68zM293 47c8-10 19-16 32-16s24 6 32 16c7 11 9 24 4 36l-36 99-36-99c-5-12-3-25 4-36zM171 203a39 39 0 01-30-51c4-12 14-21 26-24 13-3 25 0 35 8l81 68H173l-2-1zM57 350h147c8 0 15-7 15-16 0-8-7-15-15-15H31v-84h221v483H57V350zm536 368H399V350h194v368z"/></svg>');
		background-repeat: no-repeat;
		display: inline-block;
		height: 16px;
		width: 16px;
		margin-right: .2em;
	}
}
.after-icon{
	&.menu-pharmacy-home a::after{
/*		content: "\f102";
		font-family: dashicons;
		font-size: 1.1em;
		vertical-align: bottom;
*/
		content: "";
		display: inline-block;
		background-image: url("/wp-content/themes/sop-theme/images/icon-home.png");
		background-repeat: no-repeat;
		background-size: cover;
		height: 14px;
		width: 14px;
		margin-left: .2em;
	}
}
.uw-header, .uw-header-container{
	background-color: var(--header_background_color);
}
@media print, screen and (min-width: 40em){
	.uw-header-container{
		.uw-header-crest-title{
			margin-bottom: -2.4em;
		}
	}
	.uw-header.uw-has-search .uw-header-search{
		width: 22.5%;
    }
}
    



#uw-top-menus.uw-horizontal.uw-is-visible{
	display: flex;
	flex-direction: column-reverse;

	.uw-cta-nav .uw-nav-menu.uw-nav-menu-reverse{
		background-color: var(--header_background_color);
		border: none;
		
		&>ul>li:last-child{
			padding-right: 0;
		}
		&>ul>li>a{
			margin-top: 0;
		}
	}
	.uw-nav-menu.uw-nav-menu-secondary.uw-nav-menu-secondary-reverse{
		background-color: #282728;
	}
	.proxy-icon{
		a{
			display: block;
			height: 18px;
			width: 18px;
			background-size: cover;
			text-indent: -9999px;
			overflow: hidden;
			margin-top: .55em;
		}
		&.menu-pharmacy-home a{
			background-image: url('/wp-content/themes/sop-theme/images/icon-pharmacy-home-solid.svg');
		}
		&.menu-directory a{
			background-image: url('/wp-content/themes/sop-theme/images/icon-directory.svg');
		}
		&.menu-calendar a{
			background-image: url('/wp-content/themes/sop-theme/images/icon-calendar.svg');
		}
		&.menu-login a{
			background-image: url('/wp-content/themes/sop-theme/images/icon-login.svg');
		}
	}
}
div.uw-cta-nav{
	height: 43.4px;
	background-color: var(--header_background_color);
}
#uw-cta-nav{
	justify-content: end;
}
#uw-top-menus .current_page_item a {
	border-bottom-color: #fff;
}
.faculty-list .faculty-member .faculty-image{
	max-width: 400px;
}
img.size-uw-headshot, .image-gallery .image-gallery-item .image-gallery-content-image img{
	aspect-ratio: 1;
	object-fit: cover;
	/*width: 100vw;*/
}
.image-gallery .image-gallery-item .image-gallery-content{
	padding: 0;
}
.image-gallery-content-text{
	display: none;
}

#publicationListContainer{
	scroll-margin-top: 120px;
}
ul#publicationListPaginator li{
	margin: 0;
	padding: 0;
}
ul#publicationListPaginator li span, ul#publicationListPaginator li a{
	display: inline-block;
	background-color: #f7f7f7;
	border: 1px solid #dedede;
	padding: .75rem 1rem 1rem;
	font-size: .875rem;
	line-height: 16px;
	height: 2.5rem;
}
ul#publicationListPaginator li a{
	color: #0479a8;
	text-decoration: none;
}
#publicationListContainer #btn_prev, #publicationListContainer #btn_next{
	font-size: 1rem;
}
.faculty-list .faculty-member .bio p{
	margin-top: 1.5rem;
}
.uw-pe.uw-pe-latest_posts .uw-posts-listing .uw-post{
	.uw-post-img img{
		max-width: 6rem;
	}
	.uw-post-text{
		display: flex;
		flex-direction: column-reverse;
		align-self: flex-start;
	}	
}

article.type-post.post-preview{
	/*margin: 0 0 2rem 0;*/
	
	img.attachment-post-thumbnail.wp-post-image{
		width: 100%;
		grid-area: 1/1/4/2;
		margin-top: 1.45rem;
	}
	.entry-header, .entry-content, .entry-footer{
		grid-column: 2;
	}
	.entry-header .entry-meta{
		padding-bottom: 1rem;
	}
}
@media screen and (min-width: 64em){
	article.type-post.post-preview{
		display: grid;
		grid-column-gap: 1em;
		grid-template: auto auto auto / 250px 1fr;
	}
}
#page.page-builder article.type-post.post-preview>header{
	margin-left: initial;
	display: initial;
	padding: 0;
}

.pagination li{
	background-color: initial;
	a{
		background-color: #f7f7f7;
		text-decoration: none;
		&.prev, &.next{
			background-color: initial;
		}
	}
}

/*
 * TinyMCE Custom Formats
 */
.red-text{
	color: var(--primary_color);
}

/*
 * My Calendar CSS
 */
.mc-main .mc-date-switcher select{
	background-origin: padding-box;
	padding-right: 3rem !important;
	width: initial;
}
 
/***********
 * CLASSES *
 ***********/

/*
 * Factoids
 *
 * class: factoids
 * affects: Text Block
 */
.factoids {
	.uw-text-block{
		font-size: 1.25rem;
		strong {font-size: 1.5em;}
	}
	&.white-background, &.lightest-gray-background, &.blue-gray-background{
		.uw-text-block strong{
			color: #c5050c;
		}
	}
}

/*
 * Small Image Gallery Thumbnails
 *
 * class: small-thumbnails
 * affects: Image Gallery
 */
.small-thumbnails{
	.image-gallery>.image-gallery-item{
		flex: 0 0 164px;
	}
}

/**************
 * SHORTCODES *
 **************/

/*
 * Main Site Events List
 *
 * shortcode: get_events_list
 */
/* Events shortcode styling */
.eventsListContainer{
	.eventsListDate{
		font-size: .9375rem;
		/*color: var(--primary_color);*/
	}
	.eventsListTitle{
		line-height: 1.2;
	}
	.eventsListTitle a{
		font-family: "Red Hat Display", sans-serif;
		font-weight: 630;
		font-size: 100%;
		text-decoration: none;
	}
	.eventsListTime{
		font-size: .9375rem;
		margin-top: .5em;
	}
}
/* Events horizontal styling */
.eventsListContainer.horizontal ul{
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-left: 0;
	
	li{
		display: flex;
		flex-direction: column;
		
		.eventsListDate{
			display: flex;
			flex-direction: row;
			gap: .5em;
			
			.eventsListDateStart{
				grid-column: 1;
			}
			.eventsListDateSeparator{
				grid-column: 2;
			}
			.eventsListDateEnd{
				grid-column: 3;
			}
			
			.eventsListDay, .eventsListDayEnd, .eventsListMonth, .eventsListMonthEnd, .eventsListYear, .eventsListYearEnd{
				display: none;
			}

		}
		
		img.separator{
			display: none;
		}
	}
}

/* Events vertical styling */
.eventsListContainer.vertical{
	ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
		margin-left: 0;
		
		li{
			display: flex;
			flex-direction: column;
			max-width: 370px;
			width: 100%;
			border: 1px solid darkgray;
			border-radius: 5px;
			padding: 2em;
			background-color: white;
		}
	}
	.eventsListTitle{
		font-size: 1.3em;
	}
	span.eventsListDate{
		margin: .5em 0;
		font-size: 3em;
		.eventsListMonth, .eventsListMonthEnd{
			font-size: .5em;
			margin-left: .5em;
		}
		.eventsListYear, .eventsListYearEnd{
			font-size: .4em;
			margin-left: .5em;
		}
		.eventsListDateSeparator{
			margin: 0 .1em;
		}
		
		.eventsListDateStart, .eventsListDateEnd{
			display: none;
		}
	}
	img.separator{
		width: 64px;
		margin: 16px 0 32px 0;
	}
}
.one-column .eventsListContainer.vertical ul{
	gap: 21px;
}
.equal-column .eventsListContainer.vertical ul li{
	max-width: 270px;
}


/*
 * Main Site News List
 *
 * shortcode: get_news_list
 */
/* News shortcode styling */
.newsListContainer .newsListDate{
	font-size: .9375rem;
}
.newsListContainer .newsListTitle{
	line-height: 1.2;
}
.newsListContainer .newsListTitle a{
	font-family: "Red Hat Display", sans-serif;
	font-weight: 630;
	font-size: 100%;
	text-decoration: none;
}
/* News horizontal styling */
.newsListContainer.horizontal ul{
	display: flex;
	flex-direction: column;
	margin-left: 0;
}
.newsListContainer.horizontal .newsListImage{
	grid-area: 1 / 1 / 4/ 2;
}
.one-column, .wide-column{
	.newsListContainer.horizontal ul li{
		display: grid;
		grid-template: auto auto 1fr / 12rem auto;
		grid-column-gap: 1rem;
		margin-bottom: 1.6rem;
	}
	.newsListContainer.horizontal .newsListImage img{
		aspect-ratio: 16 / 9;
		object-fit: cover;
		width: 100%;
	}
}
.equal-column, .narrow-column, .three-column{
	.newsListContainer.horizontal ul li{
		display: grid;
		grid-template: auto auto 1fr / 6rem auto;
		grid-column-gap: 1rem;
		margin-bottom: 1.6rem;
	}
	.newsListContainer.horizontal .newsListImage img{
		aspect-ratio: 1;
		object-fit: cover;
	}
}
/* News vertical styling */
.newsListContainer.vertical ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	margin-left: 0;
}
.newsListContainer.vertical .newsListImage img{
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.one-column .newsListContainer.vertical ul{
	gap: 21px;
}
.newsListContainer.vertical ul li{
	display: flex;
	flex-direction: column;
	max-width: 370px;
}
.equal-column .newsListContainer.vertical ul li{
	max-width: 270px;
}
.newsListContainer.vertical span.newsListDate{
	margin-top: .5em;
}

/*
 * News Category Listing
 */
.categories-list{
	list-style-type: none;
	margin-left: 1rem;
	
	li a{
		text-decoration: none;
	}
}

/*********
 * HOOKS *
 *********/
 
 /*
  * uw_after_single_the_content
  */
.cardsHeader{
	font-size: 30px;
	text-align: center;
	color: var(--primary_color);
	font-weight: 630;
	margin-top: 1em;
	margin-bottom: 1em;
}
.cardsContainer{
	&.preview{
		display: flex;
		flex-direction: column;
		gap: 1em;
		padding: 1em 2em;
		
		.card{
			display: grid;
			grid-template: auto / 180px auto;
			grid-column-gap: 2em;
		}
		.card:not(:first-child){
			padding-top: 1em;
			border-top: 1px solid lightgray;
		}
		img{
			grid-area: 1 / 1 / 3/ 2;
			aspect-ratio: 1;
			object-fit: cover;
		}
		.card-details{
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 180px;
		}
		.card-title{
			font-size: 1.75em;
			font-weight: 630;
		}
	}
	&.preview-large{
		padding: 32px;
		article.preview-card{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			margin-top: 8px;
			border-top: 1px solid #dadfe1;
			padding-top: 8px;
			margin: 20px 0;
			padding-bottom: 20px;
			&:first-child{
				padding-top: 0;
				border-top: none;
				margin-top: 0;
			}
		}
		img{
			max-width: 290px;
			max-height: 290px;
			height: 290px;
			width: 100%;
			object-fit: cover;
			border-radius: 5px;
			margin-right: 32px;
		}
		.card-preview-header{
			margin-bottom: 20px;
			h1{
				font-family: 'Red Hat Display', sans-serif;
				font-size: 27px;
				font-weight: bold;
				font-style: normal;
				font-stretch: normal;
				line-height: 1.25;
				letter-spacing: normal;
				margin-bottom: 16px;
				a{
					display: inline;
					align-items: center;
					color: #282728;
					text-decoration: underline;
					svg{
						width: 20px;
						height: 20px;
						color: #adadad;
						margin: 0 0 0 8px;
					}
				}
			}
		}
		.card-preview-description{
			font-family: 'Red Hat Text', sans-serif;
			font-size: 18px;
			font-weight: normal;
			font-style: normal;
			font-stretch: normal;
			line-height: 1.5;
			letter-spacing: normal;
			color: #646569;
			margin-bottom: 0;
		}
	}
	&.overlay{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		
		.card{
			position: relative;
			background-size: cover;
			background-position: center;
			height: 433px;
			width: 237px;
			padding: 32px;
			margin: 0 16px 16px 16px;
		}
		.card::before{
			content: "";
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.8));
		}
		.card-details{
			position: absolute;
			bottom: 32px;
		}
		.card-title{
			margin-bottom: 20px;
			font-size: 27px;
			font-weight: 700;
			color: #fff;
			line-height: 1.13;
		}
	}
	&.excerpt-image{
		display: flex;
		flex-wrap: wrap;
		-webkit-box-pack: start;
		justify-content: flex-start;
		article.excerpt-image-card{
			position: relative;
			margin: 32px auto 0 auto;
			border-top: 1px solid #dadfe1;
			padding-top: 32px;
			img{
				height: 250px;
				width: 100%;
				object-fit: cover;
				border-radius: 5px;
				flex-grow: 1;
				margin-bottom: 32px;
			}
			.card-excerpt-header{
				font-family: 'Red Hat Display', sans-serif;
				font-size: 27px;
				font-weight: bold;
				font-style: normal;
				font-stretch: normal;
				line-height: 1.25;
				letter-spacing: normal;
				color: #282728;
			}
		}
	}
}
@media screen and (min-width: 640px){
	.cardsContainer.excerpt-image article.excerpt-image-card{
		flex-basis: calc(50% - 32px);
		display: block;
		margin: 0 16px;
		flex-grow: 0;
		flex-shrink: 0;
		border: none;
		padding: 0;
	}
}
@media screen and (min-width: 768px){
	.cardsContainer.excerpt-image article.excerpt-image-card{
		flex-basis: calc(33.33% - 32px);
	}
}
.text-block-header{
	font-size: 30px;
	text-align: left;
	color: var(--primary_color);
	font-weight: 630;
	margin-top: 1em;
	margin-bottom: 1em;
}
.text-divider{
	margin: 16px 0;
	.text-divider-heading{
		font-family: 'Red Hat Display', sans-serif;
		font-size: 27px;
		font-weight: bold;
		font-style: normal;
		font-stretch: normal;
		line-height: 1.13;
		letter-spacing: normal;
		padding: 0 32px 0 32px;
		text-align: left;
		color: var(--primary_color);
	}
}
@media screen and (min-width: 768px){
	section.text-divider{
		margin: 64px 0;
		.text-divider-heading{
			font-size: 46px;
			text-align: center;
			margin: 0 auto;
			max-width: 840px;
			padding: 0;
		}
	}
}
section.list-component{
	margin: 32px 0;
	
	&.two_column_unstyled_list{
		.list-header{
			color: #646569;
			line-height: 1.46;
			margin: 0 0 32px;
			font-weight: 700;
			font-size: 1.5em;
		}
		ul, ol{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-left: 0;
			
			li.single-list-item{
				padding: 0;
				flex-basis: calc(50% - 16px);
				flex-grow: 0;
				flex-shrink: 0;
				margin-bottom: 32px;
				
				a.item-text{
					font-size: 20px;
					line-height: 1.25;
					font-weight: 400;
					color: #282728;
					text-decoration: underline;
				}
			}
			li.single-list-item::marker{
				content: '';
				margin: 0;
			}
		}
	}
}
.video-grid-container{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 0 40px 0;
	justify-content: space-between;
	gap: 20px;
	.single-video-container{
		flex-basis: calc(100% - 40px);
		flex-grow: 1;
		flex-shrink: 1;
		margin: 0;
		max-width: 400px;
		.video-thumb{
			align-content: center;
			background-position: center;
			background-size: cover;
			display: grid;
			height: 220px;
			justify-content: center;
			width: 390px;
		}
		.play-button{
			align-items: center;
			background: white;
			border-radius: 50%;
			color: black;
			display: flex;
			fill: transparent;
			flex-direction: column;
			height: 64px;
			justify-content: center;
			line-height: 1;
			margin: 0;
			padding: 16px;
			transition: all 150ms ease-in;
			width: 64px;
			&:hover{
				fill: black;
			}
		}
		.caption-wrapper{
			align-items: center;
			color: #646569;
			display: flex;
			font-family: 'Red Hat Display', sans-serif;
			font-size: 18px;
			font-stretch: normal;
			font-style: normal;
			font-weight: normal;
			letter-spacing: normal;
			line-height: normal;
			margin-top: 16px;
			svg{
				margin-right: 16px;
			}
		}
	}
	.video-grid-cta{
		margin-left: 20px;
	}
}
@media screen and (min-width: 768px){
	.video-grid-container .single-video-container{
		flex-basis: calc(50% - 40px);
	}
}