/*
Theme Name: Catalyst
Theme URI: 
Author: BasedOn for Catalyst by KPC
Author URI: 
Description: Block theme for Catalyst Association Management website
Requires at least: 7.0-RC3
Tested up to: 7.0-RC3
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: catalyst
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

/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.
 */

/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.
 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* 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;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}


header:has(.site-header) {
	position: sticky;
	top: 0;
	z-index: 99999;
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.15);
	background-color: white;

	& .nav-row {
		*:any-link {
			color: var(--wp--preset--color--c-deep-blue);
			text-decoration: none;

			&:hover, &:focus-visible {
				color: var(--wp--preset--color--c-pillow-blue);
				text-decoration: none;
			}
		}
	}
}

.site-header-logo-container {
	width: clamp(160px, 19.23076923%, 250px);
	height: auto;

	svg {
		width: 100%;
		height: auto;
	}
}


.wp-block-accordion-heading__toggle-icon {
    font-size: 0; /* Hide the + */
    width: auto;
}

.wp-block-accordion-heading__toggle-icon::before {
    content: "";
    font-size: 1rem;
    display: inline-block;
	width: 25px;
	height: 15px;
    transition: transform 0.2s;
	background-image: url('data:image/svg+xml,<svg width="25" height="15" viewBox="0 0 25 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.688 1.06055L12.3743 12.3743L1.06057 1.06054" stroke="%234454BB" stroke-width="3"/></svg>');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 25px 15px;
}

.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon::before {
    transform: rotate(180deg);
}

.wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
    transform: none;
}


.home-hero {
	position: relative;
	margin: 0;
	padding: 30px 0 30px 0;

	&::before {
		position: absolute;
		content: "";
		display: block;
		width: 25%;
		height: 30px;
		top: 0;
		right: 0;
		background-image: url('data:image/svg+xml,<svg width="360" height="60" viewBox="0 0 360 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.5057 0H360V60L0 60L25.5057 0Z" fill="%234454BB"/></svg>');
		background-position: top left;
		background-repeat: no-repeat;
		background-size: 180px 30px;
		z-index: 0;
	}

	&::after {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 60px;
		bottom: 0;
		left: 0;
		background-image: url('data:image/svg+xml,<svg width="1440" height="120" viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M51.2154 0L1011 0L958.324 120H0L51.2154 0Z" fill="%23732099"/></svg>');
		background-position: 50% 0% !important;
		background-repeat: no-repeat !important;
		background-size: 720px 60px !important;
		z-index: 100;
	}
	
	.wp-block-media-text__media img {
        object-fit: cover !important;
        mask-image: url('data:image/svg+xml,<svg width="1027" height="560" viewBox="0 0 1027 560" xmlns="http://www.w3.org/2000/svg"><path d="M238.812 0H1026.4V560L0 560L238.812 0Z" fill="black"/></svg>');
        mask-repeat: no-repeat;
        mask-position: left center;
        mask-size: cover;
	}	

	@media (width  > 782px) {
		padding: 60px 0 60px 0;

		&::before {
			height: 60px;
			background-size: 360px 60px;
		}

		&::after {
			height: 120px;
			background-position: right 391px 0% !important;
			background-size: 1440px 120px !important;
		}
	}


	@media (width > 1440px) {

		&::before {
			background-position: top right;
		}
		&::after {
			background-position: 0% 0% !important;
		}
	}
}


.catalyst-cta {
	position: relative;
	color: white !important;
	background-color: black !important;
	background-repeat: no-repeat !important;
	background-position: 50% 0% !important;
	background-size: 800px auto !important;

	&::after {
		position: absolute;
		content: "";
		display: block;
		inset: 0;
		background-image: linear-gradient(180deg,rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1) 50%);
		z-index: 2;
	}

	.cta-content {
		position: relative;
		z-index: 3;
	}

	@media (width  > 782px) {
		background-position-x: right 160px !important;
		background-position-y: 50% !important;
		background-size: 1024px auto !important;

		&::after {
			position: absolute;
			content: "";
			display: block;
			inset: 0;
			background-image: linear-gradient(90deg,rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 50%);
			z-index: 2;
		}
	}
	@media (width  > 1024px) {
		background-position-x: 0% !important;
		background-position-y: 50% !important;
		background-size: auto 100% !important;
	}
	@media (width > 1440px) {
		background-position-x: 0% !important;
		background-position-y: 50% !important;
		background-size: 70% auto !important;
	}

}


.wpcf7-form {

	label {
		font-size: 1rem;
		text-transform: capitalize;
		font-weight: 500;
	}
	input {
		&:not([type="submit"], [type="button"], [type="reset"]) {
			border: 1px solid #ccc;
			padding: 0.5em;
			border-radius: 0;

			font-size: 1.25rem;
			width: 100%;
		}

		&:is([type="submit"], [type="button"], [type="reset"]) {
			border: none;
			padding: 1rem 1.75rem;
			border-radius: 9999px;
			background-color: var(--wp--preset--color--c-deep-blue);
			color: white;
			font-size: 1.25rem;
			cursor: pointer;
			text-transform: uppercase;
		}
	}

	select,
	::picker(select) {
	appearance: base-select;
	font: -webkit-small-control;
	}

	/* hide checkmark */
	option::checkmark {
	display: none;
	}

	/* change from button to select itelf to style the button */
	select {
	border: 1px solid #ccc;
	border-radius: 0;
	padding: 0.5em 0.5em;
	transition-duration: 0.25s;
	align-items: center;
	font-size: 1.25rem;
	}

	option {
	font-size: 1.25rem;
	padding: 0.5rem 1rem;
	transition-duration: 0.25s;
	place-items: initial;
	align-items: center;
	}

	option:hover,
	option:focus-visible {
		background: #eaeaea;
	}

	.material-symbols-outlined svg {
	opacity: 0.75;
	width: 1.2rem;
	height: 1.5rem;
	}


	selectedcontent .text {
		display: none;
	}

	.arrow {
	}

	::picker(select) {
		border: none;
		padding: 0.5rem 0;
		overflow-x: hidden;
		border-radius: 5px;
		width: calc-size(auto, size + 0.5rem);
		transition: width 0.5s;
		/*  resets from UA  */
		min-inline-size: 0;
		box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11);
	}

	select:has(:popover-open) button {
	background: lightgray;
	}

	textarea {
		border: 1px solid #ccc;
		padding: 0.5em;
		border-radius: 0;

		font-size: 1.25rem;
		width: 100%;
	}
}



.site-main {
	position: relative;

	&::after {
		position: absolute;
		content: "";
		display: block;
	 	bottom: 0;
		left: 0;
		width: 150px;
		height: 50px;

		background-image: url('data:image/svg+xml,<svg width="300" height="100" viewBox="0 0 300 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H300L256.167 100H9.0826e-07L0 0Z" fill="%234454BB"/></svg>');
		background-position: top right;
		background-repeat: no-repeat;
		background-size: 150px 50px;
		z-index: 1000;
	}

	@media (width > 782px) {

		&::after {
			width: 300px;
			height: 100px;
			background-size: 300px 100px;
		}
	}
}

.page-title {
	position: relative;
	margin-block: 0 !important;
	padding: 3.63rem 0 !important;
	color: white;
	background-color: var(--wp--preset--color--c-deep-purple);

	h1, h2, h3, h4, h5, h6 {
		position: relative;
		z-index: 2;
	}

	&::before {
		position: absolute;
		content: "";
		display: block;
		top: 0;
		left: 0;
		width: min(174px, 12%);
		height: 100%;

		background-image: url('data:image/svg+xml,<svg width="174" height="180" viewBox="0 0 174 180" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 8.53073e-05L174 0L94.836 180H0V8.53073e-05Z" fill="%234454BB"/></svg>');
		background-position: top right;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 0;
	}
}

footer:has(.site-footer) {
	margin-top: 0 !important;
}

.site-footer {
	position: relative;
	margin-block: 0 !important;
	padding-block: 100px 200px !important;
	color: white;
	background-color: var(--wp--preset--color--c-purple);

	.icon-container.has-white-color {
		color: white !important;
		fill: white !important;

		& path {
			fill: white !important;
		}
	}

	&::before {
		position: absolute;
		content: "";
		display: block;
		top: 0;
		left: 0;
		width: min(25%, 286px);
		height: 100px;

		background-image: url('data:image/svg+xml,<svg width="573" height="100" viewBox="0 0 573 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H572.615L528.782 100H0V0Z" fill="%23732099"/></svg>');
		background-position: top right;
		background-repeat: no-repeat;
		background-size: 286px 50px;
		z-index: 1;
	}

	&::after {
		position: absolute;
		content: "";
		display: block;
		bottom: 0;
		right: 0;
		width: min(37%, 237px);
		height: 100px;

		background-image: url('data:image/svg+xml,<svg width="475" height="200" viewBox="0 0 475 200" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42.6151 100H474.286V200H0L42.6151 100Z" fill="%234454BB"/><path d="M239.654 0H474.286V100H196.993L239.654 0Z" fill="%23732099"/></svg>');
		background-position: top left;
		background-repeat: no-repeat;
		background-size: 237px 100px;
		z-index: 1;
	}


	@media (width > 782px) {

		&::before {
			width: min(50%, 573px);
			height: 100px;
			background-size: 573px 100px;
		}

		&::after {
			width: min(75%, 475px);
			height: 200px;
			background-size: 475px 200px;
		}

	}

}