@import 'utils/reset.css';
@import 'utils/variables.css';

@import './blocks/avatar.css';
@import './blocks/button.css';
@import './blocks/carousel.css';
@import './blocks/projects.css';
@import './blocks/contact.css';
@import './blocks/cta.css';
@import './blocks/form.css';
@import './blocks/gallery.css';
@import './blocks/header.css';
@import './blocks/headline.css';
@import './blocks/home.css';
@import './blocks/industries.css';
@import './blocks/keyfacts.css';
@import './blocks/nav.css';
@import './blocks/panel.css';
@import './blocks/services.css';
@import './blocks/footer.css';
@import './blocks/skip-link.css';

@import 'utils/animations.css';
@import 'utils/auto-grid.css';
@import 'utils/default-grid.css';
@import 'utils/dev.css';
@import 'utils/flex.css';
@import 'utils/flow.css';
@import 'utils/font.css';
@import 'utils/fullbleed.css';
@import 'utils/wrapper.css';

@view-transition {
  navigation: auto;
}

html, body {
  margin: 0;
  padding: 0;
	scroll-behavior: smooth;
}

body {
	max-width: 2560px;
	margin: 0 auto;
	background: white;
	color: var(--color-dark-shade);
	line-height: 1.5;
  font-family:"Segoe UI",Roboto, Inter,"Helvetica Neue",Arial,sans-serif;
	font-size: var(--size-500);
	font-feature-settings: "kern";
	font-kerning: normal;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;

	&.waiting {

		cursor: wait;
		
		&::before {
			content: '';
			position: fixed;
			inset: calc(50% + .5rem);
			z-index: 1001;
			width: 2rem;
			height: 2rem;
			background: transparent;
			border-radius: 50%;
			border: 3px solid ;
			border-color: #fff3 #fff3 #fff3 #fff;
			animation: rotate 1s infinite linear normal forwards;
			opacity: 1 !important;
		}

		&::after {
			content: '';
			position: fixed;
			inset: 50%;
			z-index: 1000;
			background: var(--color-secondary-glare);
			--size: 3rem;
			min-width: var(--size);
			min-height: var(--size);
			padding: 1ex;
			border-radius: var(--size);
		}
	}
}

a:not([class]) {
	color: currentColor;
	text-decoration-color: var(--color-quinary);
}

:focus:not(:hover) {
	outline: 2px dashed var(--color-primary);
	outline-offset: 0.25rem;
}

blockquote em {
	&::before {
		content : '“';
	}
	&::after {
		content: '”'
	}
	&::after, &::before {
		color: var(--color-light-shade);
	}
}

main:focus {
	outline: none !important;
}

h1,
h2,
h3,
h4 {
	font-weight: 900;
  letter-spacing: -.025ex;
	font-family: "Plus Jakarta Sans";
	/* @include apply-utility('font', 'sans'); */
	/* @include apply-utility('leading', 'flat'); */
}

hr {
	max-width: 80rem;
	margin-inline: auto;
	border: solid currentColor;
	border-width: 1px 0 0 0;
}

ul {
	list-style: square;
	& ::marker {
		color: var(--color-secondary-glare);
	}
}

/* High contrast selection because it can help visually-impaired */
/* folks read the text easier */
::selection {
	color: var(--color-light-shade);

	/* We set this as an RGBA because that’s how you get a solid color, by using 0.99 */
	/* alpha value. Browsers are wild. */
	background: var(--color-dark-shade);
}

/* Scrollbar styles*/
::-webkit-scrollbar {
	width: .3rem;
	height: .3rem;
}

::-webkit-scrollbar-track {
	background-color: var(--color-light-shade);
	border: 1px solid transparent;
	border-radius: 0;
}

::-webkit-scrollbar-thumb {
	background-color: var(--color-secondary);
	border-radius: 0.15rem;
}

.visually-hidden {
  border: 0;
    clip: rect(0 0 0 0);
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

@media screen and (max-width: 82rem) {
	.hero-intro {
		opacity: 0;
	}
}