/**
 * Theme Name:       Howcast
 * Theme URI:        https://howcast.com
 * Description:      Custom Mai Theme for the Genesis Framework.
 * Author:           Howcast
 * Author URI:       https://howcast.com
 * Version:          2.0.0
 * Text Domain:      howcast
 * Template:         genesis
 * Template Version: 3.6.1
 * License:          GPL-2.0-or-later
 * License URI:      https://www.gnu.org/licenses/gpl-2.0.html
 */

.wp-block {}

:root {
	--font-scale-mobile: 1.125;
	--font-scale-tablet: 1.125;
	--font-scale-desktop: 1.2;
	--heading-text-wrap: balance;
	--base-gradient: linear-gradient(45deg,rgba(2, 146, 224, 1) 0%, rgba(0, 86, 179, 1) 100%);
	--site-header-border-bottom: 0;
	--border-radius: 6px;
	--button-font-family: var(--body-font-family);
	--button-font-weight: bold;
	--border: 0;
	--button-padding: .6rem 1.3rem;
	--shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
}

:where(p) {
	text-wrap: pretty;
}

.has-base-gradient-background {
	background: var(--base-gradient);
}

[type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], input:not([type]), optgroup, select, textarea {
	padding: var(--input-padding, .5em);
	--input-color: black;

}

.nav-header,
.nav-after-header {
	--menu-font-size: var(--font-size-sm);
	--menu-font-weight: var(--body-font-weight-bold);
}

.nav-after-header {
	--wrap-max-width: 100vw;
	--menu-item-link-padding: var(--spacing-sm) var(--spacing-md);
	--menu-item-link-color: var(--color-heading);
	background: var(--color-alt);
}

.site-header-wrap {
	justify-content: start;
}

.nav-header-right {
	/* --menu-text-transform: uppercase; */
	--menu-font-size: var(--font-size-sm);
	--menu-font-weight: bold;
	--menu-font-family: var(--heading-font-family);
}

.nav-utility {
	--menu-text-transform: capitalize;
	--menu-font-size: var(--font-size-xs);
	--menu-font-weight: normal;
	margin: 0;
}

@media (min-width: 1100px) {

	.header-section.header-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

		.nav-utility {
			order: -1;
		}

		.nav-header-right {
			border-top: 1px solid rgba(0,0,0,0.2);
		}

	}

	.header-right-mobile {
		flex: 0;
		display: inline-flex;
		order: 9999;
	}

.wp-block-group.is-layout-flex.is-nowrap > .wp-block-separator {
	flex: 1;
}

.mai-terms:has(.mai-term-category) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xxxs);
}

.mai-term-category {
	display: inline-flex;

	a {
		display: block;
		background-color: var(--color-alt);
		padding: 0.4rem;
		font-size: 0.7rem;
		color: var(--color-body);
		line-height: 1;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: bold;

		&:hover,
		&:focus-visible {
			background-color: var(--color-primary-dark);
			color: var(--color-white);
		}
	}
}

.entry-wrap-single {
	--entry-meta-margin: 0 0 var(--spacing-md);
}

.entry-archive .entry-excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.mai-grid.category-guides {
	--heading-margin-bottom: var(--spacing-xs);
}

.mai-grid.category-guides[class*="has-image-left"] .entry-content,
.mai-grid.category-guides[class*="has-image-right"] .entry-content {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.mai-grid.category-guides.has-image-full .entry-content {
	font-size: var(--font-size-sm);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.entry-grid.entry-current {
	--current-text: attr(data-current);
}

.entry-grid.entry-current .entry-image-link {
	position: relative;
}

.entry-grid.entry-current .entry-image-link::before {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 8px;
	color: var(--color-white);
	background-color: var(--color-primary-dark);
	font-size: var(--font-size-xs);
	font-weight: var(--body-font-weight-bold);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--border-radius);
	opacity: .8;
	content: var(--current-text);
}

.entry-grid.entry-current .entry-image-link::after {
	--triangle-width: 16px;
	--triangle-height: 12px;
	position: absolute;
	bottom: calc(var(--triangle-height) * -1);
	left: 50%;
	width: 0;
	height: 0;
	border-right: var(--triangle-width) solid transparent;
	border-top: var(--triangle-height) solid var(--color-primary);
	border-left: var(--triangle-width) solid transparent;
	transform: translateX(-50%);
	content: "";
}

.page-header {
	background: var(--base-gradient);
}