/* ============= Main nav ============= */

.main-nav {
    --background-color: hsla(0, 0%, 0%, 0.2);
    --background-blur-radius: 5px;
    --item-horizontal-padding: 0.7rem;
    --item-min-height: 3rem;
  
    color: white;
    /*max-width: 1280px;*/
    margin: 0 auto;
    position: relative; /* For `.main-nav::before { position: absolute; }` */
  
    background-color: var(--background-color);
    backdrop-filter: blur(var(--background-blur-radius));
  }
  
  @media (min-width: 680px) {
    /* To make nested backdrop filter works */
    /* https://stackoverflow.com/questions/60997948/backdrop-filter-not-working-for-nested-elements-in-chrome */
    .main-nav {
      background-color: initial;
      backdrop-filter: initial;
    }
  
    .main-nav::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-color: var(--background-color);
      backdrop-filter: blur(var(--background-blur-radius));
    }
  }
  
  /* Increase the touch area for mobile devices */
  .main-nav a,
  .main-nav summary {
    min-height: var(--item-min-height);
    padding: 0 var(--item-horizontal-padding);
    display: inline-flex;
    align-items: center;
  }
  
  /* Hover effects for menu items */
  .main-nav a:hover,
  .main-nav summary:hover {
    background-color: hsla(0, 0%, 100%, 0.2);
  }
  
  /* Remove staying highlight */
  .main-nav summary:focus {
    background-color: transparent;
  }
  
  /* Reset links appearance */
  .main-nav a {
    text-decoration: none;
    color: currentColor;
  }
  
  /* Reset lists appearance */
  .main-nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  /* ============= Mobile nav grid ============= */
  
  .main-nav {
    display: grid;
    grid-template-columns: auto auto;
  }
  
  .main-nav__logo {
    justify-self: start;
  }
  
  .main-nav__menu-trigger {
    justify-self: end;
  }
  
  .main-nav__menu {
    grid-column: 1 / 3;
  }
  
  /* No gird for desktop */
  @media (min-width: 680px) {
    .main-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  
  /* ============= Main menu ============= */
  
  .main-nav__menu {
    display: none;
  
    /* If placed in ...(:checked) it brakes layout on desktop (when checkbox is previously checked on mobile) */
    flex-direction: column;
  }
  
  .main-nav__menu-trigger:is(:checked) ~ .main-nav__menu {
    display: flex;
  }
  
  @media (min-width: 680px) {
    .main-nav__menu {
      display: flex;
      align-items: center;
      flex-direction: row;
      gap: calc(var(--item-horizontal-padding) * 2);
    }
  }
  
  /* ============= Mobile menu trigger ============= */
  
  .main-nav__menu-trigger {
    appearance: none; /* Hide default checkbox look */
    margin: 0;
    color: currentColor;
    font-size: 1.8rem;
    line-height: 1rem;
    padding: 0 0.7rem;
    display: inline-flex;
    align-items: center;
  }
  
  .main-nav__menu-trigger:is(:checked)::after {
    content: "×";
  }
  
  .main-nav__menu-trigger:is(:not(:checked))::after {
    content: "≡";
  }
  
  @media (min-width: 680px) {
    .main-nav__menu-trigger {
      display: none;
    }
  }
  
  /* ============= Dropdown ============= */
  
  /* Higher specificity required to override `main-nav ul { padding: 0; }` */
  .main-nav .main-nav__dropdown {
    padding-left: var(--item-horizontal-padding);
  }
  
  @media (min-width: 680px) {
    .main-nav .main-nav__dropdown {
      padding: 0;
    }
  }
  
  @media (min-width: 680px) {
    .main-nav .main-nav__dropdown {
      background-color: var(--background-color);
      backdrop-filter: blur(var(--background-blur-radius));
      position: absolute;
      max-height: 50vh;
      overflow: auto;
    }
  }
  
  .main-nav__menu summary::after {
    content: "›";
    line-height: 0;
    font-size: 1.5rem;
    transform: rotate(90deg) scaleY(0.8);
  }
  
  /* Gap between summary text and dropdown icon */
  .main-nav__menu summary {
    cursor: pointer;
    gap: 0.4rem;
  }
  
  /* ============= Sticky navbar ============= */
  
  .main-nav--sticky {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow: auto;
  }
  
  @media (min-width: 680px) {
    .main-nav--sticky {
      max-height: initial;
      overflow: initial;
    }
  }