/*
 Theme Name:   AMS Designgymnasiet Child
 Theme URI:    https://designgymnasiet.se/
 Description:  AMS Child Theme for Design Gymnasiet
 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
*/

/* Subheading text stroke */
@supports (-webkit-text-stroke: 1px black) {
	.c-heading__sub {
		-webkit-text-fill-color: transparent;
		-webkit-text-stroke: 1px var(--subheading-color);
	}
}

/* Change highlight word */
.highlight {
	--highlight-svg-width: 100%;
	--highlight-svg-height: 0.25em;

	position: relative;
	isolation: isolate;
	color: inherit !important;
}

.highlight::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc((var(--highlight-svg-height) - 0.2em) * -1);
	width: var(--highlight-svg-width);
	height: var(--highlight-svg-height);
	background: #000;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='var(-highlight-svg-width)' height='var(--highlight-svg-height)' preserveAspectRatio='none' viewBox='0 0 300 41' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M300 15.8856C299.84 16.6489 299.685 17.4069 299.525 18.1702H299.52C253.139 9.06374 206.726 11.3857 160.286 16.841C197.416 19.7715 234.547 22.7074 271.677 25.6379C271.741 26.3105 271.8 26.983 271.864 27.6503C270.476 28.1093 269.051 29.0435 267.7 28.9527C247.587 27.5862 227.495 25.7713 207.366 24.7198C192.111 23.9244 176.812 23.9991 161.53 23.7963C141.091 23.5187 120.647 23.2145 100.208 23.1985C92.6124 23.1985 85.0165 24.1486 77.4154 24.3675C67.6684 24.645 57.9161 24.6183 48.1691 24.7465C47.2029 24.7571 46.1887 24.7678 45.2866 25.0507C41.3206 26.2944 37.4666 28.1413 33.4152 28.8086C29.4331 29.4598 25.2535 28.9527 20.4334 27.4795C24.5596 25.814 28.6858 24.1486 33.586 22.1736C36.1909 15.3624 41.374 13.4355 50.8434 13.7931C65.1062 14.3322 79.4224 13.7611 93.7066 13.302C108.669 12.8216 123.62 11.9675 138.572 11.1882C148.057 10.6971 157.537 10.0459 166.985 8.41251C111.498 2.20455 56.1172 2.90915 0.838048 11.2896C0.560478 10.6437 0.282908 9.99786 0 9.35198C2.95719 7.99616 5.80762 5.79161 8.88758 5.42329C26.0329 3.38956 43.1942 1.19035 60.4196 0.256218C73.9084 -0.475073 87.4933 0.576491 101.036 0.779331C108.429 0.891427 115.832 0.640546 123.214 0.982171C146.845 2.0711 170.46 3.38956 194.091 4.55856C208.925 5.29518 223.807 5.44998 238.593 6.7204C257.19 8.31643 275.713 10.7185 294.246 12.9871C296.253 13.2326 298.084 14.882 300 15.8856ZM29.4064 37.5787C31.5469 39.1107 33.949 40.7921 36.383 40.8348C48.1851 41.043 60.0032 41.0804 71.7946 40.68C95.8738 39.858 119.942 38.689 144.022 37.7122C165.165 36.8528 186.303 35.988 207.452 35.2995C214.316 35.0753 221.234 34.9632 228.061 35.5343C246.434 37.0716 264.77 39.0627 283.132 40.7121C285.086 40.8882 287.136 39.9754 289.148 39.5644C255.562 27.2713 104.954 27.4207 29.4064 37.5787Z' /%3E%3C/svg%3E%0A");
	mask-image: url("data:image/svg+xml,%3Csvg width='var(-highlight-svg-width)' height='var(--highlight-svg-height)' preserveAspectRatio='none' viewBox='0 0 300 41' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M300 15.8856C299.84 16.6489 299.685 17.4069 299.525 18.1702H299.52C253.139 9.06374 206.726 11.3857 160.286 16.841C197.416 19.7715 234.547 22.7074 271.677 25.6379C271.741 26.3105 271.8 26.983 271.864 27.6503C270.476 28.1093 269.051 29.0435 267.7 28.9527C247.587 27.5862 227.495 25.7713 207.366 24.7198C192.111 23.9244 176.812 23.9991 161.53 23.7963C141.091 23.5187 120.647 23.2145 100.208 23.1985C92.6124 23.1985 85.0165 24.1486 77.4154 24.3675C67.6684 24.645 57.9161 24.6183 48.1691 24.7465C47.2029 24.7571 46.1887 24.7678 45.2866 25.0507C41.3206 26.2944 37.4666 28.1413 33.4152 28.8086C29.4331 29.4598 25.2535 28.9527 20.4334 27.4795C24.5596 25.814 28.6858 24.1486 33.586 22.1736C36.1909 15.3624 41.374 13.4355 50.8434 13.7931C65.1062 14.3322 79.4224 13.7611 93.7066 13.302C108.669 12.8216 123.62 11.9675 138.572 11.1882C148.057 10.6971 157.537 10.0459 166.985 8.41251C111.498 2.20455 56.1172 2.90915 0.838048 11.2896C0.560478 10.6437 0.282908 9.99786 0 9.35198C2.95719 7.99616 5.80762 5.79161 8.88758 5.42329C26.0329 3.38956 43.1942 1.19035 60.4196 0.256218C73.9084 -0.475073 87.4933 0.576491 101.036 0.779331C108.429 0.891427 115.832 0.640546 123.214 0.982171C146.845 2.0711 170.46 3.38956 194.091 4.55856C208.925 5.29518 223.807 5.44998 238.593 6.7204C257.19 8.31643 275.713 10.7185 294.246 12.9871C296.253 13.2326 298.084 14.882 300 15.8856ZM29.4064 37.5787C31.5469 39.1107 33.949 40.7921 36.383 40.8348C48.1851 41.043 60.0032 41.0804 71.7946 40.68C95.8738 39.858 119.942 38.689 144.022 37.7122C165.165 36.8528 186.303 35.988 207.452 35.2995C214.316 35.0753 221.234 34.9632 228.061 35.5343C246.434 37.0716 264.77 39.0627 283.132 40.7121C285.086 40.8882 287.136 39.9754 289.148 39.5644C255.562 27.2713 104.954 27.4207 29.4064 37.5787Z' /%3E%3C/svg%3E%0A");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: var(--highlight-svg-width) var(--highlight-svg-height);
	mask-size: var(--highlight-svg-width) var(--highlight-svg-height);
	z-index: -1;
}

/* Add border on header and footer */
.header_wrapper {
	border-bottom: 1px solid #F0EBEB;
}

.ams-footer {
	border-top: 1px solid #F0EBEB;
}

/* Offset classic hero with content background */
@media (max-width: 63.9988em) {
	.ams-hero--classic.has-content-bg .ams-hero__container.u-justify-end {
		width: calc(100% - var(--ams-space-md)*2);
		margin-left: auto;
		margin-right: auto;
		align-items: center;
	}
}

.ams-hero--classic.has-content-bg .u-justify-end .ams-hero__content {
	margin-bottom: calc((var(--hero-content-height) / 2) * -1);
}

@media (min-width: 64em) {
	.ams-hero--classic.has-content-bg .u-justify-end .ams-hero__content {
		margin-right: var(--ams-space-fluid-3xl-6xl);
	}
}

/* Form */
body .ams-form__submit-wrapper > button,
body .ams-form__submit-wrapper > button:visited {
	color: #E02F11 !important;
	background-color: #fff !important;
}

body .ams-form__submit-wrapper > button:hover {
	color: #fff !important;
	background-color: #C3290F !important;
}

body .ams-form__submit-wrapper > button:active {
	color: #fff !important;
	background-color: #B3260E !important;
}

.ams-form__not-validated {
	color: #111 !important;
	background-color: #F0EBEB !important;
}

.ams-form__not-validated-text {
	color: #111 !important;
}

body .ams-form__form-wrapper.ams_active_form_state_form .container-checkmark:not(.site__text-color--dark) .checkmark {
	background-color: #fff !important;
	border-color: #fff !important;
	box-shadow: 0 0 0 1px #fff !important;
}

body .ams-form__form-wrapper.ams_active_form_state_form .container-checkmark:not(.site__text-color--dark):hover .checkmark,
body .ams-form__form-wrapper.ams_active_form_state_form .container-checkmark:not(.site__text-color--dark) input:checked ~ .checkmark {
	background-color: #E02F11 !important;
	border-color: #E02F11 !important;
	box-shadow: 0 0 0 1px #E02F11 !important;
}

body .ams-form__form-wrapper.ams_active_form_state_form .container-checkmark:hover .checkmark::after,
body .ams-form__form-wrapper.ams_active_form_state_form .container-checkmark:hover .checkmark::before,
body .ams-form__form-wrapper.ams_active_form_state_form .container-checkmark input:checked ~ .checkmark::after,
body .ams-form__form-wrapper.ams_active_form_state_form .container-checkmark input:checked ~ .checkmark::before {
	border-color: #fff !important;
}

body .ams-form__checkbox-dropdown .container-checkmark {
	margin-bottom: 0;
}

body .ams-form__checkbox-dropdown .ams-form__box-wrapper:focus-within::after {
	content: none;
}

/* Form dropdown checkboxes */
body .ams-form__checkbox-dropdown li:hover label {
	color: #111 !important;;
	background-color: #fff !important;
}

body .ams-form__checkbox-dropdown li > .container-checkmark input:not(:checked) ~ .checkmark {
	border-color: #111 !important;
	box-shadow: none !important;
}

body .ams-form__checkbox-dropdown li > .container-checkmark:hover input:not(:checked) ~ .checkmark,
body .ams-form__checkbox-dropdown li > .container-checkmark input:checked ~ .checkmark {
	background-color: #e02f11 !important;
	box-shadow: none !important;
}

body .ams-form__checkbox-dropdown li > .container-checkmark:hover .checkmark::before,
body .ams-form__checkbox-dropdown li > .container-checkmark:hover .checkmark::after {
	border-color: #fff !important;
}

body .ams-form__checkbox-dropdown input[type="checkbox"]:focus ~ .checkmark {
	outline: none !important;
}

.ams-form__not-validated .ams-form__checkbox-wrapper .ams-form__dropdown-button{
	border-color: #111 !important;
	color: #111;
}

.ams-form__not-validated .ams-form__dropdown-button #arrow2 svg path{
	fill: #111 !important;
}

/* Change hero font size on front page */
.home .ams-hero .c-heading,
.home .ams-hero .c-heading__sub {
	font-size: clamp(3rem, 2.0909rem + 3.8788vw, 5rem);
}

/* Menu CTA */
.top-menu-wrapper .cta-top:active {
	background-color: #B3260E !important;
}

/* Sub menu */
#ams_nav_menu .sub-menu li:hover a,
#ams_nav_menu .sub-menu li.current-menu-item > a,
body .ams_active_menu_state_menu #ams_nav_menu .sub-menu li.current-menu-item > a {
	color: #111 !important;
}

/* Change heading colors */
.wp-block-heading :where(h1, h2) {
	color: #E02F11;
}

.wp-block-heading :where(h3, h4, h5, h6) {
	color: #111;
}

/* Map Block Marker Card */
.location-module .gm-style-iw-d .site__text-color {
	color: #111;
}

.location-module .gm-style-iw-d .global_body-color {
	padding: 1.5rem !important;
}

.location-module .gm-style-iw-d .close-info-box {
	font-size: 14px;
}

/* Search Icon and Breadcrumbs Icon */
#searchform .fa-search,
.breadcrumbs-module .fa-angle-right {
	color: #111;
}

/* Search */
#search-wrapper .entry-title a{
	color: #111111;
}

#search-wrapper .page-title {
	margin: 0;
	border-bottom: 1px solid #202024 !important;
}

#search-wrapper .page-title span {
	font-weight: inherit;
}

.search-results article:hover {
	background-color: #F0EBEB;
}

body .ui-autocomplete.ui-widget-content li,
body .ui-autocomplete.ui-widget-content{
	color: #111;
	border-top-color: #111;
}

/* Pagination */
#search-wrapper .page-item a {
	color: #111;
	font-family: "Indivisible" !important;
}

.pagination .page-link.current::before {
	background-color: #111;
}
.pagination,
.pagination .page-item {
	border-color: #111;
	color: #111;
}

/* We need this because container has overflow hidden and custom headings
 * need to be overflow. This can be removed once we have removed overflow
 * hidden on container i.e. once filter nav is changed for mobile.
 */
.l-stacked > * {
	overflow: initial;
}