/*
Theme Name: Chicago Mastering Service
Theme URI: 
Author: Jake McKelvie
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chicago-mastering-service
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

* {
	box-sizing: border-box;
}

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

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Header
 * 
*/
header li.current-menu-item a {
	color: var(--wp--preset--color--accent-3) !important
}

header li.current-menu-item a::before,
header li a:hover::before {
	display: block;
	width: 15px;
	height: 15px;
	position: absolute;
	left: -18px;
	top: 50%;
	transform: translateY(-55%);
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath fill='%23F49B00' fill-rule='evenodd' d='m5.734 12.089 1.847 5.145 1.456-5.145 5.728.947-4.048-3.999 4.446-5.132-6.126 2.009L7.581 0 5.734 5.914 0 3.905l3.869 5.132L0 13.036z'/%3E%3C/svg%3E");
}

/*
 * Brand-specific classes
 * 
*/
.faded-logo-bg {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='477' height='510' viewBox='0 0 477 510'%3E%3Cpath fill='%236D7A84' fill-rule='evenodd' d='M287.087 274.615H477C467.605 406.293 364.565 510 238.846 510c-47.077.08-93.117-14.764-132.284-42.65l180.525-192.735ZM75.42 69.034l176.134 188.045L77.44 442.967C29.844 396.348 0 329.394 0 255c0-73.342 28.998-139.445 75.42-185.966ZM238.846 0c125.731 0 228.772 103.72 238.148 235.385H283.198l-178.95-191.06C143.89 15.374 190.815-.08 238.845 0Z' opacity='.05'/%3E%3C/svg%3E");
	background-size: auto 115%;
	background-repeat: no-repeat;
	background-position: left;
}

.orange-textured-bg {
	position: relative;
}

.orange-textured-bg::before {
	content: '';
	display: block;
	position: absolute;
	width: 110%;
	height: 110%;
	background-image: url(assets/images/orange-textured-bg.webp);
	background-size: cover;
	background-repeat: no-repeat;
	z-index: -1;
	top: 0;
	right: 0;
}

.width-100 {
	width: 100%;
}

.z-index-low {
	z-index: 1;
}

.z-index-high {
	z-index: 10;
}

.display-none {
	display: none;
}

/** Home page mobile stuff */
@media screen and (min-width: 2000px) {
	.home-hero {
    	min-height: 1070px !important;
        aspect-ratio: 16/9 !important;
    }
    
	.home-hero .wp-block-heading {
    	font-size: 4rem !important;
    }
    
    .home-hero .wp-block-heading mark:last-child {
    	font-size: 3.25rem !important;
    }
}

@media screen and (max-width: 991px) {
	.home-hero {
		--wp--preset--font-size--xx-large: clamp(1rem, 3vw, 2rem);
		aspect-ratio: 1.5/1 !important;
	}

	.home-hero img {
		width: 100%;
		height: auto;
	}

	.home-intro .wp-block-columns .wp-block-column:last-child {
		padding-left: 0 !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}
}

@media screen and (max-width: 781px) {
	.home-intro>.wp-block-group {
		background-image: none !important;
		padding-top: 0 !important;
		padding-right: 0 !important;
	}

	.home-intro .wp-block-columns {
		border: none;
	}

	.home-intro .faded-logo-bg {
		padding: 0 !important;
	}

	.home-intro .wp-block-columns .wp-block-column:last-child {
		padding-right: 0 !important;
	}

	/** Recent Projects */
	.recent-projects .is-layout-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
	}

	.recent-projects .is-layout-grid li:last-child {
		display: none;
	}
}

@media screen and (max-width: 600px) {

	/** Recent Projects */
	.release-wrapper {
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-bottom: var(--wp--preset--spacing--30) !important;
	}
}

@media screen and (max-width: 450px) {
	.home-hero {
		--wp--preset--font-size--xx-large: clamp(1rem, 2.5vw, 2rem);
		aspect-ratio: unset !important;
        --wp--preset--spacing--60: 1rem;
	}

	.home-hero img {
		z-index: 3;
	}

	.home-hero *:not(img) {
		z-index: 5;
	}

	/** Quick links */
	.quick-links .wp-block-button {
		width: 100%;
	}
}

/** FORMS */
input,
select,
textarea {
	background-color: transparent;
	color: #fff;
	border: 2px solid #fff;
	padding: 16px 12px;
	border-radius: 5px;
	box-shadow: var(--wp--preset--shadow--natural);
	font-size: var(--wp--preset--font-size--medium);	
}

input[type="number"] {
	max-width: 200px;
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent-3);
}

/** Ninja Forms */
.label-right .field-wrap {
	flex-wrap: wrap;
}

.label-right .checkbox-wrap .nf-field-label {
	width: 90%;
}

.nf-form-fields-required {
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--50);
}

.nf-error-msg {
	font-size: var(--wp--preset--font-size--small);
}

.nf-field-label label {
	font-size: var(--wp--preset--font-size--medium);	
	font-weight: normal;
}

.nf-field h2 {
	font-size: var(--wp--preset--font-size--large);	
}

.nf-field h3 {
	font-size: var(--wp--preset--font-size--huge);
	padding: var(--wp--preset--spacing--30);
	border: 2px solid var(--wp--preset--color--accent-3);
	display: inline-block;
	border-radius: 5px;
}

.nf-field-description {
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--20);
}

#nf-field-30-wrap .nf-field-label {
	font-size: var(--wp--preset--font-size--small);
}