/*
.oooooo..o  o8o      .                                                     o8o                           .    o8o                        
d8P'    `Y8  `"'    .o8                                                     `"'                         .o8    `"'                        
Y88bo.      oooo  .o888oo  .ooooo.       ooo. .oo.    .oooo.   oooo    ooo oooo   .oooooooo  .oooo.   .o888oo oooo   .ooooo.  ooo. .oo.   
 `"Y8888o.  `888    888   d88' `88b      `888P"Y88b  `P  )88b   `88.  .8'  `888  888' `88b  `P  )88b    888   `888  d88' `88b `888P"Y88b  
     `"Y88b  888    888   888ooo888       888   888   .oP"888    `88..8'    888  888   888   .oP"888    888    888  888   888  888   888  
oo     .d8P  888    888 . 888    .o       888   888  d8(  888     `888'     888  `88bod8P'  d8(  888    888 .  888  888   888  888   888  
8""88888P'  o888o   "888" `Y8bod8P'      o888o o888o `Y888""8o     `8'     o888o `8oooooo.  `Y888""8o   "888" o888o `Y8bod8P' o888o o888o 
                                                                                 d"     YD                                                
                                                                                 "Y88888P'                                                
*/

/* Basic styling of a general site navigation with a mobile-friendly hamburger menu and a 
skip to content button for screen readers */

.skip-to-content {
  position: absolute;
  right: 0; 
  padding: var(--_);
  transform: translateY(-100%);
  transition: transform var(--transition-speed);
}

.skip-to-content:focus {
  transform: translateY(0);
}


.site-navigation {
  transform: translateY(-100%);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 33% 45% 22%;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  transition: transform 0s;
}

.site-navigation.transition {
  transition: transform var(--transition-speed);
}

.site-navigation[active] {
  transform: translateY(0);
  transition: transform var(--transition-speed);
}

.site-navigation[active].transition {
  transition: transform var(--transition-speed);
}


@media screen and (min-width: 800px) {
  .site-navigation {
    transform: unset;
    display: block;
    justify-content: unset;
    align-items: unset;
    flex-direction: unset;
    position: unset;
    inset: unset;
    transition: transform 0s !important;
  }
}


.site-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-navigation li {
  position: relative;
  padding-block: var(--space);
}

@media screen and (min-width: 800px) {
  .site-navigation li {
    padding-block: unset;
  }
}

.site-navigation a {
  display: block;
  text-decoration: none;
}

.site-navigation[active] ul {
  display: block;
}

.site-navigation-title {
  justify-self: center;
}

.site-navigation-open,
.site-navigation-close {
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.site-navigation-open {
  padding: 1rem;
  margin: -1rem;
}



.site-navigation-social {
  display: flex;
  gap: var(--space);
  margin-block: var(--space);
  justify-content: center;
}

.site-navigation-close {
  justify-self: center;
}


@media screen and (min-width: 800px) {
  .site-navigation-open {
    display: none;
  }

  .site-navigation ul,
  .site-navigation[active] ul {
    display: flex;
    gap: calc(3 * var(--space));
  }

  .site-navigation-close {
    display: none;
  }

  .site-navigation-social {
    display: none;
  }

  .site-navigation .site-navigation-title {
    display: none;
  }
}