/*
Theme Name: Red5 Simple FSE
Theme URI: https://deq.utah.gov
Author: red5@utah.gov
Author URI: 
Description: A most excellent starting point for Utah DEQ websites
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.7
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: 
Text Domain: red5simple
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks
*/

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

main *,
main *:before,
main *:after {
	box-sizing: inherit;
}

main .entry-content a:not(.wp-block-navigation-item__content, .wp-block-button__link, .wp-element-button, .nav-button, .ui-tabs-anchor, .red5-dropdown-anchor, .wp-block-post-excerpt__more-link):hover {
    box-shadow: -3px -1px 0 0px var(--wp--preset--color--deq-silver),
	3px -1px 0 0px var(--wp--preset--color--deq-silver),
	3px 1px 0 0px var(--wp--preset--color--deq-silver),
	-3px 1px 0 0px var(--wp--preset--color--deq-silver),
	inset 0 0 0 1000px var(--wp--preset--color--deq-silver);
	transition: 0.3s;
}

/* WP 6.6 ignores the theme.json button hover for buttons with a custom color */
main .entry-content .wp-element-button:hover, 
main .entry-content .wp-block-button__link:hover,
footer .wp-element-button:hover, 
footer .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--black) !important;
	color: var(--wp--preset--color--white) !important;
}

.wp-block-navigation-item__content {
	cursor: pointer;
}

header .utah-design-system h1 {
	padding-bottom: 0;
}
header .utah-design-system button.utah-logo-svg svg {
	fill: var(--wp--preset--color--deq-primary);
}
header .utah-design-system .utds-title-wrapper .utds-title-wrapper__title {
	color: var(--wp--preset--color--deq-grey-default);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
}
header .utah-design-system h1 a[href]:not(.button,.action-card) {
	color: var(--wp--preset--color--deq-primary);
}
header .utah-design-system h1 a[href]:not(.button,.action-card):hover {
	color: var(--wp--preset--color--deq-primary);
}
#search-modal.utah-design-system .button--solid.button--primary-color {
	background-color: var(--wp--preset--color--aq-green);
	border-color: var(--wp--preset--color--aq-green);
}
footer .utah-design-system.utds-footer {
	background-color: var(--wp--preset--color--deq-grey-secondary);
}
header .wp-block-navigation:not(.has-background) div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--deq-grey-secondary);    
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 6px 0px;
}

.open-main-search {
	cursor: pointer;
}

#open-main-search a,
#main-search-form  button.search-button span {
	-webkit-mask-image: url('assets/images/icons/font-awesome/fa-magnifying-glass-regular.svg');
	mask-image: url('assets/images/icons/font-awesome/fa-magnifying-glass-regular.svg');
	background-color: var(--wp--preset--color--white) !important;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	width: 24px;
	height: 24px;
	font-size: 0;
	display: inline-block;
	overflow: hidden;
	border: none;
}

#main-search-form  button.search-button {
	position: absolute;
	width: 40px;
	height: 40px;
}

.ui-dialog.ui-widget #main-search-form input {
	margin-left: 50px;
	width: calc(100% - 50px);
    padding: 6px;
	box-sizing: border-box;
}

.division-background {
	background-repeat: no-repeat;
	background-size: cover;
	background-position-x: center;
	background-position-y: top;
	width: 100%;
	min-height: 223px;
	position: relative;
	margin-block-start: 0;
}

.dept-logo {
	width: 582px;
	height: 183px;
	margin-block-start: 0;
}
@media screen and (max-width: 450px) {
	.division-background {
		min-height: 180px;
	}
	.dept-logo,
	.dept-logo img {
		width: 462px;
		max-height: 145px;
	}
	body .is-layout-flow > .aligncenter.dept-logo {
		margin-left: -50px !important;
	}
}

/* ~ Mobile Menus - highlight current item ~*/
div.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item.current-menu-item.wp-block-navigation-link a span {
	background-color: var(--wp--preset--color--deq-primary);
	color: var(--wp--preset--color--white);
	padding: 8px 18px 8px 32px;
	border-radius: 4px;
	display: inline-block;
}
div.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item.current-menu-item.wp-block-navigation-link a span::before {
	-webkit-mask-image: url('assets/images/icons/font-awesome/fa-location-arrow-regular.svg');
	mask-image: url('assets/images/icons/font-awesome/fa-location-arrow-regular.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background-color: var(--wp--preset--color--white);
	content: '';
	width: 16px;
	height: 16px;
	position: absolute;
	top: 18px;
	left: 7px;
}

/* ~ Main Menu ".has-modal-open" indicates Mobile ~ */
div.wp-block-navigation__responsive-container.has-modal-open ul, 
div.wp-block-navigation__responsive-container.has-modal-open ul li {
	line-height: 1.5;
}

div.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content:not([href]) {
	font-weight: 700;
	cursor: default;
}
div.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content:not([href]):hover {
	text-decoration: none;
}
div.wp-block-navigation__responsive-container.has-modal-open.wp-block-navigation__responsive-container.is-menu-open {
	background-color: rgba(0, 0, 0, .75);
	padding-top: 0;
	padding-right: 0;
}
div.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container.is-responsive.items-justified-space-between.wp-block-navigation {
	row-gap: 10px;
}
div.wp-block-navigation__responsive-container.has-modal-open.wp-block-navigation__responsive-container-content {
	align-items: flex-end;
}
/* By default, the modal has too much top margin when .admin-bar */
.admin-bar div.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-dialog {
	margin-top: 0;
}
div.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-close {
	background-color: var(--wp--preset--color--white);
	padding-top: 26px;
}
div.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
	right: 26px;
}
div.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content {
	padding: 26px 0 50px 0;
}

div.wp-block-navigation__responsive-container.has-modal-open ul.wp-block-navigation__container {
    margin: 0 30px 0 30px;
	padding: 0 0 0 24px;
    border-left: 1px solid var(--wp--preset--color--deq-silver);
}

div.wp-block-navigation__responsive-container.has-modal-open li.has-child.wp-block-navigation-submenu > ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu li.has-child > .wp-block-navigation-item__content 
{
	color: var(--wp--preset--color--deq-primary) !important;
	margin-top: 16px;
}

div.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	padding: 6px 0 6px 0;
}
div.wp-block-navigation__responsive-container.has-modal-open li.wp-block-navigation-submenu > ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu li.has-child > .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
	-webkit-box-shadow: -15px -1px 0px -14px var(--wp--preset--color--deq-primary);
	-moz-box-shadow: -15px -1px 0px -14px var(--wp--preset--color--deq-primary);
	box-shadow: -15px -1px 0px -14px var(--wp--preset--color--deq-primary);
}
div.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container,
div.wp-block-navigation__responsive-container.has-modal-open ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
    padding-top: 0;
}

/* Left Nav Accordion Menu */
@media (min-width: 782px) {
	main .most-excellent-division-menu nav {
		flex: 1;
	}
}
main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) ul.wp-block-navigation__container {
	row-gap: 0;
	width: 100%;
}

main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation__container.is-responsive.items-justified-space-between.wp-block-navigation {
	row-gap: 10px;
}

main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation .wp-block-navigation-item,
main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation-item__content.wp-block-navigation-item__content,
main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation .wp-block-navigation-item__label {
	display: block;
	width: 100%;
}

main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation-item__content {
	text-decoration: none;
}
main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation-item.wp-block-navigation-link a,
main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation-item.has-child.wp-block-navigation-submenu button {
	background-color: var(--wp--preset--color--deq-silver);
	border-top: 2px solid var(--wp--preset--color--white);
	padding: 8px 12px 8px 16px;
}

main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) ul, 
main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) ul li {
	line-height: 1.5;
}

main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation-item.has-child.wp-block-navigation-submenu {
	height: auto;
	overflow: hidden;
}

main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    display: block;
    visibility: visible;
    opacity: 1;
    width: 100%;
    height: auto;
    position: relative;
}

main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation-item.has-child.wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	display: none;
	width: 100%;
}

main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation .wp-block-navigation__submenu-icon {
	background-color: transparent;
	background-size: 22px 22px;
	background-image: url('assets/images/icons/font-awesome/fa-plus-circle-regular.svg');
	background-repeat: no-repeat;
	width: 22px;
	height: 22px;
	position: absolute;
	top: 10px;
	right: 20px;
	margin-right: 0;
	pointer-events: none;
}
main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) li.has-child.deq_expand>button.wp-block-navigation-item__content~.wp-block-navigation__submenu-icon {
	background-image: url('assets/images/icons/font-awesome/fa-minus-circle-regular.svg');
}
main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
	display: none;
}

main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation .wp-block-navigation__submenu-container,
main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	border: none;
	border-left: 16px solid var(--wp--preset--color--white);
}

main .most-excellent-division-menu a::after {
	display: none;
}

@media (min-width: 782px) {
	main .most-excellent-division-menu div.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		top: 0;
		left: 0;
	}
}

/* Menus in the content */
/* Show mobile menu on medium */
@media (max-width: 781px) {
    .most-excellent-division-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .most-excellent-division-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
	.reverse-for-mobile {
		flex-direction: column-reverse;
	}
}
@media (min-width: 782px) {
	main .most-excellent-division-menu nav.is-vertical {
		width: 100%;
	}
}

#red5-helpful fieldset {
	border: none;
	padding-left: var(--wp--style--root--padding-left);
}


.footer-wrapper {
	position: relative;
}

#footer-top {
	background-color: var(--wp--preset--color--white);
	background-size: cover;
	background-position-x: center;
	background-position-y: bottom;
	background-repeat: no-repeat;
	height: 152px;
}
.footer-contact {
	margin-block-start: 0;
}
/* Manually add an ir to footer icons */
.footer-contact nav.social-media .wp-block-navigation-item__label {
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background-color: var(--wp--preset--color--white);
	display: block;
	width: 32px;
	height: 32px;
	overflow: hidden;
}
.footer-contact nav.social-media .wp-block-navigation-item__label::before {
	content: "";
	display: block;
	width: 0;
	height: 150%;
}
.footer-contact nav.social-media .facebook .wp-block-navigation-item__label {
	-webkit-mask-image: url(assets/images/icons/font-awesome/fa-facebook.svg);
	mask-image: url(assets/images/icons/font-awesome/fa-facebook.svg);
}
.footer-contact nav.social-media .twitter .wp-block-navigation-item__label {
	-webkit-mask-image: url(assets/images/icons/font-awesome/fa-twitter.svg);
	mask-image: url(assets/images/icons/font-awesome/fa-twitter.svg);
}
.footer-contact nav.social-media .youtube .wp-block-navigation-item__label {
	-webkit-mask-image: url(assets/images/icons/font-awesome/fa-youtube.svg);
	mask-image: url(assets/images/icons/font-awesome/fa-youtube.svg);
}
.footer-contact .footer-address {
	line-height: 1.6;
}
@media screen and (max-width: 450px) {

	.footer-contact .wp-block-button,
	.footer-contact .wp-block-button__link {
		width: 100%;
	}
}

.contact-us-wrapper {
	background-image: url('assets/images/contact-us/Contact-Us-Background-Mobile.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: right;
	background-position-y: bottom;
	height: 130px;
	position: relative;
	margin-block-start: 0;
}


.contact-us-button {
	position: absolute;
	top: 35px;
	right: 61px;
}

.wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link {
	font-family: "Manrope", Arial, Helvetica, sans-serif;
	text-align: center;
	display: block;
	padding: 12px;
	border: 1px solid var(--wp--preset--color--deq-primary);
}
.wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link:hover {
    background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

#return_to_top {
	background: none;
	margin: 0;
	position: fixed;
	bottom: 8px;
	right: 8px;
	z-index: 100;
	display: none;
	text-decoration: none;
	cursor: pointer;
}

.wp-block-post-content ol,
.wp-block-post-content ul {
	line-height: 2;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

.rounded {
	border-radius: 4px;
}

p:empty {
	display: none;
}

::selection {
	background: #febb12;
}

#post-meta {
	font-family: "Manrope", Arial, Helvetica, sans-serif;
}

#post-meta .red5-meta {
	display: inline;
}

#post-meta a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	display: inline-block;
	padding: 2px 6px 4px 6px;
	margin: 6px 0 0 6px;
}
#post-meta #categories a:hover,
#post-meta #tags a:hover {
    background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	transition: 0.3s;
}


.faq {
	font-style: italic;
}

.faq::before {
	-webkit-mask-image: url('assets/images/icons/font-awesome/fa-question-circle-solid.svg');
	mask-image: url('assets/images/icons/font-awesome/fa-question-circle-solid.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	content: '';
	width: 26px;
	height: 26px;
	display: block;
	float: left;
	margin: 5px 3px 0 0;
}

.responsive-embed {
	display: flex;
	flex-direction: column;
    width: 100%;
    height: 100%;    
    overflow: hidden;
}
.responsive-embed iframe {
    flex-grow: 1;
    min-height: 80vh;
}

/*
~ Caption Stuff ~
Prevent figcaption from going wider than its image with figure display:table and figcaption display: table-caption; caption-side: bottom 
!!! 2022: when an image is aligned, Gutenberg moves the .wp-block-image class up one level away from the figure and onto a div. 
To make captions look nice, I need declarations for both scenarios. If someone knows a better way, please email me. :) red5@utah.gov
*/
figure.wp-block-image,
main.main div.wp-block-image figure {
	display: table;
}

.wp-block-image figcaption,
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	font-family: "Manrope", Arial, Helvetica, sans-serif;
	background: var(--wp--preset--color--deq-silver);
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--medium);
	font-size: 1rem;
	text-align: center;
	padding: .75rem;
	margin: 0;
	display: table-caption;
	caption-side: bottom;
}

.wp-block-image .aligncenter,
.wp-block-image .alignleft,
.wp-block-image .alignright {
	margin-top: 0;
}

.wp-block-image a {
	display: inline-block;
}

.wp-block-image.has-white-background-color figcaption {
	background-color: #fff;
}

.entry-content .wp-block-image.full img {
	width: 100%;
	height: auto;
}

/*
Gutenburg Base Breakpoints: https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss 
I think the ranges are like this:
Small: 481-599px
Medium: 600-781px
Large: 782-959px
*/
@media print,
screen and (max-width: 599px) {
	.hide-for-small-only {
		display: none !important;
	}
}

@media screen and (max-width: 0em),
screen and (min-width: 600px) {
	.show-for-small-only {
		display: none !important;
	}
}

@media print,
screen and (min-width: 600px) {
	.hide-for-medium {
		display: none !important;
	}
}

@media screen and (max-width: 600px) {
	.show-for-medium {
		display: none !important;
	}
}

@media print,
screen and (min-width: 600px) and (max-width: 781px) {
	.hide-for-medium-only {
		display: none !important;
	}
}

@media screen and (max-width: 781px),
screen and (min-width: 600px) {
	.show-for-medium-only {
		display: none !important;
	}
}

@media print,
screen and (min-width: 782px) {
	.hide-for-large {
		display: none !important;
	}
}

@media screen and (max-width: 782px) {
	.show-for-large {
		display: none !important;
	}
}

@media print,
screen and (min-width: 782px) and (max-width: 959px) {
	.hide-for-large-only {
		display: none !important;
	}
}

@media screen and (max-width: 959px),
screen and (min-width: 782px) {
	.show-for-large-only {
		display: none !important;
	}
}

/* Accessibility help */
.show-for-sr,
.show-on-focus {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
}

.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 150%;
}

/* 
~ Document Icons, Font Icons, Font Awesome Stuff ~
 Do not manually uses these two classes. They are reserved for GTM: email_link, phone_number_link 
 */
a[href*=".pdf"]::after,
a[href*=".PDF"]::after,
a[href*=".xls"]::after,
a[href*=".XLS"]::after,
a[href*=".xlsx"]::after,
a[href*=".XLSX"]::after,
a[href*=".csv"]::after,
a[href*=".CSV"]::after,
a[href*=".doc"]::after,
a[href*=".DOC"]::after,
a[href*=".docx"]::after,
a[href*=".DOCX"]::after,
a[href*=".dot"]::after,
a[href*=".DOT"]::after,
a[href*=".kmz"]::after,
a[href*=".KMZ"]::after,
a[href*=".ppt"]::after,
a[href*=".PPT"]::after,
a[href*=".pptx"]::after,
a[href*=".PPTX"]::after,
a[href*=".mp4"]::after,
a[href*=".MP4"]::after,
a[href*=".mp3"]::after,
a[href*=".MP3"]::after,
a[href*=".wmv"]::after,
a[href*=".WMV"]::after,
a[href*=".zip"]::after,
a[href*=".ZIP"]::after,
a[href*="mailto:"]::after,
a[href^="https://lf-public.deq.utah.gov/WebLink/"]::after {
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background-color: var(--wp--preset--color--black);
	content: ' ';
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-left: 6px;
}

a[href*=".kmz"]::after,
a[href*=".KMZ"]::after {
	-webkit-mask-image: url(assets/images/icons/font-awesome/fa-map-regular.svg);
	mask-image: url(assets/images/icons/font-awesome/fa-map-regular.svg);
}

a[href*=".pdf"]::after,
a[href*=".PDF"]::after {
	-webkit-mask-image: url(assets/images/icons/font-awesome/fa-file-pdf-regular.svg);
	mask-image: url(assets/images/icons/font-awesome/fa-file-pdf-regular.svg);
}

a[href*=".xls"]::after,
a[href*=".xlsx"]::after,
a[href*=".XLS"]::after,
a[href*=".XLSX"]::after,
a[href*=".csv"]::after,
a[href*=".CSVe"]::after {
	-webkit-mask-image: url(assets/images/icons/font-awesome/fa-file-excel-regular.svg);
	mask-image: url(assets/images/icons/font-awesome/fa-file-excel-regular.svg);
}

a[href*=".doc"]::after,
a[href*=".docx"]::after,
a[href*=".dot"]::after,
a[href*=".DOC"]::after,
a[href*=".DOCX"]::after,
a[href*=".DOT"]::after {
	-webkit-mask-image: url(assets/images/icons/font-awesome/fa-file-word-regular.svg);
	mask-image: url(assets/images/icons/font-awesome/fa-file-word-regular.svg);
}

a[href*=".ppt"]::after,
a[href*=".pptx"]::after,
a[href*=".PPT"]::after,
a[href*=".PPTX"]::after {
	-webkit-mask-image: url(assets/images/icons/font-awesome/fa-file-powerpoint-regular.svg);
	mask-image: url(assets/images/icons/font-awesome/fa-file-powerpoint-regular.svg);
}

a[href*=".mp4"]::after,
a[href*=".MP4"]::after,
a[href*=".wmv"]::after,
a[href*=".WMV"]::after {
	-webkit-mask-image: url(assets/images/icons/font-awesome/fa-file-video-regular.svg);
	mask-image: url(assets/images/icons/font-awesome/fa-file-video-regular.svg);
}

a[href*=".mp3"]::after,
a[href*=".MP3"]::after {
	-webkit-mask-image: url(assets/images/icons/font-awesome/fa-file-audio-regular.svg);
	mask-image: url(assets/images/icons/font-awesome/fa-file-audio-regular.svg);
}

a[href*=".zip"]::after,
a[href*=".ZIP"]::after {
	-webkit-mask-image: url(assets/images/icons/font-awesome/fa-file-archive-regular.svg);
	mask-image: url(assets/images/icons/font-awesome/fa-file-archive-regular.svg);
}

a[href*="mailto:"]::after {
	-webkit-mask-image: url(assets/images/icons/font-awesome/fa-envelope-regular.svg);
	mask-image: url(assets/images/icons/font-awesome/fa-envelope-regular.svg);
}

/* If a link points to lf-public.deq.utah.gov/WebLink/ box icon */
a[href^="https://lf-public.deq.utah.gov/WebLink/"]::after {
	-webkit-mask-image: url(assets/images/icons/font-awesome/fa-archive-regular.svg);
	mask-image: url(assets/images/icons/font-awesome/fa-archive-regular.svg);
}

header a.wp-block-button__link::after,
main.wp-block-group a.wp-block-button__link::after {
	background-color: var(--wp--preset--color--white);
}

/* If a link points to documents.deq/legacy/ then add the red archives box icon */
a[href^="https://documents.deq.utah.gov/"]::before {
	-webkit-mask-image: url('assets/images/icons/font-awesome/fa-archive-regular.svg');
	mask-image: url('assets/images/icons/font-awesome/fa-archive-regular.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background-color: var(--wp--preset--color--red-five-standing-by);
	content: ' ';
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-right: 6px;
}

#search-results-wrapper .gs-webResult div:has(a[data-ctorig*=".pdf"]) ~ div .gs-visibleUrl-breadcrumb::before,
#search-results-wrapper .gs-imageResult div:has(a[data-ctorig*=".pdf"]) ~ div .gs-visibleUrl-breadcrumb::before,
#search-results-wrapper .gs-webResult div:has(a[data-ctorig*="documents.deq.utah.gov"]) ~ div .gs-visibleUrl-breadcrumb::before,
#search-results-wrapper .gs-imageResult div:has(a[data-ctorig*="documents.deq.utah.gov"]) ~ div .gs-visibleUrl-breadcrumb::before,
#search-results-wrapper .gs-webResult div:has(a[data-ctorig*="lf-public.deq.utah.gov"]) ~ div .gs-visibleUrl-breadcrumb::before,
#search-results-wrapper .gs-imageResult div:has(a[data-ctorig*="lf-public.deq.utah.gov"]) ~ div .gs-visibleUrl-breadcrumb::before {
	-webkit-mask-image: url('assets/images/icons/font-awesome/fa-archive-regular.svg');
	mask-image: url('assets/images/icons/font-awesome/fa-archive-regular.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background-color: var(--wp--preset--color--err-primary);
	content: ' ';
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-right: 6px;
}

/* Disable FontAwesome icon using the class no-fa5 */
a.no-fa5::after,
.no-fa5 a::after {
	display: none;
}


/* ~ YouTube Stuff~ */
/* Wordpress 5.9 adds massive space above embedded YouTube Videos. This puts it back to zero. */
.wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
	padding-top: 0;
}

.youtube-tiles .wp-block-image a {
	background-color: rgba(0, 0, 0, 1);
	display: block;
}

.youtube-tiles .wp-block-image a img {
	transition: opacity 0.3s;
}

.youtube-tiles .wp-block-image a img:hover {
	opacity: 0.3;
}

/* ~ Table Stuff ~ If you know of a way to define this in the theme.json, please contact me: red5@utah.gov */
.wp-block-table table {
	border: 1px solid var(--wp--preset--color--deq-primary);
	width: 100%;
	border-collapse: collapse;
}

tbody {
	border: none;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--deq-primary);
	padding: 8px;
	vertical-align: top;
	text-align: left;
	page-break-inside: avoid;
}

.wp-block-table th {
	color: #fff;
	font-family: "Manrope", Arial, Helvetica, sans-serif;
	font-weight: bold;
	border-right: 1px solid var(--wp--preset--color--deq-silver);
	vertical-align: top;
	text-align: left;
}

tbody tr:nth-child(even) {
	border-bottom: 0;
	background-color: var(--wp--preset--color--deq-silver);
}

.wp-block-table tr:hover {
	background-color: #fffe71;
}

.wp-block-table table tr.checkmarks td {
	text-align: center;
}

/* ~ Form Stuff ~ */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input:-moz-placeholder,
textarea:-moz-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	font-family: "Manrope", Arial, Helvetica, sans-serif;
}
input:focus::-webkit-input-placeholder,
input:focus:-moz-placeholder {
	color: transparent;
}
label, 
input {
	font-family: "Manrope", Arial, Helvetica, sans-serif;
}
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"],
textarea {
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--large);
	padding: 8px 6px 8px 6px;
 }
 textarea {
	height: 150px;
}
input[type="submit"] {
	color: #fff;
	font-size: var(--wp--preset--font-size--large);
	border: 1px solid var(--wp--preset--color--black);
	cursor: pointer;
	padding: 8px;
	border-radius: 4px;
 }
.required {
	color: var(--wp--preset--color--red-five-standing-by);
	font-weight: bold;
}

.add-text-stroke {
	text-shadow:
		-1px -1px 0 #000,  
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

.grecaptcha-badge {
	display: none;
}

/* ~ Timeline Stuff ~ */
.timeline-button {
	position: relative;
	width: calc(100% - 8px);
	height:40px;
	display: inline-block;
	border-left-width: 0 !important;
	cursor: pointer;
}

.timeline-button:before {
	content:"";
	position: absolute;
	left: 0px;
	top:0px;
	width:0px;
	height:0px;
	border-top:20px solid transparent;
	border-left:8px solid var(--wp--preset--color--white);
	border-bottom:20px solid transparent;
}

.timeline-button:after {
	content:"";
	position: absolute;
	left: 100%;
	top:0px;
	width:0px;
	height:0px;
	border-top:20px solid transparent;
	border-left:8px solid;
	border-bottom:20px solid transparent;
	border-left-color: inherit;
}


/* ~ Red5 Blocks Stuff - Theme specific ~ */
.wp-block-red5-blocks-carousel-wrapper .swiper-slide figcaption {
	font-family: "Manrope", Arial, Helvetica, sans-serif;
}

.wp-block-red5-blocks-dropdown-menu .nav a {
	font-family: "Manrope", Arial, Helvetica, sans-serif;
}

.wp-block-red5-blocks-tabs-wrapper .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	font-family: "Manrope", Arial, Helvetica, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
}

.ctct-form-container h2,
.content div.ctct-form-embed div.ctct-form-defaults h2.ctct-form-header {
	font-family: "Roboto Serif" !important;
	font-style: normal;
	font-weight: 700;
	font-size: 1.8rem !important;
}

.ctct-form-container h3 {
	font-family: "Manrope", Arial, Helvetica, sans-serif !important;
	font-size: 22px;
	font-weight: bold;
}

.ctct-form-container p,
.ctct-form-container label {
	font-family: "Roboto Serif", serif !important;
}

.content div.ctct-form-embed div.ctct-form-defaults p.ctct-form-text {
	font-family: "Manrope", Arial, Helvetica, sans-serif;
	font-size: 1.1rem;
}

@media print {
	* {
		background: transparent !important;
		color: black !important;
		text-shadow: none !important;
		-webkit-filter: none !important;
		filter: none !important;
		-ms-filter: none !important;
	}

	p, li, a, time {
		font-size: 16px !important;
	}

	#primary-dept-menu,
	header .utah-design-system .utds-title-wrapper::after,
	.most-excellent-division-menu,
	footer.site-footer #footer-top,
	footer.site-footer figure,
	footer.site-footer .contact-us-wrapper{
		display: none !important;
	}
	.wp-block-column.most-excellent-division-content {
		flex-basis: 100% !important;
	}
	#post-meta #tags {
		border-bottom: 2px solid var(--wp--preset--color--black);
		padding-bottom: 20px;
	}
	footer.site-footer .footer-contact {
		padding-top: 0 !important;
	}
	.footer-contact nav.social-media .wp-block-navigation-item__label {
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}
	.footer-contact nav.social-media .wp-block-navigation-item__label {
		width: auto;
		height: auto;
		display: inline;
	}
	footer.site-footer .footer-contact .wp-block-button__link.has-black-color {
		color: var(--wp--preset--color--black) !important;
		padding: 0;
	}
	main .wp-block-button__link.wp-element-button {
		background-color: var(--wp--preset--color--white) !important;
		color: var(--wp--preset--color--black) !important;
		border: 1px solid var(--wp--preset--color--black) !important;
	}

	a,
	a:visited {
		color: #444 !important;
		text-decoration: underline;
	}

	a:after,
	a:visited:after {
		content: " (" attr(href) ")";
	}

	a abbr[title]:after,
	a:visited abbr[title]:after {
		content: " (" attr(title) ")";
	}

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	code,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group;
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}

	* {
		overflow: visible;
		overflow-wrap: break-word;
		word-wrap: break-word;
		word-break: break-word;
	}
}