/*

	Call-out action box with a button
	Sample three elements box
		the list of services cards

*/


html {
	--blue-color: 135, 206, 235;
	--lilac-color: 200, 162, 200;
	--gold-color: 231, 210, 124;

	font-family: "Comic Sans MS", "Comic Neue", /*"Marker Felt",*/ "Georgia", sans-serif;
	color: black;
	background: white;
}

/*
	mask-image with a few cloud shapes
*/

body {
	background: url("sky.jpeg") fixed;
	background-size: cover;
}

html, body {
	margin: 0px;
	padding: 0px;
}

* {
	box-sizing: border-box;
}

p, li, dt, dd {
	line-height: 1.5em;
	font-size: 18px;
}

.callout-bar {
	background: rgb(var(--blue-color));
	display: flex;
	box-shadow: 0px 3px 6px #aaa;
	position: relative;
	z-index: 2;

	& > a {
		color: black;
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 33%;
		text-align: center;
		margin: 8px;
		border: solid 1px currentColor;
		padding: 0.5em;
		text-decoration: none;
		white-space: nowrap;

		&:hover {
			color: white;
		}
	}
}

header nav {
	display: flex;
	flex-wrap: wrap;
	background-color: white;
	justify-content: center;
	padding: 1.25em 1em;
	font-size: 14px;

	& .nav-item {
		padding: 0px 1em;

		&:has(.nav-list)::after {
			content: "\2304";
		}
	}
	& .nav-list {
		display: none;

		& a {
			display: block;
			padding: 0.5em 1.0em;
			& + a {
				border-top: solid 2px #999;
			}
		}

		&.showing {
			display: block;
			position: absolute;
			width: 20em;
			background: white;
			margin-top: 0.25em;
			border: solid 1px black;
		}
	}

	& a {
		color: inherit;
		text-decoration: inherit;
		text-transform: uppercase;
		letter-spacing: 4px;
	}
}

#legal {
	display: flex;
	flex-wrap: wrap;
	font-size: 9px;
	padding: 1em 0px;
	justify-content: center;
	background: white;

	& a {
		padding: 0px 1em;
		color: #aaa;
		text-decoration: inherit;

		& + a {
			border-left: solid 1px currentColor;
		}
	}
}

main {
	min-height: 70vh;
}

.plainbg-box-content {
	background: white;
	color: black;

	& h2 {
		font-size: 32px;
		text-transform: uppercase;
		color: rgb(var(--lilac-color));
		text-align: center;

		& > a {
			color: inherit;
			text-decoration: inherit;
		}
	}
}

.picture-box-content {

	> .content-container {
		display: flex;
		flex-wrap: wrap;

		& > .text-box {
			border: solid 1px black;
			border-radius: 24px;
			padding: 3em;
			background: white;
			flex-grow: 1;
			flex-shrink: 1;
			flex-basis: 50%;
		}

		& > .image-box {
			flex-grow: 1;
			flex-basis: 50%;

			mask-image: url("cloud-pattern.png");
			mask-size: contain;
			mask-repeat: no-repeat;
		}
	}
}

.transparent-bg-content {
	background: transparent;
	text-shadow: 0px 0px 5px black;

	& h2 {
		color: rgb(var(--gold-color));
		text-align: center;
		font-size: 36px;

		& > a {
			color: inherit;
			text-decoration: inherit;
		}
	}
}

.blue-box-content {
	background: rgba(var(--blue-color), 0.8);

	& h2 {
		color: white;
		text-shadow: 0px 0px 5px black;
		font-size: 32px;
		text-align: center;

		& > a {
			color: inherit;
			text-decoration: inherit;
		}
	}

}

.lilac-box-content {
	background: rgba(var(--lilac-color), 0.8);

	& h2 {
		color: white;
		text-shadow: 0px 0px 5px black;
		font-size: 32px;
	}
}

.gold-box-content {
	background: rgba(var(--gold-color), 0.8);
}

.content-container {
	padding: 1em;
}

#where-bar {
	display: flex;
	flex-wrap: wrap;
	background: white;
	padding: 3em 2em;
	align-items: center;

	& li {
		margin: 1em 0.25em;
	}

	& > * {
		flex: 1;
	}
}

#copyright {
	padding: 1em;
	background: rgb(var(--blue-color));
	text-align: center;
}

#page-header {
	color: white;
	text-shadow: 0px 0px 5px black;
	text-align: center;
	padding: 4em 1em;
}

.call-to-action-button {
	border-radius: 4px;
	padding: 0.5em 1.0em;
	background: rgb(var(--gold-color));
	color: black;
	text-decoration: none;
	border: solid 1px white;
}

.card-stack {
	display: flex;
	flex-wrap: wrap;
	& > .card {
		flex: 1;
		text-align: center;

		& > a > span {
			display: block;
		}

		& > a,
		& > h3 {
			display: block;
			font-size: 22px;
			color: rgb(var(--gold-color));
			text-shadow: 0px 0px 5px black;
		}
	}
}

.plainbg-box-content .card-stack > .card {
	& > a,
	& > h3 {
		text-shadow: none;
		color: black;
	}

	& img {
		height: 325px;
	}
}

.card {
	margin-bottom: 4em;
}

form {
	& div {
		margin: 1em;
	}

	& input {
	}

	& label > span {
		display: block;
		font-weight: bold;
	}
}

details {
	& summary {
		font-size: 18px;
		margin-bottom: 1em;
		cursor: pointer;
	}

	& p {
		padding-left: 2em;
	}
}

#contact .icon {
	max-width: 1em;
	max-height: 1em;
}

img.left-float {
	float: left;
	margin: 1em;
}

img.right-float {
	float: right;
	margin: 1em;
}

@supports(animation-name: test) {
	.animate:not(.animated) {
		opacity: 0;
	}

	.animated {
		animation: fadeIn 0.7s;
	}

	@keyframes fadeIn {
		0% {
			opacity: 0;
			transform: translateY(100px);
			letter-spacing: 12px;
			white-space: nowrap;
		}
		100% {
			opacity: 1;
			transform: translateY(0px);
			letter-spacing: normal;
		}
	}
}