/* Global CSS variables */
:root {
  --spacing-company: 3rem;
  --font-weight: 400;
  --border-radius: 0;
  --block-spacing-vertical: 2rem;
  --color: #2B4654 !important;
}

body > footer, body > header, body > main {
padding: 2rem;
}

html, body {
	background-color: #CBD4D7;
}

/* Typography */

h1 {
font-size: 1.6rem;
margin-bottom: 1rem;
color: #1C3837;
}

h2,
h3,
hgroup> :last-child {
  font-weight: 200;
}

small {
  color: var(--muted-color);
}

main a, footer a {
	color: #2B4654;
	text-decoration: underline;
}

/* Header */
.hero {
  background-color: #1C3837;
}

header {
  padding: var(--spacing-company) 0;
}

header hgroup> :last-child {
  color: var(--h3-color);
}

header hgroup {
  margin-bottom: var(--spacing-company);
}


/* Nav */
summary[role="link"].contrast:is([aria-current], :hover, :active, :focus) {
  background-color: transparent;
  color: var(--contrast-hover);
}

ul.menu[role="link"], ul.menu a {
	color: #A1A9B0;
	padding: 0;
	margin: .2rem;
	padding-bottom: .7rem;
	border-bottom: 3px solid #1C3837;
}

ul.menu[role="link"].active, ul.menu a.active {
	border-bottom: 3px solid #A1A9B0;
}

ul.menu[role="link"]:hover, ul.menu a:hover {
	color: #C7CBCF;
	border-bottom: 3px solid #C7CBCF;
}

ul.menu[role="link"]:focus, ul.menu a:focus {
  background-color: inherit;
}

ul.logo {
	margin-left: .1rem !important;
}

/* Nav Hamburger */

nav.container-fluid {
	background-color: var(--background-color);
  xposition: fixed;
  /* remove the 'flex-direction' to move menu to the right */
  xflex-direction: row-reverse;
	z-index: 1;
	overflow: hidden;
	align-items: center;
}

nav :is(.menu-btn, .menu-icon) {
	display: none;
	cursor: pointer;
	user-select: none;
	color: #CBD4D7;
}

@media (width < 48em) {
	nav.container-fluid {
		flex-wrap: wrap;
		& .menu-icon {
			display:block;
		}
		& >ul.menu {
			flex-direction: column;
			align-items:flex-start;
			width: 100%;
			max-height: 0;
			transition: max-height 0.3s ease-out;
      margin: 0px 10px 10px 10px;
      background-color: #234046;
      & li {
        width: 100%;
        margin: 0;
        padding-top: .3em;
        padding-bottom: .3em;
      }
      & a {
        display: block;
        text-decoration: underline;
        border-bottom: none;
        padding-bottom: 0;
      }
      & a:hover {
        background-color: 0 none;
        text-decoration: underline;
        border-bottom: none;
        padding-bottom: 0;
      }
		}
    & .menu-btn:checked ~ .menu {
      max-height: 100vh;
    }
	}
}

/* Main */
@media (min-width: 992px) {
  main .grid {
    grid-column-gap: var(--spacing-company);
    grid-template-columns: auto 25%;
  }
}

form.grid {
  grid-row-gap: 0;
}

/* Aside nav */
aside img {
  margin-bottom: 0.25rem;
}

aside p {
  margin-bottom: var(--spacing-company);
  line-height: 1.25;
}

/* Footer */

footer.container-fluid {
	padding-left: 1.5rem;
}