:root {
	--theme-primary-bg: #343399;
	--theme-secondary-bg: #ff3300;
	--theme-dark-text: #fff;
	--theme-light-text: #111;
	--theme-content-bg: #ddd;
	--theme-font: system-ui, sans-serif;
	--theme-font-headings: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

html {
    height: 100%;

	&:focus-within {
        scroll-behavior: smooth;
    }
}

body {
    font-family: var(--theme-font);
	height: 100%;
    text-rendering: optimizeSpeed;
    font-size: 16px;
    line-height: 1.5rem;
	@media (width > 1024px) {
		background: url("/images/circuit_bg_dark.webp") 0 0 repeat #000;
	}
}

:focus-visible {
    outline: 3px solid #0085b3;
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, p {
    overflow-wrap: break-word;
    hyphens: manual;
}

strong {
	font-weight: 500;
}

p {
    text-wrap: pretty;

    main & {
        max-width: 100ch;
    }
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 1rem;
    height: auto;
}

ul[class],
ol[class] {
    list-style: none;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

@media (prefers-reduced-motion: no-preference) {
    :has(:target) {
        scroll-behavior: smooth;
        scroll-padding-top: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.theme-wrapper {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	max-width: 1200px;
	margin: 0 auto;
	height: 100%;

	header {
		padding: 0.75rem 1rem 0.25rem 1rem;
		background-color: #fff;

		img {
			margin: 0 auto;
			max-width: 75%;

			@media (width > 1024px) {
				max-width: unset;
				width: 472px;
				height: 196px;
			}			
		}
	}

	nav {
		background-color: var(--theme-primary-bg);
		box-shadow: 0 2px 3px rgb(0 0 0 / 15%);
		z-index: 10;

		@media (width > 1024px) {
			justify-content: unset;
		}

		.primary-nav {
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: #17166f;
			border-top: 2px solid #0d0c59;
			display: none;
			padding: 0.5rem 0;

			@media (width > 1024px) {
				display: flex;
				flex-direction: row;
				gap: 1.25rem;
				background-color: unset;
				padding: unset;
				border-top: unset;
			}

			&.active {
				@media (width <= 1024px) {
					display: block;				
				}
			}

			li {
				&[aria-current="page"] a {
					color: #fff;
					pointer-events: none;
				}
			}
			
			a {
				display: block;
				font-family: var(--theme-font-headings);
				color: #f8931d;
				font-size: 1.75rem;
				text-transform: uppercase;
				transition: all 0.15s ease;
				text-decoration: none;
				padding: 0.75rem 1rem;
				letter-spacing: 1px;				
				text-decoration-color: transparent;
				text-underline-offset: -0.25rem;
				text-align: right;

				@media (width > 1024px) {
					text-align: unset;
				}

				&:hover {
					color: #fff;
					text-decoration: underline;
					text-decoration-color: #f8931d;
					text-decoration-thickness: 0.125rem;
					text-underline-offset: 0.25rem;
				}
			}
		}

		.mobile-menu {
			display: flex;
			justify-content: end;

			button {
				border-style: none;
				background-color: transparent;

				.menu-toggle {
					fill: #fff;
				}

				.line {
					--animation-time: 100ms;

					transition: 
						y var(--animation-time) ease-in var(--animation-time),
						rotate var(--animation-time) ease-in,
						opacity 0ms var(--animation-time)
					;
					transform-origin: center;
				}

				&[aria-expanded="true"] {
					.line {
						transition: 
							y var(--animation-time) ease-in,
							rotate var(--animation-time) ease-in var(--animation-time),
							opacity 0ms var(--animation-time)							
						;
					}

					.top {
						y: 45;
						rotate: 45deg;
					}
					.middle {
						opacity: 0;
					}
					.bottom {
						y: 45;
						rotate: -45deg;
					}
				}
			}

			@media (width > 1024px) {
				display: none;
			}
		}
	}

	main {
		display: grid;
		color: var(--theme-light-text);
		background-color: var(--theme-content-bg);
		z-index: 5;
		align-content: start;
		justify-content: center;
		font-size: 17px;
		line-height: 1.5em;
		padding: 3rem 1.5rem;

		@media (width > 1024px) {
			padding: 3rem 6rem;
		}
		
		> p {
			text-align: center;
		}

		h1, h2, h3 {
			font-family: var(--theme-font-headings);
			font-weight: 500;
			color: var(--theme-primary-bg);
			line-height: 1.1em;
		}

		h1 {
			font-size: 2.5rem;
			box-shadow: inset 0.5rem 0 0 #f8931d;
			background-color: #f0f0f0;
			padding: 0.75rem 1.5rem;
			display: block;
			min-height: 2.5rem;
			width: fit-content;
			justify-self: center;
			margin-bottom: 1rem;
		}

		> * + * {
			margin-top: 1.5rem;
		}

		.grid {
			display: grid;
			text-align: unset;

			&.col-2 {
				@media (width > 1024px) {
					grid-template-columns: repeat(2, 1fr);
				}
			}

			.contact-list {
				display: grid;
				gap: 0.5rem;
				margin-top: 1.5rem;

				li {
					display: flex;
					gap: 1rem;
				}
			}

			label {
				font-weight: 500;
				display: inline-block;
				text-align: right;
				width: 70px;
			}
		}

		.contact {
			> div {
				padding: 1rem;
			}
		}

		.map {
			border: 0.25rem solid rgb(0 0 0 / 10%);
			margin: 0 auto;
		}

		a {
			color: var(--theme-primary-bg);
			transition: all 0.15s ease;
			text-underline-offset: 0.125rem;
			text-decoration-thickness: 1px;
			background-color: transparent;

			&:hover {
				text-underline-offset: 0.25rem;
				text-decoration-thickness: 2px;
				text-decoration-color: #f8931d;
				background-color: #f0f0f0;
				box-shadow: -0.25rem 0 0 #f0f0f0, 0.25rem 0 0 #f0f0f0;
			}
		}
	}

	footer {
		font-size: 0.9rem;
		color: var(--theme-dark-text);
		text-align: center;
		padding: 0.5rem 1.25rem;
		background-color: var(--theme-primary-bg);
	}
}