@import "utils";
@import "scss/variables";
@import "scss/vendor/bootstrap/bootstrap";

@import "components";
@import "header";
@import "scss/wcag";
$body-font-weight: $font-weight-normal;
$border-radius-lg: min(($border-radius * 3), 3rem);
@if $font-weight-bold <= 400{
	$body-font-weight: $font-weight-bold;
}
$header-fontfamily: ocyanlist("header-font-family");
$body-color: color-contrast($body-bg);

@mixin btn-open{
    small{
        display: flex;
        align-items: center;
        gap: .5rem;
    }
    span{
        position: relative;
        display: inline-block;
        overflow: hidden;
        span{
            transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
            transform-style: preserve-3d;
            transition: .2s ease;
            display: block;
            &:nth-child(2){
                position: absolute;
                top: 100%;
            }
        }
    }
    &:hover{
        span{
            span{
                transform: translate3d(0px, -100%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
            }
        }
    }
}

html body{
	--bs-gutter-x: 1rem;
	font-weight: $body-font-weight;
	p, li, small, .form-control{
		font-weight: $body-font-weight;
	}
	h1, .h1{
		line-height: 150%;
		@include media-breakpoint-up(xl){
			font-size: $font-size-base * 4.5;
			margin-bottom: 2rem;
		}
		@include media-breakpoint-down(xl){
			font-size: $font-size-base * 2.25;
			margin-bottom: 1rem;
		}
	}
	h2, .h2{
		line-height: 150%;
		@include media-breakpoint-up(xl){
			margin-bottom: 2rem;
			font-size: $font-size-base * 3.5;
		}
		@include media-breakpoint-down(xl){
			margin-bottom: 1rem;
			font-size: $font-size-base * 2.5;
		}
	}
	h3, .h3{
		line-height: 150%;
		@include media-breakpoint-up(xl){
			margin-bottom: 1rem;
			font-size: $font-size-base * 2.5;
		}
		@include media-breakpoint-down(xl){
			margin-bottom: .5rem;
			font-size: $font-size-base * 1.5;
		}
	}
	h1, h2, h3,
	.h1, .h2, .h3{
		line-height: 150%;
		font-family: $header-fontfamily;
		font-weight: $headings-font-weight;
		line-height: 110%;
	}
	h4, .h4{
		line-height: 150%;
	}

	p{
		font-size: $font-size-base;
		line-height: 165%;
		&:not(:first-child):not([class*="m"]){
			margin-top: 1rem;
		}
	}
	.btn{
		@include btn-open;
	}
	.text-muted{
		color: inherit;
		opacity: .75;
	}
	.btn, .btn small{
		font-weight: min($headings-font-weight, 600);
	}
	.form-control{
		padding: .65rem 1.25rem;
	}
	.btn{
		padding: .65rem 1.25rem;
		&.btn-lg{
			padding: .75rem 1.5rem;
			font-size: $font-size-base * 1.2;
		}
	}
	.top-3{
		top: 1rem;
	}
	.top-4{
		top: 2rem;
	}
}