@charset "UTF-8";

:root{
	--site-header-height: 5rem;
	@media ( max-width: 57rem ) {
		--site-header-height: 18.125rem;
	}
}

html {
	scroll-padding-top: calc(var(--site-header-height) + 1.5rem);
}


#site-header {
	display: flex;
	justify-content: space-between;
	position: sticky;
	top: 0;
	background: white;
	width: 100%;
	box-shadow: 0 0 1rem #0008;
	height: var(--site-header-height);
	padding: 0 1rem 0 0;
	z-index: 10;
	* {
		line-height: 1;
		align-content: center;
	}
	a {
		text-decoration: none;
	}
	.hbg_icon {
		font-size: 2rem;
		display: none;
	}
	@media ( max-width: 57rem ){
		display: grid;
		height: initial;
		justify-items: center;
		justify-content: initial;
		position: initial;
		padding: 0;
		grid-template-areas:
			"logo"
			"phone"
			"hbg"
			"nav";
		&>*{ margin-bottom: 1rem; }
		.logo_container { grid-area: logo; }
		.hgb_icon { grid-area: hbg; }
		nav { grid-area: nav; }
		.phone_link { grid-area: phone; }
	}
	@media ( max-width: 30rem ){
		.hbg_icon {
			display: initial;
		}
	}

	.logo {
		max-height: 7.5rem;
		padding: .5rem;
		background: white;
		box-shadow: 0 0 .6rem #000c;
		transition: box-shadow .7s;
		&:hover {
		box-shadow: 0 0 2rem #0008;
		}
		@media ( max-width: 57rem ){
			box-shadow: none;
			max-height: 9rem;
			&:hover { box-shadow: none; }
		}
	}

	.phone_link{
		font-size: 1.5rem;
		svg {
			vertical-align: middle;
			display: inline-block;
			height: 2rem;
			width: 2rem;
			transition: .7s;
		}
		p {
			padding: 1rem .25rem;
			background: var(--background_grey);
		}
		p:hover svg {
			transform: rotate(20deg);
		}
		a{
			text-shadow:
				1px 1px 0 black,
				1px 0px 0 black,
				1px -1px 0 black,
				0px 1px 0 black,
				0px -1px 0 black,
				-1px 1px 0 black,
				-1px 0px 0 black,
				-1px -1px 0 black;
			&:hover {
				color: var(--sentry_orange);
			}
		}
	}
	nav>ul {
		display: flex;
		flex-direction: row;
		border-bottom: .0625rem var(--sentry_orange) solid;
		a{
			display: block;
			padding: .5rem;
			border-bottom: .0625rem transparent solid;
			color: black;
		}
		ul {
			display: none;
			height: 0;
			overflow: none;
		}
		&>li:hover {
			background: var(--background_grey);
			a:hover {
				color: var(--sentry_orange);
			}
		}
		.has_children {
			&>a::after {
				content: "V";
				padding-left: .5rem;
				font-family: "Arial";
				display: inline-block;
				transform: scaleY(.66);
			}
			&:hover ul {
				display: initial;
				position: fixed;
				height: initial;
				background: var(--background_grey);
				margin-top: .0625rem;
				box-shadow: 0 0 .4rem #0005;
			}
		}
	}
	@media ( max-width: 30rem ){
		input+nav { display: none; }
		input:checked+nav { display: initial; }
		nav{ width: 100%; }
		nav>ul {
			flex-direction: column;
			background: var(--sentry_grey);
			padding: 1rem;
			&>li { background: initial !important; }
			a {
				color: white;
				&:hover { color: var(--sentry_orange); }
				border-bottom: .0625rem var(--sentry_orange) solid;
			}
			.has_children:hover ul {
				display: flex;
				background: var(--sentry_grey);
				margin-top: 0;
				position: initial;
				border: 0;
			}
			ul {
				display: flex;
				flex-direction: column;
				height: initial;
				overflow: initial;
				padding-left: 1.5rem;
				li:last-child>a { border-bottom: none; }
			}
			&>li:last-child li:last-child>a {
				border-bottom: .0625rem var(--sentry_orange) solid;
			}
			&>.has_children+li>a {
				border-top: .0625rem var(--sentry_orange) solid;
			}
			&>.has_children:hover ul {
				box-shadow: none;
			}
		}
	}
}