/*
Theme Name: Agrilife 2022 - Updated by JL 2024-03-04
Author: Happy Prime
Author URI: https://happyprime.co
Description: A WordPress theme for Texas A&M Agrilife
Requires at least: 6.2
Tested up to: 6.2
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: agrilife-2022
*/

/**
 * From https://github.com/hankchizljaw/modern-css-reset
 */

/* Set core body defaults */

body {
	box-sizing: border-box;
	min-height: 100vh;
	margin: 0;
	scroll-behavior: smooth;
	text-rendering: optimizespeed;
}

/* Box sizing rules */

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

/* Remove list styles on ul, ol elements with a class attribute */

/* stylelint-disable no-duplicate-selectors */

nav ul {
	list-style: none;
}

/* stylelint-enable no-duplicate-selectors */

/* A elements that don't have a class get default styles */

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	        text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
	font: inherit;
}

/* Remove animations and transitions for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {

	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Wrap pre tag content */

pre {
	overflow-x: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

body {

	/*--------------------------------------------------------------
		# Typography
	--------------------------------------------------------------*/

	/* Font size variables in theme.json */

	/*
	--wp--preset--font-size--hero: clamp(2.625rem, -0.25rem + 9.2vw, 5.5rem);
    --wp--preset--font-size--1: clamp(2.25rem, 7.2vw, 4.5rem);
    --wp--preset--font-size--2: clamp(2rem, 1rem + 3.2vw, 3rem);
    --wp--preset--font-size--3: 1.75rem;
    --wp--preset--font-size--4: 1.625rem;
    --wp--preset--font-size--1-5-rem: 1rem;
    --wp--preset--font-size--6: 1.375rem;
	*/

	/*--------------------------------------------------------------
		# Colors
	--------------------------------------------------------------*/

	/* Color variables in theme.json */

	/* Set default color for page-style-color variable */
	--page-style-color: var(--wp--preset--color--maroon);

	/*-------------------------------------------------------------
		# Spacing
	--------------------------------------------------------------*/
	--gutter: var(--wp--preset--spacing--20);

	/*-------------------------------------------------------------
		# Interactions
	--------------------------------------------------------------*/
	--speed: 0.3s;
}

/* 600px */

/* 781px - WordPress column breakpoint */

/* 960px */

/* 1200px */

/* --- Main Nav breakpoints --- */

/* 928px */

/*--------------------------------------------------------------
  # Form elements
--------------------------------------------------------------*/

input,
textarea,
select,
button {
	background-color: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
}

/* Add some padding and margin to make elements easier to read */

input,
textarea,
select {
	padding: 0.5rem;
	margin: 0.5rem 0;
}

/* Style form labels */

label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

/* Style form buttons */

button {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 2px solid currentcolor;
	border-radius: 0.25rem;
	-webkit-text-decoration: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

button:hover {
		background-color: var(--wp--preset--color--maroon-light);
	}

/*--------------------------------------------------------------
	# Global padding redux for small viewports
--------------------------------------------------------------*/

@media (max-width: 37.5em) {

body {
		--wp--style--root--padding-right: 1rem;
		--wp--style--root--padding-left: 1rem;
}
	}

@media (max-width: 37.5em) {

.has-global-padding {
		padding-left: 1rem;
		padding-right: 1rem;
}
	}

/*--------------------------------------------------------------
	# Site-header
--------------------------------------------------------------*/

.site-header a,
	.site-header a:visited {
		color: var(--wp--preset--color--dark-gray);
		-webkit-text-decoration: none;
		text-decoration: none;
	}

.site-header a:hover, .site-header a:visited:hover {
			-webkit-text-decoration: underline;
			text-decoration: underline;
			text-underline-offset: 1px;
			text-decoration-thickness: 2px;
		}

.site-logo-box {
	margin-bottom: -0.9rem !important;
}

.site-logo-box {
	padding: 0.5rem;
	position: relative;
	z-index: 1;
}

/* --- site nav --- */

.wp-block-navigation.site-navigation .wp-block-navigation__container {
		align-items: center;
		display: none;
		gap: 1.5rem;
		justify-content: flex-end;
		list-style: none;
		max-width: 100%;
	}

@media (min-width: 58.00001em) {

.wp-block-navigation.site-navigation .wp-block-navigation__container {
			display: flex;
	}
		}

@media (max-width: 58em) {

.wp-block-navigation.site-navigation .wp-block-navigation__container {
			gap: 0 !important;
	}

.wp-block-navigation.site-navigation .wp-block-navigation__container {
			width: 100%;
	}

			.wp-block-navigation.site-navigation .wp-block-navigation__container > li {
				border-bottom: 1px solid var(--wp--preset--color--gray-light);
			}

				.wp-block-navigation.site-navigation .wp-block-navigation__container > li a {
					padding: 0.5em 0 !important;
				}
		}

.wp-block-navigation.site-navigation a,
	.wp-block-navigation.site-navigation a:visited {
		color: inherit;
		-webkit-text-decoration: none;
		text-decoration: none;
	}

.wp-block-navigation.site-navigation a:hover, .wp-block-navigation.site-navigation a:visited:hover {
			-webkit-text-decoration: underline;
			text-decoration: underline;
			text-underline-offset: 1px;
			text-decoration-thickness: 1px;
		}

.wp-block-navigation.site-navigation .current_page_item {
		font-weight: 500;
		letter-spacing: 0;
	}

.wp-block-navigation.site-navigation .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--maroon);
		border: 1px solid rgba(255, 255, 255, 0.3);
		color: var(--wp--preset--color--white);
		font-size: var(--wp--preset--font-size--small);
		letter-spacing: 0;
		line-height: 1.2;
		text-transform: none;
	}

@media (min-width: 58.00001em) {

.wp-block-navigation.site-navigation .wp-block-navigation__submenu-container {
			padding-top: 0.5em;
			padding-bottom: 0.5em;
	}
		}

@media (max-width: 58em) {

.wp-block-navigation.site-navigation .wp-block-navigation__submenu-container {
			gap: 0 !important;
			padding: 0 0 1em 1em !important;
	}

.wp-block-navigation.site-navigation .wp-block-navigation__submenu-container {
			display: none;
	}
		}

.wp-block-navigation.site-navigation .wp-block-navigation__responsive-container-open {
		display: none;
	}

@media (max-width: 58em) {

.wp-block-navigation.site-navigation .wp-block-navigation__responsive-container-open {
			display: flex;
	}
		}

.wp-block-navigation.site-navigation .wp-block-navigation__responsive-container-open:hover {
			background-color: transparent;
		}

.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
	display: none;
}

@media (min-width: 58.00001em) {

.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block;
}
	}

@media (max-width: 58em) {

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
		display: flex;
		height: 1em;
		margin-left: auto;
		width: 1em;
}

		.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon[aria-expanded="true"] {
			transform: rotate(180deg);
		}

			.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon[aria-expanded="true"] + .wp-block-navigation__submenu-container {
				display: flex;
			}
	}

@media (max-width: 58em) {

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		font-size: 1.25em !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		display: grid;
		grid-gap: 1rem;
		gap: 1rem;
		grid-template-columns: 1fr 3rem;
		width: 100%;
}
	}

/* top header */

.top-header-content a {
		-webkit-text-decoration: none;
		text-decoration: none;
	}

.top-header-content a:hover {
			color: var(--wp--preset--color--white);
			-webkit-text-decoration: underline;
			text-decoration: underline;
		}

.global-header-bar .wp-block-happyprime-toggle-block {
		align-items: center;
		border: none;
		border-radius: 0;
		display: flex;
		font-family: var(--wp--preset--font-family--oswald);
		font-weight: 400;
		gap: 0.5em;
		padding: 0.75em 1em;
		text-transform: uppercase;
		transition: all var(--speed) ease;
	}

.global-header-bar .wp-block-happyprime-toggle-block.header-search-toggle {
			border: 1px solid var(--wp--preset--color--vellum);
			border-top: none;
			border-bottom: none;
		}

.global-header-bar .wp-block-happyprime-toggle-block.header-search-toggle::after {
				content: "";
				background-color: currentcolor;
				height: 1em;
				-webkit-mask-image: url(./images/icon-search.svg);
				        mask-image: url(./images/icon-search.svg);
				-webkit-mask-position: center;
				        mask-position: center;
				-webkit-mask-repeat: no-repeat;
				        mask-repeat: no-repeat;
				-webkit-mask-size: contain;
				        mask-size: contain;
				width: 1.2em;
			}

@media (max-width: 37.5em) {

.global-header-bar .wp-block-happyprime-toggle-block.header-search-toggle {
				gap: 0;
				text-indent: -99999px;
		}
			}

.global-header-bar .wp-block-happyprime-toggle-block:hover {
			color: var(--wp--preset--color--white);
		}

.global-breadcrumbs {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

/* --- Header search bar --- */

.header-panel {
	animation: open-close 0.3s ease 0.1s forwards;
	max-height: 0;
	overflow: clip;
	position: relative;
}

.header-panel.is-layout-constrained > * {
		max-width: 54rem;
	}

.header-panel label {
		font-family: var(--wp--preset--font-family--oswald);
		text-transform: uppercase;
	}

.header-panel .wp-block-search__inside-wrapper button[type="submit"] {
			background-color: transparent;
			border-color: currentcolor;
			color: currentcolor;
		}

.header-panel .wp-block-search__inside-wrapper button[type="submit"]:hover {
				border-color: currentcolor;
				background-color: var(--wp--preset--color--maroon-light-2);
			}

/* --- Search bar open/close animation --- */

@keyframes open-close {

	from {
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	to {
		max-height: 100%;
		padding-top: var(--wp--preset--spacing--20);
		padding-bottom: var(--wp--preset--spacing--20);
	}
}

/*--------------------------------------------------------------
	# Search bar
--------------------------------------------------------------*/

.wp-block-search__inside-wrapper > * {
		background-color: transparent;
		border: 2px solid currentcolor;
		border-radius: 0;
		margin: 0;
	}

.wp-block-search__inside-wrapper .wp-block-search__input {
		padding: 0.5em 1.25em;
	}

.wp-block-search__inside-wrapper button[type="submit"] {
		background-color: var(--wp--preset--color--maroon);
		border-color: var(--wp--preset--color--body);
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--oswald);
		margin-left: -2px;
		text-transform: uppercase;
	}

.wp-block-search__inside-wrapper button[type="submit"]:hover {
			border-color: var(--wp--preset--color--body) !important;
		}

.wp-block-search__inside-wrapper button[type="submit"]:hover {
			color: var(--wp--preset--color--white);
			background-color: var(--wp--preset--color--maroon-light-2);
		}

.search-panel .wp-block-search__inside-wrapper button[type="submit"]:hover {
				border-color: var(--wp--preset--color--white) !important;
			}

/*--------------------------------------------------------------
	# Site-footer
--------------------------------------------------------------*/

.agrilife-bar {
	overflow: clip;
	position: relative;
}

.agrilife-bar::before {
		content: "";
		background-color: var(--wp--preset--color--white);
		height: 120%;
		-webkit-mask-image: url(./images/agrilife-mark-a.svg);
		        mask-image: url(./images/agrilife-mark-a.svg);
		-webkit-mask-position: left center;
		        mask-position: left center;
		-webkit-mask-repeat: no-repeat;
		        mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		        mask-size: contain;
		opacity: 0.15;
		position: absolute;
		top: 50%;
		left: var(--gutter);
		transform: translateY(-50%);
		width: 100%;
	}

@media (max-width: 60em) {

.agrilife-bar > .is-nowrap {
			flex-wrap: wrap !important;
	}
		}

.agrilife-bar .agrilife-bar-title {
		border-right: var(--wp--preset--color--vellum);
		padding-right: var(--wp--preset--spacing--20);
	}

.agrilife-bar .agrilife-bar-nav {
		gap: 0.5em 0;
		line-height: 1.25;
	}

.agrilife-bar .agrilife-bar-nav li {
			border-right: 1px solid var(--wp--preset--color--vellum);
			margin-right: 0.75em;
			padding-right: 0.75em;
		}

.agrilife-bar .agrilife-bar-nav li:last-of-type {
				border: none;
			}

.global-footer a {
		-webkit-text-decoration: none;
		text-decoration: none;
	}

.global-footer a:hover {
			-webkit-text-decoration: underline;
			text-decoration: underline;
		}

.global-footer .wp-block-separator {
		opacity: 0.3;
	}

ul.inline-pipe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 0;
	line-height: 1.25;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.inline-pipe li {
		border-right: 1px solid var(--wp--preset--color--vellum);
		margin-right: 0.75em;
		padding-right: 0.75em;
	}

ul.inline-pipe li:last-of-type {
			border: none;
		}

/*--------------------------------------------------------------
  # Alert banner styles
--------------------------------------------------------------*/

.alert-banner .wp-block-query:empty {
			display: none;
		}

.alert-banner li a {
			color: inherit;
			-webkit-text-decoration: none;
			text-decoration: none;
		}

.alert-banner li a:hover {
				-webkit-text-decoration: underline;
				text-decoration: underline;
			}

.alert-banner .wp-block-post-title {
		align-items: center;
		display: flex;
		font-size: inherit;
		font-weight: inherit;
		gap: 0.5em;
		justify-content: center;
		margin: 0 auto;
	}

.alert-banner .wp-block-post-title::before {
			background-color: currentcolor;
			content: "";
			height: 1.5em;
			flex-shrink: 0;
			-webkit-mask-image: url(./images/icon-alert-simple.svg);
			        mask-image: url(./images/icon-alert-simple.svg);
			-webkit-mask-repeat: no-repeat;
			        mask-repeat: no-repeat;
			-webkit-mask-size: contain;
			        mask-size: contain;
			width: 1.5em;
		}

/*--------------------------------------------------------------
	# Blocks
	# Core, block styles, and custom blocks
	# Most styles are handled in theme.json
--------------------------------------------------------------*/

/* --- Media Text --- */

@media (min-width: 48.8126em) {

.wp-block-media-text.alignfull .wp-block-media-text__content {
				margin-left: auto;
				padding-left: var(--gutter);
				padding-right: var(--gutter);
				width: 100%;
				max-width: calc(var(--wp--style--global--wide-size) / 2 + var(--gutter));
		}
			}

@media (max-width: 48.8125em) {

.wp-block-media-text.is-stacked-on-mobile {
			grid-template-columns: 100%;
	}
		}

@media (max-width: 48.8125em) {

.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
				grid-column: 1;
				grid-row: 2;
		}
			}

@media (max-width: 48.8125em) {

.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
				grid-column: 1;
				grid-row: 1;
		}
			}

.wp-block-media-text .wp-block-media-text__content > *:first-child {
			margin-top: 0;
		}

/* --- Columns--- */

.wp-block-columns {
	margin-bottom: 0;
}

.wp-block-column.card {
		display: flex;
		flex-direction: column;
	}

.wp-block-column.card .wp-block-button__link {
			margin-top: 2rem;
		}

.wp-block-column.card > *:last-child {
			margin-top: auto;
		}

.wp-block-column.is-style-negative-offset {
		margin-top: calc(var(--wp--preset--spacing--30) * -1);
		z-index: 2;
	}

/*--------------------------------------------------------------
	# Hero
--------------------------------------------------------------*/

.is-style-organic-back-light,
.is-style-organic-back-dark {
	background-blend-mode: overlay;
	background-image: url(./images/bg_topopattern-dark.webp);
	background-repeat: repeat;
	background-size: 33%;
	overflow: clip;
	position: relative;
}

.is-style-organic-back-light::after, .is-style-organic-back-dark::after {
		background-image: linear-gradient(146deg, transparent 20%, rgba(0, 0, 0, 0.15) 100%);
		content: "";
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

.is-style-organic-back-light > *, .is-style-organic-back-dark > * {
		position: relative;
		z-index: 1;
	}

.is-style-organic-back-light.wp-block-media-text, .is-style-organic-back-dark.wp-block-media-text {
		min-height: 400px;
	}

.is-style-organic-back-light {
	background-blend-mode: soft-light;
	background-image: url(./images/bg_topopattern-light.webp);
}

/*--------------------------------------------------------------
	# Search results
--------------------------------------------------------------*/

.search .taxonomy-category, .archive .taxonomy-category {
		margin-bottom: 0.5em;
	}

.search .taxonomy-category a, .archive .taxonomy-category a {
			-webkit-text-decoration: none;
			text-decoration: none;
		}

.search .taxonomy-category a:hover, .archive .taxonomy-category a:hover {
				-webkit-text-decoration: underline;
				text-decoration: underline;
				text-underline-offset: 1px;
				text-decoration-thickness: 1px;
			}

/*--------------------------------------------------------------
  # Accessibility
--------------------------------------------------------------*/

/* --- Text meant only for screen readers. --- */

.screen-reader-text {
	position: absolute !important;
	word-wrap: normal !important;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	width: 1px;
}

.screen-reader-text:focus {
	clip: auto !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	-webkit-text-decoration: none;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/*--------------------------------------------------------------
  # Alignments
--------------------------------------------------------------*/

.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
  # Typography
--------------------------------------------------------------*/

.has-hero-font-size {
	font-size: var(--wp--preset--font-size--hero);
	line-height: 1;
}

ul.is-style-no-bullets {
	list-style: none;
	padding: 0;
}

ul.is-style-no-bullets li {
		padding-left: 0;
	}

.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 200;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
  # Design items
--------------------------------------------------------------*/

.is-style-box-shadow {
	box-shadow: 0 0 10px rgba(112, 112, 112, 0.2);
}

.is-style-bottom-line::after {
		content: "";
		background-color: var(--wp--preset--color--maroon);
		display: block;
		height: 6px;
		margin-top: 1em;
		width: 25vw;
		max-width: 6rem;
	}

.is-style-dotted-wide {
	border-bottom-style: dashed;
}