/*
 Theme Name:   AMS Westra Aros Child
 Theme URI:    https://westraaros.se/
 Description:  AMS Child Theme for Westra Aros
 Author:       Academedia WDT
 Author URI:   http://academedia.se/
 Template:     ams
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  ams
*/

/* Decorative icon in heading */
.heading-decor .c-heading {
	--heading-icon-width: 32px;
	--heading-icon-height: 33px;
	--heading-space: var(--ams-space-sm);
}

.heading-decor .c-heading:not(:has(.c-heading__sub.is-below))::after,
.heading-decor .c-heading__sub.is-below::before {
	content: '';
	display: block;
	width: var(--heading-icon-width);
	height: var(--heading-icon-height);
	background-color: var(--ams-color-button-bg);

	mask-image: url("img/svg/compass.svg");
	mask-repeat: no-repeat;
	mask-size: contain;
}

.heading-decor .c-heading:not(:has(.c-heading__sub.is-below))::after {
	margin-block-start: var(--ams-space-sm);
}

.heading-decor .c-heading__sub.is-below::before {
	margin-block-end: var(--ams-space-sm);
}

.heading-decor .is-center .c-heading:not(:has(.c-heading__sub.is-below))::after,
.heading-decor .is-center .c-heading__sub.is-below::before {
	margin-inline: auto;
}

@media (min-width: 768px) {
	.heading-decor .is-left\@md .c-heading:not(:has(.c-heading__sub.is-below))::after,
	.heading-decor .is-left\@md .c-heading__sub.is-below::before {
		margin-inline: unset;
	}

	.heading-decor .is-center\@md .c-heading:not(:has(.c-heading__sub.is-below))::after,
	.heading-decor .is-center\@md .c-heading__sub.is-below::before {
		margin-inline: auto;
	}
}

@media (min-width: 1024px) {
	.heading-decor .is-left\@lg .c-heading:not(:has(.c-heading__sub.is-below))::after,
	.heading-decor .is-left\@lg .c-heading__sub.is-below::before {
		margin-inline: unset;
	}

	.heading-decor .is-center\@lg .c-heading:not(:has(.c-heading__sub.is-below))::after,
	.heading-decor .is-center\@lg .c-heading__sub.is-below::before {
		margin-inline: auto;
	}
}


/* ====================================================== */
/* Form styling 										  */
/* ====================================================== */
.ams-form__form-wrapper {
    --dark-green: #19382F;
    --dark-purple: #42173D;
    --light-green: #B8D1B8;
    --light-purple: #C9ADD4;
    --beige: #EDE5DE;
    --focus-color-light-blue: #00FDFF;
    --focus-color-dark-blue: #0433FF;
}

/* *******************************/
/* Base form styles */
/* *******************************/
.ams-form__form-wrapper .ams-form__headline {
    font-family: "Belleza" !important;
}

.ams-form__form-wrapper :is(input, textarea, span.checkmark):not(.ams-form__event-session-box span.checkmark) {
    background-color: var(--beige);
    border-radius: 0.5rem;
}

.ams-form__form-wrapper .ams-form__event-session-box span.checkmark{
 background-color: var(--dark-purple);
 border-radius: 0.5rem;
}

.ams-form__form-wrapper .ams-form :is(input, textarea, span.checkmark):not(.ams-form__event-session-box span.checkmark):active {
    background-color: var(--beige) !important;
}

.ams-form__form-wrapper .ams-form__label input:focus,
.ams-form__form-wrapper .ams-form__label textarea:focus,
.ams-form__form-wrapper .ams-form__label input:focus ~ .checkmark,
.ams-form__form-wrapper .ams-form__submit-wrapper .ams-form__submit:focus-visible {
    box-shadow: none !important;
    outline-width: 2px;
    outline-style: solid;
    outline-offset: 2px;
}

.ams-form__form-wrapper .ams-form .container-checkmark input:focus,
.ams-form__form-wrapper .ams-form .container-checkmark textarea:focus,
.ams-form__form-wrapper .ams-form .container-checkmark input:focus ~ .checkmark {
    box-shadow: none !important;
}

.ams-form__form-wrapper .ams-form .container-checkmark input:checked ~ .checkmark,
.ams-form__form-wrapper .ams-form .container-checkmark:hover input:not(:checked) ~ .checkmark,
.ams-form__form-wrapper .ams-form .container-checkmark:hover input:checked ~ .checkmark {
    background-color: var(--beige) !important;
}

/* *******************************/
/* Shared theme rules */
/* *******************************/

/* Class vs. Background Color cheat sheet
    - site__primary-bg - dark green background #19382F
    - site__secondary-bg--100 - dark purple background #42173D
    - site__cta-bg--25 - light green background #B8D1B8
    - site__cta-bg--13 - light purple background #C9ADD4
*/

/** Dark backgrounds **/
.ams-form__form-wrapper:is(.site__primary-bg, .site__secondary-bg--100),
.ams-form__form-wrapper:is(.site__primary-bg, .site__secondary-bg--100) .ams-form__consent .container-checkmark {
    color: var(--beige);
}

.ams-form__form-wrapper:is(.site__primary-bg, .site__secondary-bg--100) .checkmark {
    box-shadow: none;
}

.ams-form__form-wrapper:is(.site__primary-bg, .site__secondary-bg--100) .ams-form__label input:focus,
.ams-form__form-wrapper:is(.site__primary-bg, .site__secondary-bg--100) .ams-form__label textarea:focus,
.ams-form__form-wrapper:is(.site__primary-bg, .site__secondary-bg--100) .ams-form__label input:focus ~ .checkmark {
    outline-color: var(--focus-color-light-blue);
}

.ams-form__form-wrapper:is(.site__primary-bg, .site__secondary-bg--100) .ams-form__submit:focus,
.ams-form__form-wrapper:is(.site__primary-bg, .site__secondary-bg--100) .ams-form__submit:focus-visible {
    outline: 2px solid var(--focus-color-light-blue) !important;
    outline-offset: 2px;
}

/** Dark green checkmark borders **/
.ams-form__form-wrapper:is(.site__primary-bg, .site__cta-bg--25, .site__cta-bg--13) .container-checkmark .checkmark::after,
.ams-form__form-wrapper:is(.site__primary-bg, .site__cta-bg--25, .site__cta-bg--13) .container-checkmark .checkmark::before {
    border-color: var(--dark-green);
}

.ams-form__form-wrapper:is(.site__primary-bg, .site__cta-bg--25, .site__cta-bg--13) .container-checkmark:hover .checkmark::after,
.ams-form__form-wrapper:is(.site__primary-bg, .site__cta-bg--25, .site__cta-bg--13) .container-checkmark:hover .checkmark::before,
.ams-form__form-wrapper:is(.site__primary-bg, .site__cta-bg--25, .site__cta-bg--13) .container-checkmark:hover input:checked ~ .checkmark::before,
.ams-form__form-wrapper:is(.site__primary-bg, .site__cta-bg--25, .site__cta-bg--13) .container-checkmark:hover input:checked ~ .checkmark::after {
    border-color: var(--dark-green);
}

/** Light backgrounds **/
.ams-form__form-wrapper:is(.site__cta-bg--25, .site__cta-bg--13),
.ams-form__form-wrapper:is(.site__cta-bg--25, .site__cta-bg--13) .ams-form__headline {
    color: var(--dark-green);
}

.ams-form__form-wrapper:is(.site__cta-bg--25, .site__cta-bg--13) .ams-form__label input:focus,
.ams-form__form-wrapper:is(.site__cta-bg--25, .site__cta-bg--13) .ams-form__label textarea:focus,
.ams-form__form-wrapper:is(.site__cta-bg--25, .site__cta-bg--13) .ams-form__label input:focus ~ .checkmark {
    outline-color: var(--focus-color-dark-blue);
}

.ams-form__form-wrapper:is(.site__cta-bg--25, .site__cta-bg--13) .ams-form__submit:focus,
.ams-form__form-wrapper:is(.site__cta-bg--25, .site__cta-bg--13) .ams-form__submit:focus-visible {
    outline: 2px solid var(--focus-color-dark-blue) !important;
    outline-offset: 2px;
}

/* *******************************/
/* Theme-specific styles */
/* *******************************/

/** Dark Green background **/
.ams-form__form-wrapper.site__primary-bg .ams-form__headline,
.ams-form__form-wrapper.site__primary-bg .ams-form__label {
    color: var(--light-green);
}

/** Dark Purple background **/
.ams-form__form-wrapper.site__secondary-bg--100 .ams-form__headline,
.ams-form__form-wrapper.site__secondary-bg--100 .ams-form__label {
    color: var(--light-purple);
}

.ams-form__form-wrapper.site__secondary-bg--100 .container-checkmark .checkmark::after,
.ams-form__form-wrapper.site__secondary-bg--100 .container-checkmark .checkmark::before {
    border-color: var(--dark-purple);
}

.ams-form__form-wrapper.site__secondary-bg--100 .container-checkmark:hover .checkmark::after,
.ams-form__form-wrapper.site__secondary-bg--100 .container-checkmark:hover .checkmark::before,
.ams-form__form-wrapper.site__secondary-bg--100 .container-checkmark:hover input:checked ~ .checkmark::before,
.ams-form__form-wrapper.site__secondary-bg--100 .container-checkmark:hover input:checked ~ .checkmark::after {
    border-color: var(--dark-purple);
}

.ams-form__form-wrapper.site__secondary-bg--100 .ams-form__dropdown-button.ams-form__checkbox-wrapper.ams-form__checkbox-dropdown {
	background-color: var(--beige);
}
.ams-form__form-wrapper.site__secondary-bg--100 .ams-form__dropdown-button.ams-form__checkbox-wrapper.ams-form__checkbox-dropdown #arrow2>svg>path{
    fill: currentColor;
}

.ams-form__form-wrapper.site__secondary-bg--100 .ams-form__checkbox-dropdown.ams-form__select-list .ams-form__box-wrapper:hover label.container-checkmark {
	background-color: var(--light-purple) !important;
	color: var(--dark-purple) !important;
}

.ams-form__form-wrapper.site__secondary-bg--100 .aca-dropdown-selection__item{
	background-color: var(--beige);
	color:var(--dark-purple)
}

.ams-form__form-wrapper.site__secondary-bg--100 .ams-form__submit {
    background-color: var(--light-green);
    color: var(--dark-green);
}

/** Light Green background **/
.ams-form__form-wrapper.site__cta-bg--25 .ams-form__submit {
    background-color: var(--dark-purple);
    color: var(--light-purple);
}

/** Light Purple background **/
.ams-form__form-wrapper.site__cta-bg--13 .ams-form__submit {
    background-color: var(--dark-green);
    color: var(--light-green);
}

/* *******************************/
/* Error states */
/* *******************************/

/** Dark Green background **/
.ams-form__form-wrapper.site__primary-bg .ams-form__not-validated {
    background-color: var(--light-purple);
}

.ams-form__form-wrapper.site__primary-bg .ams-form__not-validated.ams-form__label,
.ams-form__form-wrapper.site__primary-bg .ams-form__not-validated-text,
.ams-form__form-wrapper.site__primary-bg .ams-form__not-validated .ams-form__consent .container-checkmark {
    color: var(--dark-purple);
}

.ams-form__form-wrapper.site__primary-bg .ams-form__not-validated input,
.ams-form__form-wrapper.site__primary-bg .ams-form__not-validated textarea,
.ams-form__form-wrapper.site__primary-bg .ams-form__not-validated span.checkmark {
    border: 1px solid var(--dark-green);
}

/** Dark Purple background **/
.ams-form__form-wrapper.site__secondary-bg--100 .ams-form__not-validated {
    background-color: var(--light-green);
}

.ams-form__form-wrapper.site__secondary-bg--100 .ams-form__not-validated.ams-form__label,
.ams-form__form-wrapper.site__secondary-bg--100 .ams-form__not-validated-text,
.ams-form__form-wrapper.site__secondary-bg--100 .ams-form__not-validated .ams-form__consent .container-checkmark {
    color: var(--dark-green);
}

.ams-form__form-wrapper.site__secondary-bg--100 .ams-form__not-validated input,
.ams-form__form-wrapper.site__secondary-bg--100 .ams-form__not-validated textarea,
.ams-form__form-wrapper.site__secondary-bg--100 .ams-form__not-validated span.checkmark {
    border: 1px solid var(--dark-purple);
}

/** Light Green background **/
.ams-form__form-wrapper.site__cta-bg--25 .ams-form__not-validated {
    background-color: var(--dark-purple);
}

.ams-form__form-wrapper.site__cta-bg--25 .ams-form__not-validated.ams-form__label,
.ams-form__form-wrapper.site__cta-bg--25 .ams-form__not-validated-text,
.ams-form__form-wrapper.site__cta-bg--25 .ams-form__not-validated .ams-form__consent .container-checkmark {
    color: var(--light-purple);
}

/** Light Purple background **/
.ams-form__form-wrapper.site__cta-bg--13 .ams-form__not-validated {
    background-color: var(--dark-green);
}

.ams-form__form-wrapper.site__cta-bg--13 .ams-form__not-validated.ams-form__label,
.ams-form__form-wrapper.site__cta-bg--13 .ams-form__not-validated-text,
.ams-form__form-wrapper.site__cta-bg--13 .ams-form__not-validated .ams-form__consent .container-checkmark {
    color: var(--light-green);
}

/** Shared error colors **/
.ams-form__form-wrapper:is(.site__primary-bg, .site__secondary-bg--100) .ams-form__not-validated input:focus,
.ams-form__form-wrapper:is(.site__primary-bg, .site__secondary-bg--100) .ams-form__not-validated textarea:focus,
.ams-form__form-wrapper:is(.site__primary-bg, .site__secondary-bg--100) .ams-form__not-validated input:focus ~ .checkmark {
    outline-color: var(--focus-color-dark-blue);
}

.ams-form__form-wrapper:is(.site__cta-bg--25, .site__cta-bg--13) .ams-form__not-validated input:focus,
.ams-form__form-wrapper:is(.site__cta-bg--25, .site__cta-bg--13) .ams-form__not-validated textarea:focus,
.ams-form__form-wrapper:is(.site__cta-bg--25, .site__cta-bg--13) .ams-form__not-validated input:focus ~ .checkmark {
    outline-color: var(--focus-color-light-blue);
}