@import "scss/variables";
@import "scss/vendor/bootstrap/functions";
@import "scss/vendor/bootstrap/variables";
@import "variables";
@import "mixins";
@import "all/base";

.coyote-outer{
	.coyote-wrapper{
		&.footer_colored{
			& > div:last-child section{
				padding-bottom: 20rem;
			}
		}
	}
	&:not(.monochrome){
		.coyote-wrapper{
			& > div{
				&:nth-child(3n-2) > section{
					@include section_white;
				}
				&:nth-child(3n-1) > section, & > section.dark{
					@include section_dark;
				}
				&:nth-child(3n) > section, & > section.light{
					@include section_light;
				}
				& > section.background_body{
					@include section_white;
				}
				& > section.dark{
					@include section_dark;
				}
				& > section.light{
					@include section_light;
				}
			}
		}
	}
	&.monochrome{
		section{
			--icon-block-background: var(--coyote-button-background);
			--icon-block-color: var(--coyote-button-text);
			--icon-block-background-hover: var(--coyote-button-hover-background);
			--icon-block-color-hover: var(--coyote-button-hover-text);
			--counter-color: var(--coyote-text-color);
			--background: var(--coyote-surface-background);
			--contrast-color: var(--coyote-accent);
		}
	}
}

.coyote{
	--coyote-shadow-soft: 0 18px 44px rgba(15, 23, 42, 0.08);
	--coyote-shadow-strong: 0 28px 72px rgba(15, 23, 42, 0.14);
	--coyote-surface-outline: color-mix(in srgb, var(--coyote-border-color) 84%, transparent);

	h2{font-size: ($cy-font-size * 3);}
	h3{font-size: ($cy-font-size * 2);}
	h4{font-size: ($cy-font-size * 1.5);}
	h1, h2, h3 ,h4, h5{
		word-break: break-word;
		margin-bottom: 0;
		line-height: 1.2;
		letter-spacing: 0;
	}
	p{
		line-height: 1.75;
		margin-top: .75rem;
		margin-bottom: .75rem;
	}
	.rich-text{
		> * + *{
			margin-top: 1.1rem;
		}
		p, li{
			color: color-mix(in srgb, currentColor 92%, transparent);
		}
	}
	@media screen and (max-width: 991px){
		h2{font-size: ($cy-font-size * 2);}
		h3{font-size: ($cy-font-size * 1.5);}
		h4{font-size: ($cy-font-size * 1.25);}
	}

	.btn{
		border-width: 2px;
		font-weight: 600;
		border-radius: var(--coyote-border-radius);
		padding: .9rem 1.5rem;
		box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
		transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
		&:hover,
		&:focus-visible{
			transform: translateY(-2px);
			box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
		}
	}

	.top-5{
		top: 2rem;
	}
	.buttons-wrapper{
		display: flex;
		flex-wrap: wrap;
		column-gap: 1rem;
		row-gap: 1rem;
		align-items: center;
		&:not([class*='my-']){
			&:not([class*='mb-']){
				margin-bottom: 1.25rem;
			}
			&:not([class*='mt-']){
				margin-top: 1.5rem;
			}
		}
	}
	.text-center{
		.buttons-wrapper{
			justify-content: center;
		}
	}
	.background-image{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		object-fit: cover;
	}
	.text-muted{
		color: inherit;
		opacity: .68;
	}
	.br-0{
		border-radius: 0;
	}

	@media screen and (min-width: 992px){
		.block-lead > .rich-text,
		.hero-lead > .rich-text{
			max-width: 58ch;
		}
	}

	.css-slider{
	    // Dit moet ook in coyote komen :]
	    @media screen and (max-width: 991px){
		    display: flex;
		    flex-wrap: nowrap;
		    overflow: scroll;
		    scroll-snap-type: x mandatory;
		    -ms-overflow-style: none;
		    scrollbar-width: none;
		    &.flex-column{
		    	flex-direction: row;
		    }
		    &::-webkit-scrollbar {
		        display: none;
		    }
		    & > div{
		        &:first-child{
		            width: calc(85% + 1rem);
		        }
		        width: 85%;
		        scroll-snap-align: center;
		        padding-right: 1rem;
		        h4, h3{
		            font-size: 1.7rem;
		        }
		        .icon-block{
		            padding: 1.5rem;
		        }
		    }
		}
	}
}
