/* -- Navigation -- */

.main-navigation a {
    position: relative;
    display: inline-block;
    padding: .6em 1em;

    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: .03em;

    color: var(--color-text);
    text-decoration: none;

    transition: color .3s ease;
}

/* -- Underline Animation -- */

.main-navigation a::after{
    content:"";
    position:absolute;

    left:1em;
    right:1em;
    bottom:.35em;

    height:1px;

    background:var(--color-accent);

    transform:scaleX(0);
    transform-origin:left;

    transition:transform .3s ease;
}

/* -- Hover -- */

.main-navigation a:hover,
.main-navigation a:focus{
    color:var(--color-accent);
}

.main-navigation a:hover::after,
.main-navigation a:focus::after{
    transform:scaleX(1);
}

/* -- Focus -- */

.main-navigation a:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:4px;
}

/* -- Active -- */

.main-navigation .current-menu-item>a{
    color:var(--color-accent);
}

.main-navigation .current-menu-item>a::after{
    transform:scaleX(1);
}

.main-navigation .current-menu-parent>a{
    color:var(--gold-dark);
}

.main-navigation .current-menu-parent .current-menu-item>a{
    color:var(--color-accent);
}

.main-navigation .current-menu-parent .current-menu-item>a::after{
    transform:scaleX(1);
}

/* -- Mobile navigation -- */

@media (max-width:768px){

  #mobile-navigation,
  #mobile-navigation ul,
  .main-navigation.toggled ul{
    background:var(--color-background);
  }

  #mobile-navigation li{
    background:transparent;
  }

  #mobile-navigation a{
    display:block;
    padding:.7em 1.1em;

    font-family:var(--font-body);
    font-size:1.05rem;
    font-weight:var(--font-weight-medium);

    color:var(--color-text)!important;
    background:transparent;

    border-bottom:1px solid var(--color-section);
    text-decoration:none;

    transition:
      color .25s ease,
      background .25s ease;
  }

  #mobile-navigation a:hover,
  #mobile-navigation a:focus{
    color:var(--color-accent)!important;
    background:transparent;
  }

  #mobile-navigation .current-menu-item > a,
  #mobile-navigation .current-menu-parent .current-menu-item > a{
    color:var(--color-accent)!important;
  }

  #mobile-navigation .current-menu-parent > a{
    color:var(--color-text)!important;
  }

  #mobile-navigation a:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:3px;
  }

  .main-navigation{
    display:none;
  }

  .mobile-menu-toggle{
    display:block;
  }

}