/*
Theme Name: RecoData Theme
Author: Saud
Version: 1.0
Text Domain: reco-data-theme
*/

html {
  box-sizing: border-box;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100%;
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: calc(1.5rem * (0 / 100));
  line-height: calc(1.5rem * 1.6);
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  background: #0E0F10;
  color: white;
}

.f-heading,
h1,
h2 {
  font-family: "Cascadia Code", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
/*   text-transform: uppercase; */
}

h1 {
  font-size: 56px;
  line-height: 1.1;
  font-weight: 700;
}

h2 {
  font-size: 45px;
  line-height: 1.2;
  font-weight: 600;
}

h3 {
  font-size: 36px;
  line-height: 1.25;
}

h4 {
  font-size: 28px;
  line-height: 1.3;
}

h5 {
  font-size: 22px;
  line-height: 1.4;
}

h6 {
  font-size: 18px;
  line-height: 1.5;
}

.footer-menu:not(:has(ul)) {
	display: none;
}

#main-header {
	position: sticky;
	top: 0;
	z-index: 555;
	background: #0e0f10;
}

.header-grid {
	width: 100%;
	align-items: center;
	display: grid;
	grid-template-columns: 1fr auto;
}

#toggleOpen {
	padding: 10px;
	margin: -10px;
}

#toggleClose {
	margin-top: 13px;
}

.header-social {
	display: flex;
	gap: 10px;
	margin-top: 30px !important;
	justify-content: center;
}

@media (min-width: 1024px) {
	.header-social {
		display: none;
	}

	.header-menu-container .header-link {
		display: none;
	}
}

.header-menu-container {
	display: flex; flex-direction: column;
}

.footer-logo {
	max-width: 200px;
	flex: 0 0 150px
}

.header-logo svg {
	width: 11rem;
	height: auto;
}

.wysiwyg {
	p:not(:last-child) {
		margin: 0 0 1em;	
	}
	
	ul {
		list-style-type: disc;
		padding: 0 0 0 1em;
		margin: 0 0 1em;
	}
	
	ol {
		list-style-type: decimal;
		padding: 0 0 0 1em;
		margin: 0 0 1em;
	}
}

.bottom-footer-menu {
	display: flex;
	gap: 0 20px;
	flex-wrap: wrap;
	justify-content: center;
}

.bottom-footer-menu a {
	cursor: pointer;
	font-size: 14px;
	color: #fff;
	opacity: 0.4;
	white-space: nowrap;
	transition: opacity 0.3s ease-in-out;
	
	&:hover {
		opacity: 1;
	}
}

body .BeaconFabButtonFrame {
	bottom: 80px;
}

#pen-report {
	min-height: 1050px;
}

@media (max-width: 639px) {
	.footer-logo {
		flex: auto;
	}
	
	.bottom-footer-menu {
		display: block;
		text-wrap: balance;
		text-align: center;
	}
	
	.bottom-footer-menu .menu-item {
		display: inline-block;
		margin: 0 10px;
	}
}