:root {
  --header-height: 3rem;
  --nav-popover-default-height: 21rem;
  --nav-popover-max-height: calc(100dvh - var(--header-height));
  --nav-popover-header-height: 2rem;
}

#nav-panel-our-company {
  --nav-popover-default-height: 14rem;
}

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

html, body {
  background: #F3F3F3;
  margin: 0;
  padding: 0;
}

header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 2rem;
  background: white;
  box-shadow: 3px 3px 3px -1px rgb(74 73 74 / 0.5); 
  height: var(--header-height);
  padding: 0 1rem;
  width: 100%;
  
  h1 {
    color: #5b2c6f;
    margin: 0;
  }
  
  nav.main-nav > ul { 
    --nav-text-color: #2c2e33;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding-inline: 0.5rem;
    
    & > li > :is(button, a[href]) {
      border: none;
      background: none;
      color: var(--nav-text-color);
      cursor: pointer;
      font-size: 1rem;
      font-weight: bold;
      padding: 0.25rem;
      text-decoration: none;
      
      &:focus, &:hover {
        background: lch(from var(--nav-text-color) 95 c h);
      }
    
    li > button::after {
      content: "▼" / "";
      padding-left: 0.25rem;
    }
  }

header nav.main-nav [popover] {
  border: none;
  box-shadow: 3px 3px 3px -1px rgb(74 73 74 / 0.5);
  margin: 0;
  height: min(var(--nav-popover-default-height), var(--nav-popover-max-height));
  padding: 1rem 3rem;
  top: var(--header-height);
  width: 100%;

  a[href] {
    color: black;
    text-decoration: none;
    
    &:focus, &:hover {
      text-decoration: underline;
    }
  }
 
  h2 {
    color: #3c6378;
    font-size: 1.25rem;
    height: var(--nav-popover-header-height);
    margin: 0;
  }
  
  ul {
    font-size: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    
    ul > li {
      margin-top: 0.25rem;
    }
  }
  
  & > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1rem;
    height: calc(100% - var(--nav-popover-header-height));
    
    & > li > a[href] {
      color: #3c6378;
      font-weight: bold;
    }
  }
}

header button.mobile-menu-btn {
  display: none;
  background: white;
  border: 0.125rem solid #556270;
  padding: 0.25rem;
  
  div.icon {
    height: 1.75rem;
    aspect-ratio: 1;
    background: linear-gradient(#34495e 50%,#0000 0) top/100% 40% repeat-y;
  }
}

header #mobile-nav[popover] {
  border: none;
  inset: var(--header-height) 0 0;
  height: var(--nav-popover-max-height);
  margin: 0;
  padding: 0 1rem;
  width: 100%;
  
  & > * {
    margin-bottom: 1rem;
  }
  
  h2 {
    color: #3c6378;
    font-size: 1.25rem;
    margin-block: 1em 0.5em;
  }
  
  details {
    background: #ddeedd;
    
    summary {
      background: white;
      padding: 0.5rem 0;
    }
    
    ul li {
      margin-bottom: 0.5rem;
    }
  }
}

main {
  padding: 1rem;
}

@media screen and (max-width: 760px) {
  header {
    justify-content: space-between;
   
    nav.main-nav {
      display: none;
    }
    
    button.mobile-menu-btn {
      display: inline-block;
    }
  }
}