@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: #{$primary};
			--icon-block-color: #{color-contrast($primary)};
			--icon-block-background-hover: #{lighten($primary, 10%)};
			--icon-block-color-hover: #{color-contrast(lighten($primary, 10%))};
			--counter-color: #{color-contrast($gray-200)};
			--background: #{$gray-200};
			--contrast-color: #{darken($dark, 5%)};
		}
	}
}

.coyote{
	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.5;
	}
	p{
		line-height: 1.6;
		margin-top: .5rem;
		margin-bottom: .5rem;
	}
	@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;
	}

	.top-5{
		top: 2rem;
	}
	.buttons-wrapper{
		display: flex;
		flex-wrap: wrap;
		column-gap: 1rem;
		row-gap: 1rem;
		&:not([class*='my-']){
			&:not([class*='mb-']){
				margin-bottom: 1rem;
			}
			&:not([class*='mt-']){
				margin-top: 1rem;
			}
		}
	}
	.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: .75;
	}
	.br-0{
		border-radius: 0;
	}

	.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;
		        }
		    }
		}
	}
}