/*
Theme Name: Verdiana Romanin
Theme URI: https://verdianaromanin.com
Author: Verdiana Romanin (Originally by Automattic - Loudness)
Author URI: https://verdianaromanin.com
Description: A bold opinionated theme for music and learning. (Based on Loudness 1.0.10)
Version: 1.0.3
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: loudness
Tags: one-column, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, wide-blocks, accessibility-ready
*/

/*
* Control the hover stylings of outline block style.
*/
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--primary);
}

/**
 * Currently table styles are only available with 'wp-block-styles' theme support (block css) thus the following needs to be included
 * since 'wp-block-styles' aren't used for this theme.
 */
.wp-block-table thead {
	border-bottom: 3px solid;
}

.wp-block-table tfoot {
	border-top: 3px solid;
}

.wp-block-table td,
.wp-block-table th {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid;
	word-break: normal;
}

.wp-block-table figcaption {
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/*
 * Provide styles for a Block Style for navigation links
 */

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-link.is-style-navigation-link-button a {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	padding: 20px 30px !important;
}
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-link.is-style-navigation-link-button a:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--foreground);
}

/*
 * Links in containers with the primary background color get special treatment
 */
.has-primary-background-color a:hover {
	--wp--preset--color--primary: var(--wp--preset--color--background);
}

/*
 * Navigation
 */
.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--xx-large);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
}

.wp-block-navigation .wp-block-navigation__responsive-container-close {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--20);
}

.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:not(:first-child) {
	border-top: solid;
	padding-top: 24px;
	width: 100%;
}

.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
}

.vr-home-hero {
	position: relative;
}

.vr-home-hero.wp-block-cover {
	align-items: flex-start;
}

.vr-home-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
	transform: translateY(-25px);
	width: 100%;
	max-width: 100%;
}

.vr-home-hero__title {
	font-size: 266px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 0.82;
	margin: 0;
	transform: translateY(4px);
	text-transform: lowercase;
	text-align: center;
}

.vr-green-dot {
	color: var(--wp--preset--color--primary);
}

.vr-home-hero__taglines {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1200px;
	margin-top: 6px;
	padding: 0;
	gap: 2rem;
}

.vr-home-hero__taglines p {
	margin: 0;
	line-height: 1.45;
	font-size: 20px;
	letter-spacing: 0.12em;
}

.vr-home-hero__tagline-left,
.vr-home-hero__tagline-right {
	flex-basis: auto;
	flex-grow: 0;
}

.vr-home-hero__tagline-left {
	transform: translateX(-38px);
}

.vr-home-hero__tagline-right {
	text-align: left;
	transform: translateX(-5px);
}

.vr-home-hero .wp-block-cover__image-background {
	object-fit: cover;
	object-position: 50% 35%;
}

@media (max-width: 1199px) {
	.vr-home-hero .wp-block-cover__inner-container {
		transform: translateY(-12px);
	}

	.vr-home-hero__title {
		font-size: clamp(10rem, 16vw, 14rem);
		line-height: 0.84;
		transform: translateY(2px);
	}

	.vr-home-hero__taglines {
		margin-top: 10px;
		max-width: 1000px;
	}

	.vr-home-hero__taglines p {
		font-size: clamp(1rem, 1.55vw, 1.125rem);
	}

	.vr-home-hero__tagline-left {
		transform: translateX(-16px);
	}

	.vr-home-hero__tagline-right {
		transform: none;
	}
}

@media (max-width: 767px) {
	.vr-home-hero .wp-block-cover__inner-container {
		padding: 0.75rem 1rem 2rem;
		transform: none;
	}

	.vr-home-hero__title {
		font-size: clamp(4.25rem, 21vw, 6.5rem);
		line-height: 0.88;
		transform: none;
	}

	.vr-home-hero__taglines {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem 1rem;
		max-width: none;
		margin-top: 0.75rem;
	}

	.vr-home-hero__taglines p {
		font-size: 0.78rem;
		line-height: 1.4;
	}

	.vr-home-hero__tagline-left,
	.vr-home-hero__tagline-right {
		text-align: left;
		transform: none;
	}

	.vr-home-hero__tagline-left {
		justify-self: start;
		max-width: 8rem;
	}

	.vr-home-hero__tagline-right {
		justify-self: end;
		max-width: 9.5rem;
	}

	.vr-home-hero .wp-block-cover__image-background {
		object-position: 56% 34%;
	}
}