/*
Theme Name: Extendable child
Template: extendable
*/
:root {
	--indiv-background: hsl(206, 60%, 7%);
	--indiv-dark-blue: hsl(210, 41%, 30%);
	--indiv-light-blue: hsl(204, 41%, 59%);
	--indiv-light-blue-hover: hsl(204, 41%, 79%);
	--indiv-red: hsl(0, 55%, 54%);
	--indiv-red-cast: hsla(0,55%,54%,25%);

	--cgi-button: var(--indiv-light-blue);
	/* 	--cgi-button: hsl(204, 41%, 59%); */
	--cgi-button-hover: var(--indiv-light-blue-hover);
	--cgi-form-bg: var(--indiv-dark-blue);
}

#fp-alert {
	border: 2px solid var(--indiv-red);
	border-radius: 1rem;
	background-color: var(--indiv-red-cast);
	padding: 1rem;
	margin-bottom: 4rem;

	h3 {
		margin-top: 0;
	}

	.button-container {
		display: flex;
		justify-content: flex-end;

		.wp-block-button {
			display: inline-block;
			margin-bottom: -3rem;
		}
	}
}

/* ====== Fix Bizarre Huge Logo ============ */
.wp-block-site-logo img {
	max-height: 42px !important;
	height: auto !important;
	width: auto !important;
}

.wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title .site-title {
	color: var(--indiv-red) !important;
}

.has-modal-open .wp-block-navigation__responsive-container-close {
	background-color: var(--indiv-dark-blue) !important;
}

/* ================== */

@view-transition {
	navigation: auto;
}

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
	color: #000;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--indiv-light-blue);
	border: 1px solid #00000026;
}

#linkspage {
	.link {
		list-style: none;

		a {
			display: block;
			width: 500px;
			max-width: 70vw;
			color: var(--indiv-background);
			background-color: var(--indiv-light-blue);
		}

		a:hover {
			background-color: var(--indiv-light-blue-hover);
			color: var(--indiv-background)
		}

		p {
			display: none;
		}
	}

	ul {
		padding-inline-start: 0;
	}
}

.makedifference {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: var(--wp--custom--typography--font-weight--semi-bold);
	letter-spacing: -0.02em;
	line-height: var(--wp--custom--typography--line-height--tiny);
}

.makedifference strong {
	color: var(--indiv-light-blue);
}

/* Login form style override */
.ur-submit-button,
.user-registration-Button {
	background: var(--cgi-button) !important;
	border-color: var(--cgi-button) !important;

	:hover {
		background: var(--cgi-button-hover) !important;
		border-color: var(--cgi-button-hover) !important;
		background: greenyellow !important;
	}
}

#ur-frontend-form {
	background-color: var(--cgi-form-bg) !important;
	/*   background-color: #6C9FC2 !important; */
}

.user-registration-LostPassword>a:nth-child(1) {
	color: var(--indiv-light-blue) !important;
}

#user_registration_user_state {
	color: white;
}

.user-registration-logout-swal2-container .swal2-modal .swal2-header h2 {
	color: var(--indiv-light-blue);
}

.user-registration-logout-swal2-container .swal2-modal .swal2-content {
	color: white;
}

#user-registration.vertical .user-registration-MyAccount-content__header h1 {
	color: var(--indiv-light-blue);
}

#user-registration.horizontal .user-registration-MyAccount-navigation-link a {
	color: white;
}

#user-registration.horizontal .user-registration-MyAccount-content__body .ur-frontend-form.login .ur-form-row .ur-form-grid fieldset .user-registration-form-row label,
#user-registration.vertical .user-registration-MyAccount-content__body .ur-frontend-form.login .ur-form-row .ur-form-grid fieldset .user-registration-form-row label {
	color: white;
}

/* password reset form style override */

.ur-message-container {
	/*   background-color:  #6C9FC2 !important; */
	background-color: var(--cgi-form-bg) !important;

	.ur-message-content {
		padding: 2rem;
	}
}

/* registration form override */
#user-registration {
	padding: 2rem;
	color: white;
}

#user-registration p {
	color: white;
}

.user-registration {
	/* 	background-color: var(--cgi-form-bg) !important; */
	background-color: hsl(210, 41%, 30%) !important;
}

body.user-registration-membership_page_user-registration-login-forms #user-registration:not(.user-registration-MyAccount) .ur-form-row .ur-form-grid .ur-field-item label:not(.user-registration-error),
body.user-registration-membership_page_user-registration-login-forms .user-registration:not(.user-registration-MyAccount) .ur-form-row .ur-form-grid .ur-field-item label:not(.user-registration-error),
body.user-registration-page #user-registration:not(.user-registration-MyAccount) .ur-form-row .ur-form-grid .ur-field-item label:not(.user-registration-error),
body.user-registration-page .user-registration:not(.user-registration-MyAccount) .ur-form-row .ur-form-grid .ur-field-item label:not(.user-registration-error) {
	color: white !important;
}

#user-registration.horizontal .user-registration-MyAccount-content__body h2,
#user-registration.vertical .user-registration-MyAccount-content__body h2 {
	color: white;
}


#user-registration.horizontal .user-registration-MyAccount-content__body p a,
#user-registration.vertical .user-registration-MyAccount-content__body p a {
	color: var(--indiv-light-blue);
}

#user-registration>div>div.user-registration-MyAccount-content__body>div>header>h3 {
	color: var(--indiv-red);
}

membership_page_user-registration-login-forms #user-registration:not(.user-registration-MyAccount) .ur-frontend-form .user-registration-form .ur-form-row .ur-form-grid .user-registration-register a,
body.user-registration-membership_page_user-registration-login-forms .user-registration:not(.user-registration-MyAccount) .ur-frontend-form .user-registration-form .ur-form-row .ur-form-grid .user-registration-register a,
body.user-registration-page #user-registration:not(.user-registration-MyAccount) .ur-frontend-form .user-registration-form .ur-form-row .ur-form-grid .user-registration-register a,
body.user-registration-page .user-registration:not(.user-registration-MyAccount) .ur-frontend-form .user-registration-form .ur-form-row .ur-form-grid .user-registration-register a {
	color: var(--indiv-light-blue);
}

/* logout popup override */
.swal2-modal {
	background-color: var(--cgi-form-bg);
}

.swal2-actions {
	background-color: var(--cgi-form-bg) !important;
}

/* body > div.swal2-container.swal2-center.user-registration-swal2-container.user-registration-logout-swal2-container.swal2-backdrop-show > div > div.swal2-actions >  */
button.swal2-confirm.swal2-styled {
	background-color: var(--indiv-red) !important;
}

/* Event override */

#em-wrapper {
	.em {
		--main-bg: var(--indiv-background);
		/* 		var(--cgi-form-bg); */
		--theme-hue: 210;
		/* hsl(204, 41%, 79%); */
		--accent-hue: 204;
		--accent-s: 41%;
		--accent-l: 79%;
		/* 	
		--text-color-richer: hsl(var(--theme-hue), 0%, 95%);
    --text-color-normal: hsl(var(--theme-hue), 0%, 87%);
    --text-color-softer: hsl(var(--theme-hue), 0%, 67%); 
	*/
		--default-color: var(--indiv-light-blue);
		/* 	--background-color: var(--indiv-dark-blue); */
		--background-color: var(--indiv-background);
		--meta-color: var(--indiv-light-blue);
		--default-border: var(--indiv-dark-blue) !important;
		--text-color-normal: var(--indiv-light-blue);

		/*     
    --accent-s: 86%;
    --accent-l: 57%;
    --text-color-richer: hsl(var(--theme-hue), 0%, 5%);
    --text-color-normal: hsl(var(--theme-hue), 0%, 13%);
    --text-color-softer: hsl(var(--theme-hue), 0%, 33%);
    --accent-color: hsl(var(--accent-hue), var(--accent-s), var(--accent-l));
    --accent-color-hover: hsl(var(--accent-hue), calc(var(--accent-s) - 10%), calc(var(--accent-l) - 8%));
    --border-color: hsl(var(--theme-hue), 0%, 73%);
    --border-color-softer: hsl(var(--theme-hue), 0%, 82%);
    --background-color: transparent;
    --background-color-softer: hsl(var(--theme-hue), 0%, 95%);
    --background-color-checkboxes: white;
    --background-color-inputs: white;
    --background-color-skeleton: #ededed;
    --background-color-skeleton-softer: hsl(var(--theme-hue), 0%, 95%);
    --code-background: hsl(var(--theme-hue), 0%, 95%);
    --button-primary-color: white;
    --font-weight: 400;
    --font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --grid-max-width: 960px;
    --button-icon-padding: 20px;
    --counter-background: #F36752;
    --counter-color: #fff;
    --counter-background-tentative: #ddd;
    --counter-color-tentative: #888;
    --font-size: 16px;
    --line-height: 20px;
    --default-color: #666666;
    --default-border: #4b86b4;
    --palette-1-bg: #03396c;
    --palette-1-color: #FFFFFF;
    --meta-color: #787878;
    --meta-bg: transparent;
    --main-bg: #F5F5F5;
    --main-h3-color: #777777;
    --main-border-color: #cdcdcd; 
*/
		.em-search-form {
			--background-color: var(--indiv-light-blue-hover);
			--accent-color: var(--indiv-dark-blue);
			--border-color: var(--indiv-dark-blue);
		}

		/* .em.pixelbones {
			background-color: var(--indiv-background) !important;
		} */

		.em-list .em-item .em-item-info {
			border-left: 4px solid var(--indiv-red) !important;
		}

		.em-item-header {
			--default-border: var(--indiv-dark-blue) !important;
		}

		.em-calendar .em-cal-nav {

			.month input,
			.month span.marker,
			.em-month-picker {
				border: var(--indiv-light-blue) !important;
				color: var(--indiv-light-blue-hover) !important;
			}

			.em-calnav-today {
				color: var(--indiv-light-blue-hover) !important;
			}

			.month-nav .em-calnav-today.is-today {
				opacity: 1;
			}
		}
	}
}

.em-event-content,
.em.pixelbones {
	color: var(--indiv-light-blue-hover) !important;
}

.front-page-events .em-view-container .em-list {
	display: block;
}

/* .em.em-list .em-item {
    background-color: var(--cgi-form-bg);
} */

/* phone menu dialog */
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
	color: white;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--indiv-background);
}

/* blog post featured image */
.wp-block-post-featured-image :where(img) {
	object-fit: contain !important;
}

.hideps p {
	display: none;
}

/* Blog list title links */
a:where(:not(.wp-element-button)) {
	color: var(--indiv-light-blue);
	text-decoration: underline;
}

/*--------------------------------*
 * FastAction Signup form styling
 *--------------------------------*/
.csgsignup {
	.at-inner {
		background-color: var(--indiv-dark-blue);

		header.at-title {
			background-color: var(--indiv-dark-blue);
			color: var(--indiv-light-blue-hover);
			font-family: Montserrat;
		}
	}

	.at-form-submit .at-submit.btn-at.btn-at-primary {
		background-color: var(--indiv-light-blue);
	}

	.at [class^="at-markup "] p {
		background-color: var(--indiv-dark-blue);
		color: var(--indiv-light-blue-hover);
	}

	.at-fields {
		background-color: var(--indiv-dark-blue);
		color: var(--indiv-light-blue-hover);
	}

	.at .at-row label,
	.at * span {
		color: var(--indiv-light-blue-hover);
	}

	fieldset.at-fieldset legend.at-legend {
		color: var(--indiv-light-blue-hover);
		font-family: Montserrat;
	}

	.fastAction.clearfix {
		background: var(--indiv-dark-blue);
	}

	.at .HeaderHtml h1,
	.multistep-layout .HeaderHtml h1 {
		font-family: Montserrat;
		background-color: var(--indiv-dark-blue);
		color: var(--indiv-light-blue-hover);
	}

	.multistep-layout.split-layout .HeaderHtml h1 {
		background-color: var(--indiv-dark-blue);
		color: var(--indiv-light-blue-hover);
	}

}